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、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script src="jquery-3.1.1.min.js"></script>

 </head>

 <body>

     <div>

         <h4 id="attr">属性选择器</h4>

         <p class="intro">HTML元素通常包含很多属性,jQuery的属性选择器就是把各种属性作为选择器。</p>

         <ul>

             <li class="sel-1">$("selector[attr]")    选择包含给定属性的元素</li>

             <li class="sel-1">$("selector[attr='value']")    选择给定的属性是某个特定值的元素</li>

             <li class="_sel">$("selector[attr != 'value']")    选择所有含有指定的属性，但属性不等于特定值的元素</li>

             <li class="_sel">$("selector[attr *= 'value']")    选择给定的属性是以包含某些值的元素</li>

             <li class="_sel2">$("selector[attr ^= 'value']")    选择给定的属性是以某些值开始的元素（比较少用）</li>

             <li class="_sel2">$("selector[attr $= 'value']")    选择给定的属性是以某些值结尾的元素（比较少用）</li>

         </ul>

     </div>

     <script>

     //选择含有class属性的元素。

     //$('li[class]').css('color','red')

     //class属性值为intro的元素

     //以下两种表达单方式是等价的

     //$('[class=intro]').css('color','green')

     //$('.intro').css('color','blue')

     //$('[class=intro]').css('color','green')

     //$('div [class!=intro]').css('color','green')

     //选择class属性是以包含'sel'的元素

     //$("[class*='sel']").css('color','red')

     $("[class^='sel']").css('color','blue')

      $("[class$='sel']").css('color','red')

     </script>

 </body>

 </html>

js进阶 10-6 jquery中的属性选择器有哪些的更多相关文章

  1. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  2. jQuery中的属性选择器

    先看代码,后面详细解释: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  4. js进阶 10-5 jquery中的层级选择器有哪些

    js进阶 10-5 jquery中的层级选择器有哪些 一.总结 一句话总结: 1.jquery中的层级选择器有哪些? 四种,后代,子代,兄弟,相邻兄弟 2.如何区别jquery中的层级选择器? 记住这 ...

  5. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  6. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  7. jquery中的属性和css

    jQuery中的属性用于获取或设置元素的属性 1.attr(),获取或设置所有相匹配的元素的属性值:removeAttr("attr"),移除所有相匹配的元素的属性 //html ...

  8. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  9. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

随机推荐

  1. Xamarin开发手机聊天程序

    使用Xamarin开发手机聊天程序 -- 基础篇(大量图文讲解 step by step,附源码下载)   如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是 ...

  2. 早该知道的 7 个JavaScript 技巧[转]

    简洁写法 对象的简写在过去,如果你想创建一个对象,你需要这样: var car = new Object();  car.colour = 'red';  car.wheels = 4;  car.h ...

  3. [Android 性能优化系列]内存之提升篇--应用应该怎样管理内存

    大家假设喜欢我的博客,请关注一下我的微博,请点击这里(http://weibo.com/kifile),谢谢 转载请标明出处(http://blog.csdn.net/kifile),再次感谢 原文地 ...

  4. Android之——图片的内存优化

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46972817 1. 对图片本身进行操作 尽量不要使用 setImageBitmap ...

  5. Dcloud课程4 如何进行APP接口开发

    Dcloud课程4 如何进行APP接口开发 一.总结 一句话总结:通过json或者xml. 1.APP如何进行通信? 通过在地址上接参数指明传递的数据的类型.而数据传递的类型一般是XML和json. ...

  6. 位数（digits）的处理

    主要针对:二进制表示法,以及十进制表示法: 1. 获取位数 已知该数 n 采用十进制进行表示 二进制形式的位数:⌊log2n⌋+1 十进制形式的位数:⌊log10n⌋+1 2. 截断(保留前/后 m ...

  7. Codeforces Round #100 E. New Year Garland (第二类斯特林数+dp)

    题目链接: http://codeforces.com/problemset/problem/140/E 题意: 圣诞树上挂彩球,要求从上到下挂\(n\)层彩球.已知有\(m\)种颜色的球,球的数量不 ...

  8. Instant Client 配置

    Instant Client Download 选择  Instant Client for Microsoft Windows (32-bit)  由于PL/SQL Developer 不支持64b ...

  9. java三大特性：封装、继承、多态

    Java三大特性之封装   一.定义 封装性指的是将对象的状态信息隐藏在对象内部,不允许外部程序直接访问对象内部的信息,而是通过该类所提供的方法来实现对内部信息的操作和访问. 二.使用封装的好处: 1 ...

  10. Redis学习笔记（六）---List

    1.ArrayList与LinkList的区别 ArrayList的使用数组存入的方式,所以根据索引查询数据速度快,而增删元素是比较慢的,它需要将数据一位一位的移动,知道达到要求. LinkList使 ...