JQuery Chapter2 选择器

JQuery Chapter2 选择器<!--Goal:学会使用JQuery中的选择器(十分的强大)-->回顾:昨天我已经写了一点关于选择器的东西,现在我再回顾一下:<!--示例代码<ul id="main_ul"><li>First</li><li>second<ul id="minor_ul"><li>1st</li><li>2nd</li><li>3rd</li></ul></li><li>third</li></ul>--->a)基本选择器(常用)1.标签选择器,顾名思义就是按照标签来选取对象,用法如下:$("input"),$("div"),$("table tr"),$("ul li")....2.ID选择器,这个都是靠着元素的ID进行对象选取的,用法如下:$("#txtOne"),$("#txtOne div").....3.class选择器,也就是样式选择器,通过样式来选取对象,用法如下:$(".styleOne"),$(".styleOne #txtOne div")....注意:选择器是可以并存的,并且取值方式很灵活,可以通过一连串的标识来获取对象b)层次选择器:(常用)这个用来选取那种有级数关系的对象在合适不过了,很方便,也很灵活,再来回顾一下:1.$("元素名1 空格 元素名2"):这个就是选取元素名1下面有元素名2的元素,包含子子级以及子子子级....!eg:$("#main_ul li")这个就获取了id为main_ul的ul下的所有li节点也包含了id为minor_ul的所有节点2.$("元素名1>元素名2"):这个与上面那个基本相同,唯一不同就是这个只会取到元素名1下面元素名2的对象,不会取到元素名2下面的元素!eg:$("#main_ul>li")这个就只获取id为main_ul下的li节点不包含id为minor_ul的li节点!3.$("元素名1+元素名2"):获取元素名1的下一个名为元素名2同级元素!eg:$("#main_ul>li+li")就会获取名为main_ul的下的li的下一个兄弟节点li,即second4.$("元素名1~元素名2"):功能同上,唯一不同的是这个不是取下一个,而是取以后的所有兄弟节点eg:$("#main_ul>li~li").length的值为2!c)过滤器选择器(除9点以外的都常用)1.:first获取该组元素中的第一个!eg:$("#main_ul li:first")就可以获取名为main_ul下面li的第一个元素2.:lasteg:$("#main_ul li:last")功能同上,不过是获取最后一个3.:even后去元素组中的下标为偶数的元素,注意:下标是从0开始;eg:$("#main_ul li:even")4.:odd;eg:$("#main_ul li:odd")功能同上,不过是用来获取奇数的;5.:eq(下标值)根据用户指定的下标来获取元素(下标从0开始)!eg:$("#main_ul li:eq(1)")可以获取second!6.:gt(值)用来获取下标大于用户指定值的元素(下标从0开始)eg:$("#main_ul li:gt(1)")7.:lt(值)用来获取下标小于用户指定值的元素(下标从0开始)!8.:not(标记)选出除了标记以外的元素eg:$("#main_ul li:not(ul)")可以选出main_ul下li元素在内ul元素在外的元素!9.:header用来找出标题元素(H1,H2,H3....)10.:animated用来正在进行动画的元素(这个对于以后完善特效有着重要的作用)d)内容选择器(第一点常用)1.:contains(文本值);用来找出元素中含有该文本值得元素,记得今天做的那个表格的模糊搜索,酷毙了!eg:$("#main_ul li:contains(s)")只要li中含有s的都会被找出来!2.:empty()找出不含有子元素或者空文本的元素!eg:$("#main_ul li:empty()");3.:has(选择器)用来选出含有该选择器的元素eg:$("#main_ul li:has(ul)")找出li中含有ul的li元素4.:parent用来找出含有元素或者是文本的元素eg:$("#main_ul li:parent")只要是li中含有子标签或者文本都会被找出来e)可见性选择器(不常用)1.:hidden找出被隐藏的元素eg:$("#main_ul li:hidden")找出li中被隐藏的元素2.:visible找出可见的元素eg:$("#main_ul li:visible")找出li中的可见元素f)属性选择器(常用)1.[attribue]选出拥有该属性的元素eg:$("#main_ul li[id]")选出li中含有id属性的元素2.[attribute=value]选出有属性等于这个值的元素,注意是 一 个 等 号eg:$("#main_ul li[id=minor_ul]")选出li中id属性等于minor_ul的元素3.关于attribute=value的扩展I.attribute^=value以value开头的属性值II.attribute$=value以value结尾的属性值III.attribute*=value属性值中包含value的元素4.[attribute][attribute=value][....]...多个条件可以同时存在!eg:$("#main_ul li[id=minor_ul][name]")选出id值为minor_ul并且有name属性的元素!g)子元素选择器(使用较少)1.:nth_child(index/even/odd/equation)注意这里不同的地方是:下标是从1开始2.:first_child:last_child选取每个父元素的第一/最后一个元素3.:only-child选出只有一个子元素的父元素h)表单对象属性选择器(用得较少)1.:enable选出所有可用的元素eg:$("#main_ul li:enable")选出li中的可以用的元素2.disabled功能同上不过是选出不能使用的元素i)表单选择器(这个可以用属性选择器来替换,所以不常用)这里我一一列出来就不进行讲解了~懂表单的人都懂~:input:text:password:radio:checkbox:button:submit:reset:image:file:hidden...j)目前还没有想到<!--Author:Lovingshu's ForeverDate:2011.10.11 21:03Remark:This is the Review of JQuery Chapter2 : the selector!where here is a will,here is a way-->