<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
div{width: 500px; height:200px; margin: 15px 0; padding: 15px;}
p input{ width: 120px; height: 30px; line-height: 30px; text-align: center; background: #FFA200; border: none; color: #fff;}
li{width: 200px; height:35px;}
</style>
</head>
<body>
<!-- <pre>
基本选择器
$('#id名')根据给定的id来匹配到元素
$('.class名')根据给定的class来匹配到元素
$('element')根据给定的标签名来匹配到元素
$('*')匹配所有元素
$('#id名,.class名,element')匹配到页面中多个选择器
</pre> -->
<h1>基本选择器</h1>
<br>
<div class="className">className</div>
<div id="idName">idName</div>
<p>
<input type="text" id="classBtn" value="class选择器">
<input type="text" id="idBtn" value="id选择器">
<input type="text" id="elementBtn" value="element选择器">
<input type="text" id="allBtn" value="*选择器">
<input type="text" id="btn" value="混合选择器">
</p>
<!--
<pre>
层级选择器（相当于父类和子类的元素关系）
$('父级元素>子级元素')给定的父级元素下匹配所有的子元素
$('祖先元素 后代元素')给定的祖先元素下匹配所有的后代元素
$('prev+next')---同级的元素，匹配紧跟在prev元素后面的next元素
$('prev~siblings')匹配prev元素后面所有的siblings元素
</pre>
<h1>层级选择器</h1>
<b>div同级的B标签</b>
<div>
<ul>
<li>div下ul里的li</li>
<li><b>div下ul里的li里的b元素</b></li>
<li>div下ul里的li</li>
<li>div下ul里的li</li>
<li>div下ul里的li</li>
<b>div下ul里的b元素</b>
</ul>
</div>
<b>div同级的B标签</b>
<ul>
<li>ul里的li</li>
<li><b>ul里的li下的b元素</b></li>
<li>ul里的li</li>
<li>ul里的li</li>
<li>ul里的li</li>
</ul>
<b>div同级的B标签</b>
<p>
<input type="text" id="btn" value="子级">
<input type="text" id="btn1" value="后代">
<input type="text" id="btn2" value="紧跟同级">
<input type="text" id="btn3" value="所有后面同级元素">
</p>
-->
<!--
<pre>
顺序选择器
一、顺序
$(':first')第一个元素
$(':last')最后一个元素
二、比较（X的顺序是从0开始）
$(':gt(x)')表示大于值X的元素
$(':lt(x)')表示小于值X的元素
$(':eq(x)')表示等于值X的元素
三、奇偶数
$(':odd')奇数顺序
$(':even')偶数顺序
四、非
$(':ont(selector)')匹配不是selector的所有元素
</pre>
<h1>顺序选择器</h1>
<ul>
<li>第1个li元素</li>
<li>第2个li元素</li>
<li>第3个li元素</li>
<li>第4个li元素</li>
<li>第5个li元素</li>
<li>第6个li元素</li>
<li>第7个li元素</li>
<li>第8个li元素</li>
</ul>
<p>
<input type="text" id="btn" value="first">
<input type="text" id="btn1" value="last">
<input type="text" id="btn2" value="大于3">
<input type="text" id="btn3" value="小于3">
<input type="text" id="btn4" value="等于3">
<input type="text" id="btn5" value="奇数">
<input type="text" id="btn6" value="偶数">
<input type="text" id="btn7" value="非第三个">
</p>
-->
<!--
<pre>
内容选择器
$(':contains(text)')匹配包含给定文本（text）的元素
$(':has(selector)')匹配包含特定选择器元素的元素
$(':empty')匹配不含有内容的元素（即 不包含子元素或者文本的空元素）
$(':parent')匹配含有子元素或者文本的元素
$(':hasClass()')匹配含有指定类的元素
</pre>
<h1>内容选择器</h1>
<ul>
<li>第1个li元素</li>
<li class="aa">第2个li元素</li>
<li><b>第3个li元素</b></li>
<li></li>
<li>第5个li元素</li>
</ul>
<p>
<input type="text" id="btn" value="含指定文本">
<input type="text" id="btn1" value="含指定元素">
<input type="text" id="btn2" value="无内容">
<input type="text" id="btn3" value="含内容">
</p>
-->
<!--
<pre>
属性选择器
$('[属性名]')匹配包含给定属性的元素
$('[attribute=value]')匹配给定属性是某个特定值的元素
$('[attribute != value]')匹配所有不含有指定值的属性，或者说是属性不等于特定值的元素
$('[attribute ^= value]')匹配给定属性是以某些值开始的元素
$('[attribute $=value]')匹配给定属性是以某些值结尾的元素
$('[attribule *= value]')匹配给定属性包含某些值的元素
$('attrSel[1] , attrSel[2] , attrSel[3]')复合选择器，以逗号隔开，需要同时满足多个条件时使用
</pre>
<h1>属性选择器</h1>
<ul>
<li title="第1个li元素">第1个li元素</li>
<li title="第2个li元素">第2个li元素</li>
<li title="第3个li元素">第3个li元素</li>
<li class="aa">第4个li元素</li>
<li>第5个li元素</li>
<li title="第6个li元素">第6个li元素</li>
<li title="第7个li元素">第7个li元素</li>
<li title="第8个li元素">第8个li元素</li>
</ul>
<p>
<input type="text" id="btn" value="含指定属性">
<input type="text" id="btn1" value="属性有特定的值">
<input type="text" id="btn2" value="属性无特定的值">
<input type="text" id="btn3" value="属性以某值开始">
<input type="text" id="btn4" value="属性以某值结束">
<input type="text" id="btn5" value="属性含某值">
<input type="text" id="btn6" value="复合选择器">
</p>
-->
<!--
<pre>
表单选择器
$(':enabled')所有激活的input元素（可以使用的input元素）
$(':disabled')所有禁用的input元素（不可以使用的input元素）
$(':selected')所有被选取的元素，针对于select元素
$(':checked')所有被选中的input元素
</pre>
<h1>表单选择器</h1>
<section>
<input type="text">
<input type="text" disabled>
<select>
<option value ="b" >请选择</option>
<option value ="a" selected >合肥</option>
<option value ="b">上海</option>
<option value ="b">北京</option>
</select>
<label><input type="radio">男</label>
<label><input type="radio" checked>女</label>
</section>
<p>
<input type="text" id="btn" value="激活">
<input type="text" id="btn1" value="禁用">
<input type="text" id="btn2" value="选中的selected">
<input type="text" id="btn3" value="选中的input">
</p> -->
<script type="text/javascript">
$(document).ready(function(){
//基本选择器
$('#classBtn').click(function(){ //根据.className找到元素并更改背景色及字体颜色
$('.className').css({background:'red' , color:'#fff'});
$('h1').text('基本选择器----class选择器');
});
$('#idBtn').click(function(){ //根据#idName找到元素并更改背景色及字体颜色
$('#idName').css({background:'blue' , color:'#fff'});
$('h1').text('基本选择器----id选择器');
});
$('#elementBtn').click(function(){ //根据element找到元素并更改背景色及字体颜色
$('div').css({background:'green' , color:'#fff'});
$('h1').text('基本选择器----标签选择器');
});
$('#allBtn').click(function(){ //找到所有元素并更改背景色及字体颜色
$('*').css({background:'yellow' , color:'#333'});
$('h1').text('基本选择器----所有选择');
});
$('#btn').click(function(){ //找到所选元素并更改背景色及字体颜色
$('#idName , .className , body , html, p , h1').css({background:'#fff' , color:'#333'});
$('input').css({background:'#ffa200' , color:'#fff'});
$('h1').text('基本选择器----混合选择器');
});
/*
//层级选择器
$('#btn').click(function(){
$('ul > b').css('color','red');//ul下的子级B元素
});
$('#btn1').click(function(){
$('ul b').css('color','red');//ul下的后代B元素
});
$('#btn2').click(function(){
$('div+b').css('color','red');//div同级的B元素---紧跟div后面的那个b元素
});
$('#btn3').click(function(){
$('div~b').css('color','red');//div后面同级的B元素
});
*/
/*
//顺序选择器
$('#btn').click(function(){
$('li:first').css('color','red');//第一个li元素
});
$('#btn1').click(function(){
$('li:last').css('color','red');//最后一个li元素
});
$('#btn2').click(function(){
$('li:gt(3)').css('color','red');//大于3的li元素,不含第三个，第一个为0,所以选中的是5-8
});
$('#btn3').click(function(){
$('li:lt(3)').css('color','red');//小于3的li元素
});
$('#btn4').click(function(){
$('li:eq(3)').css('color','red');//等于3的li元素
});
$('#btn5').click(function(){
$('li:odd').css('color','red');//奇数的li元素,以0开始
});
$('#btn6').click(function(){
$('li:even').css('color','red');//偶数的li元素
});
$('#btn7').click(function(){
$('li:not(:eq(3))').css('color','red');//不是第3个的所有li元素
});
*/
/*
//内容选择器
$('#btn').click(function(){
$('li:contains(1)').css('color','red');//包含指定文本1的li元素
});
$('#btn1').click(function(){
$('li:has(b)').css('color','red');//包含指定B标签的li元素
});
$('#btn2').click(function(){
$('li:empty').css('color','red');//不包含内容的li元素
});
$('#btn3').click(function(){
$('li:parent').css('color','red');//包含内容的li元素
});
*/
/*
//属性选择器
$('#btn').click(function(){
$('[title]').css('color','red');//包含title属性的li元素
});
$('#btn1').click(function(){
$('[title=第1个li元素]').css('color','red');//包含‘第1个li元素’的title属性的li元素
});
$('#btn2').click(function(){
$('li[title!=第1个li元素]').css('color','red');//不包含title属性的li元素
});
$('#btn3').click(function(){
$('li[title^=第]').css('color','red');//title属性值以第开始的li元素
});
$('#btn4').click(function(){
$('li[title$=元素]').css('color','red');//title属性值以元素结束的li元素
});
$('#btn5&am