jQuery-选择器

使用jquery选择器

　　1、可以使代码更简洁的写

　　　　document.getelementbyid()使用jquery的写：$("#demo")

　　2、支持css选择器

　　3、提供了完善的处理机制 （完善的兼容处理）

 

1、基本选择器

　　基本选择器是jquery最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名来查找dom元素。

 

　　* : 选择所有元素　　 //$("*").css("background","red")

　　#id ：通过id属性值获取元素 　　//$("#id").css("background","red")

　　element ：通过元素名获取元素

　　selector1,selector2 ：获取列表中指定的所有元素

　　.class ：获取使用class样式的所有元素、

2、层级选择器

　　如果想通过 dom 元素之间的层次关系（后代元素, 子元素, 相邻元素, 兄弟元素等）来获取特定元素。

　　ancetor descendant ：匹配祖先元素下的后代元素 　　 //$("body div").css("background","red")

　　parent > child ：匹配父元素下的子元素　　 //$("body>div").css("background","red")

　　prev + next ：匹配上一个元素的后面的元素，必须是挨着的

　　prev~siblings ：匹配前一个元素的所有平辈元素，在prev元素后面才能匹配 　　 //$("#two").siblings("div").css("background","red")

3、过滤选择器

　　在页面元素中先找到许多具有共同属性的元素，然后对这些元素加过滤条件，找到我们想要的这些元素。

　　即通过特定的过滤规则来筛选出所需的 dom 元素。

　　按照不同的过滤规则,又分为基本过滤选择器, 内容过滤选择器, 可见性过滤选择器, 属性过滤选择器, 子元素过滤选择器和表单对象属性过滤选择器。

3.1、基础过滤选择器

　　:first ：匹配第一个元素

　　:last ：匹配最后一个元素　　 //$("div:last")

　　:even ：匹配索引为偶数的元素 　　 //$("input:even")

　　:odd ：匹配索引为奇数的元素

　　:eq(index) ：匹配索引为指定值的元素

　　:gt(index) ：匹配索引大于指定值的元素　　 //:gt(index)

　　:lt(index) ：匹配索引小于指定值的元素

　　:not(selector) ：匹配除了指定选择器之外的所有元素 　　 //$("div:not(.class)").css("background","red")

3.2、内容过滤选择器

　　:contains(text) ：匹配内容中包含指定内容的元素

　　:empty ：匹配内容为空的元素

　　:has(selector) ：匹配内容中包含指定选择器的元素

　　:parent ：匹配内容不为空的元素

3.3、可见性过滤选择器

　　:hidden ：匹配隐藏的元素 　　 //$("div:hidden").show(3000)

　　:visible ：匹配显示的元素

3.4、属性过滤选择器

　　[attribute] ：匹配具有指定属性的元素 　　 //$("div[title]").css("background","red")

　　[attribute=value] ：匹配属性等于指定值的元素

　　[attribute!=value] ：匹配属性不等于指定值的元素

　　[attribute^=value] ：匹配属性值以指定值开始的元素　　 //("div[title^=en]").css("background","red")

　　[attribute$=value] ：匹配属性值以指定值结束的元素

　　[attribute*=value] ：匹配属性值中包含指定值的元素

　　[selector1][selector2][selectorn] ：同时满足所有条件，则匹配

3.5、子元素过滤选择器

　　:nth-child(index/even/odd) ：匹配指定索引的元素 从1算起　　 //$("div.one :nth-child(2)").css("background","red")

　　:first-child ：匹配第一个子元素

　　:last-child ：匹配最后一个子元素

　　:only-child ：如果子元素是父元素的唯一子元素，则匹配

3.6、表单对象属性滤选择器

　　:enabled ：匹配状态可用的表单元素

　　:disabled ：匹配状态不可用的表单元素

　　:checked ：匹配被选中的元素 匹配单选或复选 　　 //$("#form1 input:checked").length

　　:selected ：匹配被选中的元素 匹配的是option

3.7、表单过滤选择器

　　:input ：匹配所有表单元素

　　$(“:input”) ：匹配所有表单元素 select、textarea

　　$(‘input’) ：匹配input标签

　　:text ：文本框

　　:password ：密码框 //$(":password")

　　:radio ：单选按钮

　　:checkbox ：复选框

　　:submit ：提交按钮

　　:reset ：重置按钮　　 //$(":reset")

　　:image ：图像按钮

　　:button ：按钮

　　:file ：文件框

　　:hidden ：隐藏域