一酌伊、jQuery簡介
JQ是JS的一個優(yōu)秀的庫乒裆，大型開發(fā)必備章蚣。在此，我想說的是迎瞧，JQ里面很多函數(shù)使用和JS類似，所以學(xué)好JS再學(xué)習(xí)JQ很容易逸吵，其次也不要因為會使用JQ而不學(xué)習(xí)JS凶硅，JQ只是一個輔助工具。
詳細學(xué)習(xí)請訪問
二扫皱、JQ的好處
1.簡化JS 的復(fù)雜操作
2.不再需要關(guān)心兼容性
3.提供大量的實用方法
三足绅、設(shè)計思想
1.選擇網(wǎng)頁元素
A.模擬css選擇元素
$('#div1')
對于數(shù)組可省略循環(huán)
B.獨有表達式選擇
$('div'):eq(2) //表示該組div中第三個div
$('div'):odd() //表示該組中為偶數(shù)的div
$('div'):even() //表示改組中為奇數(shù)的div
C.多種篩選方法
$('li').filter('.box').css('background','red') ;
//選出多組li中css名為.box的那個li,將它的背景顏色設(shè)為紅色
$('li').filter('[title = hello]').css('background','red');
//選出多個li中title為hello的li，并將它的背景顏色設(shè)為紅色
2.JQ寫法
A.方法函數(shù)化
window.onload = function(){}; //js寫法
$(function(){}); //JQ寫法
function $(){} //假裝有一個$函數(shù)
innerHTML = 123; //對于innerHTML同樣理解
html(123)
function html(){}
onclick = function(){}; //對于onclick函數(shù)同樣
click(function(){})
function click(){}
下面將一段js代碼韩脑，用jq表示出來
window.onload = function(){ //js代碼
var oDiv = document.getElementById('div1');
oDiv.onclick = function(){
alert( this.innerHTML );
};
};
$(function(){ //JQ代碼
//var oDiv = $('#div1');
$('#div1').click(function(){
//此處若沒有注釋上一句氢妈，則可以寫成oDiv.click(function(){
alert( $(this).html() );
});
});
注意：傳參為函數(shù)調(diào)用，調(diào)用帶上括號
B.原生關(guān)系和鏈式操作
在jq中可以純js寫法段多，也可以純jq寫法首量，但是不要兩者混著用
$('#div1').click(function(){
alert( $(this).html() ); //jq的寫法
alert( this.innerHTML ); //js的寫法
alert( $(this).innerHTML ); //錯誤的
alert( this.html() ); //錯誤的
});
jq中可以將多個事件寫在一個后面 == 鏈式操作
var oDiv = $('#div1');
oDiv.html('hello');
oDiv.css('background','red');
oDiv.click(function(){
alert(123);
});
$('#div1').html('hello').css('background','red').click(function(){
alert(123);
});
這兩段代碼是相同的
C.取值賦值合體
js中的取值賦值：
oDiv.innerHTML = 'hello'; //賦值
alert( oDiv.innerHTML ); //取值
jq中的取值賦值：
$('#div1').html('hello'); //賦值
alert( $('#div1').html() ); //取值
注意：
1.當(dāng)一組元素的時候，取值是一組中的第一個
2. 當(dāng)一組元素的時候，賦值是一組中的所有元素
attr()可設(shè)置屬性加缘，可獲取屬性
alert($('div').attr('title')); //獲取title屬性
//設(shè)置屬性
$('div').attr('title','456');
$('div').attr('class','box');
