jQuery描述
jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。
jQuery的優點
- 輕量級
- 強大的選擇器
- 出色的 DOM 操作的封裝
- 可靠的事件處理機制
- 出色的瀏覽器兼容性
- 鏈式操作方式
- 可拓展性強
jQuery與Dom
jQuery對象就是使用jQuery()或$()包裝了dom對象後的對象。
jQuery對象是jQuery 庫中獨有的；如果是一個jQuery對象那麼它就可以使用jQuery庫中的所有方法。需要注意的是：jQuery對象不能使用Dom對象中的任何方法。同樣地；Dom對象也不能使用jQuery對象中的任何方法。
jQuery對象只能在引入jQuery 庫後才能使用。jQuery對象不能使用Dom對象中的任何方法。
jQuery與Dom的對象互相轉換
jQuery對象轉爲Dom對象
方式一：jQuery是一個數組對象
var $div = $("#divID");
var divElement = $div[0];
方式二：使用jQuery對象自帶的get方法
var $div = $("#divID");
var divElement = $div.get(0);
Dom對象轉爲jQuery對象
var $div = $(divElement);//將dom對象轉爲jQuery對象
jQuery的基本方法
初始事件
寫法一：直寫
$(document).ready(function(){
// 在這裏寫你的代碼...
});
寫法二：$(document).ready() 的簡寫
$(function() {
// 你可以在這裏繼續使用$作爲別名...
});
jQuery的基本選擇
$(“#elementID”) #表示根據id查找；查找id爲elementID的元素；建議的用法。所以一般推薦給標籤設置ID。
document.getElementById(“elementID”)但兩者之間返回類型不同
$(“.className”) .表示根據class樣式名稱查找；查找樣式名稱爲className的所有標籤
$(“input”) 查找所有input標籤
jQuery Ajax
$.ajax({
type: "POST",
url: "testServlet",
data: {"name":"itcast","location":"guangzhou"},
success: function(msg){
alert( "Data Saved: " + msg );
}
});
$.get("testServlet", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
$.post("testServlet", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
$.getJSON("testServlet", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
$("#divID").load("feeds.jsp", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
jQuery 選擇器
jQuery選擇器共有四大類，分別爲基本選擇器，層次選擇器，過濾選擇器和表單選擇器。
1. 基本選擇器
基本選擇器是 jQuery 中最常用的選擇器, 也是最簡單的選擇器, 它通過元素 id, class 和標籤名來查找 DOM 元素。
選擇器 描述 返回
#id 根據給定的ID匹配一個元素 單個元素組成的集合
element 根據給定的元素名匹配所有元素 元素集合
.class 根據給定的類匹配元素 元素集合
* 匹配所有元素 元素集合
selectorN 將每一個選擇器匹配到的元素合併後一起返回；可以指定任意多個選擇器，並將匹配到的元素合併到一個結果內 元素集合
- 層級選擇器
適合於通過DOM元素之間的層次關係來獲取特定元素，例如後代元素，子元素，相鄰元素和兄弟元素。
選擇器 描述 返回
ancestor descendant 後代元素選擇器
$(“div span”)選取<div>裏的所有的<span>元素
元素集合
parent > child 子元素選擇器
$(“div>span”)選取<div>元素下元素名是<span>的子元素
元素集合
prev + next 相鄰元素選擇器
$(“.one+div”)選取class爲one的下一個<div>兄弟元素
元素集合
prev ~ siblings 兄弟元素選擇器
$(“#two~div”)選取Id爲two的元素後面的所有<div>兄弟元素
元素集合
- 過濾選擇器
過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素，過濾規則與CSS中的僞類選擇器語法相同，即選擇器都以一個冒號(:)開頭。
按照不同的過濾規則，過濾選擇器可以分爲基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾，表單過濾和表單對象屬性過濾選擇器共七種選擇器。
1. 基本過濾
選擇器 描述 返回
:first 選取第一個元素
$('li:first');
單元素
:last 選取最後一個元素
$('li:last');
單元素
:not(selector) 去除所有與給定選擇器匹配的元素。
$("input:not(:checked)")；查找所有未選中的 input 元素
元素集合
:even 選取索引號爲偶數的元素，索引號從0開始
$("tr:even")
元素集合
:odd 選取索引號爲偶數的元素，索引號從0開始
$("tr:odd”)
元素集合
:eq(index) 選取索引號爲index的元素，索引號從0開始
$("tr:eq(1)")
單元素
:gt(index) 選取索引號大於index的元素，索引號從0開始
$("tr:gt(1)")
元素集合
:lt(index) 選取索引號小於index的元素，索引號從0開始
$("tr:lt(1)")
元素集合
:header 選取如 h1, h2, h3之類的標題元素$(":header").css("background", "#EEE")
元素集合
:animated 選取所有正在執行動畫效果的元素
$("div:animated") 元素集合
2. 內容過濾
選擇器 描述 返回
:contains(text) 選取包含給定文本的元素
$("div:contains('John')")
元素集合
:empty 選取所有不包含子元素或者文本的空元素
$("td:empty")
元素集合
:has(selector) 選取含有選擇器所匹配的元素的元素
$("div:has(p)").addClass("text");給所有包含 p 元素的 div 元素添加一個 text 樣式
元素集合
:parent 選取含有子元素或者文本的元素
$("td:parent")
元素集合
3. 可見性過濾
選擇器 描述 返回
:hidden 選取所有不可見元素，或者type爲hidden的元素
$("div:hidden")
元素集合
:visible 選取所有的可見元素
$("input:visible")
元素集合
4. 屬性過濾
選擇器 描述 返回
[attribute] 選取包含給定屬性的元素 $("div[id]")
查找所有含有 id 屬性的 div 元素
元素集合
[attribute=value] 選取給定的屬性是某個特定值的元素 $("input[name='newsletter']") 查找所有 name 屬性是 newsletter 的 input 元素
元素集合
[attribute!=value] 選取所有不含有指定的屬性，或者屬性不等於特定值的元素 $("input[name!='newsletter']") 查找所有 name 屬性不是 newsletter 的 input 元素
元素集合
[attribute^=value] 選取給定的屬性是以某些值開始的元素
$("input[name^='news']") 查找所有 name 以 'news' 開始的 input 元素
元素集合
[attribute$=value] 選取給定的屬性是以某些值結尾的元素
$("input[name$='letter']") 查找所有 name 以 'letter' 結尾的 input 元素
=元素集合
[attribute*=value] 選取給定的屬性是以包含某些值的元素
$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素
元素集合
[attrSel1][attrSel2][attrSelN] 複合屬性選擇器，需要同時滿足多個條件時使用
$("input[id][name$='man']") 找到所有含有 id 屬性，並且它的 name 屬性是以 man 結尾的
元素集合
5. 子元素過濾
選擇器 描述 返回
:nth-child 選取父元素下的第N個子或奇偶元素（index序號從1開始）
$("ul li:nth-child(2)") 在每個 ul 查找第 2 個li
元素集合
:first-child 選取父元素的第一個子元素
$("ul li:first-child") 在每個 ul 中查找第一個 li
元素集合
:last-child 選取父元素中的最後一個子元素 $("ul li:last-child") 在每個 ul 中查找最後一個 li
元素集合
:only-child 如果某個元素是父元素中唯一的子元素，那將會被匹配；如果父元素中含有其他元素，那將不會被匹配。 $("ul li:only-child") 在 ul 中查找是唯一子元素的 li
元素集合
6. 表單過濾
選擇器 描述 返回
:input 匹配所有 input, textarea, select 和 button 元素 $(":input") 查找所有的input元素。
元素集合
:text 匹配所有的單行文本框 $(":text")
元素集合
:password 匹配所有密碼框
$(":password")
元素集合
:radio 匹配所有單選按鈕
$(":radio")
元素集合
:checkbox 匹配所有複選框
$(":checkbox")
元素集合
:submit 匹配所有提交按鈕
$(":submit")
元素集合
:image 匹配所有圖像域
$(":image")
元素集合
:reset 匹配所有重置按鈕
$(":reset")
元素集合
:button 匹配所有按鈕<button></button>，$(":button")
元素集合
:file 匹配所有文件域
$(":file")
元素集合
:hidden 匹配所有不可見元素（display:none），或者type爲hidden的元素
$("tr:hidden")
元素集合
7. 表單對象屬性過濾
``選擇器 描述 返回
:enabled 選取所有可用元素
$("input:enabled")
元素集合
:disabled 選取所有不可用元素
$("input:disabled")
元素集合
:checked 選取所有被選中的元素（單、複選框）
$("input:checked")
元素集合
:selected 選取所有被選中的選項元素（下拉列表
$("select option:selected")查找所有選中的選項元素 元素集合
`
“`
