jquery选择器

 

$ 的选择器部分 :
凡是运用 $, 其返回值是一个 object
$ 选择器主要用于选择标签 . 基本用法是同 css 的选择器 . 但是 , 很让人兴奋的是 , 他支持常见的浏览器 , 而 css 中很多选择器是 IE6 所不支持的 .
1. 基本选择器 (3 种 ):
$(" 标签名 "), 如 $("p") 是选取了所有的 p 标签节点
$("#id 名 "), 如 $("#test") 是选取了 id 为 test 的标签节点
$(".class 名 "), 如 $(".test") 是选取了所有 class 为 test 的标签节点
上面的 $(" 标签名 ") 和 $(".class 名 ") 返回的都是所有满足的节点 , 至于进一步筛选可以添加一些函数 , 如 eq,gt,lt 等等 .
2. 组选择器 :
下面还是现做一个约定 : 把 " 标签名或 #id 名或 .class 名 " 记作 mix, 则 mix 表示一个标签名 , 或一个 #id 或一个 .class.
$("mix,mix,mix,..."), 如 :$("div,#test1,p,.test2,#test3")  

3. 后代选择器 :
$("mix mix"), 当然可以是多个嵌套 , 但后代选择器可以是深层子代 , 所以 $("mix mix mix ...") 这种写法作用不大 . 例子 :$("div .test"): 在 div 标签内的所有具有 test 的 class 的后代元素 ( 就是被 div 嵌套的 class 属性为 test 的标签 )
可以见 DEMO 。

4. 子选择器 :
$("mix>mix"), 这个放在后代选择器后面是为了和它做对比 . 子选择器只能选择第一代子代 . 不处理深层嵌套 . 例子 :
$("div>.test")
<div><p class="test"></p></div> 对这里的 p 段落标签有效 . 但对
<div><p><p class="test"></p></p></div> 对这里的 p 段落标签无效 , 这里要用
$("div .test)

5. 临近选择器 :
$("mix+mix"), 选取下一个兄弟节点 . 如 :$("div +#test"),id 为 test 的的节点必须是 div 的下一个兄弟节点 .
<div></div><p id="test"></p> 在 $("div + #test") 中能取到 p 段落节点
<div></div><p></p><p id="test"></p> 则不能取到

6. 属性选择器 :
把属性选择器不放在 css 选择器里面是因为 jQuery 中写法是不一样的 . 至于 css 中写法可以参考我之前写的一篇 css 的选择器一文 .jQuery 中是和 xPath 类似的写法 :
$("mix[@attr]"): 选取所有该 mix 且具有 attr 属性的节点
$("mix[@attr=a_value"]): 选取所有该 mix 且具有 attr 属性并满足属性值为 a_value 的节点
$("mix[@attr^=a_value_head"]):attr 属性的属性值是以 a_value_head 开头的
$("mix[@attr$=a_value_end"]):attr 属性的属性值是以 a_value_end 结尾的
$("mix[@attr*=a_value"]):attr 属性的属性值中包含 a_value

7. 进一步选择器 :
这个名称是我自己起的 , 其实选择器组合都有进一步的意思 , 你明白后面所介绍的知识即可 .
具有限定子节点选择器 :$("mix1[mix2]"): 返回包含 mix2 的 mix1 节点 . 如 :$("div[a]"): 包含 a 标签的 div.
这个和 $("div a") 不相同 . 后者表示 div 中的 a 标签 , 返回的是 a 标签对象 , 前者返回的是 div 标签对象
冒号限定结点选择器 :$("mix:condition"):mix 标签 , 并且满足限定条件 .
E:root: 类型为 E, 并且是文档的根元素
E:nth-child(n): 是其父元素的第 n 个类型为 E 的子元素 , 基数从 1 开始
E:first-child: 是其父元素的第 1 个类型为 E 的子元素
E:last-child: 是其父元素的最后一个类型为 E 的子元素
E:only-child: 且是其父元素的唯一一个类型为 E 的子元素
E:empty: 没有子元素（包括 text 节点）的类型为 E 的元素
E:enabled
E:disabled: 类型为 E, 允许或被禁止的用户界面元素
E:checked: 类型为 E, 处于选中状态的用户界面元素（例如单选按钮或复选框）
E:visible: 选择所有可见元素 (display 值为 block 或 visible,visibility 值为 visible 元素 , 不包括 hide 域 )
E:hidden: 选择所有隐藏元素 ( 非 Hide 域 , 且 display 值为 block 或 visible,visibility 值为 visible 的元素 )
E:not(s): 类型为 E, 不匹配选择器 s
E:eq(n),E:gt(n),E:lt(n): 元素限定
E:first: 相当于 E:eq(0)
E:last: 最后一个匹配的元素
E:even: 从匹配的元素集中取序数为偶数的元素
E:odd: 从匹配的元素集中取序数为奇数的元素
E:parent: 选择包含子元素（包含 text 节点）的所有元素
E:contains('test'): 选择所有含有指定文本的元素
表单选择器 :
E:input: 选择表单元素 (input,select,textarea,button)
E:text: 选择所有文本域 (type="text")
E:password: 选择所有密码域 (type="password")
E:radio: 选择所有单选按钮 (type="radio")
E:checkbox: 选择所有复选框 (type="checkbox")
E:submit: 选择所有提交按钮 (type="submit")
E:image: 选择所有图像域 (type="image")
E:reset: 选择所有清除域 (type="reset")
E:button: 选择所有按钮 (type="button")
当然包括 E:hidden

