我們知道，不管學習任何一門框架，了解其設計的理念、目的、總體的結構及核心特性對我們使用和后續的深入理解框架都是有很大的幫助的。因此在這里先梳理一下本人對jQuery框架的一些理解。

設計目的(為什么要設計這個框架)

jQuery可以分解為JavaScript + Query。即JavaScript查詢的意思。所以jQuery的核心目標就是JavaScript查詢，通過選擇DOM元素再對DOM元素進行操作。并解決了跨瀏覽器兼容問題，使DOM操作趨于統一。

如何實現

選擇DOM是為了對其進行進一步的操作。這些操作主要包括以下幾個部分

• 屬性操作

　　如class,style,attribute等

• 元素操作

　　如元素的創建、添加、移動、復制、刪除等

• 內容操作

　　通過innerHTML等獲取或設置元素的內容

• 樣式操作

　　如對元素的width、height、position、display等樣式進行獲取或修改

• 事件操作

　　Event是用戶與瀏覽器進行動態交互的重要模塊。如添加、刪除事件等

• 通信操作

　　Ajax技術用于客戶端和服務器端進行異步通信，實現頁面的局部刷新。

jQuery 核心特性

1、jQuery()或$()

jQuery把所有的操作都包含在一個jQuery()函數中，提供了一個統一的操作入口jQuery()或$()。

jQuery框架的基礎是查詢，即查詢文檔元素對象。因此我們可以認為jQuery函數對象就是一個選擇器，并在此基礎上構建和運行查詢過濾器。

需要注意的是：jQuery對象的方法都是針對DOM元素對象進行操作的。

2、jQuery構造函數

jQuery把所有操作都包裝在一個jQuery()函數中，形成了統一(也是唯一)的操作入口。能夠解析任意的數據類型，但是能夠解析的參數包括以下四種類型

• $(expression,context)

　　expression可以是一個ID，DOM元素名，CSS表達式，XPath表達式。

　　context表示查找的上下文環境，若不寫，則表示在整個document中查找

• $(html)

　　html表示一個HTML結構字符串，此時jQuery將創建一個對應結構的html文檔片段。

$("div").append($("<p>hello world</p>"))

• jQuery(element)

　　element表示一個DOM對象或集合，把DOM元素或集合當中的DOM元素轉換為jQuery對象。

$(document).ready(function () {alert("hello world"); })
//將document文檔對象轉換為jQuery對象，然后調用ready方法，ready處理函數為document綁定一個事件，當頁面初始化之后，彈出彈出框。

• $(fn)

　　fn是一個處理函數，由于$(document).ready()使用頻繁，所以jQuery使用$()來代替。表示在DOM元素解析完成后就執行代碼

3、鏈式寫法

核心就是通過return語句返回jQuery對象。

4、選擇器

jQuery選擇器支持ID,TagName,CSS1-CSS3的表達式(即支持用CSS選擇器來選擇元素)。

只需要將字符串傳入jQuery()構造函數，就可以選擇不同的DOM對象，然后處理成jQuery對象返回。

5、擴展性

為什么jQuery需要擴展性？

簡單的說就是為了滿足不同的開發需求。為了保證jQuery的通用性并同時保證代碼簡潔性（就是體積越小越好），jQuery僅實現了基礎的方法和函數。但為了滿足不同開發需求，留下了易于擴展的方法和接口。

?

轉載于:https://www.cnblogs.com/yuliangbin/p/9281252.html

總結

以上是生活随笔為你收集整理的从零实现一个简易jQuery框架之一—jQuery框架概述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。