jQuery實(shí)例分析解析-沈陽(yáng)易勢(shì)科技有限公司

build網(wǎng)站制作

build網(wǎng)站制作當(dāng)前位置：首頁(yè)>主要服務(wù)>網(wǎng)站制作

jQuery實(shí)例分析解析

Jquery是一個(gè)優(yōu)秀的Javascript框架，特別是對(duì)css和XPath的支持，使我們寫(xiě)js變得更加方便！如果你不是個(gè)js高手又想寫(xiě)出優(yōu) 秀的js效果，jQuery可以幫你達(dá)到目的！jQuery的開(kāi)篇聲明里有一段非常重要的話:jQuery是為了改變javascript的編碼方式而設(shè)計(jì)的。從這段話可以看出jQuery本身并不是UI組件庫(kù)或其他的一般AJAX類(lèi)庫(kù)。jQuery改變javascript編碼方式！

那么它是如何實(shí)現(xiàn)它的聲明的呢?這里,用以下的一段簡(jiǎn)短的使用流程:
1)查找(創(chuàng)建)jQuery對(duì)象:$("selector");
2)調(diào)用jQuery對(duì)象的方法完成我們需要完成的工作:$("selector").doOurWork();
jQuery就是以這種可以說(shuō)是最簡(jiǎn)單的編碼邏輯來(lái)改變javascript編碼方式的.這兩個(gè)步驟是jQuery的編碼邏輯核心!
要實(shí)現(xiàn)這種簡(jiǎn)潔編碼方式,創(chuàng)建jQuery對(duì)象這一環(huán)節(jié)至關(guān)重要.因此,jQuery的dom元素查找能力相當(dāng)強(qiáng)悍.此外,jQuery對(duì)象的方法肯定是有限的,有限的方法滿足不了日益增長(zhǎng)各有所需的要求,所以,必須提供jQuery對(duì)象方法的擴(kuò)展能力.
強(qiáng)悍的dom元素查找能力,以及隨心所欲的方法擴(kuò)展,這兩點(diǎn)正是jQuery的核心所在!

來(lái)一個(gè)簡(jiǎn)單的示例,來(lái)說(shuō)明jQuery是如何工作的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無(wú)標(biāo)題頁(yè)</title>
</head>
<body id="bd">
<a href="http://www.baidu.com">baidu</a>
</body>
</html>
<script type="text/javascript" src="../Script/jquery.js"></script>
<script type="text/javascript" >
$(function(){
    $("a").click(function(e){//1)查找$("a");2)jQuery對(duì)象事件click;3)jQuery對(duì)象方法hide
        $(this).hide("slow");
        return false;
    });
});
</script>

jQuery中有一個(gè)"配置"的思想,這一點(diǎn)使得對(duì)象的屬性/事件等設(shè)置變得容易理解且十分簡(jiǎn)便,如下一個(gè)拖拽組件的初始化:

$(document).ready(
    function()
    {
        $('#drag1').Draggable({
            handle: "ax",               //屬性設(shè)置
            onStart: function(el,x,y){  //事件監(jiān)聽(tīng)器設(shè)置
            }
        });
    }
);

可以看到,$("#drag1")是查找并創(chuàng)建一個(gè)jquery對(duì)象,然后調(diào)用Draggable方法進(jìn)行拖拽初始化,在此方法調(diào)用時(shí),傳遞一個(gè)"配置"對(duì)象,進(jìn)行拖拽操作的初始化配置.這一"配置"的思想,極大簡(jiǎn)化了一些編碼步驟,并相當(dāng)直觀和易懂.

三個(gè)問(wèn)答:

1)問(wèn):為什么$(selector)之后,返回的是jQuery對(duì)象?
答:從jQuery的源代碼中,我們可以知道:var $ = jQuery.因此當(dāng)我們$(selector)操作時(shí),其實(shí)就是jQuery(selector),創(chuàng)建的是一個(gè)jQuery對(duì)象.當(dāng)然正確的寫(xiě)法應(yīng)該是這樣的:var jq = new $(selector);而jQuery使用了一個(gè)小技巧在外部避免了new,在jquery方法內(nèi)部:if ( window == this ) return new jQuery(selector);
2)問(wèn):為什么創(chuàng)建一個(gè)jQuery對(duì)象之后,我們可以這樣寫(xiě)$(selector).each(function(index){...});進(jìn)行遍歷操作呢?
答:其實(shí)jQuery(selector)方法調(diào)用時(shí),在jQuery(selector)方法內(nèi)部,最后返回的是一個(gè)數(shù)組:return this.setArray(a);而each方法體內(nèi)部是一個(gè)for循環(huán),在循環(huán)體內(nèi)是這樣調(diào)用的:method.call(this[ i],i).
3)問(wèn):為什么jQuery能做到j(luò)Query對(duì)象屬性/方法/事件的插件式擴(kuò)展?
答:如果您有一些javasciprt的面向?qū)ο蠓矫娴闹R(shí),就會(huì)知道,jQuery.prototype原型對(duì)象上的擴(kuò)展屬性/方法和事件,將會(huì)給jQuery的對(duì)象"擴(kuò)展".基于這一點(diǎn),jQuery是這樣寫(xiě)的:jQuery.fn = jQuery.prototype.

所以,當(dāng)我們擴(kuò)展一個(gè)插件功能時(shí),如下:

jQuery.fn.check = function() {
  return this.each(function() {
    this.checked = true;
  });
};

其實(shí)就是:

jQuery.prototype.check = function() {
  return this.each(function() {
    this.checked = true;
  });
};

綜上所述,jQuery給我們帶來(lái)了一個(gè)簡(jiǎn)潔方便的編碼模型(創(chuàng)建jQuery對(duì)象;直接使用jQuery對(duì)象的屬性/方法/事件),一個(gè)強(qiáng)悍的dom元素查找器($),插件式編程接口(jQuery.fn),以及插件初始化的"配置"對(duì)象思想.

實(shí)現(xiàn)自己的jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
</head>
<body>
<div id="d">divvv</div>
<div id="fsd">fdsf</div>
</body>
</html>
<script type="text/javascript">
//實(shí)現(xiàn)自己的MyQuery框架
var MyQuery = function(selector){
    if ( window == this ) return new MyQuery(selector);
    //這里只實(shí)現(xiàn)dom類(lèi)型的簡(jiǎn)單查找,嘿嘿
    var doms = document.getElementsByTagName(selector);
    var arr = [];
    for(var i=0; i<doms.length; i++){
        arr.push(doms.item(i));
    }
    return this.setArray(arr);
}
MyQuery.prototype.setArray = function( arr ) {
        this.length = 0;
        [].push.apply( this, arr );
        return this;
}
MyQuery.fn = MyQuery.prototype;
var $ = MyQuery;

//插件擴(kuò)展1)each
MyQuery.fn.each = function(method){
    for(var i=0,l=this.length; i<l; i++){
        method.call(this[i],i);
    }
}
//插件擴(kuò)展2)show
MyQuery.fn.show = function(){
    this.each(function(i){
        alert(i+":"+this.id+":"+this.innerHTML);
    });
}
//debugger
$("div").show();
</script>