一、jQuery簡(jiǎn)介

JQ是JS的一個(gè)優(yōu)秀的庫(kù)，大型開(kāi)發(fā)必備。在此，我想說(shuō)的是，JQ里面很多函數(shù)使用和JS類似，所以學(xué)好JS再學(xué)習(xí)JQ很容易，其次也不要因?yàn)闀?huì)使用JQ而不學(xué)習(xí)JS，JQ只是一個(gè)輔助工具。
詳細(xì)學(xué)習(xí)請(qǐng)?jiān)L問(wèn)

www.jQuery.com

二、JQ的好處

1.簡(jiǎn)化JS 的復(fù)雜操作

2.不再需要關(guān)心兼容性

3.提供大量的實(shí)用方法

三、設(shè)計(jì)思想

1.選擇網(wǎng)頁(yè)元素

A.模擬css選擇元素

$('#div1')

對(duì)于數(shù)組可省略循環(huán)

B.獨(dú)有表達(dá)式選擇

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

C.多種篩選方法

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

2.JQ寫(xiě)法

A.方法函數(shù)化

window.onload = function(){};  //js寫(xiě)法
$(function(){});  //JQ寫(xiě)法
function $(){}  //假裝有一個(gè)$函數(shù)

innerHTML = 123;  //對(duì)于innerHTML同樣理解
html(123)
function html(){}

onclick = function(){};  //對(duì)于onclick函數(shù)同樣
click(function(){})
function click(){}

下面將一段js代碼，用jq表示出來(lái)

window.onload = function(){    //js代碼
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function(){
        alert( this.innerHTML );
    };
};

$(function(){    //JQ代碼
    //var oDiv = $('#div1');
    $('#div1').click(function(){   
       //此處若沒(méi)有注釋上一句，則可以寫(xiě)成oDiv.click(function(){
        alert( $(this).html() );
    });
});

注意：傳參為函數(shù)調(diào)用，調(diào)用帶上括號(hào)

B.原生關(guān)系和鏈?zhǔn)讲僮?/h4>

在jq中可以純js寫(xiě)法，也可以純jq寫(xiě)法，但是不要兩者混著用

$('#div1').click(function(){
        alert( $(this).html() );  //jq的寫(xiě)法
        alert( this.innerHTML );  //js的寫(xiě)法
        alert( $(this).innerHTML );  //錯(cuò)誤的
        alert( this.html() );  //錯(cuò)誤的
    });

jq中可以將多個(gè)事件寫(xiě)在一個(gè)后面 == 鏈?zhǔn)讲僮?/p>

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)一組元素的時(shí)候，取值是一組中的第一個(gè)

2. 當(dāng)一組元素的時(shí)候，賦值是一組中的所有元素

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

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

以上就是jQuery初識(shí)之設(shè)計(jì)思想方法函數(shù)示例的詳細(xì)內(nèi)容，更多關(guān)于jQuery設(shè)計(jì)思想方法函數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論