jQuery-选择器

jquery选择器是jquery的核心也是基础，现总结如下，以供参考：

1：基础介绍
jQuery对象：
	jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象
	jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();
	jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法
	约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $. 	
	var $variable = jQuery 对象
	var variable = DOM 对象

对象之间的转化：
jQuery对象转化成Dom对象：
	方法一：jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象
	var $cr = $("#cr");
	var cr = $cr[0];
	方法二：使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象;
	var $cr = $("#cr");
	var cr = $cr.get(0);
	转换后就可以使用 jQuery 中的方法
Dom对象转化成jQuery对象：
方法一：对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象),
        就可以获得一个 jQuery 对象. 
	var cr = document.getElementById("cr");
	var $cr = $(cr);	

2:jQuery 选择器:
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
以下分类进行说明：
基本选择器：
		是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和
		标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).
  案例：选择 id 为 one 的元素：$("#one")
		选择 class 为 mini 的所有元素:$(".mini")
		选择 元素名是 div 的所有元素:$("div")
		选择 所有的元素:$("*")
		选择 所有的 span 元素和id为two的元素:$("#two,span")
		
层次选择器:
		如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
  案例：选择 body 内的所有 div 元素：$("body  div")
		在 body 内, 选择子元素是 div 的：$("body > div")
		选择 id 为 one 的下一个 div 元素：$("#one + div")
		选择 id 为 two 的元素后面的所有 div 兄弟元素:$("#two ~ div")
		选择 id 为 two 的元素所有 div 兄弟元素:$("#two")
		选择 id 为 one 的下一个 span 元素:$("#one").nextAll("span:first")
		选择 id 为 two 的元素前边的所有的 div 兄弟元素:$("#two").prevAll("div")
基本过滤选择器:过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
		按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.
	基本过滤选择器:
		选择第一个 div 元素:$("div:first")
		选择最后一个 div 元素:$("div:last")
		选择class不为 one 的所有 div 元素:$(":not(.one)")
		选择索引值为偶数的 div 元素:$("div:even")
		选择索引值为奇数的 div 元素:$("div:odd")
		选择索引值为大于 3 的 div 元素:$("div:gt(3)")
		选择索引值为等于 3 的 div 元素:$("div:eq(3)")
		选择索引值为小于 3 的 div 元素:$("div:lt(3)")
		选择所有的标题元素:(":header")
		选择当前正在执行动画的所有元素:$(":animated")
		选择 id 为 two 的下一个 span 元素:$("#two").nextAll("span:first")
	内容过滤选择器:
		选择 含有文本 'di' 的 div 元素:$("div:contains('di')")
		选择不包含子元素(或者文本元素) 的 div 空元素:$("div:empty")
		选择含有 class 为 mini 元素的 div 元素:$("div:has(.mini)")
		选择含有子元素(或者文本元素)的div元素:$("div:not(:empty)")或者：$("div:parent")
	可见性过滤选择器：
		选取所有可见的  div 元素：$(":visible")
		选择所有不可见的 div 元素：$(":hidden")
		选择所有不可见的 input 元素：$("input:hidden")
	属性过滤选择器:
		选取含有 属性title 的div元素:$("div[title]")
		选取 属性title值等于'test'的div元素:$("div[title='test']")
		选取 属性title值不等于'test'的div元素(没有属性title的也将被选中):$("div[title!='test']")
		选取 属性title值 以'te'开始 的div元素:$("div[title^='te']")
		选取 属性title值 以'est'结束 的div元素:$("div[title$='est']")
		选取 属性title值 含有'es'的div元素:$("div[title*=es]")
		组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素:$("div[id][title*='es']")
		选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素:$("div[title][title!='test']")
	子元素过滤选择器:
		选取每个class为one的div父元素下的第2个子元素:$("div.one :nth-child(2)")//选子元素  需要在选择器器前添加一个空格
		选取每个class为one的div父元素下的第一个子元素:$("div.one :first-child")
		选取每个class为one的div父元素下的最后一个子元素:$("div.one :last-child")
		如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素:$("div.one :only-child")
	表单对象属性过滤选择器:
		对表单内 可用input 赋值操作:$(":text:enabled").val("test");
  		对表单内 不可用input 赋值操作:$(":text:disabled").val("test");
		获取多选框选中的个数:$(":checkbox[name='newsletter']:checked").length
		获取多选框选中的内容:$(":checkbox[name='newsletter']:checked").each(function()
								{
									alert(this.value);
								});
        获取下拉框选中的内容:$("select :selected").each(function()
								{
									alert(this.value);
								});//下边注解
		注解：			
			//实际被选择的不是select,而是select的option子节点 所以要加一个空格，因为
			//选子元素  需要在选择器器前添加一个空格
			//alert($("select :selected").length);
			//var len = $("select :selected").length;
			
			//当该数组有多个元素时，通过.val()方法就只能获取第一个被选择的值
			
			//jQuery对象遍历的方式是each,在each内部的this正是在得到的DOM对象，而不是一个jQuery对象
		
		
3:常用的jQuery方法：
		1：show(time);使不可见的元素变得可见  单位毫秒
		   Query很多方法支持方法的连缀；即一个方法的返回值是调用该方法的jQuery对象；
		    可以继续调用该对象的其他方法
			$(":hidden").show(2000).css("background","ffbbaa");
		
		2：jQuery的隐式迭代，$("p").click为所有的p节点增加监听
		   响应函数中this是一个dom对象  若想使用jQuery对象的方法  需要将其包装为jQuery对象 $(this)
		3：.text()方法是一个读写的方法，不加任何参数是读取文本值，加参数为属性节点设置文本值，
			和.text()方法类似的方法 有attr()  val()
		案例：
		//点击所有的p节点，能够弹出其相应的文本内容，然后改变其文本内容
		$("p").click(function()
		{
			//alert(this.firstChild.nodeValue);
			alert($(this).text());
			$(this).text("^^^"+$(this).text());
		});