你的位置:首页 > Java教程

[Java教程]【jQuery基础学习】01 jQuery选择器


关于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 唉!