Maison > Article > interface Web > Explication détaillée des sélecteurs communs dans jQuery

Explication détaillée des sélecteurs communs dans jQuery

小云云original: 2018-01-01 10:25:231224parcourir

Cet article présente principalement en détail les informations pertinentes sur les sélecteurs jQuery couramment utilisés. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Cet article partage le code spécifique des sélecteurs jQuery couramment utilisés pour votre référence. Le contenu spécifique est le suivant

1. lors de l'utilisation de jQuery Le numéro de version que nous utilisons)

C'est une bibliothèque de classes qui utilise JS natif pour encapsuler les méthodes courantes (résoudre les problèmes de compatibilité du navigateur)

2. jQuery La méthode fournie

le sélecteur

obtient l'élément/la collection d'éléments spécifiés dans la page en transmettant le contenu de la règle correspondante (ID, nom de balise, nom de classe de style...)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p id=&#39;p1&#39;>
    <p>
      <span></span>
      <span></span>
      <span></span>
    </p>
    <p></p>
    <p id=&#39;p3&#39;></p>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </p>
  

  <script>
    //原生JS获取到的结果属于元素对象/元素集合/节点集合...他们可以使用浏览器为其提供的那些天生自带的属性和方法
    //原生的JS对象不能直接的使用jQuery中提供的属性和方法
    var op = document.getElementById(&#39;p1&#39;)
    op.clientWidth
    op.getAttribute
    //jq获取到的结果是一个jQuery对象，可以使用jQuery里面提供的属性和方法，但是不能直接的使用浏览器内置的属性和方法
    var $op = jQuery("#p1")//$("#p1")
    $op.innerWidth();
    $op.attr

    //关于原生JS对象和jQuery对象之间的转换
      //1)、原生的转变成jQuery:$(原生JS对象)
      $(op)
      //2)、jQuery转化成原生：直接通过索引获取对应的元素对象即可
      $op[0]
      $op.get(0)//<==>$op[0]都是通过索引来获取指定位置的元素（JS原生对象）

    //更多的jQuery选择器
    $(&#39;#p1&#39;)
    $(&#39;p&#39;)
    $(&#39;.w100&#39;)
    $(&#39;*&#39;)
    $(&#39;#p1,p,.w100&#39;)//把每一个选择器获取到的jQuery对象最后融合在一起，最后一起获取到
    $(&#39;#p1 li&#39;)//在子子孙孙级中进行查找
    $(&#39;#p1>li&#39;)//在子级中进行查找
    $(&#39;#p3+&#39;)//获取它的下一个弟弟
    $(&#39;#p3+ul&#39;)//获取它的下一个弟弟并且标签名是ul的
    $(&#39;#p3~&#39;)//获取它的所有的弟弟元素
    $(&#39;#p3~ul&#39;)//获取它的所有的弟弟元素并且标签名为ul的
    $(&#39;#p1>p:not(.w100)&#39;)//#p1下的所有子集p样式类名不包含w100的
    $(&#39;#p1>p:eq(0)&#39;)//通过索引获取到集合中的某一个，但是获取到的结果依然是一个jQuery对象（而get方法也是通过索引获取，但是获取到的是一个JS原生对象）
    $(&#39;#p1>p:gt(1)&#39;)//大于索引1的（不包含索引1的）
    $(&#39;#p1>p:lt(1)&#39;)//小于索引1的（不包含索引1的）
    $(&#39;#p1 li:contains("我")&#39;)//获取所有的li内容包含“我” 的
    $(&#39;#p1 p:has(ul)&#39;)//在所有的p中包含ul的
    $(&#39;#p1>*:nth-child(1)&#39;)//获取所有的子元素的第一个
    $(&#39;#p1>*:eq(1)&#39;)//获取所有的子元素的第二个（索引为1）
  </script>
</body>
</html>

Recommandations associées :

Explication détaillée de la façon de gérer les symboles spéciaux dans les sélecteurs jQuery

Sélecteur de date JQuery UI Explication détaillée du sélecteur de date

Exemple d'explication détaillée du sélecteur de filtre d'attribut d'objet de formulaire 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!

jquery 封装 JS 对象选择器 ui

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de plusieurs fonctions couramment utilisées d'Ajax dans jQueryArticle suivant：Explication détaillée de plusieurs fonctions couramment utilisées d'Ajax dans jQuery

Articles Liés

Voir plus