jQuery基礎

1.簡介
jQuery 庫可以透過一行簡單的標記被新增到網頁中。

1）什麼是 jQuery ？
jQuery是一個JavaScript函式庫。
jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。

HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函式
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities

除此之外，Jquery還提供了大量的外掛。

2)為什麼使用 jQuery ？
jQuery 團體知道JS在不同瀏覽器中存在著大量的相容性問題，目前jQuery相容於所有主流瀏覽器, 包括Internet Explorer 6!

2.jQuery 安裝

1)從 jquery.com 下載 jQuery 庫
2)從 CDN 中載入 jQuery, 如從 Google 中載入 jQuery
如果您不希望下載並存放 jQuery
如果你的站點使用者是國內的，建議使用百度、又拍雲、新浪等國內CDN地址，如果你站點使用者是國外的可以使用谷歌和微軟

百度CDN:

使用百度、又拍雲、新浪、谷歌或微軟的 jQuery，有一個很大的優勢：
許多使用者在訪問其他站點時，已經從百度、又拍雲、新浪、谷歌或微軟載入過 jQuery。所有結果是，當他們訪問您的站點時，會從快取中載入 jQuery，這樣可以減少載入時間

3.jQuery語法

基礎語法： $(selector).action()

$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有 
 元素
$("p .test").hide() - 隱藏所有 class="test" 的 
 元素
$("#test").hide() - 隱藏所有 id="test" 的元素

jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。

jQuery 是一個 JavaScript 庫。
jQuery 庫包含以下特性：

HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函式
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities

jQuery 庫位於一個 JavaScript 檔案中，其中包含了所有的 jQuery 函式。
可以透過下面的標記把 jQuery 新增到網頁中：

基礎 jQuery 例項

下面的例子演示了 jQuery 的 hide() 函式，隱藏了 HTML 文件中所有的

This is a heading
This is a paragraph.
This is another paragraph.
Click me

$()
$是jQuery類的一個別稱，$() 構造了一個jQuery物件。所以$()可以叫做jQuery的建構函式。

1. $()可以是$(expresion)，即css選擇器、Xpath或html元素.

$("a").click(function(){...})

alert($("div>p").html());

$()中的是一個查詢表示式.也就是用“div>p”這樣一個查詢表示式構建了一個jQuery物件，然後的“html()”意思是顯示其html內容。

$("
Hello
").appendTo("body");

$()中的是一個字串，用這樣一段字串構建了jQuery物件，然後向

中的內容。

注意：DOM

圖片.png

HTML DOM 定義了訪問和操作 HTML 文件的標準。

什麼是 DOM？
DOM 是 W3C（全球資訊網聯盟）的標準。
DOM 定義了訪問 HTML 和 XML 文件的標準：
“W3C 文件物件模型 （DOM） 是中立於平臺和語言的介面，它允許程式和指令碼動態地訪問和更新文件的內容、結構和樣式。”
W3C DOM 標準被分為 3 個不同的部分：

核心 DOM - 針對任何結構化文件的標準模型
XML DOM - 針對 XML 文件的標準模型
HTML DOM - 針對 HTML 文件的標準模型

DOM 是 Document Object Model（文件物件模型）的縮寫。

1. 用jQuery物件的幾個方法（如方法find()、each()等）

$("#orderedlist).find("li")

就像 $("#orderedlist li"). each()一樣迭代了所有的li

表示式中的“#”表示HTML中的ID，如上例中的“#orderedlist”就表示“ID為orderedlist所在的標籤”

ztree是 jQuery 的.

注意：
js中不能加$() 這些表示式，可以加../這些相對路徑。

注意：

圖片.png

如果引入到哪兒，那麼因該是引入到的地方的相對路徑。

示例：

function change_page_size(this){        var v = $(this).val();   // 這個$(this)是擁有此方法的html元素
        $.cookie()
    }

作者：廖馬兒
連結：