JQuery學習
jQuery 是一個 JavaScript 函數庫。javascript
jQuery 庫包含如下特性：css
- HTML 元素選取
- HTML 元素操做
- CSS 操做
- HTML 事件函數
- JavaScript 特效和動畫
- HTML DOM 遍歷和修改
- AJAX
- Utilities
1.向您的頁面添加 jQuery 庫html
jQuery 庫位於一個 JavaScript 文件中，其中包含了全部的 jQuery 函數。java
能夠經過下面的標記把 jQuery 添加到網頁中：jquery
<head> <script type="text/javascript" src="jquery.js"></script> </head>
請注意，<script> 標籤應該位於頁面的 <head> 部分。ajax
2.下載 jQueryapi
共有兩個版本的 jQuery 可供下載：一份是精簡過的，另外一份是未壓縮的（供調試或閱讀）。ide
這兩個版本均可從 jQuery.com 下載。函數
3.庫的替代
Google 和 Microsoft 對 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>
4. 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 選擇器語法的組合。
document ready function
$(document).ready(function(){
--- jQuery functions go here ----
});
5. jQuery 選擇器
- jQuery 元素選擇器和屬性選擇器容許您經過標籤名、屬性名或內容對 HTML 元素進行選擇。
- 選擇器容許您對 HTML 元素組或單個元素進行操做。
- 在 HTML DOM 術語中：選擇器容許您對 DOM 元素組或單個 DOM 節點進行操做。
5.1 jQuery 使用 CSS 選擇器來選取 HTML 元素。
- $("p") 選取 <p> 元素。
- $("p.intro") 選取全部 class="intro" 的 <p> 元素。
- $("p#demo") 選取全部 id="demo" 的 <p> 元素。
5.2 jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
- $("[href]") 選取全部帶有 href 屬性的元素。
- $("[href='#']") 選取全部帶有 href 值等於 "#" 的元素。
- $("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。
- $("[href$='.jpg']") 選取全部 href 值以 ".jpg" 結尾的元素。
5.3 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" 的元素 |
6. 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 中事件方法的一些例子：
| Event 函數 | 綁定函數至 |
|---|---|
| $(document).ready(function) | 將函數綁定到文檔的就緒事件（當文檔完成加載時） |
| $(selector).click(function) | 觸發或將函數綁定到被選元素的點擊事件 |
| $(selector).dblclick(function) | 觸發或將函數綁定到被選元素的雙擊事件 |
| $(selector).focus(function) | 觸發或將函數綁定到被選元素的得到焦點事件 |
| $(selector).mouseover(function) | 觸發或將函數綁定到被選元素的鼠標懸停事件 |
- 1. 學習jQuery UI
- 2. jquery學習
- 3. jQuery 學習（一）
- 4. jquery學習。。
- 5. 學習 jQuery UI
- 6. jQuery學習
- 7. 【jQuery】——學習
- 8. jquery的學習
- 9. JQuery學習
- 10. jQuery學習day01
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 學習jQuery UI
- 2. jquery學習
- 3. jQuery 學習（一）
- 4. jquery學習。。
- 5. 學習 jQuery UI
- 6. jQuery學習
- 7. 【jQuery】——學習
- 8. jquery的學習
- 9. JQuery學習
- 10. jQuery學習day01