從零實現一個簡易jQuery框架之一—jQuery框架概述

咱們知道，無論學習任何一門框架，瞭解其設計的理念、目的、整體的結構及核心特性對咱們使用和後續的深刻理解框架都是有很大的幫助的。所以在這裏先梳理一下本人對jQuery框架的一些理解。

設計目的(爲何要設計這個框架)

jQuery能夠分解爲JavaScript + Query。即JavaScript查詢的意思。因此jQuery的核心目標就是JavaScript查詢，經過選擇DOM元素再對DOM元素進行操做。並解決了跨瀏覽器兼容問題，使DOM操做趨於統一。

如何實現

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

• 屬性操做

　　如class,style,attribute等

• 元素操做

　　如元素的建立、添加、移動、複製、刪除等

• 內容操做

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

• 樣式操做

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

• 事件操做

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

• 通訊操做

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

jQuery 核心特性

一、jQuery()或$()

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

jQuery框架的基礎是查詢，即查詢文檔元素對象。所以咱們能夠認爲jQuery函數對象就是一個選擇器，並在此基礎上構建和運行查詢過濾器。

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

二、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元素解析完成後就執行代碼

三、鏈式寫法

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

四、選擇器

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

只須要將字符串傳入jQuery()構造函數，就能夠選擇不一樣的DOM對象，而後處理成jQuery對象返回。

五、擴展性

爲何jQuery須要擴展性？

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