【jQuery】
jQuery是一套跨瀏覽器的JavaScript庫，簡化HTML與JavaScript之間的操作。由John Resig在2006年1月的BarCamp NYC上發佈第一個版本。目前是由 Dave Methvin 領導的開發團隊進行開發。全球前10000個訪問最高
的網站中，有59%使用了jQuery，是目前最受歡迎的JavaScript庫。
一、選擇器
事例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.r{
background-color: #00a2ca;
}
</style>
</head>
<body>
<script src="jquery-2.2.3.js"></script>
<div id="i1">123</div>
<div id="i2">456</div>
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<script>
$("#i1").text('test');
$(".c1").addClass('r');
$("div");
</script>
</body>
</html>【基本選擇器】
1. $("#myDiv"); 查找 ID 爲"myDiv"的元素。
HTML 代碼:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代碼:
$("#myDiv");
結果:
[ <div id="myDiv">id="myDiv"</div> ]
$("#i1").text('test') //賦值
2. $("div"); 查找一個 DIV 元素
HTML 代碼:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery 代碼:
$("div");
結果:
[ <div>DIV1</div>, <div>DIV2</div> ]
3. $(".myClass"); 查找所有類是 "myClass" 的元素.
HTML 代碼:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代碼:
$(".myClass");
結果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
4. $("*") 找到每一個元素
HTML 代碼:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery 代碼:
$("*")
結果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
5. $("div,span,p.myClass") 找到匹配任意一個類的元素。
HTML 代碼:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery 代碼:
$("div,span,p.myClass")
結果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
【層級選擇器】
1. $("form input") 找到表單中所有的 input 元素
HTML 代碼:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代碼:
$("form input")
結果:
[ <input name="name" />, <input name="newsletter" /> ]
2. $("form > input"); 匹配表單中所有的子級input元素。
HTML 代碼:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代碼:
$("form > input")
結果:
[ <input name="name" /> ]
//注：1、2 的區別 一個是查找表單下所有符合的，一個是查找子集中所有符合的。
【基本篩選器】
1. $('li:first')；獲取匹配的第一個元素，$('li: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:first');
$('li:last');
結果:
[ <li>list item 1</li> ] [ <li>list item 5</li> ]
2. $("input:not(:checked)")； 查找所有未選中的 input 元素
HTML 代碼:
<input name="apple" />
<input name="flower" checked="checked" />
jQuery 代碼:
$("input:not(:checked)")
結果:
[ <input name="apple" /> ]
3. $("tr:eq(1)")；查找第二行
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> ]
4. $("tr:gt(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> ]
5. $("tr:lt(2)")；查找第一第二行，即索引值是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> ]
【內容選擇器】
1. $("div:contains('John')")；查找所有包含 "John" 的 div 元素
HTML 代碼:
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
jQuery 代碼:
$("div:contains('John')")
結果:
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
2. $("td: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> ]
3. $("div:has(p)").addClass("test")；給所有包含 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> ]
4. $("td:parent")；查找所有含有子元素或者文本的 td 元素
HTML 代碼:
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
jQuery 代碼:
$("td:parent")
結果:
[ <td>Value 1</td>, <td>Value 2</td> ]
【屬性選擇器】
1. 查找所有 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" /> ]
2. $("input[name^='news']")；查找所有 name 以 'news' 開始的 input 元素
HTML 代碼:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery 代碼:
$("input[name^='news']")
結果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
3. $("input[name$='letter']")；查找所有 name 以 'letter' 結尾的 input 元素
HTML 代碼:
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
jQuery 代碼:
$("input[name$='letter']")
結果:
[ <input name="newsletter" />, <input name="jobletter" /> ]
4. $("input[name*='man']")；查找所有 name 包含 'man' 的 input 元素
HTML 代碼:
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
jQuery 代碼:
$("input[name*='man']")
結果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
二、篩選器
【篩選】
1. $("li").eq(1)、$("li").eq(-2)；獲取匹配的第二個元素和倒數第二個元素
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").eq(1)
$("li").eq(-2)
結果:
[ <li>list item 2</li> ] [ <li>list item 4</li> ]
2. $('li').first()、$('li').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').first()
$('li').last()
結果:
[ <li>list item 1</li> ] [ <li>list item 5</li> ]
【查找】
1. $("div").children()、$("div").children(".selected")；查找DIV中的每個子元素，在每個div中
查找 .selected 的類。
HTML 代碼:
<p>Hello</p>
<div>
<span >Hello Again</span>
</div>
<p>And Again</p>
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<p>And Again</p>
</div>
jQuery 代碼:
$("div").children()
$("div").children(".selected")
結果:
[ <span>Hello Again</span> ] [ <p class="selected">Hello Again</p> ]
2. $("p").find("span")；從所有的段落開始，進一步搜索下面的span元素。與$("p span")相同。
HTML 代碼:
<p>
<span>Hello</span>,how are you?
</p>
jQuery 代碼:
$("p").find("span")
結果:
[ <span>Hello</span> ]
3. $("p").next()；找到每個段落的後面緊鄰的同輩元素。
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> ]
4. $("div:first").nextAll().addClass("after")；查找當前元素之後所有的同輩元素。
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> ]
5. $("p").parent()；查找每個段落的父元素
HTML 代碼:
<div>
<p>Hello</p>
<p>Hello</p>
</div>
jQuery 代碼:
$("p").parent()
結果:
[ <div><p>Hello</p><p>Hello</p></div>]
$("p").parent(".selected")；查找段落的父元素中每個類名爲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> ]
$("span").parents()；找到每個span元素的所有祖先元素。
$("span").parents("p")；找到每個span的所有是p元素的祖先元素。
6. $("p").prev()；找到每個段落緊鄰的前一個同輩元素。
HTML 代碼:
<p>Hello</p>
<div>
<span>Hello Again</span>
</div>
<p>And Again</p>
jQuery 代碼:
$("p").prev()
結果:
[ <div><span>Hello Again</span></div> ]
$("p").prev(".selected")；找到每個段落緊鄰的前一個同輩元素中類名爲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> ]
7. 給最後一個之前的所有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> ]
8. $("div").siblings()；找到每個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").siblings(".selected")；找到每個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> ]
三、屬性
【屬性】
1.attr(name|properties|key,value|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 });
2. removeAttr(name)；從每一個匹配的元素中刪除一個屬性
$("img").removeAttr("src")；將文檔中圖像的src屬性刪除
HTML 代碼:
<img src="test.jpg"/>
jQuery 代碼:
$("img").removeAttr("src");
結果:
[ <img /> ]
【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();
});
2. removeClass([class|fn])；從所有匹配的元素中刪除全部或者指定的類，一個或多個要
刪除的CSS類名，請用空格分開。
參數class 描述 : 從匹配的元素中刪除 'selected' 類
jQuery 代碼:
$("p").removeClass("selected");
參數class 描述 : 刪除匹配元素的所有類
jQuery 代碼:
$("p").removeClass();
回調函數描述 : 刪除最後一個元素上與前面重複的class
jQuery 代碼:
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
3. 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';
}
});
四、CSS
【位置】
1.offset([coordinates])；
1. 獲取匹配元素在當前視口的相對偏移。
2. 返回的對象包含兩個整型屬性：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 });
2. position()；
1. 獲取匹配元素相對父元素的偏移。
2. 返回的對象包含兩個整型屬性：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>
3.scrollTop([val])；
1. 獲取匹配元素相對滾動條頂部的偏移。
2. 此方法對可見和隱藏元素均有效。
無參數描述 : 獲取第一段相對滾動條頂部的偏移
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);
4.scrollLeft([val])；
1. 獲取匹配元素相對滾動條左側的偏移。
2. 此方法對可見和隱藏元素均有效。
無參數描述 : 獲取第一段相對滾動條左側的偏移
HTML 代碼:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代碼:
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
結果:
<p>Hello</p><p>scrollLeft: 0</p>
參數val 描述 : 設置相對滾動條左側的偏移
jQuery 代碼:
$("div.demo").scrollLeft(300);