jQuery选择器
（重新捡起jQuery）
- 基本选择器
| 选择器 | 功能描述 | 返回值 |
| #id | 根据给定的ID匹配一个元素 | 单个元素 |
| element | 根据给定的元素名称匹配所有元素 | 元素集合 |
| .class | 根据给定的类匹配元素 | 元素集合 |
| * | 匹配所有元素 | 元素集合 |
| selector1，selector2 | 将每一个选择器匹配到的元素合并后一起返回 | 元素集合 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jQuery基本选择器</title> <meta charset="utf-8" /> <script src="~/Scripts/jquery-3.1.1.min.js"></script> <style type="text/css"> body { font-size:12px;text-align:center } .clsFrame { width:65px;height:100px } .clsFrame div, span { display:none;float:left;width:65px;height:65px;border:1px solid #00ffff;margin:8px } </style> <script type="text/javascript"> //id选择器 $(function() { $("#divOne").css("display", "block"); }) //元素名匹配元素 $(function () { $("div span").css("display", "block"); }) //类匹配元素 $(function () { $(".clsFrame .clsOne").css("display", "block"); }) //匹配所有元素 $(function () { $("*").css("display", "block"); }) //合并匹配的元素 $(function () { $("#divOne,span").css("display", "block"); }) </script> </head> <body> <div class="clsFrame"> <div id="divOne">ID</div> <div class="clsOne">CLASS</div> <span>Span</span> </div> </body> </html>
- 层次选择器
| 选择器 | 功能描述 | 返回值 |
| ancestor descendant | 根据祖先元素匹配所有的后代元素 | 元素集合 |
| parent>child | 根据父元素匹配所有的子元素 | 元素集合 |
| prev+next | 匹配所有紧接在prev元素后的相邻元素 | 元素集合 |
| prev~siblings | 匹配prev元素之后的所有兄弟元素 | 元素集合 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jQuery层次选择器</title> <meta charset="utf-8" /> <script src="../Scripts/jquery-3.1.1.min.js"></script> <style type="text/css"> body { font-size:12px;text-align:center } div,span { float:left;border:1px solid #ff0000;margin:8px;display:none } .clsFraA{ width:65px;height:65px } .clsFraP { width:45px;height:45px;background-color:#ffd800 } .clsFraC { width:25px;height:25px;background-color:#0026ff } </style> <script type="text/javascript"> //匹配后代元素 $(function () { $("#divMid").css("display", "block"); $("div span").css("display", "block"); }) //匹配子元素 $(function () { $("#divMid").css("display", "block"); $("div>span").css("display", "block"); }) //匹配后面元素 $(function () { $("#divMid+div").css("display", "block"); $("#divMid").next().css("display", "block"); }) //匹配所有后面的元素 $(function () { $("#divMid~div").css("display", "block"); $("#divMid").nextAll().css("display", "block"); }) </script> </head> <body> <div class="clsFraA">Left</div> <div class="clsFraA" id="divMid"> <span class="clsFraP" id="Span1"> <span class="clsFraC" id="Span2"></span> </span> </div> <div class="clsFraA">Right_1</div> <div class="clsFraA">Right_2</div> </body> </html>
| 选择器 | 功能描述 | 返回值 |
| first() 或 :first | 获取第一个元素 | 单个元素 |
| last() 或 :last | 获取最后一个元素 | 单个元素 |
| :not(selector) | 获取除给定选择器外的所有元素 | 元素集合 |
| :even | 获取所有索引值为偶数的元素，索引号从0开始 | 元素集合 |
| :odd | 获取所有索引值为奇数的元素。索引号从0开始 | 元素集合 |
| :eq(index) | 获取指定索引值的元素，索引号从0开始 | 单个元素 |
| :gt(index) | 获取所有大于给定索引值的元素，索引号从0开始 | 元素集合 |
| :lt(index) | 获取所有小于给定索引值的元素，索引号从0开始 | 元素集合 |
| :header | 获取所有标题类型的元素，如h1，h2...... | 元素集合 |
| :animated | 获取正在执行动画效果的元素 | 元素集合 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jQuery简单过滤选择器</title> <meta charset="utf-8" /> <script src="../Scripts/jquery-3.1.1.min.js"></script> <style type="text/css"> body { font-size:12px;text-align:center; } div { width:241px;height:83px;border:1px,solid,#ff0000; } h1 { font-size:13px; } ul { list-style-type:none;padding:0px; } .DefClass, .NotClass { width:60px;height:23px; line-height:23px;float:left; border-top:1px solid #ffd800; border-bottom:1px solid #4cff00; } .GetFocus { width:58px;border:1px solid #808080; background-color:#ff6a00; } #spnMove { width:238px;height:30px;line-height:30px; } </style> <script type="text/javascript"> $(function () { //增加第一个元素类别 $("li").first().addClass("GetFocus"); $("li:first").addClass("GetFocus"); //增加最后一个元素类别 $("li:last").addClass("GetFocus"); $("li").last().addClass("GetFocus"); //增加除去所有给定选择器匹配的元素类别 $("li:not(.NotClass)").addClass("GetFocus"); //增加所有索引值为偶数的元素类别 $("li:even").addClass("GetFocus"); //增加所有索引值为基数的元素类别 $("li:odd").addClass("GetFocus"); //增加一个给定索引值的元素类别 $("li:eq(6)").addClass("GetFocus"); //增加所有大于给定索引值的元素类别 $("li:gt(4)").addClass("GetFocus"); //增加所有小于给定索引值的元素类别 $("li:lt(4)").addClass("GetFocus"); //增加标题类元素类别 $("div h1").css("width", "248").css("height","30"); $(":header").addClass("GetFocus"); //增加动画效果元素类别 animateIt(); $("#spnMove:animated").addClass("GetFocus"); }) function animateIt() { $("#spnMove").slideToggle("slow", animateIt); } </script> </head> <body> <div> <h1>基本过滤选择器</h1> <ul> <li class="DefClass">item 0</li> <li class="DefClass">item 1</li> <li class="DefClass">item 2</li> <li class="DefClass">item 3</li> <li class="NotClass">item 4</li> <li class="DefClass">item 5</li> <li class="DefClass">item 6</li> <li class="DefClass">item 7</li> </ul> <span id="spnMove">Span Move</span> </div> </body> </html>
| 选择器 | 功能描述 | 返回值 |
| :contains(text) | 获取包含给定文本的元素 | 元素集合 |
| :empty | 获取所有不包含元素或文本的空元素 | 元素集合 |
| :has(selector) | 获取含有选择器所匹配的元素 | 元素集合 |
| :parent | 获取含有子元素或者文本的元素 | 元素集合 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>使用jQuery内容过滤选择器</title> <meta charset="utf-8" /> <script src="../Scripts/jquery-3.1.1.min.js"></script> <style type="text/css"> body { font-size:12px;text-align:center; } div { float:left;border:1px solid #ff0000;margin:8px; width:56px;height:56px;display:none; } span { float:left;border:1px solid #ff0000;margin:8px; width:30px;height:30px;background-color:#b6ff00; } </style> <script type="text/javascript"> $(function() { //显示包含给定文本的元素 $("div:contains('K')").css("display", "block"); //显示所有空元素 $("div:empty").css("display", "block"); //显示含有选择器所匹配的元素 $("div:has(span)").css("display", "block"); //显示含有子元素或者文本的元素 $("div:parent").css("display", "block"); }) </script> </head> <body> <div>AKEKE</div> <div><span></span></div> <div>Akeke</div> <div></div> </body> </html>
| 选择器 | 功能描述 | 返回值 |
| :hidden | 获取所有不可见元素，或者type为hidden的元素 | 元素集合 |
| :visible | 获取所有可见元素 | 元素集合 |
这个不多加练习了
| 选择器 | 功能描述 | 返回值 |
| [attribute] | 获取包含给定属性的元素 | 元素集合 |
| [attribute=value] | 获取等于给定的属性是某个特定值的元素 | 元素集合 |
| [attribute!=value] | 获取不等于给定的属性是某个特定值的元素 | 元素集合 |
| [attribute^=value] | 获取给定的属性是以某些值开头的元素 | 元素集合 |
| [attribute$=value] | 获取给定的属性是以某些值结尾的元素 | 元素集合 |
| [attribute*=value] | 获取给定的属性是为包含某些值的元素 | 元素集合 |
| [selector1][selector2][selectorN] | 获取满足多个条件的复合属性的元素 | 元素集合 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>属性过滤选择器</title> <meta charset="utf-8" /> <script src="../Scripts/jquery-3.1.1.min.js"></script> <style type="text/css"> body { font-size:12px;text-align:center; } div { float:left;border:1px solid #000000;margin:8px; width:75px;height:75px;display:none; } </style> <script type="text/javascript"> $(function () { //显示所有含有ID属性的元素 $("div[id]").show(1000); //显示title属性值为A的元素 $("div[title=A]").show(1000); //显示title属性值不是A的元素 $("div[title!=A]").show(2000); //显示所有属性title的值以A开头的元素 $("div[title^=A]").show(1000); //显示所有属性title的值以C结尾的元素 $("div[title$=C]").show(1000); //显示所有属性title值中含有B的元素，且显示属性id值是divAB的元素 $("div[title*=B][id=divAB]").show(); }) </script> </head> <body> <div id="divID">ID</div> <div title="A">Title A</div> <div id="divAB" title="AB">ID<br />Title AB</div> <div title="ABC">Title ABC</div> </body> </html>
| 选择器 | 功能描述 | 返回值 |
| :nth-child(eq|even|odd|index) | 获取每个父元素下的特定位置元素，索引号从1开始 | 元素集合 |
| :first-child | 获取每个父元素下的第一个子元素 | 元素集合 |
| :last-child | 获取每个父元素下的最后一个子元素 | 元素集合 |
| :only-child | 获取每个父元素下的仅有的一个子元素 | 元素集合 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>子元素过滤选择器语法</title> <meta charset="utf-8" /> <script src="../Scripts/jquery-3.1.1.min.js"></script> <style type="text/css"> body { font-size:12px;text-align:center; } ul { width:241px;list-style-type:none;padding:0px; } ul li{ height:23px;width:60px;line-height:23px; float:left;border-top:1px solid #4cff00; border-bottom:1px solid #4cff00;margin-top:5px; } .GetFocus { width:58px;border:1px solid #ff0000; background-color:#0026ff; } </style> <script type="text/javascript"> $(function () { //增加每个父元素下的第二个子元素类别 $("li:nth-child(2)").addClass("GetFocus"); //增加每个父元素下的第一个子元素类别 $("li:first-child").addClass("GetFocus"); //增加每个父元素下的最后一个子元素类别 $("li:last-child").addClass("GetFocus"); //增加每个父元素下只有一个子元素类别 $("li:only-child").addClass("GetFocus"); }) </script> </head> <body> <ul> <li>item 1-0</li> <li>item 1-1</li> <li>item 1-2</li> <li>item 1-3</li> </ul> <ul> <li>item 2-0</li> <li>item 2-1</li> <li>item 2-2</li> <li>item 2-3</li> </ul> <ul> <li>item 3-0</li> </ul> </body> </html>
| 选择器 | 功能描述 | 返回值 |
| :enabled | 获取表单中所有属性为可用的元素 | 元素集合 |
| :disabled | 获取表单中所有属性为不可用的元素 | 元素集合 |
| :checked | 获取表单中所有被选中的元素 | 元素集合 |
| :selected | 获取表单中所有被选中option的元素 | 元素集合 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>表单对象属性过滤器选择器</title> <meta charset="utf-8" /> <script src="../Scripts/jquery-3.1.1.min.js"></script> <style type="text/css"> body { font-size:12px;text-align:center; } div { display:none; } select { height:65px; } .clsIpt { width:100px;padding:3px; } .GetFocus { border:1px solid #ffd800;background-color:#ff0000; } </style> <script type="text/javascript"> $(function () { $("#divA").show(3000); //增加表单中所有属性为可用的元素类别 $("#form1 input:enabled").addClass("GetFocus"); //增加表单中所有属性为不可用的元素类别 $("#form1 input:disabled").addClass("GetFocus"); $("#divB").show(2000); //增加表单中所有被选中的元素类别 alert($("#form1 input:checked").val()); //显示表单中所有被选中的option的元素内容 $("#divC").show(2000); $("#Span2").html("被选中的是"+$("select option:selected").text()); }) </script> </head> <body> <form id="form1" style="width:400px"> <div id="divA"> <input type="text" value="可用文本框" class="clsIpt"/> <input type="text" disabled="disabled" value="不可用文本框" class="clsIpt"/> </div> <div id="divB"> <input type="checkbox" checked="checked" value="1"/>选中 <input type="checkbox" value="0"/>未选中 </div> <div id="divC"> <select multiple="multiple"> <option value="0">item 0</option> <option selected="selected" value="1">item 1</option> <option value="2">item 2</option> <option value="3">item 3</option> </select> <span id="Span2"></span> </div> </form> </body> </html>
| 选择器 | 功能描述 | 返回值 |
| :input | 获取所有input、textare、select | 元素集合 |
| :text | 获取所有单行文本框 | 元素集合 |
| :password | 获取所有密码框 | 元素集合 |
| :radio | 获取所有单选按钮 | 元素集合 |
| :checked | 获取所有复选框 | 元素集合 |
| :submit | 获取所有提交按钮 | 元素集合 |
| :image | 获取所有图像域 | 元素集合 |
| :rest | 获取所有重置按钮 | 元素集合 |
| :button | 获取所有按钮 | 元素集合 |
| :file | 获取所有文件域 | 元素集合 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>表单选择器语法</title> <meta charset="utf-8" /> <script src="../Scripts/jquery-3.1.1.min.js"></script> <style type="text/css"> body { font-size:12px;text-align:center; } form { width:250px; } textarea, select, button, input, span { display:none; } .btn { border: 1px solid #ff0000; padding: 2px; margin:3px; width: 60px; background-color: #cccccc; background-image: -moz-linear-gradient(top, #cccccc, #eeeeee); background-image: -o-linear-gradient(top, #cccccc, #eeeeee); background-image: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#eeeeee)); background-image: -webkit-linear-gradient(top, #cccccc, #eeeeee); background-image: linear-gradient(to bottom, #cccccc, #eeeeee); } .txt { border:1px solid #ff6a00;padding:3px;margin:3px } .img { padding:3px;border:1px solid #b6ff00;width:241px;height:200px; } .div { border:1px solid #00ffff;background-color:#00ffff; } </style> <script type="text/javascript"> $(function () { //显示input类型元素的总数量 $("#form1 div").html("input类型元素总数量：" + $("#form1 :input").length); $("#form1").addClass("div"); //显示所有单行文本框元素 $("#form1 :text").show(3000); //显示所有密码框 $("#form1 :password").show(1000); //显示所有的单选框按钮对象 $("#form1 :radio").show(); $("#Span1").show(); //显示所有复选框对象 $("#form1 :checkBox").show(1000); $("#Span2").show(1000); //显示所有提交按钮 $("form :submit").show(1000); //显示所有图像区域 $("form :image").show(1000); //显示所有重置按钮对象 $("form :reset").show(); //显示所有按钮对象 $("form :button").show(1111); //显示所有文件域对象 $("form :file").show(); }) </script> </head> <body> <form id="form1"> <textarea class="txt">TextArea</textarea> <select><option value="0">Item 0</option></select> <input type="text" value="Text" class="txt"/> <input type="password" value="123456" class="txt"/> <input type="radio"/><span id="Span1">Radio</span> <input type="checkbox"/> <span id="Span2">CheckBox</span> <input type="submit" value="Submit" class="btn"/> <input type="image" title="Image" src="5670d8646a4b6.jpg" class="img"/> <input type="reset" value="Reset" class="btn"/> <input type="button" value="Button" class="txt"/> <input type="file" title="File" class="txt"/> <div id="divShow"></div> </form> </body> </html>
到此，对于jQuery的选择器就学习结束了。
