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

Posted on by

一、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其它相關文章！

推薦閱讀：