概要
セレクターによって一致する要素を含む要素を照合します
パラメータ
selectorSelectorV1.1.4
フィルタリング用のセレクター
例
説明:
p要素を含むすべてのdiv要素にテキストクラスを追加します
HTMLコード:
<div><p>Hello</p></div> <div>Hello again!</div>
jQuery コード:
$("div:has(p)").addClass("test");
結果:
[ <div class="test"><p>Hello</p></div> ]
このセレクターの定義は少しわかりにくいかもしれませんが、要素にセレクターと一致する要素が含まれている場合、この要素は次のようになります。一致しました。例:
$("div:has(p)")
上記のセレクターは、p 要素を含む div 要素と一致します。
このセレクターは通常、クラスセレクターや要素セレクターなどの他のセレクターと組み合わせて使用されます。例:
$("div:has(p)").css("color","blue")
上記のコードは、p 要素を含む div 要素のフォントの色を青に設定します。
他のセレクターで使用しない場合、デフォルトの state が * セレクターで使用されます。たとえば、$(":has") は $("*:has") と同等です。
パラメータ一覧: 数 パラメータ説明
Selectorはスクリーニング用のセレクタです。
コード例:
例 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>
例 2:
<!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>
上記のコードでは、:has セレクターで使用されるセレクターが指定されていないため、デフォルトで * セレクターで使用されるため、上記のコードはすべてのスパンを組み合わせることができます要素の境界線の色は赤に設定されます。
以上がjQueryのhas(selector)セレクタの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。