Heim > Artikel > Web-Frontend > Ausführliche Erklärung des Selektors has(selector) in jQuery
Ausführliche Erklärung des Selektors has(selector) in jQuery
- 黄舟Original
- 2017-06-23 11:26:561700Durchsuche
Übersicht
Entspricht Elementen, die das vom Selektor übereinstimmende Element enthalten.
Parameter
selectorSelectorV1.1.4
Ein Selektor zum Filtern
Beispiel
Beschreibung:
Eine Textklasse zu allen div-Elementen hinzufügen, die p-Elemente enthalten
HTML-Code:
<div><p>Hello</p></div> <div>Hello again!</div>
jQuery Code:
$("div:has(p)").addClass("test"); Ergebnis:
[ <div class="test"><p>Hello</p></div> ]
Die Definition dieses Selektors kann für Laien etwas verwirrend sein, wenn ein Element das Element If enthält vom Selektor (Selektor) abgeglichen, dann wird dieses Element abgeglichen. Zum Beispiel:
$("div:has(p)")Der obige Selektor stimmt mit div-Elementen überein, die p-Elemente enthalten.
Dieser Selektor wird im Allgemeinen in Verbindung mit anderen Selektoren verwendet, z. B. Klassenselektor und Elementselektor usw. Beispiel:
$("div:has(p)").css("color","blue")Der obige Code setzt die Schriftfarbe im div-Element, das das p-Element enthält, auf Blau.
Wenn er nicht mit anderen Selektoren verwendet wird, wird der Standard-Status mit dem *-Selektor verwendet. Beispielsweise entspricht $(":has") $("*:has").
Parameterliste:
Parameter .
Beispielcode:
Beispiel 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
div
{
border:1px solid green;
height:50px;
}
span{border:1px solid blue;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div:has(span)").css("border","1px solid red")
})
})
</script>
</head>
<body>
<div>我不含span</div>
<div> <span>我是span</span></div>
<button>点击查看效果</button>
</body>
</html>Der obige Code kann die Rahmenfarbe des Div, das das Span-Element enthält, auf Rot setzen.
Beispiel 2:
Da der obige Code keinen Selektor angibt, der mit dem :has-Selektor verwendet werden soll Daher wird es standardmäßig mit dem *-Selektor verwendet, sodass der obige Code die Rahmenfarbe aller Elemente, die alle Span-Elemente enthalten, auf Rot setzen kann.<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
div
{
border:1px solid green;
height:50px;
}
span{border:1px solid blue;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("*:has(span)").css("border","1px solid red")
})
})
</script>
</head>
<body>
<div>我不含span</div>
<div><span>我是span</span></div>
<p><span>我是span</span></p>
<button>点击查看效果</button>
</body>
</html>
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des Selektors has(selector) in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!