基本选择器
样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery文档--> <script src="../../js/jquery.min.js"></script> <script> $(function(){ // 1 * 选择所有元素 console.log($('*')); //2 标签选择器 console.log('div: '+($('div').length)) console.log('div: '+($('div').size())) //3 id选择器 console.log('id: '+($('#d1').size())) //4 类选择器 $('.dd').css("color","red"); console.log('class: '+($('.dd').size())) //5 并集选择器 $('.d2,#d1').css('color','green') }) </script> </head> <body> <div>div1</div> <div>div2</div> <div class="dd" >div3</div> <div class="dd" >div4</div> <div id="d1" >div5</div> <div class="d2" >div6</div> </body> </html>
效果截图：
层级选择器
根据层级关系选择：
ancestor descendant 查找所有子元素，包括间接的子元素
parent > child 直接子元素 ,不包括间接子元素
prev + next 查找与prev同级的第一个元素，是兄弟关系
prev ~ siblings 找与prev同级的所有元素，是兄弟关系
样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入jQuery文档--> <script src="../../js/jquery.min.js"></script> <title></title> </head> <body> <script> $(function(){ //ancestor descendant 所有子元素，包括间接的子元素 console.log($('.container div').get()) //parent > child 直接子元素 ,不包括间接子元素 console.log($('.container>div').get()) //prev + next 查找与prev同级的第一个元素，是兄弟关系 console.log($('.container+div').get()) //prev ~ siblings 找与prev同级的所有元素，是兄弟关系 console.log($('.container~div').get()) }) </script> <div class="container"> <div class="head" > head </div> <div class="content" > <div > content1</div> <div > content2</div> <div > content3</div> </div> </div> <div class="container1">container1</div> <div class="container2">container2</div> <div class="container3">container3</div> </body> </html>
效果截图：
基本筛选器
each方法
each方法用于迭代
样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../../js/jquery.min.js"></script> <title></title> </head> <body> <ul> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第5行</li> <li>第6行</li> <li>第7行</li> <li>第8行</li> <li>第9行</li> <li>第10行</li> </ul> <script> //each方法用于迭代 $('li').each(function(i,el){ //i 代表遍历的 序号， //el 代表上下文对象(每一个匹配的元素) //this 此处this 是DOM原生对象 console.log(i,el,$(this).text()) }) </script> </body> </html>
效果截图：
基本筛选器的使用
样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery文档--> <script src="../../js/jquery.min.js"></script> <script> $(function() { //li:first 第一个元素 console.log('li:first', $('li:first').text()) //li:last 最后一个 console.log('li:last', $('li:last').text()) //li:eq(5) eq 获取索引所在的元素 console.log('li:eq(5)', $('li:eq(5)').text()) //:even :odd 代表偶数和奇数 console.log('li:even', $('li:even').text()) console.log('li:odd', $('li:odd').text()) //:gt :lt // 匹配所有大于索引值4的元素 console.log('li:gt(4)', $('li:gt(4)').text()) // 匹配所有小于索引值4的元素 console.log('lt(4)', $('li:lt(4)').text()) }) </script> </head> <body> <ul> <li>第0行</li> <li>第1行</li> <li>第2行</li> <li>第3行</li> <li>第4行</li> <li>第5行</li> <li>第6行</li> <li>第7行</li> <li>第8行</li> <li>第9行</li> </ul> </body> </html>
效果截图：
注意：下标是0开始算的
内容选择器
样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery文档--> <script src="../../js/jquery.min.js"></script> <script> $(function(){ //contains 包含文字 console.log($('div:contains("Keafmd")')[0].outerHTML) console.log($('div:contains("Keafmd")')[0].innerHTML) console.log($('td:contains("Keafmd")')[0].outerHTML) console.log($('td:contains("Keafmd")')[0].innerHTML) //:empty $('p:empty').each(function(i,el){ console.log(el.outerHTML) }) //匹配 含有选择器所匹配的元素（子元素） 的元素 console.log($('div:has(.mysapn)')[0].outerHTML) //:parent 查找包含子元素的 元素 console.log('size',$("td:parent").length); console.log('html',$("td:parent").html()); console.log('text',$("td:parent").text()); }) </script> </head> <body> <div>哈哈哈</div> <div>Keafmd</div> <div >div1 <span class="mysapn"></span> </div> <p></p> <table> <tr><td>Keafmd</td><td></td></tr> <tr><td>牛哄哄的柯南</td><td></td></tr> </table> </body> </html>
效果截图：
可见性选择器
| 可见性选择器 | 说明 |
| :hidden | 匹配所有不可见元素，或者type为hidden的元素 |
| :visible | 匹配所有的可见元素 |
样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ background-color: aliceblue; margin: 5px; } </style> <!-- 引入jQuery文档--> <script src="../../js/jquery.min.js"></script> <script> $(function(){ //不可见的元素 console.log($(":hidden").length); console.log($("input:hidden")[0].outerHTML); console.log($("div:hidden")[0].outerHTML); //visible 可见的元素 console.log($("div:visible").text()); }) </script> </head> <body> <input type="hidden" /> <input /> <div style="display: none;">d1</div> <div>d2</div> <div>d3</div> </body> </html>
效果截图：
属性选择器
样例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery文档--> <script src="../../js/jquery.min.js"></script> <script> $(function(){ console.log($('[type=password]').val()); //查找是否包含属性为class的元素 $('[class]').css({ 'color':'red' }) // $('input[type!=password]').css({ // 'color':'red' // }) //查找name属性以a开头 // $('input[name^=a]').css({ // 'color':'red' // }) //查找name属性以a结束 $('input[name$=name]').css({ 'color':'red' }) //查找name属性包含a // $('input[name*=a]').css({ // 'color':'red' // }) }) </script> </head> <body> 用户名: <input type="text" name="username" /> <br/> 昵称: <input type="text" name="nickname"/><br/> 密码: <input type="password" name="password" value="123456" /><br/> 地址:<input type="text" name="address"/><br/> <input type="text" name="gender"/><br/> <input type="text" class="aaa" /><br/> <input type="text" class="aaa" /><br/> <input type="text" class="aaa" /><br/> </body> </html>
效果截图：
