微信扫一扫打赏支持

js进阶 10-6 jquery中的属性选择器有哪些

js进阶 10-6 jquery中的属性选择器有哪些

一、总结

一句话总结：

1、第一遍能学会么？

一遍是肯定学不会的，要多学几遍，所以想着怎么加快速度，减少学习的遍数

2、属性选择器是干嘛的？

选择属性的，什么是属性，就是那些属性啊，class，id，value。

3、属性选择是什么符号？

中括号

4、jquery中的属性选择器有哪些？

6种，有属性，有特定属性，没有特定属性，包含属性，以开头，以结尾

5、属性选择器中属性的值要加什么符号？

引号，而且要注意和外层的引号要不一样。

6、$('div [class!=intro]').css('color','green') 表示什么意思？

div的后代中，class属性值不为intro的，直接使用 [class!=intro] 达不到目标，因为最外层的div也不是

 

 

 

二、js进阶 10-6 jquery中的属性选择器有哪些

1、相关知识

属性选择器

HTML元素通常包含很多属性，JQuery的属性选择器就是把各种属性作为选择器。

  • $("selector[attr]")选择包含给定属性的元素
  • $("selector[attr='value']")选择给定的属性是某个特定值的元素
  • $("selector[attr!='value']")选择所有含有指定的属性,但属性不等于特定值的元素
  • $("selector[attr*='value']")选择给定的属性是以包含某些值的元素
  • $("selector[attr^='value']")选择给定的属性是以某些值开始的元素(比较少用)
  • $("selector[attr $= 'value']")    选择给定的属性是以某些值结尾的元素（比较少用）

 

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文档</title>
 6     <script src="jquery-3.1.1.min.js"></script>
 7 </head>
 8 <body>
 9     <div>
10         <h4 id="attr">属性选择器</h4>
11         <p class="intro">HTML元素通常包含很多属性,jQuery的属性选择器就是把各种属性作为选择器。</p>
12         <ul>
13             <li class="sel-1">$("selector[attr]")    选择包含给定属性的元素</li>
14             <li class="sel-1">$("selector[attr='value']")    选择给定的属性是某个特定值的元素</li>
15             <li class="_sel">$("selector[attr != 'value']")    选择所有含有指定的属性，但属性不等于特定值的元素</li>
16             <li class="_sel">$("selector[attr *= 'value']")    选择给定的属性是以包含某些值的元素</li>
17             <li class="_sel2">$("selector[attr ^= 'value']")    选择给定的属性是以某些值开始的元素（比较少用）</li>
18             <li class="_sel2">$("selector[attr $= 'value']")    选择给定的属性是以某些值结尾的元素（比较少用）</li>
19         </ul>
20     </div>
21     <script>
22     //选择含有class属性的元素。
23     //$('li[class]').css('color','red')
24     //class属性值为intro的元素
25 
26     //以下两种表达单方式是等价的
27     //$('[class=intro]').css('color','green')
28     //$('.intro').css('color','blue')
29 
30     //$('[class=intro]').css('color','green')
31     //$('div [class!=intro]').css('color','green')
32 
33     //选择class属性是以包含'sel'的元素
34     //$("[class*='sel']").css('color','red')
35 
36     $("[class^='sel']").css('color','blue')
37 
38      $("[class$='sel']").css('color','red')
39     </script>
40 </body>
41 </html>

 

posted @ 2018-06-13 12:06  范仁义  阅读(635)  评论(0)  编辑  收藏  举报