cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery中关于:has(selector)选择器的详解

jQuery中关于:has(selector)选择器的详解

黄舟
黄舟asal
2017-06-23 11:26:561769semak imbas

概述

匹配含有选择器所匹配的元素的元素

参数

selectorSelectorV1.1.4

一个用于筛选的选择器

示例

描述:

给所有包含 p 元素的 div 元素添加一个 text 类

HTML 代码:

<div><p>Hello</p></div> <div>Hello again!</div>

jQuery 代码:

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

结果:

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

关于此选择器的定义可能有点拗口，通俗的讲就是如果一个元素含有selector(选择器)所匹配的元素，那么此元素将被匹配。例如:

$("div:has(p)")

以上选择器将匹配含有p元素的div元素。
此选择器一般也要和其他选择器配合使用，比如类选择器和元素选择器等等。例如:

$("div:has(p)").css("color","blue")

以上代码将含有p元素的div元素中的字体颜色设置为蓝色。
如果不和其他选择器配合使用，则默认状态是和*选择器配合使用，例如$(":has")等同于$("*:has")。

参数列表: 

参数                    描述    

selector              一个用于筛选的选择器。    

实例代码:

实例一:

<!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的边框颜色设置为红色。

实例二:

<!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选择器相配合使用的选择器，所以就默认和*选择器配合使用，所以能够以上代码能够将所有含所有span元素的元素的边框颜色设置为红色。



Atas ialah kandungan terperinci jQuery中关于:has(selector)选择器的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery :empty选择器的实例详解Artikel seterusnya：jQuery选择器:parent的使用案例详解

Artikel berkaitan

Lihat lagi