初識jQuery

標籤：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);

本文出自 “AdolphMaster” 部落格，請務必保留此出處http://adolphmaster.blog.51cto.com/12991875/1934030

初識jQuery