Explication détaillée des trois types de $() dans jQuery

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des trois types $() de jQuery. Quelles sont les précautions lors de l'utilisation des trois types $() de jQuery. Voici des cas pratiques, prenons un. regarder.

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());

Le $() est une requête expression, 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 : le document dans

$(document).find("p>p").html());

$() est un élément DOM, c'est-à-dire qu'il recherche l'élément

avec

le contenu dans

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

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

Transformation de variable :

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

对于选择HTML文档中的elements，jQuery有两种方法：
1）如$("p>ul a")，它的意思是p标签中的ul标签中的a标签
不过，$('p>ul')和$('p ul')是有区别的，
$('p>ul')是

的直接后代里找

；
而$('p ul')是在

的所有后代里找

。
2）用jQuery对象的几个方法（如方法find()、each()等）
$("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一样迭代了所有的li，而表达式中的“#”表示HTML中的ID，如上例中的“#orderedlist”就表示“ID为orderedlist所在的标签”。
****************************************************************
1、标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')相对简单，不多说。不过有一点——$('p>ul')和$('p ul')是有区别的，
$('p>ul')是

的直接后代里找

；而$('p ul')是在

的所有后代里找

。
所以，$('#sId>li')所选择的是id为"sId"的所有
• 孩子节点，即使这个
• 的后代还有
• 也不是它所找的范围（所找到的DOM对象，只是它本级的DOM对象。）。而$('#sId li:not(.horizontal)')，就是指类名"sId"里面的所有li的子孙中没有horizontal类的所有元素。——这里的not()是一个negation pseudo class.
  这里返回的是一个jQurey对象，一个数组对象，这个jQuery对象的长度可用.length()得到。
  2、XPath选择器
  如：选择所有带有title 属性的链接，我们会这样写：$('a[@title]')
  []里带@，说明[]里的是元素的属性；是个属性选择器
  []里没@，说明[]里的是元素的子孙。
  $('ul li')和$('ul[li]')虽然返回的都是一个jQuery数组，但两者的含义正好相反。前者是要找
  下所有
  • 子孙，而后者却是在找所有子孙为
  • 的
    数组。
    在XPath中，要找一个“以...开头”的属性，用^=，如找一个name属性是以mail开头的input元素，就用
    $('input[@name^="mail"]')
    要找一个“以...结尾”的属性，要用$=
    要找一个“不头不尾”的属性，用*=
    3、不属于上述的CSS和XPath的选择器，就是自定义的选择器了，用“:”表示，这里要用的就是: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()——
    $('td:contains("Henry")').prev()——内容包含有"Henry"的的上一个节点
    $('td:contains("Henry")').next()——内容包含有"Henry"的的下一个节点
    $('td:contains("Henry")').siblings()——内容包含有"Henry"的的所有兄弟节点
    还有一个，就是end()，这个方法肯定是用在某个DOM节点执行了某一动作之后，还想在与其相关的节点上执行类似动作，这里就要用到end()。用过end()方法之后，所返回的是执行动作的那个节点的父节点上。举个例子
    $(...).parent().find(...).addClass().end()
    这里执行动作的节点是find(...)，是一个数组对象，它所做的动作是“addClass()”，之后，用了个end()，这时所返回的东东就是指向了parent()所指向的节点，也就是执行“addClass()”动作的那个数组对象的父节点。
    5、要直接访问DOM元素，可用get(0)的方法，如
    $('#myelement').get(0)，也可缩写成$('#myelement')[0]

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

    推荐阅读：

    HTML常用的属性知识点总结
    

    H5设计时的小技巧总结
    

    H5+C3+JS pour obtenir des effets de saut au sol
    

    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!