jquery选择器

关于页面元素的引用 通过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/