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 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 , 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 à .
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

parmi les descendants directs de

; ul') consiste à trouver tous les descendants de

Find


Donc, $('#sId>li') sélectionne tous les nœuds enfants
• les descendants de ce
• 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
• sous
  , tandis que la seconde consiste à trouver le tableau
  dont les descendants sont
  • .
    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')意为元素的子孙中不含的所有子孙的偶数项
    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!