JS学习十六：JQuery选择器
jQuery选择器，支持CSS语法，能够轻松快速地对页面进行设置。
jQuery选择器的语法格式：
$(selector).methodName();
selector是一个字符串表达式，用于识别DOM中的元素，使后使用jQuery提供的方法集合加以设置。
多个jQuery操作，可以以链的形式串起来，语法如下：
$(selector).method1().menthod2().method3();
JQ的$(selector) 相当于 原生JS的document.getElementBy....(selector)
jQuery选择器的优势 ：
- 代码更简单：jQuery库中封装了大量可以直接通过选择器调用的方法或函数。比如，通过id获取元素节点，使用$('id值')，代替document.getElementById(“id值")函数；通过标签名称获取元素节点，使用$('tagName')，代替document.getElementByTagName("tagName")函数。
- 支持CSS1到CSS3选择器
- jQuery不需要你考虑主流浏览器的兼容性问题。
jQuery选择器分类：
基本选择器：包括id选择器、标签选择器、类名选择器、复合选择器、通配符选择器、ancestor descendant选择器等
层次选择器：parent > child选择器，prev + next选择器，prev - siblings选择器.........等
过滤选择器：内容过滤器、可见性过滤、表单对象的属性过滤器、子元素过滤器....等
属性选择器：[attribute]、[attribute=value]、[attribute!=value]、[attribute*=value].......等
表单选择器： :input，:button, :checkbox，:file，:hidden，:image.......等
下载jQuery脚本：https://jquery.com/
将下载好的jquery-3.3.1.min，放到项目的js目录下。
在项目的HTML文件中，引入jQuery：
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script>
使用$(document).ready(func)，代替window.onload(func)：
<body> <p>body content......</p> <script type="text/javascript"> //ready()：等所有页面加载完成后,才会执行此方法 //相当于window.onload().但是多个window.onload()定义的函数会覆盖 //ready(),定义多个ready函数,不会覆盖 $(document).ready(function() { alert("end1") }) $(document).ready(function() { alert("end2") }) alter("body") </script> </body>
在之前的学习中，我们要获取DOM对象，通常通过document.get....获取DOM对象。如：
DOM对象：
var jsDiv1 = document.getElementById("id值") var jsDiv2 = document.getElementsByTagName("标签的name属性值") var jsDiv3 = document.getElementsByClassName("标签的class属性值") var jsDiv4 = document.getAnonymousElementByAttribute("标签的属性值")
使用jQuery代替它们的语法：
jQuery对象：
var jsDiv1 = $("#id属性值") var $jsDiv2 = $("标签") var jsDiv3 = $(".class属性值") var $jsDiv2 = $("[attribute=value]")
注意：DOM对象和jQuery对象，各自对应的方法，不可交叉使用。
将jQuery对象，转换成DOM对象：
<body>
<div id="box1"></div>
<script type="text/javascript">
//DOM对象
var jsDiv = document.getElementById("box1")
//jQuery对象
var $jqDiv = $("#box1").html("哈哈")
//jq --> dom 方式一:
var jsDiv1 = $jqDiv[0]
console.log($jqDiv)
console.log(jsDiv1)
//jq --> dom 方式二:
var jsDiv2 = $jqDiv.get(0)
console.log($jqDiv)
console.log(jsDiv2)
</script>
</body>
JQ对象，转成DOM对象：
//jq --> dom 方式一: var jsDiv1 = $jqDiv[0] //jq --> dom 方式二: var jsDiv2 = $jqDiv.get(0)
将DOM对象，转换成jQ对象：
// dom --> jQ: var $jqDiv1 = $(jsDiv)
一、基本选择器
1.jq的ID选择器：$("#id属性值")，如$("#box")
相当于dom的id选择器：document.getElementById("id属性值")
<div id="box1"></div>
<script type="text/javascript">
//DOM对象
var jsDiv = document.getElementById("box1")
//jQuery对象
var $jqDiv = $("#box1").html("哈哈")
</script>
.html（元素内容）：设置元素内容，相当于dom的innerhtml =元素内容
2.jq的元素选择器：$("标签名称")，如$("div")
相当于dom的元素选择器：document.getElementByTagName("标签名称")
示例：获取所在div标签
<div id="box1"></div>
<div id="box2"></div>
<script type="text/javascript">
var $jqDivs = $("div")
//相当于
var jsDivs = document.getElementsByTagName("div")
console.log($jqDivs)
console.log(jsDivs)
</script>
var $jqDivs = $("div") var jsDivs = document.getElementsByTagName("div") //jq对象,可以一次性设置所有对象集中的元素内容 $jqDivs.html("aaa") //dom对象,一次只可以设置一个元素的元素内容 jsDivs[0].innerHTML = "bbbb" jsDivs[1].innerHTML = "bbbb"
3.jq的类名选择器：$(".class属性值")
相当于dom的document.getElementByClassName("class属性值")
<body>
<div id="box1" class="ap"></div>
<div id="box2" class="ap"></div>
<script type="text/javascript">
var $jqDivs = $(".ap")
var jsDivs = document.getElementsByClassName("ap")
console.log($jqDivs)
console.log(jsDivs)
console.log($jqDivs == jsDivs)
</script>
</body>
4.jq的复合选择器：$("select1, select2, .....selectN")，如$("div,#box1, .ap")，并集。OR的关系。
相当于DOM的复合选择器.....
复合选择器：可以将多个选择器（可以是ID选择器，元素选择器或类名选择器）组合在一起，两个选择器之间使用逗号“，”分隔。只要符合其中的任何一个筛选条件，就会匹配，并集，返回的是一个集合形式的JQ包装集。
<body>
<div id="box1" class="ap"></div>
<div id="box2" class="ap"></div>
<p></p>
<script type="text/javascript">
var $jqObj = $(".ap,p") //类名为ap,标签为p的元素
$jqObj.html("abc")
</script>
</body>
5.jq的通配符选择器： $（“*”）
二、层次选择器
1.后代选择器： ancestor descendant选择器：$("ancestor descendant")，如$("ul li")匹配ul元素下的所有li元素
ancestor：是指任何有效的选择器。
descendant：是用以匹配元素的选择器，并且它是ancestor所指定元素的后代元素。
同CSS的后代选择器。
<div id="box3"> <p>abc</p> <div> <p>123</p> </div> </div> <script type="text/javascript"> var $jqObj = $("#box3 p") //div选择器下面的所有p元素 $jqObj.html("html.......") </script>
2.父子选择器：parent>child选择器：$("parent>child")
parent：是指任何有效的选择器。
child：是用以匹配元素的选择器，并且它是parent元素的直接子元素。
如：$("form>inpu")，匹配表单中所有的子元素input。
同CSS的父子选择器。
<div id="box3"> <p>abc</p> <div> <p>123</p> </div> </div> <script type="text/javascript"> var $jqObj = $("#box3>p") //div选择器下面的直接子元素p元素 $jqObj.html("html.......") </script>
3. prev + next选择器：$("prev + next")，同级紧接着的元素。
用于匹配所有紧接在prev元素后的next元素。其中，prev和next是同级元素。
prev：是指任何有效的选择器。
next：是一个有效选择器，并且紧接着prev选择器的同级元素。
如：$("div + img")，匹配idv标记后的img标记。
<div id="box1" class="ap">d1<div></div></div> <div class="ap"></div> <div id="box2" class="ap">d2</div> <script type="text/javascript"> //第三个div,通过元素,id,class都不能唯一选中.此时使用 prev + next可以唯一选中 var $jqObj = $("#box1 + div").html("second....") //第三个div </script>
4.同辈选择器：prev ~ siblings选择器：$("prev ~ siblings")
prev ~ sibling：用于匹配prev元素之后的所有sibling元素，它们是同辈元素。
prev：是指任何有效的选择器。
siblings：是一个有效选择器，并且是prev的同辈的所有选择器。
如$("div ~ ul")，匹配div元素后面的同辈所有ul元素。
<div id="box1" class="ap">d1<div>sd</div></div> <div class="ap"></div> <div id="box2" class="ap">d2</div> <p></p> <div id="box3"> <p>abc</p> <div> <p>123</p> </div> </div> <script type="text/javascript"> //#box1后面的所有同辈div var $jqObj = $("#box1 ~ div").html("second....") </script> </body>
三、简单过滤器
简单过滤器：是指以冒号开头，通常用于实现简单过滤效果的过滤器。
:first：匹配找到的第一个元素，它是与选择器结合使用的。
如$("tr:first")，匹配表格的第一行
<p class="pp">aaaa</p> <p class="pp">bbbb</p> <p class="pp">cccccc</p> <script type="text/javascript"> var $jqObj = $(".pp:first").html("here......") </script>
：last：匹配找到的最后一个元素，它是与选择器结合使用的。
如$("tr:last")，匹配表格的最后一行
<p class="pp">aaaa</p> <p class="pp">bbbb</p> <p class="pp">cccccc</p> <p class="pp">dddd</p> <script type="text/javascript"> var $jqObj = $(".pp:last").html("here......") </script>
：even：匹配所有索引值为偶数的元素，索引值从0开始计算
如$("tr:even")，匹配索引值为偶数的表格行
<p class="pp">aaaa</p> <p class="pp">bbbb</p> <p class="pp">cccccc</p> <p class="pp">dddd</p> <script type="text/javascript"> //为偶数行的p标签,添加类 var $jqObj = $(".pp:even").addClass("app") //移除类 $jqObj.removeClass("app") </script>
：odd：匹配所有索引值为奇数的元素，以索引为标准的奇偶数，索引从0开始。
如$("tr:odd")，匹配索引值为奇数的表格行
：eq(index)：匹配一个给定索引值 的元素
如$("div:eq(1))，匹配第二个div元素。
<p class="pp">aaaa</p> <p class="pp">bbbb</p> <p class="pp">cccccc</p> <p class="pp">dddd</p> <script type="text/javascript"> var $jqObj = $(".pp:eq(1)").html("here") </script>
：gt(index)：匹配所有大于给定索引值的元素
<p class="pp">aaaa</p> <p class="pp">bbbb</p> <p class="pp">cccccc</p> <p class="pp">dddd</p> <script type="text/javascript"> var $jqObj = $(".pp:gt(1)").addClass("aap") </script>
.aap { background-color: darkmagenta; }
：lt(index)：匹配所有小于给定索引值的元素
:header：匹配如h1,h2,h3....之类的标题元素
<h1 class="pp">h1...</h1> <h2>h2...</h2> <script type="text/javascript"> var $jqObj = $(".pp:header").addClass("aap") </script>
如果是$(":header")，匹配所有h标签
：not(selector)：去除所有与给定选择器匹配的元素
如$("input:not(:checked))：匹配没有选中的input元素
示例：class属性不是pp的所有p标签
<p class="pp">aaaa</p> <p class="pp">bbbb</p> <p>cccccc</p> <p class="pp">dddd</p> <script type="text/javascript"> var $jqObj = $("p:not(.pp)").addClass("aap") </script>
:animated：匹配所有正在执行动画效果的元素
如$("div:animated")，匹配正在执行动画的div元素。
简单过滤器，示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.min.js" charset="UTF-8"></script> <style type="text/css"> td { font-size: 12px; padding: 3px; } .th { background-color: #B6DF48; font-weight: bold; text-align: center; } .even { background-color: #E8F3D1; } .odd { background-color: #F9FCEF; } </style> <body> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B"> <tr> <td width="11%" height="27">编号</td> <td width="14%">祝福对象</td> <td width="12%">祝福者</td> <td width="33%">字条内容</td> <td width="30%">发送时间</td> </tr> <tr> <td height="27">1</td> <td>琦琦</td> <td>妈妈</td> <td>愿你健康快乐的成长</td> <td>2014-08-15 13：06：06</td> </tr> <tr> <td height="27">1</td> <td>wgh</td> <td>无语</td> <td>每天好心情!</td> <td>2014-08-15 13：26：36</td> </tr> <tr> <td height="27">1</td> <td>无语</td> <td>有语</td> <td>愿你健康快乐的成长愿你健康快乐的成长愿你健康快乐的成长</td> <td>2014-08-15 13：06：06</td> </tr> <tr> <td height="27">1</td> <td>熊熊</td> <td>奶奶</td> <td>乖乖</td> <td>2014-08-15 16：08：06</td> </tr> </table> <script type="text/javascript"> $(document).ready(function(){ $("tr:even").addClass("even"); $("tr:odd").addClass("odd"); $("tr:first").removeClass("even"); $("tr:first").addClass("th"); }) </script> </body> </html>
四、内容过滤器
内容过滤器：就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。
：contains(text)：匹配包含给定文本的元素。如$("li:contains('word')")，匹配含有word文本内容的li元素
<p class="pp">aaaa</p> <p class="pp">bbnicebb</p> <p class="pp">cccccc</p> <p class="pp">dddd</p> <script type="text/javascript"> //文本含有"nice"的所有p标签 var $jqObj = $("p:contains('nice')").html("here......") </script>
：empty：匹配所有不包含文本的空元素，包括子元素中也是空文本的子元素。如，$("td:empty")，匹配不包含子元素或文本的单元格。
<p class="pp">aaaa</p> <p class="pp">bbnicebb</p> <p class="pp"></p> <p class="pp"><h1></h1></p> <script type="text/javascript"> //不包含文本或子元素的所有p标签 var $jqObj = $("p:empty").html("here......") </script>
：has(selector)：匹配含 有选择器所匹配元素的元素。如，$("td:has(p)")，匹配表格的单元格中，含有p标签的单元格
：parent：匹配含 有子元素或文本的元素。如，$("td:parent")，匹配不为空的单元格，即在该单元格中含有子元素或文本。
<p class="pp">aaaa</p> <p class="pp">bbnicebb</p> <p class="pp"></p> <p class="pp"><h1>h1...</h1></p> <p class="pp" id="pid">pppid</p> <script type="text/javascript"> //input标签中,class属性为aa的 var $jqObj = $("p:parent").addClass("aap") </script>
五、可见性过滤器
元素的可见状态有两种，分别是隐藏状态和显示状态。
可见性过滤器：就是利用元素的可见状态匹配。
：visible：匹配所有可见元素
：hidden：匹配所有不可见元素。
注意：在应用hidden过滤器时，display属性是none以及input元素的type属性为hidden的元素都会被匹配到。
<input type="text" value="this is..."/> <input type="hidden" value=""/> <input type="text" value="" style="display: none;"/> <script type="text/javascript"> var $jqObj = $("input:hidden") // console.log($jqObj) //可见的input var $jqObj1 = $("input:visible") console.log($jqObj1) //可见的input的值 console.log($jqObj1.val()) </script>
val赋值，可以给所有jq集合的所有匹配的input赋值。val取值，只能取第一个匹配的input的值。
<input type="text" value="this is..."/> <input type="text" value="aaa"/> <input type="hidden" value=""/> <input type="text" value="" style="display: none;"/> <script type="text/javascript"> var $jqObj2 = $("input:visible：last") console.log(.val()) </script>
六、表单对象的属性过滤器
表单对象的属性过滤器：通过表单元素的状态属性（例如选中、不可用等状态），匹配元素。
：checked，匹配所有选中的被选中元素。如，$("input:checked")，匹配所有被选中的input元素。
：disabled，匹配所有不可用元素。如，$("input:disabled")，匹配所有不可用的input元素。
：enabled，匹配所有可用的元素。如，$("input:enabled")，匹配所有可用的input元素。
：selected，匹配所有选中的option元素。如，$("select option:selected")，匹配所有被选中的选项元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.min.js" charset="UTF-8"></script> <style type="text/css"> .aap { background-color: #0000FF; } </style> <body> <form> <!-- checked属性，使input输入框默认被选中 --> 复选框1：<input type="checkbox" checked="checked", value="复选框1"/> 复选框2：<input type="checkbox" checked="checked", value="复选框2"/> 复选框3：<input type="checkbox" alue="复选框3"/> <br /> <!-- 属性disabled，使input输入框不可用 --> 不可用按钮：<input type="button" value="不可用按钮" disabled /> 不可用按钮：<input type="button" value="不可用按钮" disabled="disabled" /> <br /> 下拉列表框： <select onchange="selectVal()"> <option value ="列表项1">列表项1</option> <option value ="列表项2">列表项2</option> <option value ="列表项3">列表项3</option> </select> </form> <script type="text/javascript"> function selectVal(){ console.log("**********") console.log($("select option:selected").val()) } // 找到选中的复选框 var $jqObj = $("input:checked") console.log($jqObj) // 找到不可用的input输入框 var $jqObj1 = $("input:disabled") console.log($jqObj1) </script> </body> </html>
七、子元素过滤器
子元素过滤器：就是筛选给定某个元素的子元素，具体的过滤条件由选择器的种类而定。
：first-child，匹配所有给定元素的第一个子元素。如，$("ul li:first-child")，匹配ul元素中的第一个子元素。
：last-child，匹配所有给定元素的最后一个子元素。如，$("ul li:last-child")，匹配ul元素中的最后一个子元素。
：only-child，如果某个元素是它父元素中唯个的子元素，那么将匹配。如果父元素中含 有其它元素，则不会被匹配。
如，$("ul li:only-child")，匹配只含 一个li元素的ul元素中的li
：nth-child(index/even/odd/equation)，匹配每个父元素下的第几个子元素，或奇偶子元素，index从0开始。
如，$("ul li:nth-child(even)")，匹配ul中索引值为偶数的li元素。
如，$("ul li:nth-child(3)")，匹配ul中第3个li元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.min.js" charset="UTF-8"></script> <style type="text/css"> .aap { background-color: #0000FF; } </style> <body> <div id="box4"> <p>aaaaa</p> <p>bbbb</p> <p>ccc</p> <p>dddd</p> <p>eee</p> </div> <ul> <li><a>1</a></li> <li><a>2</a></li> <li>3</li> </ul> <script type="text/javascript"> //找到box4下的第一个子元素p //这样不行:w.fn.init [div#box4, prevObject: w.fn.init(1)] var $jqObj = $("#box4:first-child") console.log($jqObj) //这样ok:w.fn.init [p, prevObject: w.fn.init(1)] var $jqObj = $("#box4 p:first") console.log($jqObj) // 这样匹配不了,除非ul下的只有一个li var $jqObj1 = $("ul li:only-child") console.log($jqObj1) var $jqObj2 = $("ul li:nth-child(2)") </script> </body> </html>
八、属性选择器
属性选择器：就是通过元素的属性，作为过滤条件进行筛选对象
[attribute]，匹配包含给定属性的元素。如，$("div[name]")，匹配含 有name属性的div元素。
[attribute=value]，匹配属性值为value的元素。如，$("div[name='test']")，匹配name属性值为test的div元素。
[attribute!=value]，匹配属性值不为value的元素。如，$("div[name!='test']")，匹配name属性值不为test的div元素。
[attribute*=value]，匹配属性值含 有value的元素。如，$("div[name*='test']")，匹配name属性什中含有test的div元素。
[attribute^=value]，匹配属性值以value开始的元素。如，$("div[name^='test']")，匹配name属性值以test开头的div元素。
[attribute$=value]，匹配属性值以value结尾的元素。如，$("div[name$='test']")，匹配name属性值以test结尾的div元素。
[selector1][selector2][selector3]，复合属性选择器，交集。需要同时满足多个条件时，才匹配。
如，$("div[id][name^='test']")，匹配具有id属性，name属性以test开头的div元素。
九、选择器使用的注意事项
1.选择器中含有特殊符号的注意事项：
w3c规定，属性值中不能包含：“."，"#"，"("，")"等特殊字符。如果有的话，使用\\转义。
jq1.3.1以前，属性前要加@，jq1.3.1以后，不需要在属性前加@
2.选择器中含 有空格的注意事项：多一个空格或少一个空格，得到的选择器结果也是不同的。
posted on 2018-11-24 10:08 myworldworld 阅读(475) 评论(0) 收藏 举报
浙公网安备 33010602011771号