Heim > Artikel > Web-Frontend > Detaillierte Analyse häufig verwendeter Selektoren in jQuery

Detaillierte Analyse häufig verwendeter Selektoren in jQuery

黄舟Original: 2017-07-17 16:12:57985Durchsuche

Dieser Artikel enthält den spezifischen Code der häufig verwendeten Selektoren von jQuery. Der spezifische Inhalt lautet wie folgt: (Bei Verwendung von jQuery müssen Sie die von uns verwendete Versionsnummer angeben )

Es handelt sich um eine Klassenbibliothek, die natives JS verwendet, um häufig verwendete Methoden zu kapseln (Probleme mit der Browserkompatibilität zu lösen)

2. In jQuery bereitgestellte Methoden

Selektor

Durch Übergabe des Inhalts der entsprechenden Regel (ID, Tag-Name, Name der Stilklasse ...) wird das angegebene Element/die angegebene Elementsammlung auf der Seite erhalten

Elementauswahl ist eine Voraussetzung für alle Operationen Eine der leistungsstärksten und am häufigsten verwendeten Funktionen der Funktion $() in jQuery ist die Verwendung eines Selektors zum Auswählen von DOM-Elementen. Hier ist eine Zusammenfassung einiger sehr häufig verwendeter JQuery-Selektoren.

<!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>

1. Grundstruktur des jQuery-Selektors

2. Verwendung des grundlegenden

CSS-Selektors

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

Über die Grundlagen für CSS-Selektoren: Sie können die ausführliche Erklärung der CSS-Selektoren lesen. Hier sind einige der grundlegendsten Möglichkeiten, CSS-Selektoren zu verwenden.

2.1

Elementselektor

Wenn Sie möchten, können wir mit jQuery natürlich auch mehrere Selektoren durch Kommas zu einem Selektor zusammenfassen:

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

Dadurch wird der gleiche Effekt wie mit den oben genannten drei Codezeilen erzielt.

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

2.2

Klassenselektor

Normalerweise wird der Platzhalter * weggelassen, wenn Sie alle Elemente einer bestimmten Klasse auswählen möchten, wie folgt:

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

Daran ist nichts auszusetzen und es ist auch unsere übliche Schreibweise.

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

Darüber hinaus können einige Elemente mehr als eine Klasse haben:

Dadurch werden div-Elemente ausgewählt, die sowohl die Klassen myClass1 als auch myClass2 haben. Natürlich kann das ausgewählte div-Element auch andere Klassen haben, das heißt, das folgende div wird ohne Zweifel ausgewählt:

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

2.3

ID Selector

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

3. Kombinierte Verwendung von Kontextselektoren

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

3.1

Nachkommenselektoren

Beginnen Sie hier und beginnen Sie mit einigen etwas schwierigeren Auswahlen, wie zum Beispiel:

Dadurch werden alle untergeordneten li-Elemente des ul-Elements ausgewählt, die über die myUl-Klasse verfügen. Es klingt wie ein Bissen. Schauen Sie sich den folgenden Code an:

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

html

Hier werden über $('ul.myUl li') alle li-Elemente ausgewählt. Weil alle li-Elemente Nachkommen von f60634f48856078cd2fc498343db542a...929d1f5ca49e04fdcb27f9465b944689 sind. Egal, ob Sie direkter Nachkomme, Enkel oder Urenkel sind.

<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>

Tatsächlich reicht das obige Beispiel nicht aus, um die Bedeutung aller li-Unterelemente des ul-Elements mit der myUl-Klasse vollständig zu erklären. Da es in der myUl-Klasse möglicherweise mehr als ein ul-Element gibt, wie folgt:

html

$('ul.myUl li') wählt auch alle li-Elemente in aus obiger Code. Weil alle li-Elemente im obigen Code untergeordnete Elemente von ul.myUl sind, obwohl es 2 ul.myUl gibt. Jetzt sollten Sie in der Lage sein, die Bedeutung aller li-Unterelemente des ul-Elements mit der myUl-Klasse zu verstehen!

<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>
  
    
      一
      二
      三

Der Nachkommenselektor kann tatsächlich nicht nur die Nachkommen eines bestimmten Elements auswählen, sondern auch die Nachkommen der Nachkommen eines bestimmten Elements (was etwas umständlich klingt), wie folgt:

Dies wählt alle aus. Besitzt alle a-Nachkommenelemente aller li-Nachkommenelemente des ul-Elements der Klasse myUl. Obwohl es einen weiteren Nachkommen von xx gibt, ist dieser mit der obigen Analyse identisch, sodass ich nicht auf Details eingehen werde.

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse häufig verwendeter Selektoren in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der JSON-Array-Operation und jedes Traversal-Beispielcodes unter JQueryNächster Artikel：Detaillierte Erläuterung der JSON-Array-Operation und jedes Traversal-Beispielcodes unter JQuery

In Verbindung stehende Artikel

Mehr sehen