Introduction à Cheatsheet JQuery
Jquery est une bibliothèque javascript multiplateforme qui est persistante sur une intention principale de faciliter le développement Web pour coder. Il est prouvé que l'introduction de Jquery a assez réduit la longueur des codes javascript. Ainsi, même un code javascript sur plusieurs lignes peut facilement être obtenu avec un petit bloc ou même une seule ligne d'instruction JQuery.
Dans cet article JQuery de Cheatsheet, nous discuterons de ce qu'est Jquery et du PTP de ce framework:
Il existe de nombreux sites Web actifs sur le Web, et le marché comprend un large éventail de langues qui permettent de créer ces sites Web et ces produits en ligne. Certains des célèbres sont les suivants,
- HTML, CSS
- Javascript et JQuery pour le script de fin client
- PHP pour les scripts de fin de serveur
- MYSQL pour les requêtes de base de données
- etc.
Avantages d'utiliser le framework JQuery par rapport aux autres,
- Cela implique une énorme communauté et beaucoup de plugins introduits.
- Poids léger
- puissantes capacités de chaînage
- Brève documentation et tutoriels
- Capacité à développer facilement des composants Ajax
- Sa capacité à rendre le code simple et réutilisable
- Navigateur convivial
Contenu de base et syntaxe de la feuille de triche JQuery:
Inclure: inclusion de Jquery dans le script d'exécution en cours
Syntaxe: La structure syntaxique de JQuery
Le sélecteur sélectionne les composants HTML
$(Selector).action() Action effectuée sur le composant sélectionné
Définit l'utilisation de JQuery
Aide-mémoire pour les sélecteurs Jquery:
| Sélecteur | LA DESCRIPTION |
| $ ("*") | Sélectionne tous les éléments HTML |
| $ («P.demo») | Sélectionne
éléments de balise |
| $ («: Bouton») | Sélectionne le bouton et les éléments d'entrée |
| $ ("Tr: pair") | Sélectionne le pair |
| $ ("Tr: impair") | Sélectionne l'étrange |
| $ («Span: parent») | Sélectionne les éléments auxquels un élément enfant est associé |
| $ («(Href)») | Sélectionne tous les éléments avec des attributs href |
| $ («: Entrée») | Sélectionne tous les éléments du formulaire |
Aide-mémoire pour les événements Jquery: l' événement est une sorte d'action sur la page Web, les événements clés impliqués sont les suivants.
| Événements de souris | Méthode d'événement de souris | Événements clavier | Méthode événement clavier | Événements de formulaire | Formulaire méthode d'événement |
| la souris entre | .mouseenter () | appuyez sur la touche | .appuyez sur la touche() | changement | .changement() |
| Double clic | .dblclick () | Touche Bas | .touche Bas() | concentrer | .concentrer() |
| Cliquez sur | .Cliquez sur() | Keyup | .keyup () | brouiller | .brouiller() |
| congé de la souris | .mouseleave () | Événements du navigateur | Méthode d'événement du navigateur | Documenter les événements | Documenter les méthodes d'événement |
| souris vers le bas | .souris vers le bas() | Population d'erreur | .Erreur() | décharger | .décharger() |
| souris vers le haut | .mouseup () | faire défiler | .faire défiler() | charge | .charge() |
Ex:
$("p").dblclick(function()(
$(this).hide();
));
Effets Jquery du cheat sheet:
Notions de base: .hide (), .show (), .toggle () - Permet de masquer, d'afficher et de basculer les éléments sélectionnés.
Ex:
$("p").hide();
Personnalisé: .animate (), .delay (), .dequeue (), .stop ()
- la méthode animate () prépare des animations personnalisées
- la méthode delay () permet une exécution différée des éléments.
- dequeue () exécute la prochaine séquence de fonctions présentes dans la file d'attente.
Ex:
$("element1").animate(
(
opacity : 0.50
left: "+=27"
)
Fondu: fadeTo (), fadeOut (), fadeIn (), fadeToggle ()
- fadeIn () Fade un élément caché
- fadeout () permet de décolorer un élément visible
- fadeTo () s'estompe à une opacité donnée
- fadeToggle () permet à l'élément d'être basculé avec les méthodes de fondu d'entrée et de sortie.
Ex:
$("button").click(function()
(
$("#div2").fadeOut("slow");
));
Diapositive: slideDown (), slideUp (), slideToggle ()
- slideDown () Affichage avec un mouvement de glissement surclassé des éléments
- slideToggle () Affiche ou masque avec un mouvement de glissement des éléments sur-appariés
- slideUp () Masque avec un mouvement de glissement des éléments sur-assortis
Trucs et astuces gratuits pour utiliser la feuille de triche jQuery
1) Conservez un paramètre de contexte qui permet à l'exécution de démarrer à partir d'une branche DOM plus profonde au lieu d'appeler à partir de la racine.
2) Vérifiez si l'élément existe, puis appuyez sur pour exécuter le code.
Syntaxe:
if($("#element").length)
(
// DOM element exists
)
else
(
//DOM element dont exists
)
3) La méthode de données jQuerys lie les éléments DOM et les données sans modifier le DOM.
4) Vérifiez si l'un des éléments est masqué.
Ex:
if($(element).is(":visible") == "true")
(
//The element is Visible
)
5) Gardez un décompte des éléments enfants précédents immédiats.
6) Le chargement des images avant optimise les performances d'exécution des requêtes.
7) Il est préférable de vérifier que la requête a été chargée avec succès avant de l'exécuter.
Ex:
if (typeof jQuery == 'undefined')
(
console.log('jQuery not loaded');
)
else
(
console.log('jQuery loaded');
)
8) Les liens d'image cassés peuvent être remplacés facilement en exécutant le morceau de code ci-dessous,
Ex:
$('img').on('error', function ()
(
if(!$(this).hasClass('broken-image'))
(
$(this).prop('src', 'img/broken.png.webp').addClass('broken-image');
)
));
9) Le cadre doit toujours être adapté au contenu de la page.
10) Des filtres de sélection propres peuvent être ajoutés dans Jquery. comme comme tout dans les filtres de sélection de bibliothèque peut également être personnalisé. l'ajout d'un objet $ .expr (':') fera cela.
Ex:
(function($)
(
var random = 0
$.expr(':').random = function(a, i, m, r)
(
if (i == 0)
(
random = Math.floor(Math.random() * r.length);
)
return i == random;
);
))(jQuery);
// how to utilize this piece of code.
$('li:random').addClass('glow');
11) L'ajout de l'attribut désactivé à l'entrée permet de garder le champ d'entrée désactivé jusqu'à ce que certains champs relatifs soient remplis.
Ex:
$('input(type="submit")').prop('disabled', true);
12) Assurez-vous de définir la section du gestionnaire d'erreurs afin de gérer les retours d'erreur ajax. lorsqu'une erreur 400 ou 500 est détectée, cette section sera automatiquement déclenchée.
Ex:
$(document).on('ajaxError', function (e, xhr, settings, error)
(
console.log(error);
));
Aide-mémoire JQuery - conclusion
Jquery réduit la complexité supplémentaire que javascript contient. avec plusieurs entités associées à jquery figure parmi les meilleurs outils de développement de pages Web sur le marché. ses capacités de chaînage légères et efficaces ont rendu le codage Web assez facile pour les développeurs.
Article recommandé
Cela a été un guide pour la feuille de triche JQuery ici, nous avons discuté du contenu et de la commande ainsi que des trucs et astuces gratuits de la feuille de triche JQuery, vous pouvez également consulter l'article suivant pour en savoir plus -
- Questions d'entretiens chez jQuery
- Aide-mémoire pour C ++
- Aide-mémoire pour SQL
- JavaScript vs JQuery
- Meilleur aide-mémoire pour UNIX
- Cheat Sheet JavaScript: Quels sont les avantages
- Les 8 meilleurs sélecteurs jQuery avec implémentation de code