生活不菜，菜鳥不菜。大家好，我是互聯網小菜鳥，又和大家見面了。近期，看了一下JQuery，感覺挺簡單，然後和大家一起聊聊JQuery，順便幫助那些菜鳥們JQuery入門。下面我們就開始。
首先我們先認識一下JQuery
１.jQuery 是一個 JavaScript 庫。
２.jQuery 極大地簡化了 JavaScript 編程。
３.jQuery 很容易學習。
在我們開始學習 jQuery 之前，菜鳥們應該對以下知識有基本的瞭解：
- HTML
- CSS
- JavaScript
jQuery 庫 - 特性
jQuery 是一個 JavaScript 函數庫。
jQuery 庫包含以下特性：
- HTML 元素選取
- HTML 元素操作
- CSS 操作
- HTML 事件函數
- JavaScript 特效和動畫
- HTML DOM 遍歷和修改
- AJAX
- Utilities
說白了，JQuery就是高級的JavaScript，我們也是在調用它的接口，它的一些方法，想到這裏你就應該感覺，很簡單，那就是我需要什麼，就用它所提供的方法唄。完全正確！你在使用JQuery時，首先在本地要有JQuery庫（這樣最好），還有一種方法是調用Google或者調用Microsoft提供的網上在線的加載 CDN jQuery 核心文件。方法分別是
使用 Google 的 CDN
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>
使用 Microsoft 的 CDN
<head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>
調用都是在head標籤裏邊的。我在這裏也建議大家下載Notepad++很好使，一般編輯都沒問題。
本菜鳥認爲，學習一門語言，首先學語法，然後是變量+函數，然後就可以寫一些小項目練手了，具體的一些編程技巧可以在項目中學習， 下面就要開始了我們簡單的JQuery之旅。
jQuery 語法
jQuery 語法是爲 HTML 元素的選取編制的，可以對元素執行某些操作。
基礎語法是：$(selector).action()
- 美元符號定義 jQuery
- 選擇符（selector）“查詢”和“查找” HTML 元素
- jQuery 的 action() 執行對元素的操作
示例
$(this).hide() - 隱藏當前元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button type="button">Click me</button>
</body>
</html>
$("p").hide() - 隱藏所有段落
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
$("p.test").hide() - 隱藏所有 class="test" 的段落
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
$("#test").hide() - 隱藏所有 id="test" 的元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
提示：jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。
文檔就緒函數
您也許已經注意到在我們的實例中的所有 jQuery 函數位於一個 document ready 函數中：
$(document).ready(function(){
--- jQuery functions go here ----
});
這是爲了防止文檔在完全加載（就緒）之前運行 jQuery 代碼。
jQuery 選擇器
在前面的章節中，我們展示了一些有關如何選取 HTML 元素的實例。
關鍵點是學習 jQuery 選擇器是如何準確地選取您希望應用效果的元素。
jQuery 元素選擇器和屬性選擇器允許您通過標籤名、屬性名或內容對 HTML 元素進行選擇。
選擇器允許您對 HTML 元素組或單個元素進行操作。
在 HTML DOM 術語中：
選擇器允許您對 DOM 元素組或單個 DOM 節點進行操作。
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取 id="demo" 的第一個 <p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改爲紅色：
實例
$("p").css("background-color","red");
更多的選擇器實例
| 語法 | 描述 |
|---|---|
| $(this) | 當前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的第一個元素 |
| $("ul li:first") | 每個 <ul> 的第一個 <li> 元素 |
| $("[href$='.jpg']") | 所有帶有以 ".jpg" 結尾的屬性值的 href 屬性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
具體很多的選擇器參考，各位菜鳥可以看一下這個網站http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
jQuery 是爲事件處理特別設計的。
jQuery 事件函數
jQuery 事件處理方法是 jQuery 中的核心函數。
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件“觸發”（或“激發”）經常會被使用。
通常會把 jQuery 代碼放到 <head>部分的事件處理方法中：
實例
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
在上面的例子中，當按鈕的點擊事件被觸發時會調用一個函數：
$("button").click(function() {..some code... } )
該方法隱藏所有 <p> 元素：
$("p").hide();
大家注意：
單獨文件中的函數
如果您的網站包含許多頁面，並且您希望您的 jQuery 函數易於維護，那麼請把您的 jQuery 函數放到獨立的 .js 文件中。
當我們在教程中演示 jQuery 時，會將函數直接添加到 <head> 部分中。不過，把它們放到一個單獨的文件中會更好，就像這樣（通過 src 屬性來引用文件）：
實例
<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="my_jquery_functions.js"></script> </head>
jQuery 名稱衝突
jQuery 使用 $ 符號作爲 jQuery 的簡介方式。
某些其他 JavaScript 庫中的函數（比如 Prototype）同樣使用 $ 符號。
jQuery 使用名爲 noConflict() 的方法來解決該問題。
var jq=jQuery.noConflict()，幫助您使用自己的名稱（比如 jq）來代替 $ 符號。
結論
由於 jQuery 是爲處理 HTML 事件而特別設計的，那麼當您遵循以下原則時，您的代碼會更恰當且更易維護：
- 把所有 jQuery 代碼置於事件處理函數中
- 把所有事件處理函數置於文檔就緒事件處理器中
- 把 jQuery 代碼置於單獨的 .js 文件中
- 如果存在名稱衝突，則重命名 jQuery 庫
jQuery 事件
下面是 jQuery 中事件方法的一些例子：
| Event 函數 | 綁定函數至 |
|---|---|
| $(document).ready(function) | 將函數綁定到文檔的就緒事件（當文檔完成加載時） |
| $(selector).click(function) | 觸發或將函數綁定到被選元素的點擊事件 |
| $(selector).dblclick(function) | 觸發或將函數綁定到被選元素的雙擊事件 |
| $(selector).focus(function) | 觸發或將函數綁定到被選元素的獲得焦點事件 |
| $(selector).mouseover(function) | 觸發或將函數綁定到被選元素的鼠標懸停事件 |
這就是最基礎的JQuery，剩下的，大家找個小項目，自己定一個需求，然後用到什麼就寫什麼。希望大家看得開心，編的愉快~