Explication détaillée des points de connaissances de base de jquery

Cette fois, je vais vous apporter une explication détaillée des points de connaissances de base de jquery. Quelles sont les précautions à prendre pour utiliser les points de connaissances de base de jquery ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

jQuery est une excellente bibliothèque js légère qui est compatible avec CSS3 et divers navigateurs (IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+), et jQuery2 .0 et les versions ultérieures ne le seront pas. ne prend plus en charge les navigateurs IE6/7/8. jQuery permet aux utilisateurs de traiter plus facilement le HTML (une application sous Standard Universal Markup Language), les événements, d'implémenter des effets d'animation et de fournir facilement une interaction AJAX pour les sites Web. Un autre gros avantage de jQuery est que sa documentation est très complète, et diverses applications sont également expliquées en détail. Il existe également de nombreux plug-ins matures parmi lesquels choisir.

1. La différence entre la fonction d'entrée jQuery et la fonction d'entrée Js

[Remarque] la fonction d'entrée js fait référence à : window.onload = function (){};

Différence 1 : Numéros d'écriture différents

La fonction de saisie Js ne peut apparaître qu'une seule fois. Si elle apparaît plusieurs fois, il y aura une couverture d'événement. problème.

La fonction d'entrée de jQuery peut apparaître un certain nombre de fois sans couverture d'événement.

Différence 2 : Différents timings d'exécution

La fonction d'entrée Js est exécutée une fois que toutes les ressources du fichier sont chargées. Ces ressources de fichiers incluent : des documents de page, des fichiers js externes, des fichiers CSS externes, des images, etc.

La fonction de saisie de jQuery est exécutée après le chargement du document. L'achèvement du chargement du document signifie : une fois l'arborescence DOM chargée, vous pouvez utiliser le DOM sans attendre que toutes les ressources externes soient chargées.

L'ordre de chargement des documents : de haut en bas, analyse et exécution en même temps.

2. La conversion mutuelle entre objet jQuery et objet DOM

①L'objet DOM fait ici référence à : l'utilisation de js Le résultat renvoyé en exploitant le DOM

var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象

②l'objet jQuery fait ici référence : le résultat renvoyé en utilisant la méthode fournie par jQuery pour faire fonctionner le DOM

var $btn = $(“#btnShow”); // $btn就是一个jQuery对象

③Objet DOM converti en objet jQuery

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1
// $(document）.ready(function(){}); // 调用入口函数
// 此处是将document这个js的DOM对象，转换成了jQuery对象，然后才能调用jQuery提供的方法：ready

④Objet jQuery converti en objet DOM

// 第一种方式
var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式）
// 第二种方式
var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

3 sélecteur jQuery

symbole ( Nom)	Description	Utilisation
Sélecteur de base(Points clés)
#	Sélecteur d'ID	$("#btnShow").css("color", "red"); Sélectionner un élément avec l'identifiant btnShow (la valeur de retour est un objet jQuery, le même ci-dessous)
.	Sélecteur de classe	$(“.liItem”).css(“color”, “red”); Sélectionnez tous les éléments contenant la classe liItem
élément	Sélecteur de balises	$("li").css("color", "red"); Sélectionnez tous les éléments avec le nom de balise li
Sélecteur de niveau
Espace	Sélecteur descendant	$(“#j_wrap li”).css(“color”, “red”); Sélectionnez l'élément avec l'identifiant j_wrap Tous les éléments descendants de li
>	Sélecteur d'enfants	$("#j_wrap > ul > ; li").css(" color", "red"); Sélectionnez tous les éléments enfants ul de tous les éléments enfants de l'élément avec l'identifiant j_wrap li
Filtre de base selector
:eq(index)	Sélectionnez le numéro d'index de l'élément correspondant C'est un élément d'index, l'index commence from 0	$("li:eq(2)").css("color", "red"); Sélectionnez li Un élément avec le numéro d'index 2
:odd	sélectionne tous les éléments correspondants avec un numéro d'index impair Élément, l'index commence à 0	$("li:odd").css("color", "red"); Sélectionnez le numéro d'index impair dans l'élément li Tous les éléments
:even	Sélectionnez tous les éléments avec des numéros d'index pairs parmi les éléments correspondants, et l'index commence à 0	$("li:odd").css("color", "red"); Sélectionnez tous les éléments avec des numéros d'index pairs dans l'élément li
Sélecteur de filtre (méthode) (Point clé)
trouver (sélecteur)	Trouver tous les éléments descendants de l'élément spécifié (descendants)	$(“#j_wrap”).find(“li”).css(“color”, “red”); Sélectionnez celui avec l'identifiant j_wrap Tous les éléments descendants li
children()	Trouver les éléments enfants directs (éléments enfants) de l'élément spécifié	$ ("#j_wrap").children("ul").css("color","red"); Sélectionnez tous les éléments enfants ul avec l'identifiant de j_wrap
siblings()	Trouver tous les éléments frères et sœurs (sauf soi)	$("#j_liItem").siblings().css("color" , "red"); Sélectionnez tous les éléments frères et sœurs avec l'identifiant j_liItem
parent()	Trouver l'élément parent (chéri) )	$(“#j_liItem”).parent(“ul”).css(“color”,“red”); Sélectionnez l'élément parent avec l'identifiant j_liItem
eq(index)	Trouver l'élément d'index de l'élément spécifié, l'index est le numéro d'index, à partir de 0	$("li").eq(2).css("color", "red"); Sélectionnez le deuxième parmi tous les éléments li

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'analyse globale de l'architecture et de l'utilisation de jquery

Explication détaillée de la méthode de jQuery de juger du type et de la taille des images téléchargées

Explication détaillée de l'utilisation du framework jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!