jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等“查找”（或选择）HTML 元素。它基于已经存在的，除此之外，还有一些自定义的选择器。 jQuery中所有选择器都以美元符号开头：$()。
选择器
html部分
<body>
<div id="box">id选择器</div>
<h1 class="a">类选择器</h1>
<h1 class="a">类选择器</h1>
<h1 class="a">类选择器</h1>
<p>标签选择器</p>
</body>
js部分
<script src="./jquery-1.12.4.js"></script>
<script>
/* 标签选择器 */
/* $("h1" )选取所有h元素 */
$('h1').css('color','red');
/* class选择器 */
/* $(" .title")选取所有class为title的元素 */
for(var i=0;i<document.querySelectorAll('.a').length;i++){
document.querySelectorAll('.a')[i].style.background = 'red';
}
console.log( $('.a') );
$('.a').css('background','red');
/* id选择器 */
$('#id').css('font-size','40px');
$('#id').css({color:'red',background:'green',padding:'10px'})
/* 并集选择器 */
$('#box,.a,p').css('color','green');
console.log( $('#box,.a,p') )
/* 全局选择器 */
$('*').css('background','red');
console.log( $('*')[13] )
</script>
属性选择器
css部分
<style>
.redClass{
color:red;
}
</style>
html部分
<body>
<ul>
<li class="a">我是程序员1</li>
<li data-name="zhangsan">我是程序员2</li>
<li class="b">我是程序员3</li>
<li class="c">我是程序员4</li>
<li data-name="lisi">我是程序员5</li>
</ul>
<a href="http://www.baidu.cn">百度</a>
<a href="www.baidu.com">百度一下</a>
</body>
js部分
<script src="./jquery-1.12.4.js"></script>
<script>
/* 属性选择器可以根据是否包含某属性来选取元素 */
$('ul li[data-name]').css('background','red');
/* 根据属性的值来选取元素 */
$('ul li[data-name=lisi]').css('background','red');
/* 不等于属性是某个特定值的元素 */
$('ul li[data-name!=lisi]').css('background','red');
/* 以指定值开头的元素 */
$('a[href^=http]').css('color','red');
$('a[href^="http"]').css('color','red');
/* 以指定值结尾的元素 */
$('a[href$=".com"]').css('color','red');
/* 包含指定值的元素 */
/* *通配符 */
$('a[href*="baidu"]').css('color','red');
/* 添加样式类的 */
$('a[href*="baidu"]').addClass('redClass')
</script>
过滤选择器
css部分
<style>
.bg {
background: red
}
</style>
html部分
<body>
<ul>
<li>我是新入职的高级程序员0
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
</li>
<li>我是新入职的高级程序员1</li>
<li class="a">我是新入职的高级程序员2</li>
<li>我是新入职的高级程序员3</li>
<li>我是新入职的高级程序员4</li>
</ul>
</body>
js部分
<script src="./jquery-1.12.4.js"></script>
<script>
/* 选取第一个元素 */
$('ul li:first').addClass('bg');
/* 选取最后一个元素 */
$('ul li:last').addClass('bg');
/* 选取去除所有与给定选择器匹配的元素 */
$('ul li:not(.a)').addClass('bg');
/* 选取索引是偶数的所有元素（index从0开始） */
$('ul li:even').addClass('bg');
/* 选取索引是奇数的所有元素（index从0开始） */
$('ul li:odd').addClass('bg');
/* 选取索引等于index的元素（index从0开始） */
$('ul li:eq(1)').addClass('bg');
/* 选取索引大于index的元素（index从0开始）(不包括当前的索引的) */
$('ul li:gt(1)').addClass('bg');
/* 选取索引小于index的元素（index从0开始）(不包括当前的索引的) */
$('ul li:lt(3)').addClass('bg');
/* 选取所有标题元素，如h1~h6 */
$('ul li :header').addClass('bg')
</script>
