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>
