• 初識(shí)jQuery
  • [jQuery基本原理](# jquery基本原理)
  • [jQuery和JavaScript的區(qū)別](# jquery和javascript的區(qū)別)
  • [js對(duì)象和jQuery對(duì)象相互轉(zhuǎn)換](# js對(duì)象和jquery對(duì)象相互轉(zhuǎn)換)

初識(shí)jQuery

這篇文章是作為自己的第一篇博客，選擇jQuery是因?yàn)槟壳罢趯W(xué)習(xí)這個(gè)闭树，對(duì)于jQuery的基本認(rèn)知在此不會(huì)多說(shuō)（百度即可）扣癣，只是想記錄一下jQuery基本原理，它與JavaScript有什么不同橡淆，為什么專(zhuān)業(yè)人士稱為jQuery庫(kù)而不是jQuery框架

jQuery基本原理

• jQuery主要是$()的形式召噩，那么，這個(gè)$函數(shù)大致可以如下寫(xiě)法：

        function $(str){
            //如果str變量是字符串類(lèi)型
            if( typeof(str) == "string" ){
                //獲取str變量中的第一個(gè)字符
                var init = str.substring(0,1);
                //如果第一個(gè)字符是#的話
                if("#" == init){
                    //獲取str變量中除第一個(gè)字符外的其它字符
                    var other = str.substring(1,str.length);
                    //通過(guò)ID定位節(jié)點(diǎn)
                    var element = document.getElementById(other);
                    //如果找到了節(jié)點(diǎn)
                    if(element != null){
                        //返回
                        return element;
                    }else{
                        //返回
                        return null;
                    }
                }else{
                    //繼續(xù)判斷
                }
            }else{
                alert("參數(shù)必須為string類(lèi)型");
            }   
        }
  
    所以document.getElementById(id)就可以寫(xiě)成$("#id")逸爵，后者是jQuery對(duì)象具滴，所以可以調(diào)用jQuery方法，
    document.getElementById(id).onclick()==>$("#id").onclick
  

由于jQuery內(nèi)部對(duì)于JavaScript并沒(méi)有封裝完全,而是有選擇性的封裝师倔，最常見(jiàn)的例子就是alert(),這就是JavaScript沒(méi)有被封裝的典型构韵，因此，常常說(shuō)jQuery類(lèi)庫(kù)

jQuery和JavaScript的區(qū)別

• 經(jīng)過(guò)上述說(shuō)明趋艘，可以發(fā)現(xiàn)疲恢，jQuery和JavaScript其實(shí)并沒(méi)有什么不同，只是jQuery對(duì)JavaScript包了一層外衣而已

  所以他們的區(qū)別如下：

    （1）js對(duì)象的三種基本定位方式
           （A）通過(guò)ID屬性：document.getElementById()
           （B）通過(guò)NAME屬性：document.getElementsByName()
           （C）通過(guò)標(biāo)簽名：document.getElementsByTagName()
    （2）jQuery對(duì)象的三種基本定位方式
           （A）通過(guò)ID屬性：$("#id屬性值")
           （B）通過(guò)標(biāo)簽名：$("標(biāo)簽名")
           （C）通過(guò)CLASS屬性：$(".樣式名")
    （3）js對(duì)象出錯(cuò)的顯示
            沒(méi)有合理的提示信息
            例如：alert(document.getElementById("usernameIDD").value)
    （4）jQuery對(duì)象出錯(cuò)的顯示
            有合理的提示信息瓷胧，例如：undefined
            例如：alert($("#usernameIDD").val())   
  

js對(duì)象和jQuery對(duì)象相互轉(zhuǎn)換

1. 什么是js對(duì)象及代碼規(guī)則

        就是使用js-API显拳，即Node接口中的API或是傳統(tǒng)JS語(yǔ)法定義的對(duì)象，叫做js對(duì)象
        js代碼規(guī)則----divElement
        var divElement = document.getElementById("divID");
        var nameArray = new Array(3);
   

2. 什么是jQuery對(duì)象及代碼規(guī)則

3.      就是使用jQuery-API搓萧，返回的對(duì)象就叫做jQuery對(duì)象
        jQuery代碼規(guī)則----$div
        var $div = $("#divID")
        聲明：上述代碼規(guī)則杂数，只是個(gè)人規(guī)則，不代表所有人都這樣做
   

4. js對(duì)象轉(zhuǎn)成jQuery對(duì)象【重點(diǎn)】

        語(yǔ)法：$(js對(duì)象)---->jQuery對(duì)象
        例如：$(divElement)---->$div
        例如：$(this)---->$this
        注意：jQuery對(duì)象將js對(duì)象做了封裝瘸洛，js對(duì)象二邊無(wú)引號(hào)
        var inputElement = document.getElementById("inputID");//js對(duì)象 
        var $input = $(inputElement);//jquery對(duì)象
        var txt = $input.val();
        alert(txt);
   

5. jQuery對(duì)象轉(zhuǎn)成js對(duì)象

        語(yǔ)法1：jQuery對(duì)象[下標(biāo)揍移，從0開(kāi)始]
        語(yǔ)法2：jQuery對(duì)象.get(下標(biāo)，從0開(kāi)始)
        例如：$div[0]---->divElement
        注意：不同的對(duì)象只能調(diào)用對(duì)應(yīng)的api方法反肋，即jQuery對(duì)象不能調(diào)用js對(duì)象的api那伐，反之亦然
        $div.innerHTML（錯(cuò)）
        divElement.html(錯(cuò)) 
        var $div = $("#divID");//jquery對(duì)象
        var divElement = $div[0];//js對(duì)象(方式一)
        //var divElement = $div.get(0);//js對(duì)象(方式二)
        var txt = divElement.innerHTML;       
        alert(txt);