jQuery學習(一)
jQuery
jQuery 是為事件處理特別設計的。
jQuery庫包含以下功能:
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函式
JavaScript 特效和動畫
HTML DOM 遍歷和修改
基礎部分
1.引入JavaScript檔案:
<head>
<script src="jquery-1.10.2.min.js"></script>//本地下載後
</head>
<script type='text/javascript'>
//type=''裡面指明指令碼型別,除了可以用javascript之外,還可以是php等
不希望下載並存放 jQuery,那麼也可以通過 CDN(內容分發網路) 引用它:
<head>
<scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
使用線上版的好處:
許多使用者在訪問其他站點時,已經從百度、又拍雲、新浪、谷歌或微軟載入過 jQuery。所有結果是,當他們訪問您的站點時,會從快取中載入 jQuery,這樣可以減少載入時間。同時,大多數 CDN 都可以確保當用戶向其請求檔案時,會從離使用者最近的伺服器上返回響應,這樣也可以提高載入速度。
獨立檔案中使用jQuery
</script>
<script src="my_jquery_functions.js"></script>
</head>
文件就緒事件
在文件完全載入完後執行函式
所有 jQuery 函式位於一個 document ready 函式中
$(document).ready(function(){
// 開始寫 jQuery 程式碼...
});
2.jQuery語法
jQuery 語法是通過選取 HTML 元素,並對選取的元素執行某些操作。
基礎語法: $(selector).action()
- 選擇符(selector)"查詢"和"查詢" HTML 元素
- jQuery 的 action() 執行對元素的操作
程式碼示例:
```
$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隱藏所有 id="test" 的元素
```
3.選擇器
基於元素的 id、類、型別、屬性、屬性值等”查詢”(或選擇)HTML 元素,對 HTML 元素組或單個元素進行操作
jQuery 中所有選擇器都以美元符號開頭:$()。
- 元素選擇器
(“test”) (“p”) -選取所有元素
- #id 選擇器 $(“#test_id”)
通過 HTML 元素的 id 屬性選取指定的元素
元素的 id 應該是唯一的 - .class 選擇器
$(“.test”)
一些有用例項:
$("*") 選取所有元素
$(this) 選取當前 HTML 元素
$("p.intro") 選取 class 為 intro 的 <p> 元素
$("p:first") 選取第一個 <p> 元素
$("ul li:first") 選取第一個 <ul> 元素的第一個 <li> 元素
$("ul li:first-child") 選取每個 <ul> 元素的第一個 <li> 元素
$("[href]") 選取帶有 href 屬性的元素
$("a[target='_blank']") 選取所有 target 屬性值等於 "_blank" 的 <a> 元素
$("a[target!='_blank']") 選取所有 target 屬性值不等於 "_blank" 的 <a> 元素
$(":button") 選取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 選取偶數位置的 <tr> 元素
$("tr:odd") 選取奇數位置的 <tr> 元素
4. 事件
頁面對不同訪問者的響應叫做事件。
事件處理程式指的是當 HTML 中發生某些事件時所呼叫的方法。
例項:
在元素上移動滑鼠。
選取單選按鈕
點選元素
在事件中經常使用術語”觸發”(或”激發”)例如: “當您按下按鍵時觸發 keypress 事件”。
$(“p”).click(function(){
// 動作觸發後執行的程式碼!!
});