jQuery选择器归纳

jQuery的选择器归纳与总结:

基本选择器:

				
		//$('#box')      #id      jQuery 的ID选择器      根据给定的ID匹配一个元素
		//$('div')       element  jQuery 的标签选择器   一个用于搜索的元素。指向 DOM 节点的标签名。
		//$('.div')      .class   jQuery 的类选择器     一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。
		//$('*')         *        通配符 匹配所有元素   多用于结合上下文来搜索。 找到所有元素
		//$('div,ul,p')	   将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

层次选择器:

		//$('.box p')	   在给定的祖先元素下匹配所有的后代元素 <注意是所有后代>
		//$('.box > p')  在给定的父元素下匹配所有的子元素   用以匹配元素的选择器，并且它是第一个选择器的子元素<只是第一层子元素 不包括孙子辈>
		//$('.box + div')一个有效选择器并且紧接着第一个选择器    匹配所有紧接在 prev 元素后的 next 元素(单个)
		//$('.box ~ div') 匹配前面的元素的后面跟着的所有同辈元素兄弟节点(多个)

基本过滤选择器:

//$('p:first')   获取匹配的第一个元素 		<这里指的是页面中第一个p标签>
		//$('div:last')  获取匹配的最后的个那个元素    <这里指的是页面中最后一个div标签>
		//$('div:not(.box)') 去除所有与给定选择器匹配的元素
		//$('div:even')  匹配所有索引值为偶数的元素，从 0 开始计数       查找表格的1、3、5...行（即索引值0、2、4...）
		//$('div:odd')   匹配所有索引值为奇数的元素，从 0 开始计数       查找表格的2、4、6行（即索引值1、3、5...）
		//$('div').eq(0) 匹配一个给定索引值的元素 括号里的索引值从零开始计数
		//$('div:gt(1)') 匹配所有大于给定索引值的元素 <大于括号中索引值1的全部匹配到 不包括一>
		//$('div:lt(3)') 匹配所有小于给定索引值的元素<小于括号中索引值3的全部匹配到  不包括三>
		//$(':header')   匹配如 h1, h2, h3之类的标题元素
		
		//返回值::animated  匹配所有正在执行动画效果的元素
//		$("#run").click(function(){
// 			 $("div:not(:animated)").animate({ left: "+=20" }, 1000);
//		});

内容选择过滤器:

		//$('div:contains(新闻)')   匹配包含给定文本的元素 <这里是查找所有div中包含新闻的div>
		//$('div:empty')           匹配所有不包含子元素或者文本的空元素
		//$('div:has(p)').addClass('text') 匹配含有选择器所匹配的元素的元素   >给所有包含 p 元素的 div 元素添加一个 text 类
		//$('div:parent')          匹配含有子元素或者文本的元素  这里是查找所有div中含有子元素或者文本元素的div

可视化过滤选择器:

		//$('input:hidden')        匹配所有不可见元素，或者type为hidden的元素(input为隐藏域的标签)
		//$('div:visited')         匹配所有的可见元素《这里是匹配所有可见的div 不可见就是使用了display的或者使用了其它的隐藏元素》

属性过滤选择器:

		//$('div[id]')			   [attribute] 匹配包含给定属性的元素  查找所有含有 id 属性的 div 元素
		//$('input[name=one]') [attribute=value] 匹配给定的属性是某个特定值的元素  查找所有 name 属性是 one 的 input 元素
		//$('div[id!=wrap]')   [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素  这里指的是匹配所有div中id不等于wrap的div
		//$('div[id^=wrap]')   [attribute^=value] 匹配给定的属性是以某些值开始的元素  这里指的是div的id所有以wrap开头的div
		//$('div[id$=wrap]')   [attribute$=value] 匹配给定的属性是以某些值结尾的元素 这里指的是div的id所有以wrap结尾的div
		//$('div[id*=wrap]')   [attribute*=value] 匹配给定的属性是以包含某些值的元素 这里指的是div的id所有包含wrap的div
		//$('div[id][class*=box]')  [selector1][selector2][selectorN]  复合属性选择器，需要同时满足多个条件时使用
		//                   [属性选择器][另一个属性选择器，用以进一步缩小范围][任意多个属性选择器]   这里是找到div有id属性的div且 class样式名开头为box的div
		

子元素选择过滤器:

		//$('div p:nth-child(0)')  匹配其父元素下的第N个子或奇偶元素 下标没有零 从1开始 1代表的就是1
		//$('div p:first-child')   匹配第一个子元素 ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
		//$('div p:last-child')    匹配最后一个子元素 ':last'只匹配一个元素， 而此选择符将为每个父元素匹配一个子元素
		//$('div span:only-child') 如果某个元素是父元素中唯一的子元素，那将会被匹配  如果父元素中含有其他元素，那将不会被匹配。
		

表单选择器:

		//$(':input')              匹配所有 input, textarea, select 和 button 元素
		//$(':text')               匹配所有的单行文本框
		//$(':password')           匹配所有密码框
		//$(':radio)               匹配所有单选按钮
		//$(':checked')            匹配所有复选框
		//$(':submit')             匹配所有提交按钮
		//$(':image')			         匹配所有图像域
		//$(':reset') 			         匹配所有重置按钮
		//$(':botton')             匹配所有按钮
		//$(':file')			         匹配所有文件域
		//$(":hidden")             匹配所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器:

		//$('input:hidden')        匹配所有不可见元素，或者type为hidden的元素
		//$('input:disabled')	         匹配所有不可用元素
		//$('input:checked')       匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
		//$('select option:selection')  匹配所有选中的option元素     select 元素可创建单选或多选菜单

周秦卿