Analyse détaillée des sélecteurs couramment utilisés dans jQuery-js tutoriel-php.cn

Analyse détaillée des sélecteurs couramment utilisés dans jQuery

黄舟

Libérer： 2017-07-17 16:12:57

original

1029 Les gens l'ont consulté

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

1. jQuery : (Lorsque vous utilisez jQuery, vous devez indiquer le numéro de version que nous utilisons. )

Il s'agit d'une bibliothèque de classes qui utilise JS natif pour encapsuler les méthodes couramment utilisées (résoudre les problèmes de compatibilité du navigateur)

2 Méthodes fournies dans jQuery

Selector

<.>En passant le contenu de la règle correspondante (ID, nom de balise, nom de classe de style...), l'élément/la collection d'éléments spécifié dans la page est obtenu

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id=&#39;div1&#39;>
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div></div>
    <div id=&#39;div3&#39;></div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
 
  </div>
   
 
  <script>
    //原生JS获取到的结果属于元素对象/元素集合/节点集合...他们可以使用浏览器为其提供的那些天生自带的属性和方法
    //原生的JS对象不能直接的使用jQuery中提供的属性和方法
    var oDiv = document.getElementById(&#39;div1&#39;)
    oDiv.clientWidth
    oDiv.getAttribute
    //jq获取到的结果是一个jQuery对象，可以使用jQuery里面提供的属性和方法，但是不能直接的使用浏览器内置的属性和方法
    var $oDiv = jQuery("#div1")//$("#div1")
    $oDiv.innerWidth();
    $oDiv.attr
 
    //关于原生JS对象和jQuery对象之间的转换
      //1)、原生的转变成jQuery:$(原生JS对象)
      $(oDiv)
      //2)、jQuery转化成原生：直接通过索引获取对应的元素对象即可
      $oDiv[0]
      $oDiv.get(0)//<==>$oDiv[0]都是通过索引来获取指定位置的元素（JS原生对象）
 
    //更多的jQuery选择器
    $(&#39;#div1&#39;)
    $(&#39;div&#39;)
    $(&#39;.w100&#39;)
    $(&#39;*&#39;)
    $(&#39;#div1,div,.w100&#39;)//把每一个选择器获取到的jQuery对象最后融合在一起，最后一起获取到
    $(&#39;#div1 li&#39;)//在子子孙孙级中进行查找
    $(&#39;#div1>li&#39;)//在子级中进行查找
    $(&#39;#div3+&#39;)//获取它的下一个弟弟
    $(&#39;#div3+ul&#39;)//获取它的下一个弟弟并且标签名是ul的
    $(&#39;#div3~&#39;)//获取它的所有的弟弟元素
    $(&#39;#div3~ul&#39;)//获取它的所有的弟弟元素并且标签名为ul的
    $(&#39;#div1>div:not(.w100)&#39;)//#div1下的所有子集div样式类名不包含w100的
    $(&#39;#div1>div:eq(0)&#39;)//通过索引获取到集合中的某一个，但是获取到的结果依然是一个jQuery对象（而get方法也是通过索引获取，但是获取到的是一个JS原生对象）
    $(&#39;#div1>div:gt(1)&#39;)//大于索引1的（不包含索引1的）
    $(&#39;#div1>div:lt(1)&#39;)//小于索引1的（不包含索引1的）
    $(&#39;#div1 li:contains("我")&#39;)//获取所有的li内容包含“我” 的
    $(&#39;#div1 div:has(ul)&#39;)//在所有的div中包含ul的
    $(&#39;#div1>*:nth-child(1)&#39;)//获取所有的子元素的第一个
    $(&#39;#div1>*:eq(1)&#39;)//获取所有的子元素的第二个（索引为1）
  </script>
</body>
</html>

Copier après la connexion

La sélection d'élément est toutes les opérations Prémisse , l'une des fonctions les plus puissantes et les plus couramment utilisées de la fonction $() dans jQuery consiste à utiliser un sélecteur pour sélectionner les éléments du DOM. Voici un résumé de quelques sélecteurs jquery très couramment utilisés.

1. Structure de base du sélecteur jQuery

$(&#39;选择器&#39;)
$(&#39;选择器 上下文&#39;)

Copier après la connexion

2. Utilisation du

sélecteur CSS de base

À propos des bases pour sélecteurs CSS, vous pouvez lire l'explication détaillée des sélecteurs CSS. Voici quelques-unes des façons les plus élémentaires d’utiliser les sélecteurs CSS.

2.1

Sélecteur d'éléments

$(&#39;a&#39;); //选择所有a元素
$(&#39;div&#39;);  //选择所有div元素
$(&#39;p&#39;);  //选择所有p元素

Copier après la connexion

Bien sûr, si vous le souhaitez, jQuery nous permet également de combiner plusieurs sélecteurs en un seul en utilisant des virgules :

$(&#39;a,div,p&#39;);

Copier après la connexion

Cela produit le même effet que les trois lignes de code ci-dessus.

2.2

Sélecteur de classe

$(&#39;div.myClass&#39;);  //所有拥有myClass类的div元素
$(&#39;p.myClass&#39;);  //所有拥有myClass类的p元素
$(&#39;*.myClass&#39;);  //拥有myClass类的所有类型元素

Copier après la connexion

Normalement, lorsque vous souhaitez sélectionner tous les éléments d'une certaine classe, le caractère générique * sera omis, comme suit :

$(&#39;.myClass&#39;);  //拥有myClass类的所有类型元素

Copier après la connexion

Il n'y a rien de mal à cela, et c'est aussi notre manière commune d'écrire.

De plus, certains éléments peuvent avoir plus d'une classe :

$(&#39;div.myClass1.myClass2&#39;);

Copier après la connexion

Cela sélectionnera les éléments div qui ont à la fois les classes myClass1 et myClass2. Bien entendu, l'élément div sélectionné pourra également avoir d'autres classes, c'est-à-dire que le div suivant sera sélectionné sans aucun doute :

<div class="myClass1 myClass2 myClass3">...</div>

Copier après la connexion

2.3

Sélecteur d'ID

$(&#39;table#myID&#39;);  //id为myID的table元素

Copier après la connexion

3. Utilisation combinée des sélecteurs de contexte

3.1

Sélecteurs descendants

Partez d'ici et lancez des sélections un peu plus difficiles, telles que :

$(&#39;ul.myUl li&#39;);

Copier après la connexion

Cela sélectionnera tous les éléments enfants li de l'élément ul qui ont la classe myUl. Cela ressemble à une bouchée. Regardez le code suivant :

html

<ul class="myUl">
  <li><a href="#"></a>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li><ul>

Copier après la connexion

Ici, via $('ul.myUl li'), tous les éléments li seront sélectionnés. Parce que tous les éléments li sont des descendants de

.... Que vous soyez un descendant direct, un petit-enfant ou un arrière-petit-enfant.

En fait, l'exemple ci-dessus n'est pas suffisant pour expliquer pleinement la signification de tous les sous-éléments li de l'élément ul avec la classe myUl. Parce qu'il peut y avoir plus d'un élément ul avec la classe myUl, comme suit :

html

<ul class="myUl">
  <li><a href="#"></a>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li><ul>
  
    
      一
      二
      三

Copier après la connexion

$('ul.myUl li') sélectionnera également tous les éléments li dans le code ci-dessus. Parce que tous les éléments li dans le code ci-dessus sont des éléments enfants de ul.myUl, bien qu'il y en ait 2 ul.myUl. Vous devriez maintenant être capable de comprendre la signification de tous les sous-éléments li qui ont l'élément ul de la classe myUl !

Le sélecteur de descendants peut en fait non seulement sélectionner les descendants d'un certain élément, mais également les descendants des descendants d'un certain élément (ce qui semble un peu gênant), comme suit :

$(&#39;ul.myUl li a&#39;);

Copier après la connexion

Ceci sélectionne tous les propriétaires de tous les éléments descendants a de tous les éléments descendants li de l'élément ul de la classe myUl. Bien qu’il existe un autre descendant de xx, c’est la même chose que l’analyse ci-dessus, je n’entrerai donc pas dans les détails.

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!