标签：index checked 精确 doc src 单元素 基本 动画 rip
前面学习了JQuery的简单使用，今天进一步学习一下JQuery的选择器。
JQuery选择器通过标签名、属性名或者内容对DOM元素进行快速准确的选择，而不必担心浏览器的兼容性，通过JQuery选择器对页面元素精确定位，进而方便完成处理元素属性和行为事件。
与传统的JavaScript获取页面元素和事务处理相比，JQuery具备以下几个优势：
在JQuery库中封装了大量可以通过选择器直接调用的函数，使编程更加简单轻松，使用简单的代码就可以使用相对复杂的功能。
传统js设置页面元素的事务的时候，先要找到页面上的元素，然后在赋予相应的属性或事件，如果页面元素不存在，则页面会报错。所以要先判断页面元素是否存在。再进行属性或者事件操作。这样会造成代码繁琐。在JQuery定义页面元素的时候，无须考虑页面中是否存在，即使页面中不存在该元素也不会报错，极大的方便了代码的执行效率。
大致分为下面四大类
过滤选择器又分为以下几个小分类
接下来挨个学习一下。
写个小例子学习一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style type="text/css"> .firstDiv{ color: greenyellow; font-size: 1em; background-color:aliceblue; } #secondDiv{ color: blueviolet; font-size: 1.5em; } p{ color: green; font-size: 1em; } </style> <script type="text/javascript"> $(function () { //ID匹配元素 $("#secondDiv").css("display","block"); //匹配类元素 $(".firstDiv").css("display","none"); //元素名匹配元素 $("div, p").css("display","block"); //合并匹配元素 $("#secondDiv, p").css("display","none"); //匹配所有元素 $("body *").css("display","block"); }); </script> </head> <body> <div class="firstDiv"> 第一层 </div> <div id="secondDiv"> 第二层 </div> <p> 段落 </p> </body> </html>
写个小例子学习一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style type="text/css"> #topDiv{ color: black; background-color: aliceblue; height: 45px; display: flex; display: -webkit-flex; align-items: center; } div.leftDiv{ float: left; overflow-x: auto; } ul#menu{ vertical-align: middle; } li{ color: black; float:left; overflow-x: auto; margin-left: 2em; margin-right: 2em; vertical-align: middle; } div#content{ font-size: 1rem; text-align: center; text-shadow:khaki; } </style> <script type="text/javascript"> $(function () { //匹配后代元素 $("#topDiv ul").css("display","none"); //匹配子元素 $("#topDiv > ul").css("display","block"); //匹配后面的元素 $("#topDiv + div").css("display","none"); $("#topDiv").next().css("display","none"); //匹配后面的所有相邻元素 $("#topDiv ~div").css("display","block"); $("#topDiv").nextAll().css("display","none"); }); </script> </head> <body> <div id="topDiv"> <ul id="menu"> <li>首页</li> <li>商城</li> <li>分类</li> </ul> </div> <div> <div class="leftDiv" align="left"> <h4 align="center">风云</h4> <div id="content"> 金鳞岂是池中物，一遇风云便化龙。<br> 九霄龙吟惊天变，风云际会潜水游。<br> </div> </div> <div> <img src="../images/bg_post_activity_4.png"> </div> </div> <div> <p> 我要成仙 </p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单选择过滤器</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style type="text/css"> li.firstLi { color: saddlebrown; } li.lastLi { color: red; } li.oddLi { color: blueviolet; font-size: 1em; } li.evenLi { color: goldenrod; font-size: 1em; } li.fiveLi { color: blueviolet; font-size: 2em; } </style> <script type="text/javascript"> $(function () { //选中符合条件的第一个元素 $("#list > li:first").addClass("firstLi"); //选中符合条件的最后一个元素 $("#list > li:last").addClass("lastLi"); //符合条件但不能被selector选中的元素 $("#list > li:not(‘.secondLi‘)").addClass("lastLi"); //获取指定索引值为奇数的元素(1、3、5、7、9......)，注意索引号是从1开始的 $("#list > li:odd").addClass("oddLi"); //获取指定索引值为偶数的元素(0、2、4、6、8……)，注意索引号是从0开始的 $("#list > li:even").addClass("evenLi"); //选取指定索引值的元素，索引值从0开始 $("#list > li:eq(4)").addClass("fiveLi"); //获取所有索引值大于index的元素，索引号从0开始 $("#list > li:gt(4)").addClass("fiveLi"); //获取所有索引值小于index的元素，索引号从0开始 $("#list > li:lt(4)").addClass("evenLi"); }) </script> </head> <body> <ol id="list"> <li>第1行</li> <li id="secondLi">第2行</li> <li>第3行</li> <li>第4行</li> <li>第5行</li> <li>第6行</li> <li>第7行</li> <li>第8行</li> </ol> </body> </html>
内容过滤选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内容过滤选择器</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style type="text/css"> li.firstLi { color: saddlebrown; } li.lastLi { color: red; } li.oddLi { color: blueviolet; } li.evenLi { color: goldenrod; } li.fiveLi { color: blueviolet; } </style> <script type="text/javascript"> $(function () { //选中符合条件的第一个元素 $("#list > li:contains(‘第4行‘)").addClass("firstLi"); $("#list > li:empty").css("display", "none"); $("#list > li:has(‘b‘)").addClass("firstLi"); $("div:parent").css("display", "none"); }) </script> </head> <body> <div> <ol id="list"> <li>第1行</li> <li id="secondLi">第2行</li> <li>第3行</li> <li>第4行</li> <li>第5行</li> <li><b>第6行</b></li> <li></li> <li>第7行</li> <li>第8行</li> </ol> </div> <div> </div> </body> </html>
可见性过滤选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>可见性过滤选择器</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style type="text/css"> li.oddLi { color: blueviolet; } li.evenLi { color: goldenrod; } </style> <script type="text/javascript"> $(function () { //选中符合条件的第一个元素 $("#list > li:hidden").show(); $("#list > li:visible").addClass("firstLi"); }) </script> </head> <body> <ol id="list"> <li>第1行</li> <li style="display: none">第2行</li> <li>第3行</li> <li>第4行</li> <li>第5行</li> </ol> </body> </html>
属性过滤选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性过滤选择器</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style type="text/css"> li.firstLi { color: saddlebrown; } li.lastLi { color: red; } li.oddLi { color: blueviolet; font-size: 1em; } li.evenLi { color: goldenrod; font-size: 1em; } </style> <script type="text/javascript"> $(function () { //匹配所有含有id的元素 $("#list > li[id]").addClass("firstLi"); //选中id等于testLi的元素 $("#list > li[id=‘testLi‘]").addClass("lastLi"); //选中id不等于testLi的元素 $("#list > li[id!=‘testLi‘]").addClass("lastLi"); //选中id属性以test开头的元素 $("#list > li[id^=‘test‘]").addClass("oddLi"); //选中id属性以Li2结尾的元素 $("#list > li[id$=‘Li2‘]").addClass("evenLi"); //选中id属性包含Li的元素 $("#list > li:lt(4)[id*=‘Li‘]").addClass("oddLi"); }) </script> </head> <body> <div> <ol id="list"> <li>第1行</li> <li id="testLi">第2行</li> <li id="testLi1">第3行</li> <li id="testLi2">第4行</li> <li>第5行</li> <li><b>第6行</b></li> <li></li> <li id="testLi3">第7行</li> <li>第8行</li> </ol> </div> </body> </html>
子元素过滤选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子元素选择过滤器</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style type="text/css"> li.firstLi { color: saddlebrown; } li.lastLi { color: red; } li.oddLi { color: blueviolet; font-size: 1em; } li.evenLi { color: goldenrod; font-size: 1em; } </style> <script type="text/javascript"> $(function () { //选中li父元素第三个元素 $("li:nth-child(3)").addClass("lastLi"); //选中li父元素第一个元素 $("li:first-child").addClass("lastLi"); //选中li父元素最后一个元素 $("li:last-child").addClass("lastLi"); //选中li父元素只有一个元素的元素 $("li:only-child").addClass("lastLi"); }) </script> </head> <body> <div> <ol id="list"> <li>第1行</li> <li id="testLi">第2行</li> <li id="testLi1">第3行</li> <li id="testLi2">第4行</li> <li>第5行</li> <li><b>第6行</b></li> <li></li> <li id="testLi3">第7行</li> <li>第8行</li> </ol> </div> </body> </html>
表单对象属性过滤选择器：
表单选择器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单选择器</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style type="text/css"> .textColor { color: blue; } </style> <script type="text/javascript"> $(function () { $("#form1 :text").addClass("textColor"); $("#form1 :radio").addClass("textColor"); $("#ageSelect").addClass("textColor"); }); </script> </head> <body> <div> <h4>表单选择器</h4> <form id="form1"> 姓名： <input type="text" name="name"><br> 户口：<input type="radio" name="home" value="town" checked>城镇 <input type="radio" name="home" value=="country"> 农村<br> 年龄： <select name="age" id="ageSelect"> <option value="lt18">18岁以下 <option value="bt18and25">18-35岁 <option value="bt36and65">36-65岁 <option value="gt65">65岁以上 </select><br> </form> </div> </body> </html>
学习总结了JQuery的选择器使用。
标签：index checked 精确 doc src 单元素 基本 动画 rip
原文地址：http://www.cnblogs.com/whoislcj/p/6999128.html
