目录
1,属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>段落1</p>
<p id="p1">段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$('p').css('color','red'); //所有p元素
$('p[id]').css('color','yellow'); //p元素中,设置了id属性的所有元素。
$('p[id=btn1]'); //p元素中,id=asd1的元素。
$('p[id^=btn]'); //p元素中,id以asd开头的所有元素。
$('p[id$=btn]'); //p元素中,id以bww结尾的所有元素。
$('input[value][type=text]'); //同时满足多个属性条件,用[] []。input元素中,设置了value属性值,并且类型是text的所有元素。
</script>
</html>
2,过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$('.list li:event') //偶数
$('.list li:odd') //奇数
$('.list li:eq(0)') //索引第几个,如果有多个相同类名只会找第一个索引
$('.list li:lt(1)') //索引小于1
$('.list li:gt(1)') //索引大于1
$('.list li:header') //所有标题元素h1-h6
$('.list li:first') //第一个
$('.list li:last') //最后一个
$('.list li:firstchild') //第一个儿子
$('.list li:fastchild') //最后一个儿子
$('.list li:nth-child()') //要找第几个
$('.list li:not(;current)') //不包含current类名的
</script>
</html>
3,通过标签关系获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
fiind()//查找指定后代必须传参
parents()//祖先元素
parent()//父元素
children()//子元素
next()//后一个兄弟标签
nextAll()//后面所有兄弟标签
prev()//前一个兄弟标签
prevAll()//前面所有兄弟标签
siblings()//所有兄弟标签不包含自身
</script>
</html>