1、jquery介绍
jQuery是目前使用最广泛的javascript函数库。
jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器（如IE6、7、8等），2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
相关网站：
- http://jquery.com/ 官方网站
- https://code.jquery.com/ 版本下载
js可以在线引用，也可以下载到本地，目前下载的方法是访问http://code.jquery.com/jquery-1.12.4.js (未压缩版) 或者http://code.jquery.com/jquery-1.12.4.min.js (压缩版)地址，然后本地建立XX.js文件，把网页的内容复制到文件中。
jquery用法思想
1)选择某个网页元素，然后对它进行某种操作
2)同一个函数完成取值和赋值
2、JQuery识别页面加载
相对于JavaScript的window.onload，JQuery提供了以下的识别页面加载方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
alert('原生弹出的'+oDiv);
}
/*
// ready 比window.onload 要快：
//原因是，window.onload是等标签加载完后，再渲染完之后才运行，
// ready是等标签加载完后就运行
// ready的完整写法：
$(document).ready(function(){
var $div = $('#div1');
alert('jquery弹出的'+$div);
})
*/
// ready的简写：
$(function(){
var $div = $('#div1');
alert('jquery弹出的'+$div);
})
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
通过运行上面这段代码可以发现，jquery弹出要先于原生的window.onload弹出。
3、jquery选择器
作为主流的选择器之一，jquery选择器的用法肯定是灵活多变的。
jquery选择器基本用法
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素
判断选择器是否成功
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。
var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 弹出1
alert($div2.length); // 弹出0
......
<div id="div1">这是一个div</div>
对选择集进行过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').eq(5); //选择第6个div元素
选择集转移
$('div').prev(); //选择div元素前面紧挨的同辈元素
$('div').prevAll(); //选择div元素之前所有的同辈元素
$('div').next(); //选择div元素后面紧挨的同辈元素
$('div').nextAll(); //选择div元素后面所有的同辈元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的元素
获取元素的索引值案例
有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取
var $li = $('.list li').eq(1);
alert($li.index()); // 弹出1
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $li = $('.list li');
//alert($li.length); 弹出 8
//alert($li.eq(3).index()); 弹出3
alert( $li.filter('.myli').index() );
})
</script>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="myli">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
4、jquery样式操作
操作行间样式
// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特别注意 ：选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。
操作样式类名
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
5、绑定click事件
给元素绑定click事件，可以用如下方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 绑定click事件
$('#btn').click(function(){
/*
if($('.box').hasClass('col01'))
{
$('.box').removeClass('col01');
}
else
{
$('.box').addClass('col01');
}
简化成下面的写法：
*/
$('.box').toggleClass('col01');
})
})
</script>
</head>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:gold;
}
.col01{
background-color:green;
}
</style>
<body>
<input type="button" name="" value="切换样式" id="btn">
<div class="box">div元素</div>
</body>
</html>
6、jquery特殊效果
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
7、jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
