初識jQuery

初識jQuery

這篇文章是做爲本身的第一篇博客，選擇jQuery是由於目前正在學習這個，對於jQuery的基本認知在此不會多說（百度便可），只是想記錄一下jQuery基本原理，它與JavaScript有什麼不一樣，爲何專業人士稱爲jQuery庫而不是jQuery框架

jQuery基本原理

• jQuery主要是$()的形式，那麼，這個$函數大體能夠以下寫法：

        function $(str){          //若是str變量是字符串類型
            if( typeof(str) == "string" ){              //獲取str變量中的第一個字符
                var init = str.substring(0,1);              //若是第一個字符是#的話
                if("#" == init){                  //獲取str變量中除第一個字符外的其它字符
                    var other = str.substring(1,str.length);                  //經過ID定位節點
                    var element = document.getElementById(other);                  //若是找到了節點
                    if(element != null){                      //返回
                        return element;
                    }else{                      //返回
                        return null;
                    }
                }else{                  //繼續判斷
                }
            }else{
                alert("參數必須爲string類型");
            }    
        }
  
    因此document.getElementById(id)就能夠寫成$("#id")，後者是jQuery對象，因此能夠調用jQuery方法，  document.getElementById(id).onclick()==>$("#id").onclick

  因爲jQuery內部對於JavaScript並無封裝徹底,而是有選擇性的封裝，最多見的例子就是alert(),這就是JavaScript沒有被封裝的典型，所以，經常說jQuery類庫

jQuery和JavaScript的區別

• 通過上述說明，能夠發現，jQuery和JavaScript其實並無什麼不一樣，只是jQuery對JavaScript包了一層外衣而已

  因此他們的區別以下：

    （1）js對象的三種基本定位方式
           （A）經過ID屬性：document.getElementById()
           （B）經過NAME屬性：document.getElementsByName()
           （C）經過標籤名：document.getElementsByTagName()
    （2）jQuery對象的三種基本定位方式
           （A）經過ID屬性：$("#id屬性值")
           （B）經過標籤名：$("標籤名")
           （C）經過CLASS屬性：$(".樣式名")
     （3）js對象出錯的顯示
            沒有合理的提示信息
            例如：alert(document.getElementById("usernameIDD").value)
    （4）jQuery對象出錯的顯示
            有合理的提示信息，例如：undefined
            例如：alert($("#usernameIDD").val())

js對象和jQuery對象相互轉換

1. 什麼是js對象及代碼規則

        就是使用js-API，即Node接口中的API或是傳統JS語法定義的對象，叫作js對象
        js代碼規則----divElement     var divElement = document.getElementById("divID");     var nameArray = new Array(3);

2. 什麼是jQuery對象及代碼規則

3.      就是使用jQuery-API，返回的對象就叫作jQuery對象
        jQuery代碼規則----$div
        var $div = $("#divID")
        聲明：上述代碼規則，只是我的規則，不表明全部人都這樣作

4. js對象轉成jQuery對象【重點】

        語法：$(js對象)---->jQuery對象
        例如：$(divElement)---->$div
        例如：$(this)---->$this
        注意：jQuery對象將js對象作了封裝，js對象二邊無引號     var inputElement = document.getElementById("inputID");//js對象 
        var $input = $(inputElement);//jquery對象
        var txt = $input.val();
        alert(txt);

5. jQuery對象轉成js對象

        語法1：jQuery對象[下標，從0開始]
        語法2：jQuery對象.get(下標，從0開始)
        例如：$div[0]---->divElement
        注意：不一樣的對象只能調用對應的api方法，即jQuery對象不能調用js對象的api，反之亦然     $div.innerHTML（錯）
        divElement.html(錯) 
        var $div = $("#divID");//jquery對象
        var divElement = $div[0];//js對象(方式一)
        //var divElement = $div.get(0);//js對象(方式二)
        var txt = divElement.innerHTML;          
        alert(txt);