文章目錄
jQuery簡介
- jQuery由美國人John Resig於2006年創建
- jQuery是目前最流行的JavaScript程序庫，它是對JavaScript對象和函數的封裝
- 它的設計思想是write less，do more
配置環境
<script src="js/jQuery-1.12.4.js" type="text/javascript"></script>
DOM對象和jQuery對象
- **DOM對象:**直接使用JavaScript獲取的節點對象
- **jQuery對象:**使用jQuery包裝DOM對象後產生的對象，它能使用jQuery中的方法
- DOM對象和jQuery對象分別擁有一套獨立的方法，不能混用
DOM對象轉jQuery對象
使用$ () 函數進行轉化$ () DOM對象
// DOM對象
var txtName = document.getElementById("txtName");
// jQuery對象
var $txtName = $(txtName);
jQuery對象命名一般約定以(this)，this是觸發該事件的對象
jQuery對象轉DOM對象
jQuery對象是一個類似數組的對象，可以通過[index]的方法得到相應的DOM對象
// jQuery對象
var $txtName = $("#txtName");
// DOM對象
var txtName = $txtName.get(0);
jQuery選擇器
jQueryjQuery選擇器功能強大，種類也很多，分類如下
通過CSS選擇器選取元素
基本選擇器
基本選擇器包括
- 標籤選擇器
根據給定的標籤名匹配元素
$("h1").css("color","blue")
- 類選擇器
根據給定的class匹配元素
$(".price").css("color","blue")
- ID選擇器
根據給定的id匹配元素
$("#author").css("color","blue")
- 並集選擇器
用來合併元素集合
$(".intro,dt,dd").css("color","blue")
- 全局選擇器
可以獲取所有元素
$("*").css("color","blue")
層次選擇器
層級選擇器通過DOM元素之間的層次關係來獲取元素
- 後代選擇器
用來獲取元素的後代元素
$(".textRight p").css("color","blue")
- 子選擇器
用來獲取元素的子元素
$(".textRight>p").css("color","blue")
- 相鄰元素選擇器
用來選取緊鄰目標元素的下一個元素
$("h1+p").css("color","blue")
- 同輩選擇器
用來選取目標元素之後的所有同輩元素
$("h1~p").css("color","blue")
屬性選擇器
屬性選擇器通過HTML元素的屬性來選擇元素
| 語法構成 | 描述 | 示例 |
|---|---|---|
| [attribute^=value] | 選取給定屬性是以某些特定值開始的元素 | $("[href^=‘en’")選擇href屬性值以en開頭的元素 |
| [attribute$=value] | 選取給定屬性是以某些特定值結尾的元素 | $("[href $= ‘.jpg’")選擇href屬性值以.jpg結尾的元素 |
| [attribute*=value] | 選取給定屬性是以包含某些值得元素 | $("[href *= ‘txt’")選擇href屬性值中含有txt的元素 |
通過過濾選擇器選擇元素
基本過濾選擇器
可見性過濾選擇器
通過元素顯示狀態來選取元素
$("p:hidden").show();
$("p:visible").hide();
jQuery選擇器注意事項
- 特殊符號的轉義
- 選擇器中的空格