关于CSS选择器

jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离。

同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器。

常用的CSS选择器如下:

  • 标签选择器

    • 以文档元素作为选择符

      a{
      text-decoration:none;
      }
  • ID选择器
    • 以文档元素的唯一标识符ID作为选择符

      #myNameDiv{
      font-size:14px;
      width:120px;
      }
  • 类选择器
    • 以文档元素的class作为选择符

      div.note{
      font-size:14px;
      }
      .noDivNote{
      font-size:10px;
      }
  • 群组选择器
    • 多个选择符应用同样的样式规则

      td,p,div,a{
      font-size:14px;
      }
  • 后代选择器
    • 元素的任意后代元素

      #parentElement a{
      color:red;
      }
  • 通配选择器
    • 以文档的所有元素作为选择符

      *{
      font-size:14px;
      }

  以上选择器为主流浏览器支持的,此外CSS还有伪类选择器、子选择器、临近选择器和属性选择器。(理论上来说,现在都应该是支持了的,这本书大概2012年的)

关于jQuery选择器

jQuery选择器与CSS选择器的写法极为相似,只不过jQuery选择器还能操作行为而已。而jQuery中操作CSS样式的部分比单纯的CSS更为强大,并且拥有跨浏览器的兼容性。

jQuery选择器来操作对比一般的DOM操作的优势,不仅仅体现在简洁明了方面,也在于获取网页中不存在的元素也不会报错。

因为jQuery选择器选择出来的永远是jQuery对象,所以在判断是否取到值的时候,不能直接if判断,而是判断$("#divId").length>0。

基本选择器

  • 标签选择器   $("div")
  • ID选择器   $("#myId")
  • 类选择器      $(".myClass")
  • 群组选择器   $("div,span,p.myClass,#myId")
  • 通配选择器   $("*")

层次选择器

  • 后代选择器  $(div span) 选取div里所有的span
  • 下级选择器  $(div>span) 选取div里为span的下一级元素
  • 相邻元素选择器 $(div+span) 选取紧挨着div元素后面的下一个span元素,等价于$(div).next("span")
  • 同级元素选择器 $(div~span ) 选取div元素后面的所有span元素,等价于$(div).nextALL("span")

  扩展一下$(div).siblings("span")选取的是div元素同级的所有的span元素,不分前后,而上面的同级元素选择器只能选择div后面的元素

过滤选择器

  • :first                选取第一个元素,如$(div:first)就是选取所有div元素中的第一个div元素
  • :last                 选取最后一个元素
  • :even               选取索引是偶数的所有元素,元素从0开始
  • :odd                 选取索引是奇数的所有元素,元素从0开始
  • :eq(index)         选取索引等于index的元素
  • :gt(index)         选取索引大于index的元素
  • :lt(index)          选取索引小于index的元素
  • :header             选取所有的标题元素,如h1,h2,h3
  • :animated         选取当前正在执行动画的所有元素
  • :focus               选取当前获取焦点的元素

内容过滤选择器

  • :contains(text)  选取含有文本内容为text的元素,如$(div:contains('Troy'))
  • :empty             选取不包含子元素或者文本的空元素
  • :has(selector)    选取含有选择器所匹配的元素的元素
  • :not(selector)    去除所有与给定选择器匹配的元素
  • :parent             选取含有子元素或者文本的元素

可见性过滤选择器

  • :hidden    选取所有隐藏的元素
  • :visible     选取所有可见的元素

属性过滤选择器

  • [attribute]                       选择拥有此属性的元素
  • [attribute=value]             选择属性的值为value的元素
  • [attribute!=value]            选择属性的值不为value的元素
  • [attribute1][attributeN]     选取同时满足多种属性的元素
  • ------------------------------------我是一个分割线,我就觉得我应该出现在这里了,虽然我不知道为什么----------------------
  • [attribute^=value]           选择属性的值以value开始的元素
  • [attribute$=value]            选择属性的值以value结束的元素
  • [attribute*=value]            选择属性的值含有value的元素
  • [attribute|=value]            选取属性等于给定字符串或者以该字符串为前缀的元素(就是该字符串后面跟着一个"-"的元素)
  • [attribute~=value]            选取属性用空格分隔的值中包含一个给定的值的元素
    <div title="en"></div>
    //能选取到:$('div[title*="en"]'),$('div[title^="en"]'),$('div[title|="en"]') <div title="en-UK"></div>
    //能选取到:$('div[title*="en"]'),$('div[title^="en"]'),$('div[title|="en"]') <div title="english"></div>
    //能选取到:$('div[title*="en"]'),$('div[title^="en"]') <div title="en uk"></div>
    //能选取到:$('div[title*="en"]'),$('div[title^="en"]'),$('div[title~="en"]') <div title="uken"></div>
    //能选取到:$('div[title*="en"]'),$('div[title$="en"]')

子元素过滤选择器

  • :nth-child(index/even/odd/equation)   选取每个父元素下的的第index个子集元素或者奇偶元素,且index从1算起,而:eq(index)只能匹配一个元素
  • :first-child                                        选取每个父元素的第1个子元素
  • :last-child                                         选取每个父元素的最后一个子元素
  • :only-child                                        如果此元素是其父元素的唯一一个子元素则匹配

表单对象属性过滤选择器

  • :enabled           选取所有可用的元素
  • :disabled          选取所有不可用的元素
  • :checked          选取所有被选中的元素(单选框,复选框)
  • :selected          选取所有被选中的元素(下拉列表)

表单选择器

  • :input          选取所有input,textarea,select,button的元素,不仅仅是input
  • :text            选取所有单行的文本框
  • :password    选取所有的密码框
  • :radio          选取所有的单选框
  • :checkbox    选取所有的多选框
  • :submit       选取所有的提交按钮
  • :image        选取所有的图像
  • :reset          选取所有的重置按钮
  • :button        选取所有的按钮
  • :file             选取所有的上传域
  • :hidden        选取所有不可见元素

选择器注意事项

  • 对于 . # ( ) [ ]等特殊字符可以通过在前面加\\形成转义字符,如$("#id\\[sad\\]")

好吧,终于写完了。又是这个点,o(︶︿︶)o 唉!

【jQuery基础学习】01 jQuery选择器的更多相关文章

  1. jQuery基础学习7——层次选择器find()方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery基础学习6——基本选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery基础学习3——jQuery库冲突

    默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...

  4. jQuery基础学习(二)—jQuery选择器

    一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 ...

  5. jQuery基础学习8——层次选择器next()和prev()方法

    $('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 ...

  6. jQuery基础学习8——层次选择器children()方法

    $('body > div').css("background","#bbffaa"); //和children()方法是等价的,父子关系,和parent ...

  7. jQuery基础学习(一)—jQuery初识

    一.jQuery概述 1.jQuery的优点      jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...

  8. jQuery基础学习4——jQuery容错性

    使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. <script type="t ...

  9. jQuery基础学习(三)—jQuery中的DOM操作

    一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法 ...

  10. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. Ecshop商品详情页显示当前会员等级价格

    会员登录状态下,在ECSHOP商品详情页的本店售价中显示当前登录会员对应的等级价格,在未登录状态下,则还默认显示原来的本店售价. 解决方法: 这个需要修改ECSHOP程序代码来实现. 打开文件 /in ...

  2. 关于"The dependency was added by the project system and cannot be removed" Error

    阅读一个简单地工程代码,其中一个工程BaseCode是 static lib,另一个工程RunBaseCode使用该lib,但在工程设置的“Linker\Input\AdditionalDepende ...

  3. [原创]Android Studio的Instant Run(即时安装)原理分析和源码浅析

    Android Studio升级到2.0之后,新增了Instant Run功能,该功能可以热替换apk中的部分代码,大幅提高测试安装的效率. 但是,由于我的项目中自定义了一些ClassLoader,当 ...

  4. synchronized关键字,Lock接口以及可重入锁ReentrantLock

    多线程环境下,必须考虑线程同步的问题,这是因为多个线程同时访问变量或者资源时会有线程争用,比如A线程读取了一个变量,B线程也读取了这个变量,然后他们同时对这个变量做了修改,写回到内存中,由于是同时做修 ...

  5. 介绍几个工作开发中封装的好用的android自定义控件

    首先看效果图, 看下这两个界面,第一个中用到了一个自定义的FlowRadioGroup,支持复合子控件,自定义布局: 第二个界面中看到了输入的数字 自动4位分割了吧:也用到了自定义的DivisionE ...

  6. 客户端配置文件tnsname.ora

    ARP2 = (DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(HOST = 182.168.1.173)(PORT = 1521) ...

  7. c++ 职责链模式(Chain of Responsibility)

    职 责链模式:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处 理它为止.其思想很简单,考虑员工要求加薪.公司的管 ...

  8. 客户端cmd打开mysql,执行插入中文报错或插入中文乱码解决方案

    最近在制作一个安装包,需要安装的时候执行mysql脚本儿,做了一个批处理,但是发现总是执行到 插入中文的时候报错,或者插入中文是乱码. 网上查了好多资料,说是把编码改成GBK什么的,终究还是不成功. ...

  9. Failure is not fatal, but failure to change might be.

    Failure is not fatal, but failure to change might be. 失败不是致命的,但无法改变却可能是致命的.

  10. Linux下grep显示前后几行信息

    Linux下grep显示前后几行信息 标准unix/linux下的grep通过下面參数控制上下文 grep -C 5 foo file 显示file文件里匹配foo字串那行以及上下5行grep -B ...