例子来自尚硅谷，做记录，备忘。
基本选择器，见注解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1" class="box">div1(class="box")</div> <div id="div2" class="box">div2(class="box")</div> <div id="div3">div3</div> <span class="box">span(class="box")</span> <br> <ul> <li>AAAA</li> <li title="hello">BBBB(title="hello")</li> <li class="box">CCCCC(class="box")</li> <li title="hello">DDDD(title="hello")</li> </ul> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script type="text/javascript"> //基本选择器的使用 //选择id为div1的元素 //调用css,如果css函数中的参数只是'color'的话，那么就是读；写的话应该有对象的形式，比如background:red。 $("#div1").css('background','burlywood') $("#div1").css({"background":"red"}) //如果有多个的话就应该用对象的形式传参 //选择所有的div $('div').css('background','aquamarine') //选择所有class为box的元素 $(".box").css('background','chartreuse') //选择所有的div和span元素 $('div,span').css('background','darkorange') //选择所有class为box的div $('div.box').css('background','blueviolet') </script> </body> </html>
层次选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!-- 作者：969455986@qq.com 时间：2019-05-10 描述：层次选择器，查找子元素，后代元素，兄弟元素的选择器 1.ancestor descendant 在给定的祖先元素下配所有的子元素 2.parent > child 在给定的父元素下配所有的子元素 3.prev+next 匹配所有紧接在prev元素后面的next元素 4.prev~siblings 匹配prev元素后面的所有siblings元素 --> <body> <ul> <li>AAAAA</li> <li class="box">CCCCC</li> <li title="hello"><span>BBBBB</span></li> <li title="hello"><span class="box">DDDDD</span></li> <span>EEEEE</span> </ul> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script type="text/javascript"> //选择ul下的所有的span // $('ul span').css({'background':'red'}) //选择ul下的所有子元素span $('ul > span').css('background','aquamarine') //选中class为box的下一个li $('.box+li').css('background','chartreuse') //选中ul下的class为box的元素后面所有兄弟元素 //这里需注意， 'ul .box~*'之间需要一个空格，否则就会识别为 class为box的ul元素；后面匹配所有的兄弟元素用的是通配符* $('ul .box~*').css('background','darkgreen') </script> </body> </html>
过滤选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1" class="box">class为box的div1</div> <div id="div2" class="box">class为box的div2</div> <div id="div3">div3</div> <span class="box">class为box的span</span> <br /> <ul> <li>AAAAA</li> <li title="hello">BBBBB</li> <li class="box"> CCCCC</li> <li title="hello">DDDDD</li> <li title="two">BBBBB</li> <li style="display: none;">我本来是隐藏的</li> </ul> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script type="text/javascript"> //1 选择第一个div元素 //$('div:first').css('background','aquamarine') //2 选择最后一个class为box的元素 // $('.box:last').css('background','aquamarine') //3 选择所有的class属性不为box的div //$('div:not(.box)').css('background','aquamarine') //4 选择第二个和第三个li //gt(index)选择下标大于index的；lt(index)选择下标小于index的 //$('li:gt(0):lt(3)') //如果按照理解，下面的操作应该选择下标为1,2的li，但是，结果并不是 //因为先选出所有的li,接着在选出的li中选出下标大于0的li，再在所有下标大于0的li开始重新计算，选择所有下标小于3的li //因此，lt中的index不应该是3而应该是2 $('li:gt(0):lt(2)').css('background','aquamarine') //再或者如下 $('li:lt(3):gt(0)').css('background','burlywood') //多个过滤选择器是依次执行的，本次的过滤的起始是上一次过滤的结果 //5.选择内容为BBBBB的li $('li:contains("BBBBB")').css('background','royalblue') //6 选择隐藏的li console.log($('li:hidden').length,$('li:hidden')[0]) //7.选择有title属性的li $('li[title]').css('background','red') //8 选择所有title属性为hello的li $('li[title=hello]').css('background','chartreuse') </script> </body> </html>