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. ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第四篇：传递表单数据

    摘要      本文将完成我们“MVC公告发布系统”的公告发布功能,以此展示在ASP.NET MVC中如何传递处理表单的数据. 前言      通过前几篇文章,我们已经能比较自如的使用ASP.NET ...

  2. 如何不使用js实现鼠标hover弹出菜单效果

    最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素. <ul> <li>主页</li ...

  3. GO语言学习（二十）Go 语言递归函数

    Go 语言递归函数 递归,就是在运行的过程中调用自己. 语法格式如下: func recursion() { recursion() /* 函数调用自身 */ } func main() { recu ...

  4. 【干货】前端开发者最常用的六款IDE

    一.Visual Studio Code 下载地址:https://code.visualstudio.com/ 功能介绍: 微软在2015年4月30日Build 开发者大会上正式宣布了 Visual ...

  5. 【Codeforces Round #447 (Div. 2) C】Marco and GCD Sequence

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 把gcd(a[1..n])放在输入的n个数之间. [代码] /* 1.Shoud it use long long ? 2.Have ...

  6. Tomcat redis 配置

    http://www.cnblogs.com/interdrp/p/4868740.html http://blog.csdn.net/qq584852076/article/details/4650 ...

  7. finalkeyword对JVM类载入器的影响

    众所周知,当訪问一个类的变量或方法的时候.假设没有初始化该类.就会先去初始化一个类 可是,当这个类的变量为final的时候,就不一定了 请看以下的样例 package com.lala.shop; i ...

  8. 标准模板库 STL 使用之 —— vector 使用 tricks

    1. 从已有 vector(或数组)中复制 vector<int> a{....}; int an = a.size(); int half = an/2; vector<int&g ...

  9. FindBug：Call to static DateFormat

    今天在重构代码的过程中碰到了一个问题.使用SimpleDateFormat的问题. 本人今天写了一个类,主要是提供很多静态的方法由其他接口调用,过程中多个方法使用到了日期的格式化,所以我讲Simple ...

  10. Snail—Hibernate之自写固定组件

    Hibernate的存储都是在session中进行的,此session非彼session 以下就是从生成的Hibernate配置文件获得连接数据库,然后再得到session等等 package com ...