前端基礎之jQuery

1、jQuery的基礎介紹

2、jQuery對象和基礎語法

3、查找標籤

4、操做標籤

5、事件

6、動畫效果

7、補充

 

 

 

 

 

1、jQuery的基礎介紹

---

1.jQuery介紹

2.jQuery的優點

3.jQuery的內容

4.jQuery的版本

 

1.jQuery介紹

 

jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。

 

jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，可以極大地簡化JavaScript編程。它的宗旨就是：「Write less, do more.「

 

2.jQuery的優點

 

1. 一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面加載速度。
2.  豐富的DOM選擇器,jQuery的選擇器用起來很方便，好比要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再好比要將一個表格的隔行變色，jQuery也是一行代碼搞定。
3.  鏈式表達式。jQuery的鏈式操做能夠把多個操做寫在一行代碼裏，更加簡潔。
4. 事件、樣式、動畫支持。jQuery還簡化了js操做css的代碼，而且代碼的可讀性也比js要強。
5. Ajax操做支持。jQuery簡化了AJAX操做，後端只需返回一個JSON格式的字符串就能完成與前端的通訊。
6. 跨瀏覽器兼容。jQuery基本兼容瞭如今主流的瀏覽器，不用再爲瀏覽器的兼容問題而傷透腦筋。
7.  插件擴展開發。jQuery有着豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件，而且用jQuery插件作出來的效果很炫，而且能夠根據本身須要去改寫和封裝插件，簡單實用。

 

3.jQuery的內容

 

1. 選擇器

2. 篩選器

3. 樣式操做

4. 文本操做

5. 屬性操做

6. 文檔處理

7. 事件

8. 動畫效果

9. 插件

10. each、data、Ajax

下載連接： jQuery官網

中文文檔： jQuery AP中文文檔

 

4.jQuery的版本

 

* 1.x：兼容IE678,使用最爲普遍的，官方只作BUG維護，功能再也不新增。所以通常項目來講，使用1.x版本就能夠了，最終版本：1.12.4 (2016年5月20日)

* 2.x：不兼容IE678，不多有人使用，官方只作BUG維護，功能再也不新增。若是不考慮兼容低版本的瀏覽器可使用2.x，最終版本：2.2.4 (2016年5月20日)

* 3.x：不兼容IE678，只支持最新的瀏覽器。須要注意的是不少老的jQuery插件不支持3.x版。目前該版本是官方主要更新維護的版本。

 

維護IE678是一件讓人頭疼的事情，通常咱們都會額外加載一個CSS和JS單獨處理。值得慶幸的是使用這些瀏覽器的人也逐步減小，PC端用戶已經逐步被移動端用戶所取代，若是沒有特殊要求的話，通常都會選擇放棄對678的支持。

 

2、jQuery對象和基礎語法

---

1.jQuery對象

2.jQuery的基礎語法

 

1.jQuery對象

 

jQuery對象就是經過jQuery包裝DOM對象後產生的對象。

jQuery對象是 jQuery獨有的。

若是一個對象是 jQuery對象，那麼它就可使用jQuery裏的方法：例如$(「#i1」).html()。

 

$("#i1").html()的意思是：獲取id值爲 i1的元素的html代碼。其中 html()是jQuery裏的方法。

至關於： document.getElementById("i1").innerHTML;

 

雖然 jQuery對象是包裝 DOM對象後產生的，可是 jQuery對象沒法使用 DOM對象的任何方法，同理 DOM對象也沒不能使用 jQuery裏的方法。

一個約定，咱們在聲明一個jQuery對象變量的時候在變量名前面加上$：

var $variable = jQuery對像

var variable = DOM對象

$variable[0]     //jQuery對象轉成DOM對象

拿上面那個例子舉例，jQuery對象和DOM對象的使用：

$("#i1").html();     //jQuery對象可使用jQuery的方法

$("#i1")[0].innerHTML;     // DOM對象使用DOM的方法

 

2.jQuery的基礎語法

 

$(selector).action()

 

3、查找標籤

---

1.選擇器

2.篩選器

3.左側菜單

 

1.選擇器

 

id選擇器：

$("#id")

 

標籤選擇器：

$("tagName")

 

class選擇器：

$(".className")

 

配合使用：

$("div.c1")    // 找到

 

 

 

 

 

2.篩選器

 

 

 

 

 

3.左側菜單

 

 

 

 

 

 

 

 

 

4、操做標籤

1.樣式操做

2.文本操做

3.屬性操做

4.文檔處理

 

 

 

 

5、事件

1.經常使用事件

2.事件綁定

3.移除事件

4.阻止後續事件執行

5.頁面載入

6.事件委託

 

 

 

 

 

 

 

 

6、動畫效果

 

 

 

 

 

 

 

 

 

 

7、補充