五、jQuery选择器
基本选择器
#ID 选择器：根据 id 查找标签对象
.class 选择器：根据 class 查找标签对象
element 选择器：根据标签名查找标签对象
*选择器：表示任意的，所有的元素
selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回
<script type="text/javascript"> //一定要先写$(function () {}然后把jQuery代码放到里面，要不然加载不出来，加上之后的作用是会等html页面加载好在执行代码 $(function () { //1.选择 id 为 one 的元素 "background-color","#bbffaa" $("#btn1").click(function () { // css() 方法 可以设置和获取样式 $("#one").css("background-color","#bbffaa"); }); //2.选择 class 为 mini 的所有元素 $("#btn2").click(function () { $(".mini").css("background-color","#bbffaa"); }); //3.选择 元素名是 div 的所有元素 $("#btn3").click(function () { $("div").css("background-color","#bbffaa"); }); //4.选择所有的元素 $("#btn4").click(function () { $("*").css("background-color","#bbffaa"); }); //5.选择所有的 span 元素和id为two的元素 $("#btn5").click(function () { $("span,#two").css("background-color","#bbffaa"); }); }); </script>
实现的效果也比较简单，找到标签对象的时候，对它的css样式进行修改
层级选择器（重点）
ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素
<script type="text/javascript"> $(document).ready(function(){ //$(function (){})的全写 //1.选择 body 内的所有 div 元素 $("#btn1").click(function(){ $("body div").css("background", "#bbffaa"); }); //2.在 body 内, 选择div子元素 $("#btn2").click(function(){ $("body > div").css("background", "#bbffaa"); }); //3.选择 id 为 one 的下一个 div 元素 $("#btn3").click(function(){ $("#one+div").css("background", "#bbffaa"); }); //4.选择 id 为 two 的元素后面的所有 div 兄弟元素 $("#btn4").click(function(){ $("#two~div").css("background", "#bbffaa"); }); }); </script>
实现的效果同上
过滤选择器
:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素
:它的作用就是过滤（在jquery中）
<script type="text/javascript"> $(document).ready(function(){ function anmateIt(){ $("#mover").slideToggle("slow", anmateIt); } anmateIt(); }); $(document).ready(function(){ //1.选择第一个 div 元素 $("#btn1").click(function(){ $("div:first").css("background", "#bbffaa"); }); //2.选择最后一个 div 元素 $("#btn2").click(function(){ $("div:last").css("background", "#bbffaa"); }); //3.选择class不为 one 的所有 div 元素 $("#btn3").click(function(){ $("div:not(.one)").css("background", "#bbffaa"); }); //4.选择索引值为偶数的 div 元素 $("#btn4").click(function(){ $("div:even").css("background", "#bbffaa"); }); //5.选择索引值为奇数的 div 元素 $("#btn5").click(function(){ $("div:odd").css("background", "#bbffaa"); }); //6.选择索引值为大于 3 的 div 元素 $("#btn6").click(function(){ $("div:gt(3)").css("background", "#bbffaa"); }); //7.选择索引值为等于 3 的 div 元素 $("#btn7").click(function(){ $("div:eq(3)").css("background", "#bbffaa"); }); //8.选择索引值为小于 3 的 div 元素 $("#btn8").click(function(){ $("div:lt(3)").css("background", "#bbffaa"); }); //9.选择所有的标题元素 $("#btn9").click(function(){ $(":header").css("background", "#bbffaa"); }); //10.选择当前正在执行动画的所有元素 $("#btn10").click(function(){ $(":animated").css("background", "#bbffaa"); }); //11.选择没有执行动画的最后一个div $("#btn11").click(function(){ $("div:not(:animated):last").css("background", "#bbffaa"); }); }); </script>
实现效果同上，找到目标对象，更改css样式
内容过滤器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素
<script type="text/javascript"> $(document).ready(function(){ function anmateIt(){ $("#mover").slideToggle("slow", anmateIt); } anmateIt(); }); /** :contains(text) :empty :has(selector) :parent */ $(document).ready(function(){ //1.选择 含有文本 'di' 的 div 元素 $("#btn1").click(function(){ $("div:contains('di')").css("background", "#bbffaa"); }); //2.选择不包含子元素(或者文本元素) 的 div 空元素 $("#btn2").click(function(){ $("div:empty").css("background", "#bbffaa"); }); //3.选择含有 class 为 mini 元素的 div 元素 $("#btn3").click(function(){ $("div:has(.mini)").css("background", "#bbffaa"); }); //4.选择含有子元素(或者文本元素)的div元素 $("#btn4").click(function(){ $("div:parent").css("background", "#bbffaa"); }); }); </script>
属性过滤器
[attribute] 匹配包含给定属性的元素。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1] [attrSel2] [attrSelN] 复合属性选择器，需要同时满足多个条件时使用。
<script type="text/javascript"> /** [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attrSel1][attrSel2][attrSelN] */ $(function() { //1.选取含有 属性title 的div元素 $("#btn1").click(function() { $("div[title]").css("background", "#bbffaa"); }); //2.选取 属性title值等于'test'的div元素 $("#btn2").click(function() { $("div[title='test']").css("background", "#bbffaa"); }); //3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中) $("#btn3").click(function() { $("div[title!='test']").css("background", "#bbffaa"); }); //4.选取 属性title值 以'te'开始 的div元素 $("#btn4").click(function() { $("div[title^='te']").css("background", "#bbffaa"); }); //5.选取 属性title值 以'est'结束 的div元素 $("#btn5").click(function() { $("div[title$='est']").css("background", "#bbffaa"); }); //6.选取 属性title值 含有'es'的div元素 $("#btn6").click(function() { $("div[title*='es']").css("background", "#bbffaa"); }); //7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素 $("#btn7").click(function() { $("div[id][title*='es']").css("background", "#bbffaa"); }); //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素 $("#btn8").click(function() { $("div[title][title!='test']").css("background", "#bbffaa"); }); }); </script>
表单过滤器
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有 文本输入框
:password 匹配所有的密码输入框
:radio 匹配所有的单选框
:checkbox 匹配所有的复选框
:submit 匹配所有提交按钮
:image 匹配所有 img 标签
:reset 匹配所有重置按钮
:button 匹配所有 input type=button 按钮
:file 匹配所有 input type=file 文件上传
:hidden 匹配所有不可见元素 display:none 或 input
<script type="text/javascript"> $(function(){ /** :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden 表单对象的属性 :enabled :disabled :checked :selected */ //1.对表单内 可用input 赋值操作 $("#btn1").click(function(){ // val()可以操作表单项的value属性值 // 它可以设置和获取 $(":text:enabled").val("我是万能的程序员"); }); //2.对表单内 不可用input 赋值操作 $("#btn2").click(function(){ $(":text:disabled").val("管你可用不可用，反正我是万能的程序员"); }); //3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数 $("#btn3").click(function(){ alert( $(":checkbox:checked").length );//checkbox复选框的意思，checked是选中的意思 }); //4.获取多选框，每个选中的value值 $("#btn4").click(function(){ // 获取全部选中的复选框标签对象 var $checkboies = $(":checkbox:checked"); // 老式遍历 // for (var i = 0; i < $checkboies.length; i++){ // alert( $checkboies[i].value ); // } // each方法是jQuery对象提供用来遍历元素的方法 // 在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象 $checkboies.each(function (){ alert(this.value); }) }); //5.获取下拉框选中的内容 $("#btn5").click(function(){ // 获取选中的option标签对象 var $options = $("select option:selected"); // 遍历，获取option标签中的文本内容 $options.each(function () { // 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象 alert(this.innerHTML); }); }); }) </script>
