Rumah > hujung hadapan web > tutorial js > 详解jquery中的属性过滤选择器

详解jquery中的属性过滤选择器

巴扎黑
Lepaskan: 2017-06-20 17:02:13
asal
1360 orang telah melayarinya

本篇文章主要是对jquery选择器之属性过滤选择器进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

代码如下:

<style type="text/css">
  /*高亮显示*/
  .highlight{   
   
background-color
: gray
  }
 </style>
Salin selepas log masuk

代码如下:

<body>
   <p>
      <p>Hello</p>
   </p>
   <p id="test">ID为test的p</p>
   <input type="checkbox" id="s1" name="football" value="足球" />足球
   <input type="checkbox" name="volleyball" value="排球" />排球
   <input type="checkbox" id="s3" name="basketball" value="篮球" />篮球
   <input type="checkbox" id="s4" name="other" value="其他" />其他
  </body>
Salin selepas log masuk


1. [attribute]用法
定义:匹配包含给定属性的元素

代码如下:

$("p[id]").addClass("highlight"); //查找所有含有ID属性的p元素
Salin selepas log masuk

2. [attribute=value]用法
定义:匹配给定的属性是某个特定值的元素

代码如下:

$("input[name=&#39;basketball&#39;]").attr("checked",true);   //name属性值为basketball的input元素选中
Salin selepas log masuk

3. [attribute!=value]用法
定义:匹配给定的属性是不包含某个特定值的元素

代码如下:

$("input[name!=&#39;basketball&#39;]").attr("checked",true);   //name属性值不为basketball的input元素选中 
//此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])
$("input:not(input[name=&#39;basketball&#39;])").attr("checked",true);
Salin selepas log masuk

4. [attribute^=value]用法
定义:匹配给定的属性是以某些值开始的元素

代码如下:

$("input[name^=&#39;foot&#39;]").attr("checked",true);  //查找所有 name 以 &#39;foot&#39; 开始的 input 元素
Salin selepas log masuk

5. [attribute$=value]用法
定义:匹配给定的属性是以某些值结尾的元素

代码如下:

$("input[name$=&#39;ball&#39;]").attr("checked",true); //查找所有 name 以 &#39;ball&#39; 结尾的 input 元素
Salin selepas log masuk

6. [attribute*=value]用法
定义:匹配给定的属性是以包含某些值的元素

代码如下:

$("input[name*=&#39;sket&#39;]").attr("checked",true);  //查找所有 name 包含 &#39;sket&#39; 的 input 元素
Salin selepas log masuk

7. [selector1][selector2][selectorN]用法
定义:复合属性选择器,需要同时满足多个条件时使用

代码如下:

$("input[id][name$=&#39;ball&#39;]").attr("checked",true);  //找到所有含有 id属性,并且它的 name属性是以 ball结尾的
Salin selepas log masuk

Atas ialah kandungan terperinci 详解jquery中的属性过滤选择器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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