Introduction à Jquery et son utilisation détaillée

Cet article vous apporte une introduction à Jquery et à son utilisation détaillée. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Introduction à Jquery

Jquery est un excellent framework Javascript. Il s'agit d'une bibliothèque js légère (seulement 21 Ko après compression). Elle est compatible avec CSS3 et divers navigateurs (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). L'application de Jquery à nos projets peut libérer les programmeurs de la conception et de l'écriture d'applications JS complexes et concentrer leur attention sur les exigences fonctionnelles plutôt que sur les détails de mise en œuvre, augmentant ainsi la vitesse de développement du projet. Cela permet de simplifier la programmation JavaScript et Ajax. Il vous permet de manipuler facilement des documents, de gérer des événements, d'implémenter des effets spéciaux et d'ajouter une interaction Ajax aux pages Web de vos pages Web.

2. Fonctionnalités de jQuery

a. Application riche et légère c. -navigateur (la compatibilité du navigateur n'est plus prise en compte) e. Appel en chaîne f. Itération implicite g. Bibliothèque de plug-ins riche...

3. Utilisation de jQuery

pour introduire jQuery

路径引入
<script src=&#39;文件路径&#39;></script>
引入在线资源
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>

fonction d'entrée

$(document).ready(function(){    
//类似于原生js的window.onload
});
//简写
$(function(){   });

Différences par rapport à window.onload

Différence 1 : Différents numéros d'écriture

La fonction de saisie Js ne peut apparaître qu'une seule fois. Si elle apparaît plusieurs fois, une question de couverture d'événement se produira.
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.

Objet DOM et objet jQuery

Objet jQuery :

Le sélecteur jQuery obtient le DOM. L'objet est ensuite encapsulé, ce qui en fait un objet jQuery avec les méthodes jQuery. Pour parler franchement, il s'agit d'un reconditionnement de l'objet DOM.

Convertir un objet jQuery en objet DOM

Première méthode :

var btn1 = $btn[0];

// À ce stade, l'objet jQuery $btn est converti en objet DOM btn1 (cette méthode est recommandée. La deuxième méthode est

var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

L'objet DOM est converti en jQuery

Utilisez le package $(domObject) pour l'envelopper dans un objet jQuery

sélecteur jQuery

sélection jQuery Le L'outil est une manifestation puissante de jQuery. Il fournit un ensemble de méthodes qui nous permettent d'obtenir plus facilement des éléments sur la page. La syntaxe est cohérente avec les sélecteurs CSS.

Sélecteur de base

"#"

Sélecteur d'identifiant

--Exemple

$(“#btnShow”).css(“color”, “red”);

Sélectionnez un élément avec l'identifiant btnShow (la valeur de retour est un objet jQuery)

"."

Sélecteur de classe

--Exemple

$(“.liItem”).css(“color”, “red”);

Sélectionnez tous les éléments avec la classe liItem

"element"

Sélecteur de balises

--Exemple

$(“li”).css(“color”, “red”);

Sélectionnez tous les éléments avec le nom de balise li

"espace"

Sélecteur de niveau (sélecteur descendant)

--Exemple

$(“#j_wrap li”).css(“color”, “red”);

Sélectionner l'identifiant Pour tous les éléments descendants li

">"

Sélecteur d'enfants

--Exemple

$(“#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

Sélecteur de filtre de base

":eq(index)"

选择匹配到的元素中索引号为index的一个元素，index从0开始

--示例

$(“li:eq(2)”).css(“color”, ”red”);

选择li元素中索引号为2的一个元素

":odd"

选择匹配到的元素中索引号为奇数的所有元素，index从0开始

--示例

$(“li:odd”).css(“color”, “red”);

选择li元素中索引号为奇数的所有元素

":even"

选择匹配到的元素中索引号为偶数的所有元素，index从0开始

--示例

$(“li:odd”).css(“color”, “red”);

选择li元素中索引号为偶数的所有元素

筛选（方法）

find(selector)

查找指定元素的所有后代元素（子子孙孙）

--示例

$(“#j_wrap”).find(“li”).css(“color”, “red”);

选择id为j_wrap的所有后代元素li

children()

查找指定元素的直接子元素（亲儿子元素）

--示例

$(“#j_wrap”).children(“ul”).css(“color”, “red”);

选择id为j_wrap的所有子代元素ul

siblings()

查找所有兄弟元素（不包括自己）

--示例

$(“#j_liItem”).siblings().css(“color”, “red”);

选择id为j_liItem的所有兄弟元素

parent()

查找父元素（亲的）

--示例

$(“#j_liItem”).parent(“ul”).css(“color”, “red”);

选择id为j_liItem的父元素

eq(index)

查找指定元素的第index个元素，index是索引号，从0开始

--示例

$(“li”).eq(2).css(“color”, “red”);

选择所有li元素中的第二个

jQuery各大版本的引用

官网jquery压缩版引用地址:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
jquery-3.0.0
官网jquery压缩版引用地址:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
jquery-2.1.4
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
jquery-2.1.1
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
jquery-2.0.0
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
jquery-1.11.3
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
jquery-1.11.1
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
jquery-1.10.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
jquery-1.9.1
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
jquery-1.8.3
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
jquery-1.7.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
jquery-1.6.4
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
jquery-1.5.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
jquery-1.4.4
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.4.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
jquery-1.4.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
jquery-1.3.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.3.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>
jquery-1.2.3
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.2.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.2.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.2.3.min.js"></script>

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!