jquery-$()函数的用法及一些常用的选择器

（1）包装DOM元素，以便于操作（jquery选择器）

（2）作为几个通用的实用工具函数的命名空间前缀，例如，删除字符串前后空格的实用函数，其调用方法如下所示：

        $.trim(str) ;

（3） 文档就绪处理程序：包装文档实例，然后调用ready()方法，当文档为操作准备就绪的时候就执行该函数

（4） 创建DOM元素，通过给$()函数传递包含html标记的字符串，可以即时创建相应的DOM元素,例如$("<p>Hello word</p>")

二、jquery选择器

  基本选择器：                                                                                                                                                         

 1、ID选择器            例：$(#test) 选取id为test的元素

 2、class选择器        例：$(“.test”) 选取所有class为test的元素

 3、元素标签选择器    例：$(“p”)选取所有的<p>元素。

 4、通配符选择器       例：$(“*”)选取所有的元素。

 5、群组选择器          例：$(“p a.test”)选取在p元素内 拥有class为test的a元素。

   层次选择器 ：                                                                                                                                                                                            

 层次选择器适合于通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相 邻元素和兄弟元素。

 1、后代元素选择器    例:  $(“div span”)选取<div>里的所有的<span>元素。

 2、子元素选择器       例：$(“div>span”)选取<div>元素下元素名是<span>的子元素。

 3、相邻元素选择器    例：$(“.one+div”)选取class为one的下一个<div>兄弟元素。

 4、兄弟元素选择器    例：$(“#two~div”)选取Id为two的元素后面的所有<div>兄弟元素。

  过滤选择器：                                                                                                                                                                          

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS    中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。

 一、基本过滤选择器：

1、:first     选取第1个元素        例如：$(“div:first”)选取所有<div>元素中第1个<div>元素。

2、:last      选取最后一个元素    例如：$(“div:last”)选取所有<div>元素中最后1个<div>元素。

3、:not(selector)  去除所有与给定选择器 匹配的元素      例如：$(“input:not(.myClass)”)选取class不是myClass的<input>元素。

4、:even    选取索引(从0开始)是偶数 的所有元素   例如：$(“input:even”)选取索引是偶数的<input>元素。

5、:odd    选取索引(从0开始)是奇数 的所有元素     例如：$(“input:odd”)选取索引是奇数的<input>元素。

6、:eq(index)   选取索引(从0开始)等于 index的元素    例如：$(“input:eq(1)”)选取索引等于1的<input>元素。

7、:gt(index)   选取索引(从0开始)大于 index的元素     例如：$(“input:gt(1)”)选取索引大于1的<input>元素。

8、:lt(index)     选取索引(从0开始)小于 index的元素    例如：$(“input:lt(1)”)选取索引小于1的<input>元素。(不包括1)

9、:header     选取所有的标题元素，即 <h1>到<h6>   例如：$(“:header”)选取网页中所有的<h1>,<h2>,<h3>...

10、:animated      选取当前正在执行动画的 所有元素     例如：$(“div: animated”)选取正在执行动画的<div>元素。

二、内容过滤选择器

1、:contains(text)     $("div:contains(‘test‘)")选取含有文本内容为test的<div>元素

2、:empty      选取不包含子元素或文本的空元素   例：$("div:empty")选取不包含子元素或文本的空<div>元素

3、:has(selector)  选取含有给定选择器 匹配的元素的元素  例：$("div:has(.myClass)")选取含有class为 myClass的元素的<div>元素

4、:parent   选取含有子元素或文本的元素  例：$("div:parent")选取含有子元素或文本的<div>元素

三、可见性过滤选择器

1、:hidden  选取所有不可见的元素   例如：$("div:hidden")选取所有不可见的<div>元素

2、:visible   选取所有不可见的元素  例如：$("div:visible")选取所有可见的<div>元素

四、属性过滤选择器

1、[attribute]  选取拥有此属性的元素   例如：$("div[id]")选取拥有属性id的元素

2、[attribute=value]   例如：$("div[title=test]")选取属性 title 为test的<div>元素

3、[attribute!=value]  例如： 选取属性的值不等于value的元素

4、[attribute^=value]  选取属性的值以value开始的元素   例如：$("div[title^=test]")选取属性 title 以 test 开始的<div>元素

5、[attribute$=value]    选取属性的值以value结束的元素 例如： $("div[title$=test]")选取属性 title 以 test 结束的<div>元素

6、[attribute*=value]   选取属性的值含有value的元素   例如：$("div[title*=test]")选取属性 title 含 有 test 的<div>元素

7、[selector1][selector2]...[selectorN]  选取匹配以上所有属性 选择器的元素  例如：$("div[id][title*=test]")选取拥有属性id， 且属性 title 含有 test 的<div>元素

五、子元素过滤选择器

1、:nth-child(index/  even/odd/equation)  选取每个父元素下的第index(索引值为奇数/  索引值为偶数/索引值等于某个表达式)个子元  素，index从1开始

 例如：$("div:nth-child(1)")选取每个<div>中第一个子元素

2、:first-child   选取每个父元素下的第1个子元素   例如：$("div :first-child")选取每个<div>下第一个子元素

3、:last-child   选取每个父元素下的最后1个子元素  例如：$("div :last-child")选取每个<div>下最后一个子元素

4、:only-child   选取只有唯一子元素的元素的子元素   例如：$("div :only-child")选择只有一个子元素的<div>元素

 

六、表单对象属性过滤选择器

 

1、:enabled   选取所有可用元素  例如：$("body:enabled")选取页面内所有可用元素 

2、:disabled  选取所有不可用元素  例如：$("body:disabled")选取页面内所有不可用元素

3、:checked   选取所有被选中的元素(单选框、复选框)  例如：$("input:checked")选取所有被选中的<input>元素

4、:selected  选取所有被选中的选项元素(下拉列表)   例如：$("select:selected")选取所有被选中的选项元素

表单选择器                                                                                                                                                                                

1、:input            $(“:input”)选取所有<input>,<textarea>,<select>和<button>元素。

2、:text             $(“:text”)选取所有的单行文本框。

3、:password     $(“: password”)选取所有的密码框。

4、:radio            $(“: radio”)选取所有的单选框。

5、:checkbox      $(“:checkbox”)选取所有的复选框。

6、:submit         $(“: submit”)选取所有的提交按钮。

7、:image          $(“: image”)选取所有的图像按钮。

8、:reset           $(“: reset”)选取所有的重置按钮。

9、:button         $(“: button”)选取所有的按钮。

10、:file            $(“: file”)选取所有的上传域。

11、:hidden      $(“: hidden”)选取所有不可见元素。