jQuery入門教程

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，博客地址爲http://www.cnblogs.com/jasonnode/ 。網站上有對應每一小節的在線練習你們能夠去試試。

介紹
------

歡迎學習jQuery。jQuery是一個JavaScript庫，現在已發展成爲集JavaScript、CSS、DOM、Ajax於一體的框架體系。要想用jQuery，首先要安裝上jQuery的開發環境。

首先下載jQuery
----------
在jQuery官網：`<a href="http://jquery.com">http://jquery.com</a>`中下載最新版本的jQuery。

引入jQuery
--------

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

 

您是否很疑惑爲何咱們沒有在 script 標籤中使用 type="text/javascript" ？ 在 HTML5 中，沒必要那樣作了。JavaScript 是 HTML5 以及全部現代瀏覽器中的默認腳本語言！

jQuery語法
--------

jQuery 語法是爲HTML元素的選取編制的，能夠對元素執行某些操做。

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

美圓符號定義jQuery
選擇符(selector)"查詢"和"查找"HTML元素
jQuery的action()執行對元素的操做

示例：
---

$(this).hide()- 隱藏當前元素
$("p").hide()- 隱藏全部段落
$(".test").hide()- 隱藏全部class = "test" 的全部元素
$("#test").hide()- 隱藏全部 id = "test" 的元素

jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合，接下來的第二章咱們將講解更多的選擇器的知識。

傳說中的hello world
---------------

在學習新的編程知識的時候，每每都從一個「hello world」例子開始，那麼學習jQuery，咱們也從先從一個「hello world」開始。

<title>傳說中的hello world</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
alert("hello world!");
});
</script>

$(document).ready(function (){
//代碼段
});

能夠簡化成：

$(function (){
//代碼段
});

jQuery的優點：
----------

1.輕量級。jQuery很是輕巧，最新的jQuery版本壓縮後，大小保持在80k左右。

2.強大的選擇器。jQuery容許使用從CSS1到CSS3幾乎全部的選擇器，以及jQuery本身的高級而複雜的選擇器。甚至你能夠編寫屬於本身的選擇器。咱們將在第二章中詳細講解。

3.出色的DOM操做的封裝；jQuery封裝了大量經常使用的DOM操做，讓你能輕鬆地完成各類本來很是複雜的操做。第三章將重點介紹jQuery的DOM操做。

4.可靠的事件處理機制；第四章中咱們將詳細講解。

5.完善的Ajax；jQuery將全部的Ajax操做封裝到一個函數$.ajax()裏，使得開發者處理Ajax的時候可以專心處理業務邏輯而無需關係複雜的瀏覽器兼容性和XMLHttpRequest對象的建立和使用的問題。在第六章將會重點介紹。

6.出色的瀏覽器兼容性等等。可是jQuery2.0及後續版本將再也不支持IE6/7/8瀏覽器。