jQueryのhas(selector)セレクタの詳しい説明-jsチュートリアル-php.cn

jQueryのhas(selector)セレクタの詳しい説明

黄舟

リリース： 2017-06-23 11:26:56

オリジナル

1808 人が閲覧しました

概要

セレクターによって一致する要素を含む要素を照合します

パラメータ

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 サイトの他の関連記事を参照してください。