一、jQuery簡介

JQ是JS的一個優(yōu)秀的庫，大型開發(fā)必備。在此，我想說的是，JQ里面很多函數使用和JS類似，所以學好JS再學習JQ很容易，其次也不要因為會使用JQ而不學習JS，JQ只是一個輔助工具。
詳細學習請訪問

www.jQuery.com

二、JQ的好處

1.簡化JS 的復雜操作

2.不再需要關心兼容性

3.提供大量的實用方法

三、設計思想

1.選擇網頁元素

A.模擬css選擇元素

$('#div1')

對于數組可省略循環(huán)

B.獨有表達式選擇

$('div'):eq(2)  //表示該組div中第三個div
$('div'):odd()   //表示該組中為偶數的div
$('div'):even()  //表示改組中為奇數的div 

C.多種篩選方法

$('li').filter('.box').css('background','red') ;
//選出多組li中css名為.box的那個li,將它的背景顏色設為紅色
$('li').filter('[title = hello]').css('background','red');
//選出多個li中title為hello的li，并將它的背景顏色設為紅色

2.JQ寫法

A.方法函數化

window.onload = function(){};  //js寫法

$(function(){});  //JQ寫法

function $(){}  //假裝有一個$函數

innerHTML = 123;  //對于innerHTML同樣理解

html(123)

function html(){}

onclick = function(){};  //對于onclick函數同樣

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() );
        
    });
    
});

注意：傳參為函數調用，調用帶上括號

B.原生關系和鏈式操作

在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.當一組元素的時候，取值是一組中的第一個

2. 當一組元素的時候，賦值是一組中的所有元素

attr()可設置屬性，可獲取屬性

alert($('div').attr('title'));  //獲取title屬性
//設置屬性  
$('div').attr('title','456');
$('div').attr('class','box');