ホームページ > 記事 > ウェブフロントエンド > jQueryのhas(selector)セレクタの詳しい説明
jQueryのhas(selector)セレクタの詳しい説明
- 黄舟オリジナル
- 2017-06-23 11:26:561700ブラウズ
概要
セレクターによって一致する要素を含む要素を照合します
パラメータ
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> 上記のコードは、span 要素を含む div の境界線の色を赤に設定できます。
例 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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。