8.xPath 路径查询 :

先介绍下 xPath 的语法 :
/: 选取根节点
//: 选取文档中所有符合条件的节点 , 不管该节点位于何处
.: 选取当前节点
..: 选取单前节点的父节点
@: 选取属性 , 这个在之前说过了 ( 属性选择器 )
nodename: 选取节点下的所有节点
jQuery 中的应用 :
根节点是很少用到的 , 常用的如下面的例子 :
$("div/p") 相当于 $("div>p")
$("div//p") 相当于 $("div p")
$("//div/../p"): 所有 div 节点的父节点下的 p 标签
还有相对路径的写法以及支持的 Axis 选择器 , 还不是会应用 , 不介绍了 ... 已经一大堆了

$ 的其他用法 :

$(html 节点 ): 根据提供的原始 HTML 标记字符串 , 动态创建由 jQuery 对象包装的 DOM 元素 . 如 :
$("<div><p>Hello</p></div>").appendTo("#body");// 把 <div><p>Hello</p></div> 添加到 body 元素中
$(document): 网页文档对象
$(document.body): 网页 body 对象 , 和 $("body") 是一样的
$( 函数 ):DOM 载入后就执行该函数 . 所以 $(document).ready() 可以写做 $()
$( 选择器部分 , 选择器来源 ): 这个举例说明
$("input:radio",document.forms[0]): 在文档的第一个表单中 , 搜索所有单选按钮
$("div",xml.responseXML): 查询指定 XML 文档中的所有 div 元素
选择器来源可以是 : 作为上下文的 DOM 元素 , 文档或 jQuery 对象
还有两个 :$.extend(prop) 和 $.noConflict() 是和插件以及和其他库兼容的使用 , 以后再写

jQuery 的 core 部分还有 :

eq( 数字 ): 将匹配的元素集合缩减为一个元素。这个元素在匹配元素集合中的位置变为 0, 而集合长度变成 1
gt( 数字 ): 将匹配的元素集合缩减为给定位置之后的所有元素
lt( 数字 ): 将匹配的元素集合缩减为给定位置之前的所有元素
上面三个的例子 :
$("div:eq(1)")// 第 2 个 div
$("div:gt(2)")// 第 3 个 div 以及之后的 div
$("div:lt(2)")// 第 2 个 div 以及之前的 div, 即第 1 个 div 和第 2 个 div

length 或 size(): 当前匹配的元素数量

each(): 以每一个匹配的元素作为上下文来执行一个函数。这意味着 , 每次执行传递进来的函数时 , 函数中的 this 关键字都指向一个不同的元素 ( 每次都是一个不同的匹配元素 ). 而且 , 在每次执行函数时 , 都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数 .
$("img").each(function(i){ this.src = "test" + i + ".jpg"; });// 迭代图像 , 并设置它们的 src 属性

get(): 如果没有参数 , 返回所有 , 是一个对象数组 ; 如果带参数 , 必须是数字 , 基数从 0 开始 . 例子 :
$("div").get(): 返回一个 div 对象数组
$("div").get(1): 返回第二个 div 对象
index( 需求的元素节点对象 ): 返回数字 . 用个例子说明 :
$("div").index($(".test"))[1] // 表示从所有 div 节点中查找 class 属性为 test 的节点 . 并且找的是第二个节点 ( 基数从 0 开始 ). 返回值是该节点在 div 节点中的位置 ( 基数也是从 0 开始 ).