jQuery之选择器、过滤器

一、jQuery代码写在哪？

（1）引入jQuery文件：<script src="jquery-3.3.1.min.js" type="text/javascript"></script>

（2）jQuery文件写在哪：

<script type="text/javascript">
    $(document).ready(function () {
        
    })
</script>

需要等页面加载完毕，才加载到jQuery代码，跟window.onload原理差不多

 

获取jQuery对象：

<script type="text/javascript">
    $(document).ready(function () {
        var $jqDiv = $("#box1").html("sunck is a good man");
    })
</script>

 

jQ转DOM对象

（1）Var jsDiv1 = $jqDiv[0]

（2）var jsDiv2 = $jqDiv.get(0)

 

DOM对象转JQ对象

$jqDiv1 = $(jsDiv)     //$(DOM元素)

 

二、jQuery选择器

（1）基本选择器

①ID选择器：$(“#id”)

②元素选择器：$(“element”)

③类名选择器：$(“.div”)

④复合选择器:

⑤通配符选择器:$(“*”)

（2）层次选择器

①Ancestor descendant选择器：$(“ul li”) //匹配ul元素下的全部li元素

②parent>child选择器:parent代表父元素、child代表子元素；示例：$(“form>input”)  //匹配表单中的所有子元素input

③prev+next选择器：prev+next选择器用于匹配所有紧接在prev元素后的next元素。其中prev和next是同级的元素

示例：$(“div+img”)  //匹配<div>标记后的<img>标记

④prev~siblings选择器：用于匹配prev元素之后的所有siblings元素。Prev和siblings是同级元素。

示例：$(“div~ul”) //匹配div元素后面的同辈所有ul元素

 

三、简单过滤器：以冒号开头，通常用于实现简单过滤效果的过滤器

 

①:first  :匹配第一个元素

②:last  :匹配最后一个元素

③:even  :匹配所有索引值为偶数的元素

④:odd   :匹配所有索引值为奇数的元素

⑤:eq(index)  :匹配一个给定索引值的元素

示例：$(“div:eq(1)”)  //匹配第二个div元素

⑥:gt(index)   :匹配所有大于给定索引值的元素

⑦:lt(index)   :匹配所有小于给定索引值的元素

⑧:header   :匹配如h1,h2,h3.....之类的标题元素

⑨:not(selector)    :去除所有与给定选择器匹配的元素

示例：$(“p:not(.pp)”)   //找到所有p元素中，属性不是.pp的

⑩:animated     ：匹配所有正在执行动画的元素

 

四、内容过滤器

内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。

①:contained(text)   :匹配所有包含给定文本的元素

示例：$(“li:contained(‘word’)”) //匹配含有”word”文本内容的元素

②:empty    :匹配所有不包含子元素或者文本的空元素

③:has(selector)     :匹配含有选择器所匹配元素的元素

示例:  $(“td:has(p)”) //匹配td元素中含有<p>标签的

④:parent   :匹配所有含有子元素或者文本的元素（与empty相对）

 

 

五、可见性过滤器：元素的可见性有两种，分别是隐藏状态和显示状态，可见性过滤器就是利用元素的可见性去匹配的

①:visible   :匹配所有可见元素

②:hidden   :匹配所有不可见元素

 

Html/val设置值默认设置全部，取值默认取第一个

 

六、表单对象的属性过滤器

表单对象的属性过滤器通过表单元素的状态属性（例如选中、不可用等状态）匹配元素

①:checked  :匹配所有选中的被选中元素

②:disabled  :匹配所有不可用元素

③:enabled  :匹配所有可用的元素

④:selected  :匹配所有选中的option元素

 

七、子元素过滤器

①:first-child    :匹配所有给定元素的第一个子元素

示例：$(“ul li:first-child”) //匹配ul元素中的第一个子元素li

②:last-child    :匹配所有给定元素的最后一个子元素

③:only-child    :如果某个元素是它父元素中唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，则不会被匹配

示例：$(“ul li:only-child”)  //匹配只含有一个li元素的ul元素中的li

④:nth-child(index/even/odd/equation)   :匹配第几个子元素

 

八、属性选择器：通过元素的属性作为过滤条件进行筛选对象

①[attribute]   :匹配包含给定属性的元素

示例：$(“div[name]”) //匹配含有name属性的div元素

②[attribute=value]  :匹配属性值为value的元素

示例： $(“div[name=’test’]”) //匹配name属性是test的div元素

③[attribute!=value]   :匹配属性值不等于value的元素

④[attribute*=value]  :匹配属性值含有value的元素

⑤[attribute*=value]  :匹配以value开始的元素

⑥[attribute$=value]  :匹配属性值以value结束的元素

⑦[selector1][selector2][selectorN]    :复合属性选择器，需要同时满足多个条件时候使用

 

九、表单选择器

表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中

①:input :匹配所有的input元素

示例： $(“:input”) //匹配所有的input元素

$(“form :input”)  //匹配<form>标记中的所有input元素，需要注意，在form和:之间有一个空格

②:button   :匹配所有的普通按钮，即type=”button”的input元素

③:checkbox   :匹配所有的复选框

④:file    :匹配所有的文件域（即type=’file’）

⑤:hidden  :匹配所有的不可见元素

⑥:image  :匹配所有的图片

⑦:password  :匹配所有的密码域

⑧:radio    :匹配所有的单选按钮

⑨:reset    :匹配所有的重置按钮

⑩:submit   :匹配所有的提交按钮

  :text    :匹配所有的单行文本框

 

方法：$jqObj.attr(“checked”,”checked”)  //设置属性

.attr(“属性名”,”属性值”)