jQuery類似於Python中模塊的概念,是集成了javaScript和Dom的模塊.大致分為兩種版本1.12....或者2....的版本,由於2以上的版本去掉了IE9以下的兼容性,所以我們一般寫頁面使用1.12XXX的版本.jQuery的語法很多,jQuery API 中文在線手冊
查找
選擇器
id選擇器
根據給定的ID匹配一個元素。
使用任何的元字符（如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~）作為名稱的文本部分， 它必須被兩個反斜杠轉義：\\。
$("#myDiv");
#foo\\[bar\\]
標簽選擇器
根據給定的元素標簽名匹配所有元素
//查找DIV的元素集合
$("div");
類選擇器
根據給定的css類名匹配元素。一個元素可以有多個類，只要有一個符合就能被匹配到。
//查找所有類是 "myClass" 的元素.
$("#.myClass");
通配符
*,匹配所有元素,多用於結合上下文來搜索:$("*").
組合選擇器
將每一個選擇器匹配到的元素合並后一起返回。你可以指定任意多個選擇器，並將匹配到的元素合並到一個結果內。
//找到匹配任意一個類的元素
$("div,span,p.myClass")
層級選擇器
ancestor descendant
在給定的祖先元素下匹配所有的后代元素
//找到表單中所有的 input 元素
$("form input")
parent > child
在給定的父元素下匹配所有的子元素
//匹配表單中所有的子級input元素。
$("form > input")
prev + next
匹配所有緊接在 prev 元素后的 next 元素,包括后面的子元素
//匹配所有跟在 label 后面的 input 元素
$("label + input")
prev ~ siblings
兄弟元素,匹配 prev 元素之后的所有 siblings 元素
//找到所有與表單同輩的 input 元素
$("form ~ input")
基本篩選器
:first
獲取匹配的第一個元素
HTML 代碼:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代碼:
$('li:first');
結果:
[ <li>list item 1</li> ]
:not(selector)
去除所有與給定選擇器匹配的元素
描述:
查找所有未選中的 input 元素
HTML 代碼:
<input name="apple" />
<input name="flower" checked="checked" />
jQuery 代碼:
$("input:not(:checked)")
結果:
[ <input name="apple" /> ]
:even
匹配所有索引值為偶數的元素，從 0 開始計數
描述:
查找表格的1、3、5...行（即索引值0、2、4...）
HTML 代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:even")
結果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
:odd
匹配所有索引值為奇數的元素，從 0 開始計數
描述:
查找表格的2、4、6行（即索引值1、3、5...）
HTML 代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:odd")
結果:
[ <tr><td>Value 1</td></tr> ]
:eq(index)
匹配一個給定索引值的元素,從 0 開始計數
描述:
查找第二行
HTML 代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:eq(1)")
結果:
[ <tr><td>Value 1</td></tr> ]
:gt(index)
匹配所有大於給定索引值的元素,從0開始計數
描述:
查找第二第三行，即索引值是1和2，也就是比0大
HTML 代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:gt(0)")
結果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
:last()
獲取匹配的最后幾個元素
描述:
獲取匹配的最后個元素
HTML 代碼:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代碼:
$('li:last')
結果:
[ <li>list item 5</li> ]
:lt(index)
匹配所有小於給定索引值的元素,從0開始計數
查找第一第二行，即索引值是0和1，也就是比2小
HTML 代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:lt(2)")
結果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
內容
:contains(text)
匹配包含給定文本的元素,參數為一個用以查找的字符串
描述:
查找所有包含 "John" 的 div 元素
HTML 代碼:
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
jQuery 代碼:
$("div:contains('John')")
結果:
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
:empty
匹配所有不包含子元素或者文本的空元素
描述:
查找所有不包含子元素或者文本的空元素
HTML 代碼:
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
jQuery 代碼:
$("td:empty")
結果:
[ <td></td>, <td></td> ]
:has(selector)
匹配含有選擇器所匹配的元素的元素
描述:
給所有包含 p 元素的 div 元素添加一個 text 類
HTML 代碼:
<div><p>Hello</p></div>
<div>Hello again!</div>
jQuery 代碼:
$("div:has(p)").addClass("test");
結果:
[ <div class="test"><p>Hello</p></div> ]
可見性
:hidden
匹配所有不可見元素，或者type為hidden的元素
描述:
查找隱藏的 tr
HTML 代碼:
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:hidden")
結果:
[ <tr style="display:none"><td>Value 1</td></tr> ]
--------------------------------
描述:
匹配type為hidden的元素
HTML 代碼:
<form>
<input type="text" name="email" />
<input type="hidden" name="id" />
</form>
jQuery 代碼:
$("input:hidden")
結果:
[ <input type="hidden" name="id" /> ]
:visible
匹配所有的可見元素
描述:
查找所有可見的 tr 元素
HTML 代碼:
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代碼:
$("tr:visible")
結果:
[ <tr><td>Value 2</td></tr> ]
屬性
[attribute=value]
匹配給定的屬性是某個特定值的元素
查找所有 name 屬性是 newsletter 的 input 元素
HTML 代碼:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代碼:
$("input[name='newsletter']").attr("checked", true);
結果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
篩選
過濾
eq(index|-index)
獲取當前鏈式操作中第N個jQuery對象，返回jQuery對象，當參數大於等於0時為正向選取，比如0代表第一個，1代表第二個。當參數為負數時為反向選取，比如-1為倒數第一個，具體可以看以下示例。
參數index描述:
獲取匹配的第二個元素
HTML 代碼:
<p> This is just a test.</p> <p> So is this</p>
jQuery 代碼:
$("p").eq(1)
結果:
[ <p> So is this</p> ]
first()
獲取第一個元素
描述:
獲取匹配的第一個元素
HTML 代碼:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代碼:
$('li').first()
結果:
[ <li>list item 1</li> ]
last()
獲取最后個元素
hasClass(class)
檢查當前的元素是否含有某個特定的類，如果有，則返回true。這其實就是 is("." + class)。
描述:
給包含有某個類的元素進行一個動畫。
HTML 代碼:
<div class="protected"></div><div></div>
jQuery 代碼:
$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});
查找
children([expr])
取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。可以通過可選的表達式來過濾所匹配的子元素。注意：parents()將查找所有祖輩元素，而children()只考慮子元素而不考慮所有后代元素。
描述:
查找DIV中的每個子元素。
HTML 代碼:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代碼:
$("div").children()
結果:
[ <span>Hello Again</span> ]
--------------------
描述:
在每個div中查找 .selected 的類。
HTML 代碼:
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
jQuery 代碼:
$("div").children(".selected")
結果:
[ <p class="selected">Hello Again</p> ]
find(expr|obj|ele)
搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。所有搜索都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器語法來寫。
描述:
從所有的段落開始，進一步搜索下面的span元素。與$("p span")相同。
HTML 代碼:
<p><span>Hello</span>, how are you?</p>
jQuery 代碼:
$("p").find("span")
結果:
[ <span>Hello</span> ]
next([expr])
取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合.這個函數只返回后面那個緊鄰的同輩元素，而不是后面所有的同輩元素（可以使用nextAll）。可以用一個可選的表達式進行篩選。
描述:
找到每個段落的后面緊鄰的同輩元素。
HTML 代碼:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
jQuery 代碼:
$("p").next()
結果:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
----------------
描述:
找到每個段落的后面緊鄰的同輩元素中類名為selected的元素。
HTML 代碼:
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
jQuery 代碼:
$("p").next(".selected")
結果:
[ <p class="selected">Hello Again</p> ]
nextAll([expr])
查找當前元素之后所有的同輩元素。可以用表達式過濾
描述:
給第一個div之后的所有元素加個類
HTML 代碼:
<div></div><div></div><div></div><div></div>
jQuery 代碼:
$("div:first").nextAll().addClass("after");
結果:
[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]
nextUntil([exp|ele][,fil])
查找當前元素之后所有的同輩元素，直到遇到匹配的那個元素為止。
如果提供的jQuery代表了一組DOM元素，.nextUntil()方法也能讓我們找遍所有元素所在的DOM樹，直到遇到了一個跟提供的參數匹配的元素的時候才會停下來。這個新jQuery對象里包含了下面所有找到的同輩元素，但不包括那個選擇器匹配到的元素。
如果沒有選擇器匹配到，或者沒有提供參數，那么跟在后面的所有同輩元素都會被選中。這就跟用沒有提供參數的 .nextAll() 效果一樣。
offsetParent()
返回第一個匹配元素用於定位的父節點。這返回父元素中第一個其position設為relative或者absolute的元素。此方法僅對可見元素有效。
描述:
設置最近的祖先定位元素的背景顏色
HTML 代碼:
<div style="width:70%;position:absolute;left:100px;top:100px">
<div style="margin:50px;background-color:yellow">
<p>點擊下面的按鈕可以設置本段落的最近的父（祖先）元素的背景色。</p>
<div>
</div>
<button>點擊這里</button>
jQuery 代碼:
$("button").click(function(){
$("p").offsetParent().css("background-color","red");
});
parent([expr])
取得一個包含着所有匹配元素的唯一父元素的元素集合。你可以使用可選的表達式來篩選。
描述:
查找每個段落的父元素
HTML 代碼:
<div><p>Hello</p><p>Hello</p></div>
jQuery 代碼:
$("p").parent()
結果:
[ <div><p>Hello</p><p>Hello</p></div>]
--------------------
描述:
查找段落的父元素中每個類名為selected的父元素。
HTML 代碼:
<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
jQuery 代碼:
$("p").parent(".selected")
結果:
[ <div class="selected"><p>Hello Again</p></div> ]
parents([expr])
取得一個包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通過一個可選的表達式進行篩選。
描述:
找到每個span元素的所有祖先元素。
HTML 代碼:
<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
jQuery 代碼:
$("span").parents()
------------------
描述:
找到每個span的所有是p元素的祖先元素。
jQuery 代碼:
$("span").parents("p")
parentsUntil([expr|element][,filter])
查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。如果提供的jQuery代表了一組DOM元素，.parentsUntil()方法也能讓我們找遍所有元素的祖先元素，直到遇到了一個跟提供的參數匹配的元素的時候才會停下來。這個返回的jQuery對象里包含了下面所有找到的父輩元素，但不包括那個選擇器匹配到的元素
prev([expr])
取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。可以用一個可選的表達式進行篩選。只有緊鄰的同輩元素會被匹配到，而不是前面所有的同輩元素。
描述:
找到每個段落緊鄰的前一個同輩元素。
HTML 代碼:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代碼:
$("p").prev()
結果:
[ <div><span>Hello Again</span></div> ]
-------------------
描述:
找到每個段落緊鄰的前一個同輩元素中類名為selected的元素。
HTML 代碼:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
jQuery 代碼:
$("p").prev(".selected")
結果:
[ <p class="selected">Hello Again</p> ]
prevAll([expr])
查找當前元素之前所有的同輩元素
描述:
給最后一個之前的所有div加上一個類
HTML 代碼:
<div></div><div></div><div></div><div></div>
jQuery 代碼:
$("div:last").prevAll().addClass("before");
結果:
[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]
prevUntil([exp|ele][,fil])
查找當前元素之前所有的同輩元素，直到遇到匹配的那個元素為止。
如果提供的jQuery代表了一組DOM元素，.prevUntil()方法也能讓我們找遍所有元素所在的DOM樹，直到遇到了一個跟提供的參數匹配的元素的時候才會停下來。這個新jQuery對象里包含了前面所有找到的同輩元素，但不包括那個選擇器匹配到的元素。
如果沒有選擇器匹配到，或者沒有提供參數，那么排在前面的所有同輩元素都會被選中。這就跟用沒有提供參數的 .prevAll()效果一樣。
siblings([expr])
取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選。
描述:
找到每個div的所有同輩元素。
HTML 代碼:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代碼:
$("div").siblings()
結果:
[ <p>Hello</p>, <p>And Again</p> ]
------------
描述:
找到每個div的所有同輩元素中帶有類名為selected的元素。
HTML 代碼:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
jQuery 代碼:
$("div").siblings(".selected")
結果:
[ <p class="selected">Hello Again</p> ]
屬性
屬性
attr(name|pro|key,val|fn)
設置或返回被選元素的屬性值。
參數name 描述:
返回文檔中所有圖像的src屬性值。
jQuery 代碼:
$("img").attr("src");
參數properties 描述:
為所有圖像設置src和alt屬性。
jQuery 代碼:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
參數key,value 描述:
為所有圖像設置src屬性。
jQuery 代碼:
$("img").attr("src","test.jpg");
參數key,回調函數 描述:
把src屬性的值設置為title屬性的值。
jQuery 代碼:
$("img").attr("title", function() { return this.src });
removeAttr(name)
從每一個匹配的元素中刪除一個屬性
描述:
將文檔中圖像的src屬性刪除
HTML 代碼:
<img src="test.jpg"/>
jQuery 代碼:
$("img").removeAttr("src");
結果:
[ <img /> ]
prop(name|properties|key,value|fn)
獲取在匹配的元素集中的第一個元素的屬性值。相當於對attr的一個補充吧:隨着一些內置屬性的DOM元素或window對象，如果試圖將刪除該屬性，瀏覽器可能會產生錯誤。jQuery第一次分配undefined值的屬性，而忽略了瀏覽器生成的任何錯誤
參數name 描述:
選中復選框為true，沒選中為false
jQuery 代碼:
$("input[type='checkbox']").prop("checked");
參數properties 描述:
禁用頁面上的所有復選框。
jQuery 代碼:
$("input[type='checkbox']").prop({
disabled: true
});
參數key,value 描述:
禁用和選中所有頁面上的復選框。
jQuery 代碼:
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);
參數key,回調函數 描述:
通過函數來設置所有頁面上的復選框被選中。
jQuery 代碼:
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
removeProp(name)
用來刪除由.prop()方法設置的屬性集.
描述:
設置一個段落數字屬性，然后將其刪除。
HTML 代碼:
<p> </p>
jQuery 代碼:
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
結果:
The secret luggage code is: 1234. Now the secret luggage code is: undefined.
CSS類
addClass(class|fn)
為每個匹配的元素添加指定的類名。一個或多個要添加到元素中的CSS類名，請用空格分開.
參數class 描述:
為匹配的元素加上 'selected' 類
jQuery 代碼:
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
-----------------
回調函數 描述:
給li加上不同的class
HTML 代碼:
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
jQuery 代碼:
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
removeClass([class|fn])
從所有匹配的元素中刪除全部或者指定的類。一個或多個要刪除的CSS類名，請用空格分開.此函數必須返回一個或多個空格分隔的class名。接受兩個參數，index參數為對象在這個集合中的索引值，class參數為這個對象原先的class屬性值。
參數class 描述:
從匹配的元素中刪除 'selected' 類
jQuery 代碼:
$("p").removeClass("selected");
----------------------
參數class 描述:
刪除匹配元素的所有類
jQuery 代碼:
$("p").removeClass();
------------------------
回調函數描述:
刪除最后一個元素上與前面重復的class
jQuery 代碼:
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
toggleClass(class|fn[,sw])
如果存在（不存在）就刪除（添加）一個類。
參數class 描述:
為匹配的元素切換 'selected' 類
jQuery 代碼:
$("p").toggleClass("selected");
---------------
參數class,switch 描述:
每點擊三下加上一次 'highlight' 類
HTML 代碼:
<strong>jQuery 代碼:</strong>
jQuery 代碼:
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
---------------
回調函數 描述:
根據父元素來設置class屬性
jQuery 代碼:
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
HTML代碼/文本/值
html([val|fn])
取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔。在一個 HTML 文檔中, 我們可以使用 .html() 方法來獲取任意一個元素的內容。 如果選擇器匹配多於一個的元素，那么只有第一個匹配元素的 HTML 內容會被獲取。
無參數 描述:
返回p元素的內容。
jQuery 代碼:
$('p').html();
------------------------
參數val 描述:
設置所有 p 元素的內容
jQuery 代碼:
$("p").html("Hello <b>world</b>!");
------------------------
回調函數描述:
使用函數來設置所有匹配元素的內容。
jQuery 代碼:
$("p").html(function(n){
return "這個 p 元素的 index 是：" + n;
});
text([val|fn])
取得所有匹配元素的內容。結果是由所有匹配元素包含的文本內容組合起來的文本。這個方法對HTML和XML文檔都有效。
無參數 描述:
返回p元素的文本內容。
jQuery 代碼:
$('p').text();
--------------
參數val 描述:
設置所有 p 元素的文本內容
jQuery 代碼:
$("p").text("Hello world!");
--------------
回調函數 描述:
使用函數來設置所有匹配元素的文本內容。
jQuery 代碼:
$("p").text(function(n){
return "這個 p 元素的 index 是：" + n;
});
val([val|fn|arr])
獲得匹配元素的當前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多選，將返回一個數組，其包含所選的值.
無參數 描述:
獲取文本框中的值
jQuery 代碼:
$("input").val();
--------------
參數val 描述:
設定文本框的值
jQuery 代碼:
$("input").val("hello world!");
--------------
回調函數 描述:
設定文本框的值
jQuery 代碼:
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
--------------
參數array 描述:
設定一個select和一個多選的select的值
HTML 代碼:
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
jQuery 代碼:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
CSS
CSS
css(name|pro|[,val|fn])
訪問匹配元素的樣式屬性。
參數name 描述:
取得第一個段落的color樣式屬性的值。
jQuery 代碼:
$("p").css("color");
----------------------
參數properties 描述:
將所有段落的字體顏色設為紅色並且背景為藍色。
jQuery 代碼:
$("p").css({ "color": "#ff0011", "background": "blue" });
----------------------
參數name,value 描述:
將所有段落字體設為紅色
jQuery 代碼:
$("p").css("color","red");
----------------------
參數name,回調函數 描述:
逐漸增加div的大小
jQuery 代碼:
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
位置
offset([coordinates])
針對body,整個頁面,有多高,左邊有多寬.獲取匹配元素在當前視口的相對偏移。返回的對象包含兩個整型屬性：top 和 left，以像素計。此方法只對可見元素有效。
無參數描述:
獲取第二段的偏移
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
結果:
<p>Hello</p><p>left: 0, top: 35</p>
-------------------------
參數coordinates 描述:
獲取第二段的偏移
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
$("p:last").offset({ top: 10, left: 30 });
position()
獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性：top 和 left。為精確計算結果，請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。
描述:
獲取第一段的偏移
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
結果:
<p>Hello</p><p>left: 15, top: 15</p>
scrollTop([val])
獲取匹配元素相對滾動條頂部的偏移。此方法對可見和隱藏元素均有效。
無參數描述:
獲取第一段相對滾動條頂部的偏移
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
結果:
<p>Hello</p><p>scrollTop: 0</p>
------------------
參數val 描述:
設置相對滾動條頂部的偏移
jQuery 代碼:
$("div.demo").scrollTop(300);
scrollLeft([val])
獲取匹配元素相對滾動條左側的偏移。此方法對可見和隱藏元素均有效。
尺寸
height([val|fn])
取得匹配元素當前計算的高度值（px）。在 jQuery 1.2 以后可以用來獲取 window 和 document 的高
無參數描述:
獲取第一段的高
jQuery 代碼:
$("p").height();
------------------
參數val 描述:
把所有段落的高設為 20:
jQuery 代碼:
$("p").height(20);
------------------
參數function(index, height) 描述:
以 10 像素的幅度增加 p 元素的高度
jQuery 代碼:
$("button").click(function(){
$("p").height(function(n,c){
return c+10;
});
});
width([val|fn])
取得第一個匹配元素當前計算的寬度值（px）。在 jQuery 1.2 以后可以用來獲取 window 和 document 的寬
innerHeight()
相對padding,獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）。此方法對可見和隱藏元素均有效。
描述:
獲取第一段落內部區域高度。
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
結果:
<p>Hello</p><p>innerHeight: 16</p>
innerWidth()
獲取第一個匹配元素內部區域寬度（包括補白、不包括邊框）。此方法對可見和隱藏元素均有效。
outerHeight([options])
獲取第一個匹配元素外部高度（默認包括補白和邊框）。此方法對可見和隱藏元素均有效。
描述:
獲取第一段落外部高度。
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
結果:
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>
outerWidth([options])
獲取第一個匹配元素外部寬度（默認包括補白和邊框）。此方法對可見和隱藏元素均有效。設置為 true 時，計算邊距在內。
文檔處理
內部插入
append(content|fn)
向每個匹配的元素內部追加內容。這個操作與對指定的元素執行appendChild方法，將它們添加到文檔中的情況類似。
描述:
向所有段落中追加一些HTML標記。
HTML 代碼:
<p>I would like to say: </p>
jQuery 代碼:
$("p").append("<b>Hello</b>");
結果:
[ <p>I would like to say: <b>Hello</b></p> ]
appendTo(content)
把所有匹配的元素追加到另一個指定的元素元素集合中。
實際上，使用這個方法是顛倒了常規的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
描述:
把所有段落追加到ID值為foo的元素中。
HTML 代碼:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代碼:
$("p").appendTo("div");
結果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
---------------------------
描述:
新建段落追加div中並加上一個class
HTML 代碼:
<div></div><div></div>
jQuery 代碼:
$("<p/>")
.appendTo("div")
.addClass("test")
.end()
.addClass("test2");
結果:
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>
prepend(content)
向每個匹配的元素內部前置內容。這是向所有匹配元素內部的開始處插入內容的最佳方式。
描述:
向所有段落中前置一些HTML標記代碼。
HTML 代碼:
<p>I would like to say: </p>
jQuery 代碼:
$("p").prepend("<b>Hello</b>");
結果:
[ <p><b>Hello</b>I would like to say: </p> ]
------------------------
描述:
將一個DOM元素前置入所有段落
HTML 代碼:
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
jQuery 代碼:
$("p").prepend( $(".foo")[0] );
結果:
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Good Bye</b>
------------------------
描述:
向所有段落中前置一個jQuery對象(類似於一個DOM元素數組)。
HTML 代碼:
<p>I would like to say: </p><b>Hello</b>
jQuery 代碼:
$("p").prepend( $("b") );
結果:
<p><b>Hello</b>I would like to say: </p>
prependTo(content)
把所有匹配的元素前置到另一個、指定的元素元素集合中。實際上，使用這個方法是顛倒了常規的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。
外部插入
after(content|fn)
在每個匹配的元素之后插入內容。
描述:
在所有段落之后插入一些HTML標記代碼。
HTML 代碼:
<p>I would like to say: </p>
jQuery 代碼:
$("p").after("<b>Hello</b>");
結果:
<p>I would like to say: </p><b>Hello</b>
---------------------------
描述:
在所有段落之后插入一個DOM元素。
HTML 代碼:
<b id="foo">Hello</b><p>I would like to say: </p>
jQuery 代碼:
$("p").after( $("#foo")[0] );
結果:
<p>I would like to say: </p><b id="foo">Hello</b>
---------------------------
描述:
在所有段落中后插入一個jQuery對象(類似於一個DOM元素數組)。
HTML 代碼:
<b>Hello</b><p>I would like to say: </p>
jQuery 代碼:
$("p").after( $("b") );
結果:
<p>I would like to say: </p><b>Hello</b>
before(content|fn)
在每個匹配的元素之前插入內容。
insertAfter(content)
把所有匹配的元素插入到另一個、指定的元素元素集合的后面。實際上，使用這個方法是顛倒了常規的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
描述:
把所有段落插入到一個元素之后。與 $("#foo").after("p")相同
HTML 代碼:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代碼:
$("p").insertAfter("#foo");
結果:
<div id="foo">Hello</div><p>I would like to say: </p>
insertBefore(content)
把所有匹配的元素插入到另一個、指定的元素元素集合的前面。實際上，使用這個方法是顛倒了常規的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。
刪除
empty()
刪除匹配的元素集合中所有的子節點。
描述:
把所有段落的子元素（包括文本節點）刪除
HTML 代碼:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代碼:
$("p").empty();
結果:
<p></p>
remove([expr])
從DOM中刪除所有匹配的元素。
這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的數據等都會被移除。
描述:
從DOM中把所有段落刪除
HTML 代碼:
<p>Hello</p> how are <p>you?</p>
jQuery 代碼:
$("p").remove();
結果:
how are
--------------------------
描述:
從DOM中把帶有hello類的段落刪除
HTML 代碼:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代碼:
$("p").remove(".hello");
結果:
how are <p>you?</p>
復制
clone([Even[,deepEven]])
克隆匹配的DOM元素並且選中這些克隆的副本。在想把DOM文檔中元素的副本添加到其他位置時這個函數非常有用。
參數解釋:
- 一個布爾值（true 或者 false）指示事件處理函數是否會被復制。V1.5以上版本默認值是：false
- 一個布爾值，指示是否對事件處理程序和克隆的元素的所有子元素的數據應該被復制
描述:
克隆所有b元素（並選中這些克隆的副本），然后將它們前置到所有段落中。
HTML 代碼:
<b>Hello</b><p>, how are you?</p>
jQuery 代碼:
$("b").clone().prependTo("p");
結果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>
描述:
創建一個按鈕，他可以復制自己，並且他的副本也有同樣功能。
HTML 代碼:
<button>Clone Me!</button>
jQuery 代碼:
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
事件
頁面載入
ready(fn)
當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。這是事件模塊中最重要的一個函數，因為它可以極大地提高web應用程序的響應速度。通過使用這個方法，可以在DOM載入就緒能夠讀取並操縱時立即調用你所綁定的函數，而99.99%的JavaScript函數都需要在那一刻執行。
一句話總結:當文檔加載完畢后，自動執行.
描述:
在DOM加載完成時運行的代碼，可以這樣寫：
jQuery 代碼:
$(document).ready(function(){
// 在這里寫你的代碼...
});
----------------------------
描述:
使用 $(document).ready() 的簡寫，同時內部的 jQuery 代碼依然使用 $ 作為別名，而不管全局的 $ 為何。
jQuery 代碼:
$(function($) {
// 你可以在這里繼續使用$作為別名...
});
**這里,我們需要注意簡寫,一般都直接寫為:
$(function(){
......
});
bind(type,[data],fn)
為每個匹配元素的特定事件綁定事件處理函數。
- type: 含有一個或多個事件類型的字符串，由空格分隔多個事件。比如"click"或"submit"，還可以是自定義事件名。
- data:作為event.data屬性值傳遞給事件對象的額外數據對象
- fn:綁定到每個匹配元素的事件上面的處理函數
描述:
當每個段落被點擊的時候，彈出其文本。
jQuery 代碼:
$("p").bind("click", function(){
alert( $(this).text() );
});
描述:
同時綁定多個事件類型
jQuery 代碼:
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
描述:
同時綁定多個事件類型/處理程序
jQuery 代碼:
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
描述:
你可以在事件處理之前傳遞一些附加的數據。
jQuery 代碼:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
描述:
通過返回false來取消默認的行為並阻止事件起泡。
jQuery 代碼:
$("form").bind("submit", function() { return false; })
描述:
通過使用 preventDefault() 方法只取消默認的行為。
jQuery 代碼:
$("form").bind("submit", function(event){
event.preventDefault();
});
描述:
通過使用 stopPropagation() 方法只阻止一個事件起泡。
jQuery 代碼:
$("form").bind("submit", function(event){
event.stopPropagation();
});
例子:事件綁定&文檔加載完執行,菜單隱藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
.menu{
width: 200px;
height: 600px;
border: 1px solid #dddddd;
overflow: auto;
}
.menu .item .title{
height: 40px;
line-height: 40px;
background-color: #2459a2;
color: white;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title">菜單一</div>
<div class="body">
<p>內容一</p>
<p>內容一</p>
<p>內容一</p>
<p>內容一</p>
<p>內容一</p>
</div>
</div>
<div class="item">
<div class="title" >菜單二</div>
<div class="body hide">
<p>內容二</p>
<p>內容二</p>
<p>內容二</p>
<p>內容二</p>
<p>內容二</p>
<p>內容二</p>
</div>
</div>
<div class="item">
<div class="title">菜單三</div>
<div class="body hide">
<p>內容三</p>
<p>內容三</p>
<p>內容三</p>
<p>內容三</p>
<p>內容三</p>
<p>內容三</p>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
// 當文檔樹加載完畢后，自動執行
$('.item .title').click(function(){
// this,$(this)
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
});
});
// $('.item .title').bind('focus', function () {
// $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.body').addClass('hide');
// })
</script>
</body>
</html>
事件委派
delegate(selector,[type],[data],fn)
指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。使用 delegate() 方法的事件處理程序適用於當前或未來的元素（比如由腳本創建的新元素）。
- selector:選擇器字符串，用於過濾器觸發事件的元素。
- type:附加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效的事件。
- data:傳遞到函數的額外數據
- fn:當事件發生時運行的函數
描述:
當點擊鼠標時，隱藏或顯示 p 元素：
HTML 代碼:
<div style="background-color:red">
<p>這是一個段落。</p>
<button>請點擊這里</button>
</div>
jQuery 代碼:
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
--------------------------------
描述:
delegate這個方法可作為live()方法的替代，使得每次事件綁定到特定的DOM元素。
以下兩段代碼是等同的:
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
例子:加載后克隆的元素具有相同功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="Add();" />
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
/*
$('li').click(function () {
alert($(this).text());
});
*/
$("ul").delegate("li","click",function(){
alert($(this).text());
});
});
function Add(){
var tag = document.createElement('li');
tag.innerText = '666';
$('ul').append(tag);
}
</script>
</body>
</html>
事件
blur([[data],fn])
當元素失去焦點時觸發 blur 事件。這個函數會調用執行綁定到blur事件的所有函數，包括瀏覽器的默認行為。可以通過返回false來防止觸發瀏覽器的默認行為。blur事件會在元素失去焦點的時候觸發，既可以是鼠標行為，也可以是按tab鍵離開的
描述:
觸發所有段落的blur事件
jQuery 代碼:
$("p").blur();
描述:
任何段落失去焦點時彈出一個 "Hello World!"在每一個匹配元素的blur事件中綁定的處理函數。
jQuery 代碼:
$("p").blur( function () { alert("Hello World!"); } );
change([[data],fn])
當元素的值發生改變時，會發生 change 事件。該事件僅適用於文本域（text field），以及 textarea 和 select 元素。當用於 select 元素時，change 事件會在選擇某個選項時發生。當用於 text field 或 text area 時，該事件會在元素失去焦點時發生。
描述:
觸發被選元素的 change 事件。
jQuery 代碼:
$(selector).change();
描述:
給所有的文本框增加輸入驗證
jQuery 代碼:
$("input[type='text']").change( function() {
// 這里可以寫些驗證代碼
});
click([[data],fn])
觸發每一個匹配元素的click事件。這個函數會調用執行綁定到click事件的所有函數。
描述:
觸發頁面內所有段落的點擊事件
jQuery 代碼:
$("p").click();
描述:
將頁面內所有段落點擊后隱藏。
jQuery 代碼:
$("p").click( function () { $(this).hide(); });
focus([[data],fn])
當元素獲得焦點時，觸發 focus 事件。可以通過鼠標點擊或者鍵盤上的TAB導航觸發。這將觸發所有綁定的focus函數，注意，某些對象不支持focus方法。
描述:
當頁面加載后將 id 為 'login' 的元素設置焦點:
jQuery 代碼:
$(document).ready(function(){
$("#login").focus();
});
描述:
使人無法使用文本框:
jQuery 代碼:
$("input[type=text]").focus(function(){
this.blur();
});
keydown([[data],fn])
當鍵盤或按鈕被按下時，發生 keydown 事件。注釋：如果在文檔元素上進行設置，則無論元素是否獲得焦點，該事件都會發生。
描述:
在頁面內對鍵盤按鍵做出回應，可以使用如下代碼:
jQuery 代碼:
$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按鍵可以做不同的事情
// 不同的瀏覽器的keycode不同
// 更多詳細信息: http://unixpapa.com/js/key.html
// 常用keyCode： 空格 32 Enter 13 ESC 27
}
});
keypress([[data],fn])
當鍵盤或按鈕被按下時，發生 keypress 事件。keypress 事件與 keydown 事件類似。當按鈕被按下時，會發生該事件。它發生在當前獲得焦點的元素上。 不過，與 keydown 事件不同，每插入一個字符，就會發生 keypress 事件。注釋：如果在文檔元素上進行設置，則無論元素是否獲得焦點，該事件都會發生。
keypress keydown區別
1、KeyPress主要用來捕獲數字(注意：包括Shift+數字的符號)、字母（注意：包括大小寫）、小鍵盤等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開始鍵}和方向鍵外的ANSI字符。
KeyDown 、KeyUp 通常可以捕獲鍵盤除了PrScrn所有按鍵(這里不討論特殊鍵盤的特殊鍵）。
2、KeyPress 只能捕獲單個字符
KeyDown 和KeyUp 可以捕獲組合鍵。
3、KeyPress 可以捕獲單個字符的大小寫
KeyDown、KeyUp 對於單個字符捕獲的KeyValue 都是一個值，也就是不能判斷單個字符的大小寫。
4、KeyPress 不區分小鍵盤和主鍵盤的數字字符。
KeyDown 、KeyUp 區分小鍵盤和主鍵盤的數字字符。
6、其中PrScrn 按鍵KeyPress、KeyDown、KeyUp 都不能捕獲。
mouseover([[data],fn])
當鼠標指針位於元素上方時，會發生 mouseover 事件。該事件大多數時候會與 mouseout 事件一起使用。
注釋：與 mouseenter 事件不同，不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。只有在鼠標指針穿過被選元素時，才會觸發 mouseenter 事件。
描述:
當鼠標指針位於元素上方時時，改變元素的背景色：
jQuery 代碼:
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
mouseout([[data],fn])
同上
scroll([[data],fn])
當用戶滾動指定的元素時，會發生 scroll 事件。scroll 事件適用於所有可滾動的元素和 window 對象（瀏覽器窗口）。
描述:
當頁面滾動條變化時，執行的函數:
jQuery 代碼:
$(window).scroll( function() { /* ...do something... */ } );
描述:
對元素滾動的次數進行計數：
jQuery 代碼:
$("div").scroll(function() {
$("span").text(x+=1);
});
unload([[data],fn])
在當用戶離開頁面時，會發生 unload 事件。具體來說，當發生以下情況時，會發出 unload 事件：
- 點擊某個離開頁面的鏈接
- 在地址欄中鍵入了新的 URL
- 使用前進或后退按鈕
- 關閉瀏覽器
- 重新加載頁面
描述:
頁面卸載的時候彈出一個警告框:
jQuery 代碼:
$(window).unload( function () { alert("Bye now!"); } );
jQuery循環遍歷之each(callback)
以每一個匹配的元素作為上下文來執行一個函數。意味着，每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不同的DOM元素（每次都是一個不同的匹配元素）。而且，在每次執行函數時，都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數（從零開始的整型）。 返回 'false' 將停止循環 (就像在普通的循環中使用 'break')。返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')
- return false 相當於python中的break
- return 相當於python中的continue
描述:
迭代兩個圖像，並設置它們的 src 屬性。注意:此處 this 指代的是 DOM 對象而非 jQuery 對象。
HTML 代碼:
<img/><img/>
jQuery 代碼:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
結果:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
描述:
如果你想得到 jQuery對象，可以使用 $(this) 函數。
-----------------
HTML 代碼:
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>
jQuery 代碼:
$("img").each(function(){
$(this).toggleClass("example");
});
-----------------
描述:
你可以使用 'return' 來提前跳出 each() 循環。
HTML 代碼:
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>
jQuery 代碼:
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
例子
使用true/false控制是否繼續
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="text" id="username" />
<input type="submit" value="提交" onclick="return SubmitForm();" />
</form>
<script>
function SubmitForm(){
var user = document.getElementById('username');
if(user.value.length > 0 ){
// 可以提交
return true;
}else{
// 不可提交，提示錯誤
alert('用戶名輸入不能為空');
return false;
}
}
</script>
</body>
</html>
增加輸入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>
<a onclick="Add(this);"> + </a>
<input type="text" />
</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function Add(ths){
var p = $(ths).parent().clone();
p.find('a').text(' - ');
p.find('a').attr('onclick', 'Remove(this);');
$(ths).parent().parent().append(p);
}
function Remove(ths){
$(ths).parent().remove();
}
</script>
</body>
</html>
jQuery實現全選反選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="p1">
<p>hhh</p>
</div>
<input type="button" value="全選" onclick="CheckAll()" />
<input type="button" value="取消" onclick="CancleAll()"/>
<input type="button" value="反選" onclick="ReverseAll()"/>
<table border="1">
<thead>
<tr>
<th>序號</th>
<th>用戶名</th>
<th>密碼</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>22</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function CheckAll(){
$('#tb input[type="checkbox"]').prop('checked',true);
}
function CancleAll(){
$('#tb input[type="checkbox"]').prop('checked',false);
}
function ReverseAll(){
$('#tb input[type="checkbox"]').each(function(i){
// this 當前標簽
// $(this)當前標簽的jQuery對象
if($(this).prop('checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
});
}
</script>
</body>
</html>
jQuery實現菜單隱藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
.menu{
width: 200px;
height: 600px;
border: 1px solid #dddddd;
overflow: auto;
}
.menu .item .title{
height: 40px;
line-height: 40px;
background-color: #2459a2;
color: white;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜單一</div>
<div class="body">
<p>內容一</p>
<p>內容一</p>
<p>內容一</p>
<p>內容一</p>
<p>內容一</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜單二</div>
<div class="body hide">
<p>內容二</p>
<p>內容二</p>
<p>內容二</p>
<p>內容二</p>
<p>內容二</p>
<p>內容二</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜單三</div>
<div class="body hide">
<p>內容三</p>
<p>內容三</p>
<p>內容三</p>
<p>內容三</p>
<p>內容三</p>
<p>內容三</p>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function ShowMenu(ths){
// console.log(ths); // Dom中的標簽對象
//$(ths) // Dom標簽對象轉換成jQuery標簽對象（便利）
//$(ths)[0] // jQuery標簽對象轉換成Dom標簽對象
$(ths).next().removeClass('hide');
$(ths).parent().siblings().find('.body').addClass('hide');
}
</script>
</body>
</html>