接前文——使用jQuery进行便捷web开发
严格来说这些东西都没有多少原创性可言，只是总结一些东西，方便自己，也顺便方便一下别人～
jQuery的选择器是极其强大并且有趣的，他结合了CSS1，CSS2，部分CSS3以及部分XPath的语法，同时并有一些专有的扩展 ，这样，使用起来便得心应手。
最基本的选择器
- #id 通过id获取对象你就可以这样写了$(“#id”)，而不用再getElementById(“id”)，当然实际上，很多人都在自己定义$的getElementById方法；
- #.class 通过class获取对象，javascript中是没有专门的类似函数的
- element 类似于getElementsByTagName
- * 用于匹配所有元素
- 组合选择器 直接将CSS中组合选择器的思想引用过来，各选择器之间以逗号区分，如：$(“#id,.class,h1″)
层级选择器
- $(“parent children”) 匹配给定祖先元素下的所有后代元素，如：$(“form input”)将匹配所有表单元素中的input元素
- parent > child 匹配给定祖先元素下的子元素，而非所有后代元素
- prev + next 匹配一个有效选择器pre后紧接着的第一个选择器
- prev ～ siblings 匹配一个有效选择器pre后的所有同级选择器
基本滤镜
- :first 匹配返回对象中的第一个元素，如：$(“div:first”)将返回DOM树中的第一个div
- :last 匹配返回对象中的最后一个元素
- :not 去除所有与给定选择器匹配的元素，如：$(“div:not(‘.post’)”)将返回class部位“post”的所有div元素
- :even 匹配所有索引值为偶数的元素，从 0 开始计数，这个选择器在制作“斑马线”是十分有效，如：$(“td:even”).css(“backgroundColor”,”#FFF”)
- :odd 匹配所有索引值为奇数的元素
- :eq(index) 匹配一个给定索引值的元素，如：$(“p:eq(0)”)将返回文档中的第一个文本段落
- :gt(index) 匹配所有大于给定索引值的元素
- :lt(index) 匹配所有小于给定索引值的元素
- :header 匹配如 h1, h2, h3之类的标题元素
- :animated 匹配所有正在执行动画效果的元素，如：$(“div:not(:animated)”)
子元素滤镜
- :nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素
‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
如：$(“ul li:noth-child(2)”)将匹配所有ul下的第二个li元素- :first-child 匹配第一个子元素，如$(“ul li:first-child”)将匹配ul的第一个li元素
- last-child 匹配最后一个子元素
- only-child 当该元素为其父元素的唯一子元素时将被匹配
属性滤镜
- [attribute] 匹配包含特定属性的元素，如：$(“img[title]“)将匹配所有拥有title属性呃img元素
- [attribute=value] 匹配特定属性为特定值的元素，如：$(“img[title='点击查看原图']“)匹配所有title属性为“点击查看原图”的img元素
- [attribute^=value] 匹配特定属性其值以特定字符为起始值的元素，如：$(“img[title^='点击']“)匹配所有title属性以“点击”开始的img元素
- [attribute$=value] 匹配特定属性其值以特定字符结尾的元素
- [attribute*=value] 匹配特定属性其值包含特定字符的元素
- 复合属性选择器 如：$(“img[title^='点击'][title$='原图']“)
表单滤镜
- :input 匹配所有 input, textarea, select 和 button 元素，如：$(:input)
- :text 匹配所有的单行文本框
- :password 匹配密码域
- :radio 匹配单选按钮
- :checkbox 匹配复选框
- :sumbit 匹配提交按钮
- :image 匹配图像域
- :reset 匹配重置按钮
- :buttom 匹配按钮
- :file 匹配文件域
- :enabled 匹配所有可用的元素
- :disabled 匹配所有禁用的元素
- :checked 匹配所有被选中的表单
- :selected 匹配所有选择的表单
- :hidden 匹配所有不可见元素，或者type为hidden的元素
其他滤镜
- :contains(text) 匹配包含给定文本的元素，如：$(“p:contains(‘jQuery’)”)将匹配包含”jQuery”的所有段落元素
- :empty 匹配所有不包含子元素或者文本的空元素
- :has 匹配所有不包含子元素或者文本的空元素，如：$(“div:has(‘p’)”)将匹配所有包含有段落元素的div元素
- :parent 匹配含有子元素或者文本的元素
- :visible 匹配所有的可见元素
本文相关链接：
- jQuery1.2 API
- jQuery for JavaScript programmers 原文 译文
Leave a Reply