Rumah > Artikel > hujung hadapan web > JQuery :contains(text)选择器使用案例

JQuery :contains(text)选择器使用案例

黄舟asal: 2017-06-23 11:05:251763semak imbas

概述

匹配包含给定文本的元素

参数

textStringV1.1.4

一个用以查找的字符串

示例

描述:

查找所有包含 "John" 的 div 元素

HTML 代码:

<div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn

jQuery 代码:

$("div:contains(&#39;John&#39;)")

结果:

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

实例代码:

实例一:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("li:contains(&#39;html&#39;)").css("color","blue") 
  }) 
}) 
</script>
</head>
<body>
<ul>
  <li>html专区</li>
  <li>div+css专区</li>
  <li>Jquery专区</li>
  <li>Javascript专区</li>
  <li>html5专区</li>
</ul>
<button>点击查看效果</button>
</body>
</html>

以上代码能够将包含“html”的li元素中的文本颜色设置为蓝色。

jQuery中的:contains(text)

<body>
    <div>
        我    </div><script>
    $(function(){
        $(&#39;:contains(你)&#39;).css(&#39;background&#39;,&#39;lime&#39;);
    });</script>    </body>

:contains 选择器选取包含指定字符串的元素。（W3school）

我想选择包含“你”这个字符串的元素，显然页面中没有符合条件的，但是页面也变成了绿色。下面两个也可以使页面变成绿色（瞎试的） $(':even').css('background','lime'); $(':odd').css('background','lime'); 请问这是为什么呢？谢谢。

1.:contains('你')页画为什么会变成绿色？

因为你的script标签在html画面上，jquery在查找元素时会整个画面上查找。然后找到script里面有个'你'，就是你写的那段javascript代码，程序把它当作text来处理了暂时：

 $(function(){
        $(&#39;:contains(你)&#39;).css(&#39;background&#39;,&#39;lime&#39;);
 });

所以:contains(你)应该会找到三个元素：html,body，以及这个script三个元素，将这三个元素样式加上background，当然script不支持加了也没用。

2.$(':even').css('background','lime'); $(':odd').css('background','lime'); 画面为什么会变成绿色？

$(':even')会选中html，$(':odd')会选中body，设置这两个元素的background当然会有作用了。

另外一点补充：关于第一点，如果你把你的js代码写在一个js文件中然后通过script标签引入就不会出现这样的问题了。如果是注释里面出现了你要查找的文字也会被忽略。

Atas ialah kandungan terperinci JQuery :contains(text)选择器使用案例. 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 :focus选择器的使用详解Artikel seterusnya：jquery :has()和:contains()选择器两者之间的区别

Artikel berkaitan

Lihat lagi