JQuery是目前使用最廣泛的javascript函數(shù)庫。據(jù)統(tǒng)計弛说，全世界排名前100萬的網(wǎng)站，有46%使用jQuery特笋，遠(yuǎn)遠(yuǎn)超過其他庫剃浇。微軟公司甚至把jQuery作為他們的官方庫。
jQuery的版本分為1.x系列和2.x猎物、3.x系列虎囚，1.x系列兼容低版本的瀏覽器，2.x蔫磨、3.x系列放棄支持低版本瀏覽器淘讥，目前使用最多的是1.x系列的。
jquery是一個函數(shù)庫堤如，一個js文件蒲列，頁面用script標(biāo)簽引入這個js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jquery的口號和愿望 Write Less, Do More（寫得少搀罢，做得多）
1蝗岖、http://jquery.com/ 官方網(wǎng)站
2、https://code.jquery.com/ 版本下載
jquery加載
將獲取元素的語句寫到頁面頭部榔至，會因?yàn)樵剡€沒有加載而出錯抵赢，jquery提供了ready方法解決這個問題，它的速度比原生的 window.onload 更快唧取。
<script type="text/javascript">
$(document).ready(function(){
.....
});
</script>
可以簡寫為：
<script type="text/javascript">
$(function(){
......
});
</script>
例：
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// alert($);//彈出function (a,b){return new n.fn.init(a,b)}表示JQuery已經(jīng)引進(jìn)來了铅鲤，這是它的一個構(gòu)造函數(shù)
//JS寫法
window.onload = function(){
var oDiv = document.getElementById('div');
alert(oDiv.innerHTML);//這是一個div元素
}
//jQuery的完整寫法
//比上面JS寫法先彈出，因?yàn)閣indow.onload是把頁面元素加載枫弟、渲染完才彈出邢享，而ready()是把所有頁面的節(jié)點(diǎn)加載完之后就彈出了，不用等渲染了
/*$(document).ready(function(){
var $div = $('#div');
alert('jQuery:' + $div.html());//jQuery:這是一個div元素
})*/
//簡寫方式
$(function(){
var $div = $('#div');//CSS樣式怎么寫淡诗，這里就怎么寫
//html()方法相當(dāng)于原生JS的innerHTML
alert($div.html() + 'jQuery');
})
</script>
jQuery選擇器
jquery用法思想一
選擇某個網(wǎng)頁元素骇塘，然后對它進(jìn)行某種操作
jquery選擇器
jquery選擇器可以快速地選擇元素，選擇規(guī)則和css樣式相同韩容，使用length屬性判斷是否選擇成功绪爸。
$(document) //選擇整個文檔對象
$('li') //選擇所有的li元素
$('#myId') //選擇id為myId的網(wǎng)頁元素
$('.myClass') // 選擇class為myClass的元素
$('input[name=first]') // 選擇name屬性等于first的input元素
$('#ul1 li span') //選擇id為為ul1元素下的所有l(wèi)i下的span元素
對選擇集進(jìn)行修飾過濾(類似CSS偽類)
$('#ul1 li:first') //選擇id為ul1元素下的第一個li
$('#ul1 li:odd') //選擇id為ul1元素下的li的奇數(shù)行
$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個li
$('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個之后的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素
對選擇集進(jìn)行函數(shù)過濾
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等于myClass的div元素
$('div').filter('.myClass'); //選擇class等于myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素
選擇集轉(zhuǎn)移
$('div').prev('p'); //選擇div元素前面的第一個p元素
$('div').next('p'); //選擇div元素后面的第一個p元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內(nèi)的class等于myClass的元素
<script type="text/javascript">
$(function(){
//prev()是同級的上一個元素，prevAll()是同級的上面所有的元素
//next()是同級的下一個元素宙攻，nextAll()是同級的下面所有的元素
//修改#div1的下一個元素的樣式
$('#div1').next().css({color: 'red'});
//修改#div1的下面所有p標(biāo)簽設(shè)置樣式
$('#div1').nextAll('p').css({color: 'red'});
//選擇上一級的父元素
/*$('#span01').parent().css({
width:'100px',
height:'100px',
background:'gold'
})*/
//獲取祖級用$('#span02').parent().parent()不可取奠货，可用closest('div')獲取離span02最近的div
//closest可以選擇離自己最近的元素，元素可以是父級座掘，也可以是子集
$('#span01').closest('div').css({
width:'200px',
height:'200px',
background:'pink'
})
/*
$('.list li')與$('.list').children()的區(qū)別：
原始的選擇集不一樣
$('.list li')不能通過end()回到父級
$('.list').children()可以通過end()回到父級
*/
$('.list').children().css({
background:'gold',
height:'30px',
marginBottom:'10px'
}).end().css({
background:'green'
})
//eq(2)是選擇索引等于2的第三個li递惋，siblings()表示除第三個之外的其它兄弟li
$('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});
//find()是選擇div內(nèi)的class等于link1的元素
$('#div2').find('.link1').css({color:'red'});
})
</script>
jquery樣式操作
jquery用法思想二
同一個函數(shù)完成取值和賦值
操作行間樣式
- 獲取div的樣式
$("div").css("width");
$("div").css("color");
- 設(shè)置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") //重復(fù)切換anotherClass樣式
例:
<script type="text/javascript">
$(function(){
/*jQuery用同一個函數(shù)即可以取值形真、也可以賦值*/
//讀取樣式
alert($('#div1').css('fontSize'));//16px
//設(shè)置（寫入）樣式
$('#div1').css({background:'gold'});
//增加行間樣式
$('#div1').addClass('big');
//減少行間樣式杉编，多個樣式用空格分開
$('#div1').removeClass('div2 big');
})
</script>
綁定click事件
給元素綁定click事件超全，可以用如下方法：
$('#btn1').click(function(){
// 內(nèi)部的this指的是原生對象
// 使用jquery對象用 $(this)
})
<script type="text/javascript">
$(function(){
// 給按鈕綁定click事件
$('#btn').click(function(){
//重復(fù)切換sty樣式
$('.box').toggleClass('sty');
})
})
</script>
