JQuery提供了丰富的选择器

1、基本选择器(class、id、元素等)
类选择器 以class属性名称来作为选择器,以.开头; 如 $(".myDiv"), $("div.myDiv") 等;
ID选择器 以元素的id属性名称来作为选择器,以#开头; 如 $("#mydiv1"),$("#btn1")等;
标签元素选择器 以html标签元素作为选择内容的选择器; 如: $("h3"),$("div"),$("p");
全局选择器 匹配所有的元素; 如 $("*");
并集选择器 以多个元素作为一个并集集合来作为选择器; 如 $("#mydiv1,#mydiv2,div"),$("div,p")等;
交集选择器 以多个元素作为且条件作为一个集合来作为选择器; 如 $("tr.myTh"), $("tr.myTh,td.myTh")等;

2、层次选择器(具有dom节点的一些继承结构)
后代选择器: 以某个元素为父类,该元素下的所有满足条件的后代都会匹配; 如 $("div span");
子元素选择器: 以某个元素为父类,该元素下的子类满足条件的会匹配; 如 $("div>span");
相邻元素选择器: 以某个元素为基准,该元素紧跟后面的满足条件的会匹配; 如 $("div+span");
同辈之后元素选择器: 以某个元素为基准,同辈且在该元素之后的满足条件的会匹配; 如 $("div~span");

3、属性选择器
包含属性: 以某个元素为基准,判断该元素有没有包含该属性;如 $("[id]")、$("input[id]")、$("input[type=button][id]")等
属性具体的值选择: 以某个元素为基准,判断该元素的属性等于具体的值; 如 $("input[type=button]");
属性不等于的值选择: 以某个元素为基准,判断该元素的属性不等于具体的值; 如 $("input[type!=button]");
属性值开始选择: 以某个元素为基准,判断该元素的属性以某个具体的值开头; 如 $("input[name^=us]");
属性值结尾选择: 以某个元素为基准,判断该元素的属性以某个具体的值结尾; 如 $("input[name$=er]");
属性值值中包含选择:以某个元素为基准,判断该元素的属性值中是否包含具体的值; 如 $("input[name*=a]");
复合属性: 以某个元素为基准,判断该元素是否满足多个属性条件; 如$("input[type=button][id]")、$("input[type=button][name^=us]")、等。

4、简单选择器
:first 匹配第一个元素, 如; $("input[name=user]:first")
:last 匹配最后一个元素: $("input[name=user]:last");
:eq 等于下标匹配: $("input[name=user]:eq(1)")
:even 匹配偶数下标, 作用于奇数行 $("input[name=user]:even"),$("tr:even")
:odd 匹配技术下标, 作用于偶数行; $("input[name=user]:odd"),$("tr:odd")
:gt(n) 匹配大于n行的元素 $("input[name=user]:gt(3)"),$("tr:gt(3)")
:lt(n) 匹配小于n行的元素 $("input[name=user]:lt(3)"),$("tr:lt(3)")
:not 相反的; 如 $("input:not([type=button])") 匹配type!=button的所有的input标签;
:animated 正在执行的动画可以被匹配; 如 $(":animated")、 $("div:animated");

5、子元素选择器
:first-child 匹配第一个孩子; 如$("form:first-child"), $("div:first-child")
:last 匹配最后一个孩子; 如 $("div:last");
:last-child 匹配最后一个子元素 ; 如 $("div:last-child");
:nth-child(index/even/odd/equation) 匹配下标,偶数,奇数,等于等元素; 如 $("div div:nth-child(even)")、$("table tr:nth-child(3)")
:only-child 父类中只有唯一的子类时才会匹配;$("div div:only-child")、$("table tr:only-child")

6、可见性选择器
:hidden 所有隐藏的; 如$("div:hidden")、 $("#show:hidden");
:visible 所有可见的; 如 $("#show:visible")、$("div:visible");

7、内容选择器
:contains(text) 匹配给定的文本 ; 如 $("table tr:contains("+user+")")、$("table tr:not(:contains("+user+"))")等。
:empty 没有子类的元素被匹配; 如 $("div:empty");
:parent匹配子元素及文本内容的父类; 如$("div:parent");

8、表单选择器
9、表单属性选择器

重点需要掌握的选择器:
基本选择器、简单选择器、层级选择器、属性选择器、子元素选择器;


posted @ 2017-05-10 22:53  hdsfakjhf  阅读(148)  评论(0编辑  收藏  举报