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 )
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='div1'>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div></div>
<div id='div3'></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
//原生JS获取到的结果属于元素对象/元素集合/节点集合...他们可以使用浏览器为其提供的那些天生自带的属性和方法
//原生的JS对象不能直接的使用jQuery中提供的属性和方法
var oDiv = document.getElementById('div1')
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选择器
$('#div1')
$('div')
$('.w100')
$('*')
$('#div1,div,.w100')//把每一个选择器获取到的jQuery对象最后融合在一起，最后一起获取到
$('#div1 li')//在子子孙孙级中进行查找
$('#div1>li')//在子级中进行查找
$('#div3+')//获取它的下一个弟弟
$('#div3+ul')//获取它的下一个弟弟并且标签名是ul的
$('#div3~')//获取它的所有的弟弟元素
$('#div3~ul')//获取它的所有的弟弟元素并且标签名为ul的
$('#div1>div:not(.w100)')//#div1下的所有子集div样式类名不包含w100的
$('#div1>div:eq(0)')//通过索引获取到集合中的某一个，但是获取到的结果依然是一个jQuery对象（而get方法也是通过索引获取，但是获取到的是一个JS原生对象）
$('#div1>div:gt(1)')//大于索引1的（不包含索引1的）
$('#div1>div:lt(1)')//小于索引1的（不包含索引1的）
$('#div1 li:contains("我")')//获取所有的li内容包含“我” 的
$('#div1 div:has(ul)')//在所有的div中包含ul的
$('#div1>*:nth-child(1)')//获取所有的子元素的第一个
$('#div1>*:eq(1)')//获取所有的子元素的第二个（索引为1）
</script>
</body>
</html>1. Grundstruktur des jQuery-Selektors
2. Verwendung des grundlegenden
CSS-Selektors$('选择器') $('选择器 上下文')
Elementselektor
Wenn Sie möchten, können wir mit jQuery natürlich auch mehrere Selektoren durch Kommas zu einem Selektor zusammenfassen:
$('a'); //选择所有a元素 $('div'); //选择所有div元素 $('p'); //选择所有p元素
Dadurch wird der gleiche Effekt wie mit den oben genannten drei Codezeilen erzielt.
$('a,div,p');
Klassenselektor
Normalerweise wird der Platzhalter * weggelassen, wenn Sie alle Elemente einer bestimmten Klasse auswählen möchten, wie folgt:
$('div.myClass'); //所有拥有myClass类的div元素 $('p.myClass'); //所有拥有myClass类的p元素 $('*.myClass'); //拥有myClass类的所有类型元素
Daran ist nichts auszusetzen und es ist auch unsere übliche Schreibweise.
$('.myClass'); //拥有myClass类的所有类型元素
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:
$('div.myClass1.myClass2');
2.3
ID Selector<div class="myClass1 myClass2 myClass3">...</div>
3. Kombinierte Verwendung von Kontextselektoren
$('table#myID'); //id为myID的table元素
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:
$('ul.myUl li');
Hier werden über $('ul.myUl li') alle li-Elemente ausgewählt. Weil alle li-Elemente Nachkommen von
<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>$('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>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!
