jquery选择器

匿名 (未验证) 提交于 2019-12-02 21:53:52
jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom条件等方法,jquery对象(集合对象)。Jquery使用$符号作为JQUERY的简化方式,某些其他JAVASCRIPT库中的函数(Portotype)同样使用$符号。
Varjq=jQuery.noconfilct();//用jq代替$ Jq(document).ready(function(){ });//防止文档在完全加载之前运行jquery代码而报错
 
1、$("*") 表示获取HTML标签以内所有的对象
2、$("#element") 等同于document.getElementById("element");
3、$(".abc") 表示获得HTML中所有使用了abc这个样式的元素
4、$("div") 表示获得HTML中所有的div元素
5、$("#a,.b,p") 表示获得ID是a的元素和使用了类样式b的元素以及所有的p元素 <pid="a"class="b">sss</p>
6、$("#a.bp") 表示获得了ID是a的元素所包含的使用了类样式的b元素中的所有的p元素 <divid="a1"><divclass="b1"><p>sfdf</p></div></div>
7、$("Element1Element2Element3Element...") 与css定义层级元素方式一样,只需要不同的元素之间有空格表示,前者父级后者子级以此类推。
8、$("div>input") 表示获取div下所有的input。
9、$("div+p") 表示匹配紧跟在div元素后的p一个元素==$("div").next("p")
10、$("div~p") 表示匹配跟在div元素后的所有p元素 ==$("div").nextAll("p")
11、$("Element:first") 获得在HTML页面中某种元素的第一个,比如$("div:first")表示获得第一个div
12、$("Element:last") 获得在HTML页面中某种元素的最后一个,比如$("div:last")表示获得最后一个div
13、$("Element:not(selector)")去除所有与给定选择器匹配的元素,比如$("input:not(:checked)")表示获得所有
 $("input:not(:checked)").attr("checked","true");//勾选所有未选中的复选框
14、$("Element:even")获得偶数行,从0开始计数
15、$("Element:odd")获得奇数行,从0开始计数
16、$("Element:eq(index)") 匹配一个给定索引值的元素,从0开始计数,比如$("div:eq(3)")表示获得HTML中的第4个div
17、$("Element:gt(index)")匹配所有大于给定索引值的元素,从0开始计数,比如$("p:gt(3)")表示获得比索引3也就是第4个p开始,之【后】所有的p
18、$("Element:lt(index)") 匹配所有小于给定索引值的元素,从0开始计数,比如$("p:lt(3)")表示获得比索引3也就是第2个p开始,之【前】所有的p
19、$(":header") 匹配h1,h2,h3...标题之类的元素
20、$("Element:contains(text)") 匹配元素对象中的文本是否包含某个字母或者某个字符串(符串或串(String)是由零个或多个字符组成的有限序列。)
<divid="aaa">123456789</div>  $("#aaa:contains('23')").css("text-decoration","underline");
21、$("Element:empty") 获得对象元素不包含文本或子元素
22、$("Element:parent") 以上面相反,获得对象元素包含文本或子元素
23、$("Element:has(selector)") 匹配含有某个元素是否包含某个元素比如$("p:has(span)")表示所有包含span元素的p元素
24、$("Element:hidden")匹配所有不可见元素,包括display:none以及input的属性是hidden都可以匹配得到。
25、$("Element:visible")与上面相反,匹配所有可见元素
26、$("Element[id]") 获得所有带有ID属性的元素
27、$("Element[attribute^=Kwoo]")获得所有某个属性值是以Kwoo开头的元素
28、$("Element[attribute$=Kwoo]")获得所有某个属性值是以Kwoo结尾的元素
29、$("Element[attribute*=Kwoo]")获得所有某个属性值包含Kwoo的元素
30、$("Element[selector1][selector2][....]")符合属性选择器,比如$("input[id][name][value=kwooshung]")表示获得带有ID、Name以及value是KwooShung的input元素。
31、$("Element:nth-child(index)") 选择父级下的第N个子级元素,索引从1开始
32、$("Element:first-child")匹配父级下的第一个子级元素
33、$("Element:last-child")匹配父级下的最后一个子级元素
35、$(:input) 只能匹配Input元素类型为input button select textarea
36、$(:text) 匹配所有的单行文本框
37、$(:password)匹配所有的密码框
38、$(:radio) 匹配所有的单选按钮
39、$(:checkbox)匹配所有的复选框
40、$(:submit)匹配所有的提交按钮
43、$(:button)匹配所有的按钮
44、$(:file) 匹配所有的文件上传域
45、$(:hidden) 匹配所有的不可见元素或者type为hidden的元素
46、$(:enabled) 匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮
47、$(:disabled) 匹配所有的不可用input元素,作用与上相反
48、$(:checked) 匹配所有选中的复选框元素
 
$(selector).delegate(childSelector,event,data,function);
jquery版本都可用
 
$(selector).live(event,data,function)
jquery1.8版本以前推荐使用该方法;jquery1.8版本之后就不建议使用了,是无效的,所以高版本的jquery推荐使用on()方法绑定事件。
 
$("#searchMoveVideoResult").on("click","ul li",function(){  
    $(this).css("border","5px solid #000");  
});  
//下面这样写就是错的了,一定要把动态添加的元素放到on()方法里面才行。</span>  
$("#searchMoveVideoResult ul li").on("click",function(){  
    $(this).css("border","5px solid #000");  
});  
 
 
 一些有用的资料:
Jquery API: http://jquery.cuishifeng.cn/on.html
bootstrap:https://v3.bootcss.com/css/
fontawesome:http://fontawesome.dashgame.com/
转载请标明出处:jquery选择器
文章来源: jquery选择器
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!