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>