Ausführliche Erklärung des Selektors has(selector) in jQuery-js-Tutorial-php.cn

Ausführliche Erklärung des Selektors has(selector) in jQuery

黄舟

Freigeben： 2017-06-23 11:26:56

Original

1811 Leute haben es durchsucht

Übersicht

Entspricht Elementen, die das vom Selektor übereinstimmende Element enthalten.

Parameter

selectorSelectorV1.1.4

Nach dem Login kopieren

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>

Nach dem Login kopieren

jQuery Code:

$("div:has(p)").addClass("test");

Nach dem Login kopieren

Ergebnis:

[ <div class="test"><p>Hello</p></div> ]

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!