jQuery选择器整理
2016-08-03 17:30
405 查看
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.1.0.min.js"></script>
<title>jQuery选择器</title>
</head>
<body>
<!--基本选择器-->
<!--#id-->
<div id="test"></div>
$('#id');
<!--.class-->
<div class="test"></div>
$('.test');
<!--element-->
<div></div>
$('div');
<!--*-->
<!--selector1,selector2,.......selectorN-->
$('div,p,span');
<!------------------------------------------------------------------------------------>
<!--层次选择器-->
<p>
我是demo的上层
</p>
<div id="demo">
<p>1</p>
<p>2</p>
<span>3</span>
</div>
<div>
我是demo的下层
</div>
<div>
我是demo的下下层
</div>
<!--
$('#demo p').css('background','red');后代选择器
$('#demo>span').css('background','blue');子选择器
$('#demo + div').css('background','red');选取id为demo的div的下一个同级元素 可用jQuery自己的next()方法
$('#demo ~ div').css('background','red');选取id为demo的div的下一个同级元素 可用jQuery自己的nextAll()方法
-->
<!------------------------------------------------------------------------------------>
<!--过滤选择器-->
<!--与css中的伪类选择器语法相同 都以：开头；按照不同的过滤规则，可分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤-->
<div>1</div>
<div style="width:100px; height:100px; border:1px solid blue"></div>
<h1>我是标题1</h1>
<ul id="demo1" attribute='1'>
<li class="one">我是第一行</li>
<li>我是第二行</li>
<li>我是第三行</li>
<li>我是第四行</li>
<li>我是第五行<h3>我是第五行的标题</h3></li>
<h2>我是标题2</h2>
<li>我是第六行</li>
</ul>
<!--1.基本过滤器-->
<!--
$('#demo1 :first').css('background','red');选取demo1下的第一个子元素
$('#demo1 :last').css('background','red');
$('#demo1 :not(.one)').css('background','red'); 选取demo1下的class不是one的所有元素
$('#demo1 :even').css('background','red');选取索引为偶数的元素（索引从0开始）
$('#demo1 :odd').css('background','red');选取索引为奇数的元素（索引从0开始）
$('#demo1 :eq(1)').css('background','red');选取索引等于n的元素（索引从0开始）
$('#demo1 :gt(2)').css('background','red');选取索引大于2的元素（索引从0开始）
$('#demo1 :lt(2)').css('background','red');选取索引小于2的元素（索引从0开始）
$('body :header').css('background','red');选取网页中所有的h1,h2,h3...
-->
<!-- 2.内容过滤器-->
<!-- $('#demo1 :contains(三)').css('background','red');选取含有文本内容为三的元素
$('ul :parent').css('background','red');选取含有子元素的ul元素
$('#demo1 :has(h3)').css('background','red');选取demo1下面 含有h3的子元素
$('div:empty').css('background','red');选取不包含子元素的div空元素-->
<!--3.可见性过滤选择器-->
<!--
：hidden
: visible
-->
<!--4.属性过滤选择器-->
<!--
$('body [attribute]').css('background','red');选取含有attribute属性的所有元素
$('body [attribute=1]').css('background','red');选取含有attribute属性并且属性值为1的所有元素
$('body [attribute!=1]').css('background','red');选取含有attribute属性并且属性值不是1的所有元素
$('body [attribute^=1]').css('background','red');选取含有attribute属性并且属性值以1开始的所有元素
$('body [attribute$=1]').css('background','red');选取含有attribute属性并且属性值以1结束的所有元素
$('body [attribute*=1]').css('background','red');选取含有attribute属性并且属性值有1的所有元素
-->
<!--5.子元素过滤选择器-->
<!--
$('#demo1 :first-child').css('background','red');选取demo1下的每个父元素的第一个子元素
$('#demo1 :last-child').css('background','red');选取demo1下的每个父元素的最后一个个子元素
$('#demo1 :nth-child(1)').css('background','red');选取demo1下的每个父元素的第n个元素，索引从1开始
-->
<!--6.表单对象属性过滤选择器-->
<!--
:enable
:disable
:checked
:selected
-->
</body>
</html>
<script>
$(document).ready(function(e) {
});
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 