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

黄舟
リリース: 2017-06-23 11:26:56
オリジナル
1774 人が閲覧しました

概要

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

パラメータ

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート