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,即second
				
			4.$("元素名1~元素名2"):
				功能同上,唯一不同的是这个不是取下一个,而是取以后的所有兄弟节点
				eg:$("#main_ul>li~li").length的值为2!
		c)过滤器选择器(除9点以外的都常用)
			1.:first
				获取该组元素中的第一个!
				eg:$("#main_ul li:first")就可以获取名为main_ul下面li的第一个元素
			
			2.:last
				eg:$("#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 Forever
Date:2011.10.11 21:03
Remark:This is the Review of JQuery Chapter2 : the selector!
			where here is a will,here is a way
-->

你可能感兴趣的:(jquery,image,header,input,div,button)