Rumah > hujung hadapan web > tutorial js > jquery :has()和:contains()选择器两者之间的区别

jquery :has()和:contains()选择器两者之间的区别

黄舟
Lepaskan: 2017-06-23 11:14:30
asal
2058 orang telah melayarinya

jQuery:has()和jQuery:contains()两个方法比较类似。不同点在于:

has是判断标签的

contains是判断文本的

1、jQuery:has()

<div><p>Hello</p></div>
<div>Hello again!</div>
$("div:has(p)").addClass("test");
//含有p标签的div标签增加test样式
Salin selepas log masuk

注:has中的括号里可以含引号也可以省略。

2、jQuery:contains()

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
$("div:contains(&#39;John&#39;)").addClass(&#39;test&#39;);
//给含有John文本的div标签增加test样式
Salin selepas log masuk

注:contains中的括号里可以含引号也可以省略。

3、jQuery:empty

<div></div>
<div><span></span></div>
<div>span</div>
$(&#39;div:empty&#39;).addClass(&#39;test&#39;);
//给不含任何文本并且不含任何标签的div增加样式test
Salin selepas log masuk

根据不同的内容和属性可以准确定位到需要找的属性

如何根据内容筛选标签?
:contains 匹配包含给定的文本元素

$("div:contains(&#39;Jhon&#39;)")
Salin selepas log masuk

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

$("div:has(p)").addClass("test")       p为标签
Salin selepas log masuk

Atas ialah kandungan terperinci jquery :has()和:contains()选择器两者之间的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan