jQuery基礎(chǔ)
一音婶、jQuery簡介
是一款JavaScript庫
方便地處理HTML、事件莱坎、動(dòng)畫等
html:處理HTML文檔中的DOM節(jié)點(diǎn)衣式，如添加、刪除等
事件：通過jQuery對(duì)頁面上的事件進(jìn)行處理（綁定或解綁事件）
動(dòng)畫：通過jQuery實(shí)現(xiàn)淡入、淡出碴卧、滑動(dòng)等動(dòng)畫
可以兼容多瀏覽器
80%以上網(wǎng)站使用
1.jQuery下載與使用
①下載地址：
http://jquery.com/
②壓縮和非壓縮版本
? Download the compressed, production jQuery
下載壓縮版本碉京，用于生產(chǎn)
? Download the uncompressed, development
jQuery 下載非壓縮版本，用于開發(fā)
③使用：放在body的最后螟深，防止影響性能
<script src="jquery-3.1.0.js"></script>
④版本的選擇：
? V1.x
? V2.x：不兼容IE6-8
? V3.x：分為精簡版和普通版
⑤使用CDN
? Content Delivery Network 內(nèi)容分發(fā)網(wǎng)絡(luò)
? https://code.jquery.com/
使用CDN的好處：性能提高，加快下載速度
在頁面中使用cdn：
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
2.設(shè)計(jì)哲學(xué)
? Write less烫葬，do more
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--使用jQ-->
<script>
var checkedValue;
var elements = document.getElementsByTagName('input');
for(var i=0;i<elements.length;i++){
if(elements[i].type === 'radio' && elements[i].name === 'test' && elements[i].checked){
checkedValue = elements[i].value;
break;
}
}
console.log(checkedValue);
</script>
<!--使用js-->
<script>
var checkedValue=$('input:radio[name="test"]:checked').val();
console.log(checkedValue);
</script>
<script src="js/jquery-3.2.1.js"></script>
</body>
結(jié)構(gòu)界弧、表現(xiàn)、行為分離：
二搭综、jQuery的使用
1.$
jQuery的全局變量垢箕，$為該全局變量的別名，其他的jQuery的函數(shù)兑巾、屬性等都定義在該全局變量內(nèi)条获。
window.jQuery === window.$
2.$.xxx
調(diào)用jQuery本身的屬性和方法：
$.each(…)
$.noop
$.toArray()
…
3.$(xxx)
調(diào)用jQuery本身的選擇，返回一個(gè)jQuery對(duì)象蒋歌，xxx為一個(gè)查詢表達(dá)式或者DOM元素等
$('#myDiv')
$('.myClass')
…
$(domObject) -> jQuery Object
$(xxx).get(0) -> DOM Object
$(xxx)[0] -> DOM Object
jQuery對(duì)象：
1.是原生DOM對(duì)象的封裝
2.jQuery對(duì)象和原生的DOM對(duì)象不同（但可以相互轉(zhuǎn)換）
3.jQuery對(duì)象包含了很多方法帅掘，方便的操作DOM元素
DOM和jQuery對(duì)象轉(zhuǎn)換：任何DOM元素只要通過$()包裹住就變成了jQuery對(duì)象
4.鏈?zhǔn)秸Z法chaining
$('#divTest').text('Hello, world!')
$('#divTest').removeClass('blue')
$('#divTest').addClass('bold')
$('#divTest').css('color', 'red')
--->
$('#divTest')
.text('Hello, world!')
.removeClass('blue')
.addClass('bold')
.css('color', 'red')
內(nèi)部：每次調(diào)用都會(huì)返回一個(gè)jQuery對(duì)象，所以就可以直接再調(diào)用堂油，而不用重復(fù)再聲明一次對(duì)象修档。
注意一：有些jQuery方法有破壞性，如find() add children filter等方法
注意二：有寫jQuery方法并不返回jQuery對(duì)象
<body>
<div id="divTest" class="blue">
test
</div>
<div id="divTest2">
<p>123</p>
<p class="child">123</p>
<p>123</p>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script>
setTimeout(function(){
$('#divTest').text('Hello,world')
$('#divTest').removeClass('blue')
$('#divTest').addClass('bold')
$('#divTest').css('color','red')
$('#divTest')
.text('Hello,world')
.removeClass('blue')
.addClass('bold')
.css('color','red')
$('#divTest2')
.find('p.child') //有破壞性府框，把整個(gè)jQuery對(duì)象的范圍縮小了
.css('color','red')
//.end() //可以通過end()方法還原：把元素的匹配恢復(fù)到上一次的狀態(tài)
.addClass('bold')
$('#divTest2').get(0) //變成DOM對(duì)象之后吱窝，就不能用jQuery的鏈?zhǔn)椒椒? .find('p.child')
.css('color','red')
//.end()
.addClass('bold')
},2000)
</script>
</body>
5.ready()
$(document).ready(function(){…})
一般在寫jQuery的一些操作時(shí)，要保證頁面的DOM已經(jīng)加載完畢：
方法一：可以通過window.onload事件迫靖；
方法二：ready()方法院峡；
針對(duì)有些頁面，實(shí)際上DOM結(jié)構(gòu)已經(jīng)加載完畢了系宜，但還在等待加載一些內(nèi)容照激，比如一些圖片網(wǎng)站，而window onload必須要等頁面完全所有DOM的完成蜈首，也就是等待這些內(nèi)容都加載完畢实抡，圖片下載完，iframe加載完才能加載window onload后面的處理欢策。而ready方法只會(huì)檢查DOM結(jié)構(gòu)是否加載完吆寨，不會(huì)等待圖片等其他東西，響應(yīng)就會(huì)快很多踩寇。
<body>
<!--大圖片-->
<img src="http://www.hcx.com/static/3.jpg" alt="" width="800"/>
<script src="js/jquery-3.2.1.js"></script>
<script>
//使用window.onload
window.onload = function(){
console.log('onload');
}
$(window).load(function(){
console.log('load');
});
//使用ready
$(document).ready(function(){
console.log('ready');
})
</script>
</body>
注意：兩個(gè)方法最好不要同時(shí)使用啄清，有些情況會(huì)導(dǎo)致ready失效
