实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery 选择器</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div id="list">hello jQuery</div> <div class="list1">hello javascript</div> <div> <p>hello world</p> </div> <div> <div id="box">多个元素1</div> <div class="box">多个元素2</div> <span>多个元素3</span> </div> <!--给父级元素下匹配所以的子元素--> <div class="list2"> <p>给父级元素下匹配所以的子元素</p> <p>给父级元素下匹配所以的子元素</p> <p>给父级元素下匹配所以的子元素</p> </div> <hr> <ul class="list3" style="list-style: none"> <li>给定的祖先元素下匹配所有的后代元素</li> <li>给定的祖先元素下匹配所有的后代元素</li> <li>给定的祖先元素下匹配所有的后代元素</li> </ul> <hr> <div class="list4"> <h4 class="h4">匹配紧跟在prev元素后面的next元素</h4> <p>匹配紧跟在prev元素后面的next元素</p> <p>匹配紧跟在prev元素后面的next元素</p> <p>匹配紧跟在prev元素后面的next元素</p> </div> <hr> <div class="list5"> <ul> <li>顺序选择器1</li> <li>顺序选择器2</li> <li>顺序选择器3</li> <li>顺序选择器4</li> <li>顺序选择器5</li> </ul> </div> <hr> <div class="list6"> <ul> <li>顺序选择器1</li> <li>顺序选择器2</li> <li>顺序选择器3</li> <li>顺序选择器4</li> <li>顺序选择器5</li> </ul> </div> <hr> <div class="list7"> <ul> <li id="sy">顺序选择器1</li> <li>顺序选择器2</li> <li>顺序选择器3</li> <li>顺序选择器4</li> <li>顺序选择器5</li> </ul> </div> <hr> <div class="list8"> <ul> <li id="sy1">顺序选择器1</li> <li>顺序选择器制定文本2</li> <li>顺序选择器制定文本3</li> <li><h5>顺序选择器顺序选择器4</h5></li> <li></li> <li>顺序选择器5</li> <li>顺序选择器5</li> </ul> </div> <script> $(function () { //基本选择器 // 语法 // $('#id名')根据给定的id来匹配到元素 var div = $('#list').css('color','red'); console.log(div); // $('.class名')根据给定的class来匹配到元素 $('.list1').css('color','blue'); // $('element')根据给定的标签名来匹配到元素 $('p').css('color','green'); // $('*')匹配所有元素 $('*').css('font-family','宋体'); //$('#id,.class名,element')匹配到页面中多个选择器 $('#box,.box,span').css('color','pink'); //************************************************* //层级选择器 (相当于父类和子类的元素关系) // 给定的父级元素下匹配所有的子元素:$('父级元素 > 子级元素') $('.list2 > p').css('color','red'); // 给定的祖先元素下匹配所有的后代元素:$('祖先元素 后代元素') $('.list3 li').css('background','yellow',); // 匹配紧跟在prev元素后面的next元素:$('prev + next')(同级的元素) $('.h4+p').css('color','red'); // 匹配prev元素后面所有的siblings元素:$('prev ~ siblings') $('.h4~p').css('background','blue'); //**************************************** //顺序选择器 // 1、顺序 // $(':first') 第一个元素 $('.list5 ul > li:first').css('color','red'); // $(':last') 最后一个元素 $('.list5 ul > li:last').css('color','pink'); // 2、比较(x的顺序是从0开始) // $(':gt(x)')表示大于值x的元素 $('.list5 ul > li:gt(1)').css('color','blue'); // $(':lt(x)')表示小于值x的元素 $('.list5 ul > li:lt(2)').css('color','yellow'); // $(':eq(x)')表示等于值x的元素 $('.list5 ul > li:eq(3)').css('color','Violet'); // 3、奇偶数 // $(':odd')奇数顺序 $('.list6 ul > li:odd').css('color','yellow'); // $(':even')偶数顺序 $('.list6 ul > li:even').css('color','red'); // 4、非 // $(':not(selector)')匹配不是selector的所有元素 $('.list7 ul > li:not(#sy)').css('color','red'); //************************************************* // 内容选择器 // 语法: // $(':contains(text)') 匹配包含给定文本(text)的元素 $('.list8 ul > li:contains(制定文本)').css('color','red'); // $(':has(selector)')匹配包含特定选择器元素的元素 $('.list8 ul > li:has(h5)').css('color','blue'); // $(':empty')匹配不含有内容的元素(即 不包含子元素或者文本的空元素) $('.list8 ul > li:empty').css('backgroundColor','red'); // $(':parent')匹配含有子元素或者文本的元素 $('.list8 ul > li:parent').css('fontSize','22px'); //=============================================================== // 属性选择器 // 语法: // $('[属性名]')匹配包含给定属性的元素 // $('[attribute=value]')匹配给定属性是某个特定值的元素 //$('[attribute!=value]')匹配所有不含有指定值的属性,或者说是属性不等于特定值的元素 // $('[attribute ^= value]')匹配给定属性是以某些值开始的元素 // $('[attribute $= value]')匹配给定属性是以某些值结尾的元素 // $('[attribute *= value]')匹配给定属性包含某些值的元素 //$('attrSel[1] attrSel[1] attrSel[1]')复合选择器,需要同时满足多个条件时使用 //$(document).ready(function(){ // $('input[type]').css('background','pink') // $('input[type=button]').css('background','blue') // $('input[type!=text]').css('background','red') // $('input[type ^=t ]').css('background','red') // $('input[type $=n ]').css('background','red') // $('input[type *=o ]').css('background','blue') // $('input[id][name*=n]').css('background','red') //}) // 表单选择器 // 语法: // $(':enabled')所有激活的input元素(可以使用的input元素) // $(':disabled')所有禁用的input元素(不可以使用的input元素) // $(':selected')所有被选取的元素,针对于select元素 // $(':checked')所有被选中的input元素 //=============================================================== }) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例