参考：jQuery权威指南
jQuery初步
jQuery选择器
jQuery操作dom
jQuery操作dom事件
jQuery插件
jQuery操作Ajax
jQuery动画与特效
jQuery实现导航栏
jQuery实现点击式选项卡
jQuery实现select三级联动
1、基本选择器分类
| 选择器 | 功能 | 返回值 |
| #ID | 查找匹配ID的元素 | 单个元素 |
| element | 查找匹配元素名的所有元素 | 元素集合 |
| .class | 查询匹配的class元素 | 元素集合 |
| * | 匹配所有元素 | 元素集合 |
| selector1,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素集合 |
1.2、测试基本选择器
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ //查找id="divOne"的元素 $("#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"); //查找id="divOne"元素，和span元素 $("#divOne,span").css("background","red");}); |
2、层次选择器分类
| 选择器 | 功能 | 返回值 |
| ancestor descendant | 根据祖先元素匹配所有后代元素 | 元素集合 |
| parent > child | 根据父元素匹配所有子元素 | 元素集合 |
| prev + next | 匹配所有紧邻在prev后的next元素，也就是.next()方法 | 元素集合 |
| prev ~ siblings | 匹配prev元素后的所有siblings元素，也就是.nextAll()方法 | 元素集合 |
2.1、测试层次选择器
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");//跟上面是一样的效果 }); |
3、常用选择器
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 id="aa"></div> $("div[id='aa']");//查找包含id="aa"属性div元素，例如：<div id="aa"></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"的元素 }); |