Trois cas d'utilisation de $() dans jQuery

Cette fois, je vais vous présenter trois cas d'utilisation des trois $() de jQuery. Quelles sont les précautions lors de l'utilisation des trois types de $() de jQuery. Voici les cas réels, jetons un coup d'œil.

Le signe $ est un alias pour la "classe" jQuery et $() construit un objet jQuery. Par conséquent, "$()" peut être appelé le constructeur de jQuery (opinion personnelle, haha !).

1. $() peut être $(expression), c'est-à-dire un sélecteur CSS , un élément Xpath ou HTML, c'est-à-dire que l'élément cible correspond à l'expression ci-dessus.
Par exemple : l'objet construit par $("a") utilise un sélecteur CSS pour construire un objet jQuery - il sélectionne toutes les balises 7d01d0a03a49fceb57d12197d8d196cb Par exemple :
$("a").click(function(){...})
est un événement déclenché lorsque l'on clique sur un lien de la page. Pour être précis, jQuery construit un objet $("a") en utilisant la balise 7d01d0a03a49fceb57d12197d8d196cb, et la fonction click() est une méthode (événementielle) de cet objet jQuery.
Par exemple, il existe un tel morceau de code HTML :

<p>one</p> 
<p> 
<p>two</p> 
</p> 
<p>three</p> 
<a href="#" id="test" onClick="jq()" >jQuery</a>

Le fonctionnement de ce HTML est l'instruction suivante :

alert($("p>p").html());

$() est une expression de requête, c'est-à-dire qu'un objet jQuery est construit à l'aide d'une expression de requête telle que "p>p", puis "html()" signifie afficher son contenu html, qui est le [deux] de l'extrait de code HTML ci-dessus . Autre exemple :

$("<p><p>Hello</p></p>").appendTo("body");

$() contient une chaîne. Utilisez une telle chaîne pour construire un objet jQuery, puis ajoutez cette chaîne à b2636b4e0e32f7cd731b9073897693b7.
2. $() peut être $(element), qui est un élément spécifique du DOM. Par exemple, les objets DOM couramment utilisés incluent le document, l'emplacement, le formulaire, etc. Comme cette ligne de code :

$(document).find("p>p").html()); 
$()中的document是一个DOM元素，即在全文寻找带<p>的<p>元素，并显示<p>中的内容。

3. $() peut être $(function), c'est-à-dire une fonction, qui est un raccourci pour $(document).ready(). . Par exemple, la forme courante ressemble à ceci :

$(document).ready(function(){ 
alert("Hello world!"); 
});

Opération de variable :

$(function(){ 
alert("Hello world!"); 
});

Pour sélectionner des éléments dans des documents HTML, jQuery dispose de deux méthodes :
1) Tel que $("p>ul a"), cela signifie la balise a dans la balise ul dans la balise p
Cependant, $('p>ul') et $('p ul' ) est différent,

$(&#39;p>ul&#39;)是<p>的直接后代里找<ul>； 
而$(&#39;p ul&#39;)是在<p>的所有后代里找<ul>。

2) Utilisez plusieurs méthodes d'objets jQuery (telles que les méthodes find(), each(), etc.)
$("#orderedlist).find ( "li") est comme $("#orderedlist li"). each() itère tous les li, et le "#" dans l'expression représente l'ID en HTML, comme "#orderedlist" dans l'exemple ci-dessus "L'ID. est la balise où se trouve la liste commandée"
*************************************** *** *******************************
1, Sélecteur de balises $('p '), Le sélecteur de classe $('.myClass') et le sélecteur d'identifiant $('#myId') sont relativement simples, pas grand chose à dire, mais il y a une chose - $('p> ul') et $('p ul'). ') est différent,
$('p>ul') consiste à trouver ff6d136ddc5fdfeffaf53ff6ee95f185 parmi les descendants directs de e388a4556c0f65e1904146cc1a846bee; ul') consiste à trouver tous les descendants de e388a4556c0f65e1904146cc1a846bee Find ff6d136ddc5fdfeffaf53ff6ee95f185
Donc, $('#sId>li') sélectionne tous les nœuds enfants 25edfb22a4f469ecb59f1190150159c6 les descendants de ce 25edfb22a4f469ecb59f1190150159c6 ont toujours < ;li> n'est pas la portée qu'il recherche (l'objet DOM trouvé n'est que l'objet DOM de son propre niveau. Et $('#sId li:not(. horizontal)') fait référence au nom de classe "sId". Il n'y a aucun élément de la classe horizontale parmi tous les descendants de li ——not() voici une pseudo-classe de négation
Ce qui est renvoyé ici est un jQurey. object, un objet tableau, et la longueur de cet objet jQuery est obtenue.
2. Sélecteur XPath
Par exemple : pour sélectionner tous les liens avec l'attribut title, nous écrirons comme ceci : $('a[@title]')
[] avec @, description [] est l'attribut de l'élément ; c'est un sélecteur d'attribut
[] n'a pas @, indiquant que [] est le descendant de l'élément
$('ul li') et $ ('ul[li]') Bien que les deux renvoient un tableau jQuery, les significations des deux sont exactement le contraire. La première consiste à trouver tous les descendants de 25edfb22a4f469ecb59f1190150159c6 sous ff6d136ddc5fdfeffaf53ff6ee95f185, tandis que la seconde consiste à trouver le tableau ff6d136ddc5fdfeffaf53ff6ee95f185 dont les descendants sont 25edfb22a4f469ecb59f1190150159c6.
Dans XPath, si vous souhaitez trouver un attribut "commençant par...", utilisez ^=. Si vous souhaitez trouver un élément d'entrée dont l'attribut name commence par mail, utilisez
$('input[@. name^ ="mail"]')
Pour trouver un attribut qui "se termine par...", utilisez $=
Pour trouver un attribut qui n'a ni début ni fin, utilisez *=
3. Les sélecteurs qui n'appartiennent pas aux CSS et XPath mentionnés ci-dessus sont des sélecteurs personnalisés, représentés par ":". Ce qui est utilisé ici est :

.

first，:last，:parent ，:hidden，:visible，:odd，:even，:not('xxx')， ":eq(0)"（始于0)，:nth(n），:gt(0)，:lt(0)，:contains("xxx")

如：$('tr:not([th]):even')意为a34de1251f0d9fe1e645927f19a896e8元素的子孙中不含b4d429308760b6c2d20d6300079ed38e的所有子孙的偶数项
4、还有几个，简单不解释了

$('th').parent()—— 
$(&#39;td:contains("Henry")&#39;).prev()——内容包含有"Henry"的<td>的上一个节点 
$(&#39;td:contains("Henry")&#39;).next()——内容包含有"Henry"的<td>的下一个节点 
$(&#39;td:contains("Henry")&#39;).siblings()——内容包含有"Henry"的<td>的所有兄弟节点

还有一个，就是end()，这个方法肯定是用在某个DOM节点执行了某一动作之后，还想在与其相关的节点上执行类似动作，这里就要用到end()。用过end()方法之后，所返回的是执行动作的那个节点的父节点上。举个例子

$(...).parent().find(...).addClass().end()

这里执行动作的节点是find(...)，是一个数组对象，它所做的动作是“addClass()”，之后，用了个end()，这时所返回的东东就是指向了parent()所指向的节点，也就是执行“addClass()”动作的那个数组对象的父节点。
5、要直接访问DOM元素，可用get(0)的方法，如

$('#myelement').get(0)，也可缩写成$('#myelement')[0]

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

js仿jquery步骤详解

JS中时间单位比较的方法

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!