jQuery选择器

参考:jQuery权威指南

jQuery初步

jQuery选择器

jQuery操作dom

jQuery操作dom事件

jQuery插件

jQuery操作Ajax

jQuery动画与特效

jQuery实现导航栏

jQuery实现点击式选项卡

jQuery实现select三级联动

选择器功能返回值
#ID查找匹配ID的元素单个元素
element查找匹配元素名的所有元素元素集合
.class查询匹配的class元素元素集合
*匹配所有元素元素集合
selector1,selectorN将每一个选择器匹配到的元素合并后一起返回元素集合

1.2、测试基本选择器

2、层次选择器分类

1

2

3

4

5

6

7

8

9

10

11

12

$(function(){

//查找的元素

$("#divOne").css("background","red");

//查找class="clsOne"的元素

$(".clsOne").css("background","red");

//查找class="clsOne" 和class="clsFrame"的两个元素

$(".clsFrame .clsOne").css("background","red");//两个class一起写不起作用,待验证

//查找每个div下的span元素

$("div span").css("background","red");

//查找元素,和span元素

$("#divOne,span").css("background","red");

});

选择器功能返回值
ancestor descendant根据祖先元素匹配所有后代元素元素集合
parent > child根据父元素匹配所有子元素元素集合
prev + next匹配所有紧邻在prev后的next元素,也就是.next()方法元素集合
prev ~ siblings匹配prev元素后的所有siblings元素,也就是.nextAll()方法元素集合

2.1、测试层次选择器

3、常用选择器

来自为知笔记(Wiz)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

$(function(){

//查找form的下的所有input元素,跟form同级的将不会获取到

$("form input");

//查找form的下的所有子级div元素:form是父元素,div是子元素,如果div下还有div将不会获取到

$("form > div");

//查找所有紧跟着label后面的input元素,如果input没有紧跟着label后面将不会获取到

$("label + input");//这个+号的可以用next方法代替,如下:

$("label").next("input");

//查找所有跟form同级的input元素,如果是form里面的input将不会获取到

$("form ~ input");//这个~可以用siblings方法代替。如下:

$("form").siblings("input");//跟上面是一样的效果

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

$(function(){

//一、基本过滤

$("li:first");//获取li中第一个元素

$("li").first();//跟li:first同样的效果

$("li:last");//获取li中最后一个元素

$("li").last();

//获取去除给定元素的所有元素

$("input:not(.checked)");//获取所有未选中的input

//获取所有索引值为偶数的元素,从 0 开始计数

$("li:even").css("background","red");//将所有偶数行的li背景色设为红色

//获取所有索引值为奇数的元素,从 0 开始计数

$("li:odd").css("background","green");//将所有奇数行的li背景色设为红色

//获取给定索引值的元素

$("li:eq(1)");//获取li索引为1的元素,也就是第二个

$("li:gt(2)");//获取大于给定索引值的元素

$("li:lt(5)");//获取小于给定索引值的元素

//二、内容过滤

$("div:contains('abc')");//查找所有div中包含abc的元素

$("div:empty");//查找所有没有子元素的div,或者div中内容为空的div

$("div:has(span)");//查找所有子元素中有span元素的div元素

$("div:parent");//查找有子元素的div元素,或者div内容不为空的div元素

//三、可见性过滤

$("input:hidden");//查找所有隐藏的或者type="hidden"的input元素

$("input:visible");//查找所有显示的input元素

//四、属性过滤选择器

$("div[id]");//查找包含id属性div元素,不用确定id的值。例如:<div ></div>

$("div[]");//查找包含></div>

$("input[name!='username']");//查找所有name不等于username的input元素

$("input[name^='a']");//查找所有name的值以a开头的input元素

$("input[name$='a']");//查找所有name的值以a结尾的input元素

$("input[name*='a']");//查找所有name的值中包含a的input元素

$("input[id][name$='man']");//查找所有存在id属性,并且name是以man结尾的input元素

//五、子元素过滤选择器

$("ul li:nth-child(2)");//查找所有ul中每个ul的第2个li元素

$("ul li:first-child");//查找每个ul中的第一个li元素

$("ul li:last-child");//查找每个ul中的最后一个li元素

$("ul li:only-child");//查找只有一个li元素的ul元素

//六、表单对象属性过滤

$("input:enabled");//查找所有可用的input元素,也就是没有 disabled="disabled" 的元素

$("input:disabled");//查找所有不可用的元素,就是有disabled="disabled"属性 的元素

$("input:checked");//查找所有选中的checkbox元素

$("select option:selected");//查找所有选中的option元素

//七、使用jQuery表单过滤选择器获取元素

$("#form1 :input");//获取form1中所有input元素:input textarea select

$("#form1 :text");//获取form1中所有text元素

$("#form1 :password");//获取form1中所有密码框

$("#form1 :radio");//获取form1中所有单选按钮

$("#form1 :checkbox");//获取form1中所有复选框

$("#form1 :image");//获取form1中所有图像按钮

$("#form1 :reset");//获取form1中所有重置按钮

$("#form1 :button");//获取form1中所有按钮

$("#form1 :submit");//获取form1中所有提交按钮

$("#form1 :file");//获取form1中所有file元素

$("#form1 :hidden");//获取form1中所有type="hidden"的元素

});