1、jquery介紹
jQuery是目前使用最廣泛的javascript函數(shù)庫。
jQuery的版本分為1.x系列和2.x、3.x系列，1.x系列兼容低版本的瀏覽器（如IE6、7、8等），2.x、3.x系列放棄支持低版本瀏覽器，目前使用最多的是1.x系列的。
jquery是一個(gè)函數(shù)庫，一個(gè)js文件，頁面用script標(biāo)簽引入這個(gè)js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
相關(guān)網(wǎng)站：
- http://jquery.com/ 官方網(wǎng)站
- 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文件，把網(wǎng)頁的內(nèi)容復(fù)制到文件中。
jquery用法思想
1)選擇某個(gè)網(wǎng)頁元素，然后對(duì)它進(jìn)行某種操作
2)同一個(gè)函數(shù)完成取值和賦值
2、JQuery識(shí)別頁面加載
相對(duì)于JavaScript的window.onload，JQuery提供了以下的識(shí)別頁面加載方式：
<!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是等標(biāo)簽加載完后，再渲染完之后才運(yùn)行，
// ready是等標(biāo)簽加載完后就運(yùn)行
// ready的完整寫法：
$(document).ready(function(){
var $div = $('#div1');
alert('jquery彈出的'+$div);
})
*/
// ready的簡(jiǎn)寫：
$(function(){
var $div = $('#div1');
alert('jquery彈出的'+$div);
})
</script>
</head>
<body>
<div id="div1">這是一個(gè)div元素</div>
</body>
</html>
通過運(yùn)行上面這段代碼可以發(fā)現(xiàn)，jquery彈出要先于原生的window.onload彈出。
3、jquery選擇器
作為主流的選擇器之一，jquery選擇器的用法肯定是靈活多變的。
jquery選擇器基本用法
jquery選擇器可以快速地選擇元素，選擇規(guī)則和css樣式相同，使用length屬性判斷是否選擇成功。
$('#myId') //選擇id為myId的網(wǎng)頁元素
$('.myClass') // 選擇class為myClass的元素
$('li') //選擇所有的li元素
$('#ul1 li span') //選擇id為為ul1元素下的所有l(wèi)i下的span元素
$('input[name=first]') // 選擇name屬性等于first的input元素
判斷選擇器是否成功
jquery有容錯(cuò)機(jī)制，即使沒有找到元素，也不會(huì)出錯(cuò)，可以用length屬性來判斷是否找到了元素,length等于0，就是沒選擇到元素，length大于0，就是選擇到了元素。
var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 彈出1
alert($div2.length); // 彈出0
......
<div id="div1">這是一個(gè)div</div>
對(duì)選擇集進(jìn)行過濾
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等于myClass的div元素
$('div').filter('.myClass'); //選擇class等于myClass的div元素
$('div').eq(5); //選擇第6個(gè)div元素
選擇集轉(zhuǎn)移
$('div').prev(); //選擇div元素前面緊挨的同輩元素
$('div').prevAll(); //選擇div元素之前所有的同輩元素
$('div').next(); //選擇div元素后面緊挨的同輩元素
$('div').nextAll(); //選擇div元素后面所有的同輩元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級(jí)元素
$('div').find('.myClass'); //選擇div內(nèi)的class等于myClass的元素
獲取元素的索引值案例
有時(shí)候需要獲得匹配元素相對(duì)于其同胞元素的索引位置，此時(shí)可以用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");
//設(shè)置div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特別注意 ：選擇器獲取的多個(gè)元素，獲取信息獲取的是第一個(gè)，比如：$("div").css("width")，獲取的是第一個(gè)div的width。
操作樣式類名
$("#div1").addClass("divClass2") //為id為div1的對(duì)象追加樣式divClass2
$("#div1").removeClass("divClass") //移除id為div1的對(duì)象的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個(gè)樣式
$("#div1").toggleClass("anotherClass") //重復(fù)切換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');
}
簡(jiǎn)化成下面的寫法：
*/
$('.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() 切換元素的可見狀態(tài)
slideDown() 向下展開
slideUp() 向上卷起
slideToggle() 依次展開或卷起某個(gè)元素
7、jquery鏈?zhǔn)秸{(diào)用
jquery對(duì)象的方法會(huì)在執(zhí)行完后返回這個(gè)jquery對(duì)象，所有jquery對(duì)象的方法可以連起來寫：
$('#div1') // id為div1的元素
.children('ul') //該元素下面的ul子元素
.slideDown('fast') //高度從零變到實(shí)際高度來顯示ul元素
.parent() //跳到ul的父元素，也就是id為div1的元素
.siblings() //跳到div1元素平級(jí)的所有兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast'); //高度實(shí)際高度變換到零來隱藏ul元素
