提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery选择器之属性过滤选择器详解

jQuery属性 详解 过滤 选择器
2023-06-13 09:15:16 时间
复制代码代码如下:

<styletype="text/css">
  /*高亮显示*/
  .highlight{  
   background-color:gray
  }
 </style>

复制代码代码如下:

<body>
  <div>
    <p>Hello</p>
  </div>
  <divid="test">ID为test的DIV</div>
  <inputtype="checkbox"id="s1"name="football"value="足球"/>足球
  <inputtype="checkbox"name="volleyball"value="排球"/>排球
  <inputtype="checkbox"id="s3"name="basketball"value="篮球"/>篮球
  <inputtype="checkbox"id="s4"name="other"value="其他"/>其他
 </body>

1.[attribute]用法
定义：匹配包含给定属性的元素
复制代码代码如下:
$("div[id]").addClass("highlight");//查找所有含有ID属性的div元素

2.[attribute=value]用法
定义：匹配给定的属性是某个特定值的元素
复制代码代码如下:
$("input[name="basketball"]").attr("checked",true);  //name属性值为basketball的input元素选中

3.[attribute!=value]用法
定义：匹配给定的属性是不包含某个特定值的元素
复制代码代码如下:
$("input[name!="basketball"]").attr("checked",true);  //name属性值不为basketball的input元素选中
//此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
$("input:not(input[name="basketball"])").attr("checked",true);

4.[attribute^=value]用法
定义：匹配给定的属性是以某些值开始的元素
复制代码代码如下:
$("input[name^="foot"]").attr("checked",true); //查找所有name以"foot"开始的input元素

5.[attribute$=value]用法
定义：匹配给定的属性是以某些值结尾的元素
复制代码代码如下:
$("input[name$="ball"]").attr("checked",true);//查找所有name以"ball"结尾的input元素

6.[attribute*=value]用法
定义：匹配给定的属性是以包含某些值的元素
复制代码代码如下:
$("input[name*="sket"]").attr("checked",true); //查找所有name包含"sket"的input元素

7.[selector1][selector2][selectorN]用法
定义：复合属性选择器，需要同时满足多个条件时使用
复制代码代码如下:
$("input[id][name$="ball"]").attr("checked",true); //找到所有含有id属性，并且它的name属性是以ball结尾的

相关文章