jQuery初識之設計思想方法函數示例

一、jQuery簡介

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

www.jQuery.com

二、JQ的好處

1.簡化JS 的復雜操作

2.不再需要關心兼容性

3.提供大量的實用方法

三、設計思想

1.選擇網頁元素

A.模擬css選擇元素

$('#div1')

對於數組可省略循環

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');

以上就是jQuery初識之設計思想方法函數示例的詳細內容,更多關於jQuery設計思想方法函數的資料請關註WalkonNet其它相關文章!

推薦閱讀: