1.jQuery用法思想一
選擇某個網頁元素，然後對它進行某種操作
2.jQuery選擇器
（1）可以快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷選擇是否成功。
$(function(){
/*選擇類*/
var $div01 = $('.div1');
$div01.css({'color':'red'});
/*選擇ID*/
var $div02 = $('#box2');
$div02.css({'fontSize':'40px'});
/*選擇類下地標籤，像css的類，也可以直接寫li，表示選擇所以li*/
var $li = $('.list li');
/*橫杆式或者駝峯式都可以*/
$li.css({'backgroundColor':'green'});
/*input裏name爲GOon*/
var $li01 = $('input[name=GOon]');
$li01.css({'color':'pink'});
})
（2）對選擇集進行過濾
/*選擇含有p元素的div過濾*/
var $div03 = $('.filter div').has('p');
$div03.css({'backgroundColor':'gold'});
/*簡寫方式，適合一次調用，選擇除div1類外div元素過濾*/
$('div').not('.div1').css({'backgroundColor':'gold'});
/*選擇filter類過濾出第五個div*/
$('.filter div').eq('5').css({'color':'red'});（3）選擇集轉移
/prev()第五塊的前面一塊緊挨着的/
$('.filter div').eq('5').prev().css({'color':'green'});
/*選擇div內，類爲nine的塊*/
$('.filter div').find('.nine').css({'color':'red'});
/*prevAll()選擇前面類內所有div*/
$('.filter div').eq('3').prevAll().css({'color':'red'});
/*0表示第一塊，next表示後面同輩元素，nextAll同上*/
$('.filter div').eq('0').next().css({'color':'green'});
/*父級div,children()所有子元素，siblings（）所有同級元素*/
$('.filter div').eq('5').parent().css({'backgroundColor':'pink'});（4）判斷是否選擇到了元素
jQuery有容錯機制，即使沒有找到元素，也不會出錯，可以用length屬性來判斷是否找到了元素，length等於0，就是沒選擇到元素，length大於0，就是選擇到了元素。
/>0表示獲取元素/
alert($div02.length);
3.jQuery用法思想二
同一個函數完成取值和賦值
（1）操作行間樣式
注意：選擇器獲取的多個元素，獲取信息獲取的是第一個，比如：$（‘div’）.css('width'),獲取的是第一個div的width
（2）操作樣式類名
/在原來樣式名的基礎上加bug/
$div.addClass('bug');
/除去樣式名/
/$div.removeClass('bug another');/
/*重複切換another樣式*/
$div.toggleClass('another')
**4.綁定click事件**<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>button</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $bTn = $('#btn');
$bTn.click(function(){
/*if($('.box').hasClass('btn')){
$('.box').removeClass('btn');
}
else{
$('.box').addClass('btn')
}*/
/*簡寫方式*/
$('.box').toggleClass('btn');
})
})
</script><style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
.btn{
width: 100px;
height: 100px;
background-color: aqua;
}
</style></head>
<body>
<input type="button" name="" value="切換" id="btn">
<div class="box">123</div></body>
</html>
5.索引值-選項卡
獲取元素的索引值
有時需要獲得匹配元素相對於其同胞元素的索引位置，此時可以用index（）方法獲取
$(function(){
var $li = $('.list li');
/index,獲取索引值，第一個爲0/
alert($li.filter('.mylist').index());
})
例子：選項卡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>選項卡</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $btn = $('.btns input');
var $div = $('.cons div');
/*alert($div.length),判斷是否獲取*/
$btn.click(function(){
/*移出除當前的類，siblings選擇同輩元素*/
$(this).addClass('current').siblings().removeClass('current');
/*index（）顯示索引*/
$div.eq($(this).index()).addClass('div1').siblings().removeClass('div1');
})
})
</script><style type="text/css">
.btns input{
width: 100px;
height: 40px;
background-color: antiquewhite;
border: 0;/*給寬高會有邊框*/
}
.btns .current{
background-color: aqua;
}
.cons div{
width: 500px;
height: 200px;
background-color: aquamarine;
display: none;
line-height: 200px;
text-align: center;
font-size: 30px;
}
.cons .div1{
display: block;
}
</style></head>
<body>
<div class="btns">
<input type="button" name="" value="01" class="current">
<input type="button" name="" value="02">
<input type="button" name="" value="03">
</div>
<div class="cons">
<div class="div1">選項卡1</div>
<div>選項卡2</div>
<div>選項卡3</div>
</div></body>
</html>
