Jquery第一篇【介紹Jquery、回顧JavaScript代碼、JS對象與JQ對象的區別】

什麼是Jquery？

Jquey就是一款跨主流瀏覽器的JavaScript庫，簡化JavaScript對HTML操做

就是封裝了JavaScript，可以簡化咱們寫代碼的一個JavaScript庫

爲何要使用Jquery？

我以爲很是重要的理由就是：它可以兼容市面上主流的瀏覽器，咱們學習AJAX就知道了，IE和FireFox獲取異步對象的方式是不同的，而Jquery可以屏蔽掉這些不兼容的東西…

• （1）寫少代碼,作多事情【write less do more】
• （2）免費，開源且輕量級的js庫，容量很小
  
  • 注意：項目中，提倡引用min版的js庫
• （3）兼容市面上主流瀏覽器，例如 IE，Firefox，Chrome
  
  • 注意：jQuery不是將全部JS所有封裝，只是有選擇的封裝
• （4）可以處理HTML/JSP/XML、CSS、DOM、事件、實現動畫效果，也能提供異步AJAX功能
• （5）文檔手冊很全，很詳細
• （6）成熟的插件可供選擇
• （7）提倡對主要的html標籤提供一個id屬性，但不是必須的
• （8）出錯後，有必定的提示信息
• （9）不用再在html裏面經過

回顧JavaScript

JavaScript定位到HTML的控件有三種基本的方式：

• （A）經過ID屬性：document.getElementById()
• （B）經過NAME屬性：document.getElementsByName()
• （C）經過標籤名：document.getElementsByTagName()

咱們發現，JavaScript的方法名太長了，不易於書寫代碼……

封裝優化

這些方法名太長了，獲取ID屬性、NAME屬性、標籤名屬性的控件也用不着三個方法，咱們定義下規則就行了

• 傳入的參數是#號開頭的字符串，那麼就是id屬性
• 傳入的參數是沒有#號開頭的字符串，也沒有前綴修飾的字符串就是標籤名屬性

到這裏，咱們就能夠根據傳入的參數判斷它是獲取ID屬性的控件仍是標籤名的控件了。在內部仍是調用document.getElementById()這些方法。咱們真正在使用的時候直接寫上咱們自定義規則的字符串就能夠獲取對應的控件了。

<script type="text/javascript"> //$()表示定位指定的標籤 function $(str){ //獲取str變量的類型 var type = typeof(str); //若是是string類型的話 if(type == "string"){ //截取字符串的第一個字符 var first = str.substring(0,1); //若是是#號的話 if("#" == first){ //獲取#號以後的全部字符串 var end = str.substring(1,str.length); //根據id定位標籤 var element = document.getElementById(end); //若是找到了 if(element != null){ //返回標籤 return element; }else{ alert("查無此標籤"); } }else{ } }else{ alert("參數必須是字符串類型"); } } </script>

---

JQuery對象與JavaScript對象之間的關係

• 用JavaScript語法建立的對象叫作JavaScript對象
• 用JQurey語法建立的對象叫作JQuery對象
  
  • Jquery對象只能調用Jquery對象的API
  • JavaScript對象只能調用JavaScript對象的API

JQuery對象與JavaScript對象是能夠互相轉化的，通常地，因爲Jquery用起來更加方便，咱們都是將JavaScript對象轉化成Jquery對象

Jquery轉成JavaScript對象

在Jquery中對象都是當成是數組的。所以Jquery轉成JavaScript對象語法以下：獲取數組的下標，出來的結果就是JavaScript對象了。

• jQuery對象[下標，從0開始]
• jQuery對象.get(下標，從0開始)

再次重申：Jquery對象只能調用Jquery對象的API，JavaScript對象只能調用JavaScript對象的API

---

JavaScript對象轉成Jquery

值得注意的是：在JavaScript腳本內，this是表明JavaScript對象的。

JavaScript對象轉成Jquery對象語法也很是簡單：在${}內寫上JavaScript對象，就變成了JQuery對象了。

• 語法：$(js對象)—->jQuery對象

通常地，咱們習慣在Jquery對象的變量前面寫上$，表示這是JQuery對象