您的位置：首页 > Web前端 > JQuery
锋利的jquery读书笔记--jquery选择器

2016-08-22 20:41 453 查看
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jquery选择器</title>

<script type="text/javascript">
一、基本选择器
$('#one') $('.mini') $('div') $('*') $('span,#two')

二、层次选择器
$('body div') 			//寻找body下的所有div，一层一层的查找
下面是三种诡异的选择器 记住替代方案
$('body > div') 		//相当于$('body').children('div') 只找一层
$('.three + div')		//相当于$('.three').next('div') 后面一个
$('#two ~ div') 		//相当于$('#two').nextAll('div')  后面所有

三、基本过滤选择器
$('div:first')
$('div:last')
$('div:not(.one)')		//选择class不为one的所有div元素.
$('div:even') 			//偶数
$('div:odd') 			//奇数
$('div:eq(3)')
$('div:gt(3)') 			//大于3
$('div:lt(3)') 			//小于3
$(':header') 			//选择 所有的标题元素.比如h1, h2, h3等等...
$(':animated')			//选择 当前正在执行动画的所有元素.
$(':focus')				//选择 当前获取焦点的所有元素.

四、内容过滤选择器

$('div:contains(di)') 	//选取含有文本"di"的div元素.
$('div:empty')			//选取不包含子元素(或者文本元素)的div元素.
$("div:has('.mini')")	//选取含有class为mini元素 的div元素.
$('div:parent')			//选取含有子元素(或者文本元素)的div元素.

五、可见性过滤选择器
$('body :hidden')		//:hidden不要独立使用[前面带空格]，不同的浏览器解释不同
$('div:hidden')			//要紧跟着元素后面用，不要有空格
$('div:visible')		//可见的元素

六、属性选择器

$('div[title^="en"]')	//选取 属性title值 以 en 开始 的div元素.
$('div[title*="en"]')	//选取 属性title值 含有 en  的div元素.
$('div[title]')			//选取含有 属性title 的div元素.
$('div[title=test]')	//选取 属性title值等于 test 的div元素.
$('div[title!=test]') 	//选取 属性title值不等于 test 的div元素.
$('div[title^=te]')		//选取 属性title值 以 te 开始 的div元素.
$("div[title$=est]")	//选取 属性title值 以 est 结束 的div元素.
$("div[title*=es]")		//选取 属性title值 含有 es  的div元素.
$("div[id][title*=es]") //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.

不容易理解的几个
$('div[title|="en"]')	//选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素
//<div title="en-UK">title为en-UK的div元素</div>
$('div[title~="uk"]') 	//选取 属性title用空格分隔的值中包含字符uk的元素.
//<div title="en uk">title为en uk的div元素</div>

七、表单对象属性过滤选择器
$("#form1 input:enabled")
$("#form1 input:disabled")
$("input:checked")
$("select :selected")

八、表单选择器
//这种带冒号的表单选择器可以用$("#form1 [type=password]");代替，以下的都一样
$("#form1 :text")
$("#form1 :radio")
$("#form1 :checkbox")
$("#form1 :submit")
$("#form1 :image")
$("#form1 :reset")
$("#form1 :button")
$("#form1 :file")
$("#form1 :input") 		//这种带:的会找到所有表单元素 包括select和textarea等
$("#form1 input")		//只找input标签

$("#form1 select")
$("#form1 textarea")
</script>

</head>
<body>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航