第二十二章：JQuery
阿新 • • 發佈：2018-10-31
作者：java_wxid
Jquery介紹
1.什麼是JQuery ?
jQuery，顧名思義，也就是JavaScript和查詢（Query），它就是輔助JavaScript開發的js類庫。
2.JQuery核心思想:
它的核心思想是write less,do more(寫得更少,做得更多)，所以它實現了很多瀏覽器的相容問題。
3.JQuery流行程度
jQuery現在已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。
4.JQuery好處:
jQuery是免費、開源的，jQuery的語法設計可以使開發更加便捷，例如操作文件物件、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能。
Jquery 的初體驗
需求：使用Jquery和javascript給一個按鈕繫結單擊事件
注意：使用Jquery之前要將第三方jar包匯入
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../script/jquery-1.7.2.js"></script> <script type="text/javascript"> //使用javaScript給一個按鈕繫結單擊事件 window.onload = function() { //1 獲取標籤物件 var btnObj = document.getElementById("btnId"); //2 通過標籤物件.事件名 = function(){} btnObj.onclick = function() { alert("js原生繫結的單擊事件"); } } //使用Jquery給一個按鈕繫結單擊事件，Jquery中的$()代替window.onload // alert($); // 測試jquery引入是否成功！$是jquery的核心函式 $(function(){ // 頁面載入完成之後====>>>>window.onload = function()功能一樣 var $btnObj = $("#btnId");// 根據id屬性值查詢標籤物件 $btnObj.click( function(){ // 繫結事件 alert("這是jquery繫結的單擊事件"); } ); }); </script> </head> <body> <button id="btnId">SayHello</button> </body> </html>
常見問題？
1、使用jquery一定要引入jquery庫嗎？ 答案： 是
2、jquery中的$到底是什麼？ 答案： 核心函式
3、怎麼為按鈕新增點選響應函式的？ 答案： 操作如下：
①獲取標籤物件 var $btnObj = $("#btnId");// 根據id屬性值查詢標籤物件
②通過標籤物件.click( function(){} ) 綁定了函式
Jquery 核心函式 $()
$ 是jquery的核心函式，能完成jquery的很多功能。$()就是呼叫$這個函式
1、傳入引數為 [ 函式 ] 時：
$( function(){} ); 功能跟 window.onload一樣。都是頁面載入完成之後。
2、傳入引數為 [ HTML 字串 ] 時：
$(“我是span標籤
相當於如下程式碼：
var spanObj = document.createElement(“span”);
spanObj.innerHTML = “我是span標籤”;
document.body.appendChild( spanObj );
3、傳入引數為 [ 選擇器字串 ] 時：$(“#id”)
$("#div01");// 根據id查詢標籤物件，跟document.getElementById()一樣
4、傳入引數為 [ DOM物件 ] 時： $(this)
var divObj = document.getElementById(“div01”); // dom物件
alert( $( divObj ) ); // jquery物件
Jquery物件和dom物件區分
什麼是jquery物件，什麼是dom物件?
Dom物件
1.通過getElementById()查詢出來的標籤物件是Dom物件
2.通過getElementsByName()查詢出來的標籤物件是Dom物件
3.通過getElementsByTagName()查詢出來的標籤物件是Dom物件
4.通過createElement() 方法建立的物件，是Dom物件
JQuery物件
5.通過JQuery提供的API建立的物件，是JQuery物件。
例如：$("<span>我是span標籤</span>");是jquery物件
6.通過JQuery包裝的Dom物件，也是JQuery物件
7.通過JQuery提供的API查詢到的物件，是JQuery物件
Jquery物件的本質是什麼？
jquery物件是一個Dom物件的陣列 + jquery 的一系列功能函式的總和。
Jquery物件和Dom物件使用區別？
jquery物件不能使用dom物件的屬性和方法
var divObj = document.getElementById("testDiv");
// jquery物件也不能使用dom物件的屬性和方法
var $divObj = $( divObj );
alert( $divObj.innerHTML );
dom物件也不能使用jquery物件的屬性的方法
var divObj = document.getElementById("testDiv");
//dom物件不能使用jquery物件的方法
divObj.onclick = function(){
alert(1);
}
Dom物件和Jquery物件互轉
dom物件轉化為jquery物件：var $jqueryObj = $(dom物件)
1、先有dom物件
var divObj = document.getElementById(“testDiv”); // dom物件
2、通過核心函式轉成jquery物件
$( divObj ); //jquery物件
jquery物件轉為dom物件：var dom = $jqueryObj[下標];
1、先有jquery物件
2、通過下標取出需要的dom物件
jquery選擇器
基本選擇器
1.#ID 選擇器：根據id查詢標籤物件
2…class 選擇器：根據class查詢標籤物件
3.element 選擇器：根據標籤名查詢標籤物件
4.* 選擇器：表示任意的，所有的元素
5.selector1，selector2 組合選擇器：合併選擇器1，選擇器2的結果並返回
案例：
$(document).ready(function(){
//1.選擇 id 為 one 的元素 #id
$("#btn1").click(function(){
$("#one").css("background-color","#bbffaa");
});
//2.選擇 class 為 mini 的所有元素 .class
$("#btn2").click(function(){
$(".mini").css("background-color","#bbffaa");
});
//3.選擇 元素名是 div 的所有元素 標籤名選擇器 直接傳入標籤名
$("#btn3").click(function(){
$("div").css("background-color","#bbffaa");
});
//4.選擇所有的元素 所有元素選擇器 *
$("#btn4").click(function(){
$("*").css("background-color","#bbffaa");
});
//5.選擇所有的 span 元素和id為two的元素 [所有的 span 元素:標籤選擇器 標籤名]
// [id為two的元素:id選擇器 #id]
// 組選擇器 $(s1,s2...)
$("#btn5").click(function(){
$("span,#two").css("background-color","#bbffaa");
});
});
p.myClass
p是標籤名
.myClass是型別
要求的結果必須是：標籤名必須是p標籤，而且這個標籤還要有myClass的型別
層級選擇器
1.ancestor descendant 後代選擇器 ：在給定的祖先元素下匹配所有的後代元素
2.parent > child 子元素選擇器：在給定的父元素下匹配所有的子元素
3.prev + next 相鄰元素選擇器：匹配所有緊接在 prev 元素後的 next 元素
4.prev ~ sibings 之後的兄弟元素選擇器：匹配 prev 元素之後的所有 siblings 元素
案例：
//$(document).ready(function(){});全寫 跟 $(function(){}); 一樣。簡寫
$(document).ready(function(){
//1.選擇 body 內的所有 div 元素 （後代選擇器）
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 內, 選擇div子元素 （子元素選擇器）
$("#btn2").click(function(){
$("body > div").css("background", "#bbffaa");
});
//3.選擇 id 為 one 的下一個 div 元素 （相鄰元素選擇器）
$("#btn3").click(function(){
$("#one+div").css("background", "#bbffaa");
});
//4.選擇 id 為 two 的元素後面的所有 div 兄弟元素 （之後的兄弟元素選擇器）
$("#btn4").click(function(){
$("#two~div").css("background", "#bbffaa");
});
});
過濾選擇器
基本過濾器
:first 獲取第一個元素
:last 獲取最後個元素
:not(selector) 去除所有與給定選擇器匹配的元素
:even 匹配所有索引值為偶數的元素，從 0 開始計數
:odd 匹配所有索引值為奇數的元素，從 0 開始計數
:eq(index) 匹配一個給定索引值的元素
:gt(index) 匹配所有大於給定索引值的元素
:lt(index) 匹配所有小於給定索引值的元素
:header 匹配如 h1, h2, h3之類的標題元素
:animated 匹配所有正在執行動畫效果的元素
案例：
$(document).ready(function(){
//1.選擇第一個 div 元素
$("#btn1").click(function(){
$("div:first").css("background", "#bbffaa");
});
//2.選擇最後一個 div 元素
$("#btn2").click(function(){
$("div:last").css("background", "#bbffaa");
});
//3.選擇class不為 one 的所有 div 元素
$("#btn3").click(function(){
$("div:not(.one)").css("background", "#bbffaa");
});
//4.選擇索引值為偶數的 div 元素
$("#btn4").click(function(){
$("div:even").css("background", "#bbffaa");
});
//5.選擇索引值為奇數的 div 元素
$("#btn5").click(function(){
$("div:odd").css("background", "#bbffaa");
});
//6.選擇索引值為大於 3 的 div 元素
$("#btn6").click(function(){
$("div:gt(3)").css("background", "#bbffaa");
});
//7.選擇索引值為等於 3 的 div 元素
$("#btn7").click(function(){
$("div:eq(3)").css("background", "#bbffaa");
});
//8.選擇索引值為小於 3 的 div 元素
$("#btn8").click(function(){
$("div:lt(3)").css("background", "#bbffaa");
});
//9.選擇所有的標題元素
$("#btn9").click(function(){
$(":header").css("background", "#bbffaa");
});
//10.選擇當前正在執行動畫的所有元素
$("#btn10").click(function(){
$(":animated").css("background", "#bbffaa");
});
//11.選擇沒有執行動畫的最後一個div
$("#btn11").click(function(){
$("div:not(:animated):last").css("background", "#bbffaa");
});
});
內容過濾器
:contains(text) 匹配包含給定文字的元素
:empty 匹配所有不包含子元素或者文字的空元素
:parent 匹配含有子元素或者文字的元素
:has(selector) 匹配含有選擇器所匹配的元素的元素
案例：
$(document).ready(function(){
//1.選擇 含有文字 'di' 的 div 元素
$("#btn1").click(function(){
$("div:contains('di')").css("background", "#bbffaa");
});
//2.選擇不包含子元素(或者文字元素) 的 div 空元素
$("#btn2").click(function(){
$("div:empty").css("background", "#bbffaa");
});
//3.選擇含有 class 為 mini 元素的 div 元素
$("#btn3").click(function(){
$("div:has(.mini)").css("background", "#bbffaa");
});
//4.選擇含有子元素(或者文字元素)的div元素
$("#btn4").click(function(){
$("div:parent").css("background", "#bbffaa");
});
});
屬性過濾器
[attribute] 匹配包含給定屬性的元素。
[attribute=value] 匹配給定的屬性是某個特定值的元素
[attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素。
[attribute^=value] 匹配給定的屬性是以某些值開始的元素
[attribute$=value] 匹配給定的屬性是以某些值結尾的元素
[attribute*=value] 匹配給定的屬性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 複合屬性選擇器，需要同時滿足多個條件時使用。
案例：
$(function() {
//1.選取含有 屬性title 的div元素
$("#btn1").click(function() {
$("div[title]").css("background", "#bbffaa");
});
//2.選取 屬性title值等於'test'的div元素
$("#btn2").click(function() {
$("div[title='test']").css("background", "#bbffaa");
});
//3.選取 屬性title值不等於'test'的div元素(沒有屬性title的也將被選中)
$("#btn3").click(function() {
$("div[title!='test']").css("background", "#bbffaa");
});
//4.選取 屬性title值 以'te'開始 的div元素
$("#btn4").click(function() {
$("div[title^='te']").css("background", "#bbffaa");
});
//5.選取 屬性title值 以'est'結束 的div元素
$("#btn5").click(function() {
$("div[title$='est']").css("background", "#bbffaa");
});
//6.選取 屬性title值 含有'es'的div元素
$("#btn6").click(function() {
$("div[title*='es']").css("background", "#bbffaa");
});
//7.首先選取有屬性id的div元素，然後在結果中 選取屬性title值 含有'es'的 div 元素
$("#btn7").click(function() {
$("div[id][title*='es']").css("background", "#bbffaa");
});
//8.選取 含有 title 屬性值, 且title 屬性值不等於 test 的 div 元素
$("#btn8").click(function() {
$("div[title][title!='test']").css("background", "#bbffaa");
});
});
[attribute!=value]補充：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
alert( $("div[id!='div01']").length );//2,沒有屬性id的也將被選中
});
</script>
</head>
<body>
<div id="div01"></div>
<div></div>
<div id="div03"></div>
</body>
可見性過濾選擇器
:hidden 所有隱藏的元素
:visible 所有可見元素
案例：
$(document).ready(function(){
//1.選取所有可見的 div 元素
$("#btn1").click(function(){
$("div:visible").css("background", "#bbffaa");
});
//2.選擇所有不可見的 div 元素
//不可見：display屬性設定為none，或visible設定為hidden
$("#btn2").click(function(){
$("div:hidden").show("slow").css("background", "#bbffaa");
});
//3.選擇所有不可見的 input 元素
$("#btn3").click(function(){
alert($("input:hidden").attr("value"));
});
});
表單過濾器
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有 文字輸入框
:password 匹配所有的密碼輸入框
:radio 匹配所有的單選框
:checkbox 匹配所有的複選框
:submit 匹配所有提交按鈕
:image 匹配所有img標籤
:reset 匹配所有重置按鈕
:button 匹配所有input type=button 按鈕
:file 匹配所有input type=file檔案上傳
:hidden 匹配所有不可見元素display:none 或 input type=hidden
表單物件的屬性
:enabled 可用的
:disabled 不可用的
:checked 選擇的，checkbox或者單選按鈕的選擇 複選框、單選框等
:selected 選擇的，下拉列表的選擇 匹配所有選中的option元素
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1.對錶單內 可用 文字輸入框 賦值操作
$("#btn1").click(function(){
// .val() 方法 專門用來操作表單項的value屬性
$(":text:enabled").val("國哥太帥！");
});
//2.對錶單內 不可用input 賦值操作
$("#btn2").click(function(){
$(":text:disabled").val("不可用，我也可以改");
});
//3.獲取多選框選中的個數 使用size()方法獲取選取到的元素集合的元素個數
$("#btn3").click(function(){
alert( $(":checkbox:checked").length );
});
//4.獲取多選框，每個選中的value值
$("#btn4").click(function(){
//1 獲取全部選中的複選框
var $checkedObjs = $(":checkbox:checked");
//2 遍歷所有複選框。轉成dom物件。就可以使用.value
//for (var i = 0; i < $checkedObjs.length; i++) {
//alert( $checkedObjs[i].value );
//}
// each 方法 用來遍歷jquery的每個元素
$checkedObjs.each(function(){
//在jquery物件的each遍歷的function函式中，有一個this物件
//這個this物件，是當前正在遍歷到的dom物件
alert( this.value );
});
});
//5.獲取下拉框選中的內容
$("#btn5").click(function(){
//1 獲取全部選中的option標籤物件
$(":selected").each(function(){
//在jquery的each遍歷的function函式中，有一個this物件，這個this物件是當前正在遍歷到的dom物件
alert(this.innerHTML)
});
});
})
</script>
</head>
<body>
<h3>表單物件屬性過濾選擇器</h3>
<button id="btn1">對錶單內 可用文字輸入框 賦值操作.</button>
<button id="btn2">對錶單內 不可用文字輸入框 賦值操作.</button><br /><br />
<button id="btn3">獲取多選框選中的個數.</button>
<button id="btn4">獲取多選框選中的內容.</button><br /><br />
<button id="btn5">獲取下拉框選中的內容.</button><br /><br />
<form id="form1" action="#">
可用元素: <input name="add" value="可用文字框1"/><br>
不可用元素: <input name="email" disabled="disabled" value="不可用文字框"/><br>
可用元素: <input name="che" value="可用文字框2"/><br>
不可用元素: <input name="name" disabled="disabled" value="不可用文字框"/><br>
<br>
多選框: <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
下拉列表1: <br>
<select name="test" multiple="multiple" style="height: 100px" id="sele1">
<option>浙江</option>
<option selected="selected">遼寧</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br><br>
下拉列表2: <br>
<select name="test2">
<option>浙江</option>
<option>遼寧</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
</form>
</body>
補充：下拉列表多項選擇：multiple=“multiple”
<select name="test" multiple="multiple" style="height: 100px" id="sele1">
<option>浙江</option>
<option selected="selected">遼寧</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
補充：checked選擇的，checkbox或者單選按鈕的選擇 複選框、單選框等
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//alert( $(":checked").length );//3
var $checkedObjs = $(":selected");//建議使用:selected代替:checked
for (var i = 0; i < $checkedObjs.length; i++) {
alert($checkedObjs[i]);
}
});
</script>
</head>
<body>
<input type="radio" checked="checked" />
<input type="checkbox" checked="checked" />
<select>
<option>xxxx</option>
<option selected="selected">aaaa</option>
<option>bbbb</option>
</select>
</body>
元素篩選
過濾
eq(index|-index)
選出索引為index 的元素（0開始） ,負號表示可以倒著選（-1開）和:eq()功能一樣
first()
選出第一個元素 和:first功能一樣
last()
選出最後一個元素 和:last功能一樣
hasClass(class)
是否含有class值
filter(expr|obj|ele|fn)
按照表達式過濾
is(expr|obj|ele|fn)1.6*
是否滿足表示式
has(expr|ele)
是否含有表示式的元素
not(expr|ele|fn)
判斷一個元素是不是符合表示式
slice(start,[end])
表示從start開始選擇直到end,只傳遞一個start表示從start開始直至結束
查詢
children([expr]) 查詢所有子元素，傳入表示式，表示滿足表示式的子元素
closest(expr,[con]|obj|ele)1.6* 表示查詢和當前元素最接近的元素
find(expr|obj|ele) 表示查詢元素，查詢的是後代元素
next([expr]) 查詢下一個元素
nextall([expr]) 查詢下面所有的元素
nextUntil([exp|ele][,fil])1.6* 查詢相鄰相鄰元素一致到結束
offsetParent() 返回第一個匹配元素用於定位的父節點。這返回父元素中第一個其position設為relative或者absolute的元素。此方法僅對可見元素有效。
parent([expr]) 返回父元素
parents([expr]) 返回所有祖先元素
parentsUntil([exp|ele][,fil])1.6* 返回所有祖先元素直到滿足表示式為止
prev([expr]) 返回之前的那個元素
prevall([expr]) 返回之前所有的兄弟元素
prevUntil([exp|ele][,fil])1.6* 返回之前所有兄弟元素直到滿足表示式為止
siblings([expr]) 返回滿足表示式的同輩元素
串聯
add(expr|ele|html|obj[,con]) 並聯關係。選擇當前的元素和add條件中的元素，返回的是這些元素的集合
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM查詢</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
//(1)eq() 選擇索引值為等於 3 的 div 元素
$("#btn1").click(function(){
$("div").eq(3).css("background-color","#bfa");
});
//(2)first()選擇第一個 div 元素
$("#btn2").click(function(){
//first() 選取第一個元素
$("div").first().css("background-color","#bfa");
});
//(3)last()選擇最後一個 div 元素
$("#btn3").click(function(){
//last() 選取最後一個元素
$("div").last().css("background-color","#bfa");
});
//(4)filter()在div中選擇索引為偶數的
$("#btn4").click(function(){
//filter() 過濾 傳入的是選擇器字串
$("div").filter(":even").css("background-color","#bfa");
});
//(5)is()判斷#one是否為:empty或:parent
//is用來檢測jq物件是否符合指定的選擇器
$("#btn5").click(function(){
alert( $("#one").is(":parent") );
});
//(6)has()選擇div中包含.mini的
$("#btn6").click(function(){
//has(selector) 選擇器字串 是否包含selector
$("div").has(".mini").css("background-color","#bfa");
});
//(7)not()選擇div中class不為one的
$("#btn7").click(function(){
//not(selector) 選擇不是selector的元素
$("div").not(".one").css("background-color","#bfa");
});
//(8)children()在body中選擇所有class為one的div子元素
$("#btn8").click(function(){
//children() 選出所有的子元素
$("body").children("div.one").css("background-color","#bfa");
});
//(9)find()在body中選擇所有class為mini的div元素
$("#btn9").click(function(){
//find() 選出所有的後代元素
$("body").find("div.mini").css("background-color","#bfa");
});
//(10)next() #one的下一個div
$("#btn10").click(function(){
//next() 選擇下一個兄弟元素
$("#one").next("div").css("background-color","#bfa");
});
//(11)nextAll() #one後面所有的span元素
$("#btn11").click(function(){
//nextAll() 選出後面所有的元素
$("#one").nextAll("span").css("background-color","#bfa");
});
//(12)nextUntil() #one和span之間的元素
$("#btn12").click(function(){
$("#one").nextUntil("span").css("background-color","#bfa")
});
//(13)parent() .mini的父元素
$("#btn13").click(function(){
$(".mini").parent().css("background-color","#bfa");
});
//(14)prev() #two的上一個div
$("#btn14").click(function(){
//prev()
$("#two").prev().css("background-color","#bfa")
});
//(15)prevAll() span前面所有的div
$("#btn15").click(function(){
//prevAll() 選出前面所有的元素
$("span").prevAll("div").css("background-color","#bfa")
});
//(16)prevUntil() span向前直到#one的元素
$("#btn16").click(function(){
//prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止
$("span").prevUntil("#one").css("background-color","#bfa")
});
//(17)siblings() #two的所有兄弟元素
$("#btn17").click(function(){
//siblings() 找到所有的兄弟元素，包括前面的和後面的
$("#two").siblings("div").css("background-color","#bfa")
});
//(18)add()選擇所有的 span 元素和id為two的元素
$("#btn18").click(function(){
// $("span,#two,.mini,#one")
$("span").add("#two").add("#one").css("background-color","#bfa");
});
});
</script>
</head>
<body>
<input type="button" value="eq()選擇索引值為等於 3 的 div 元素" id="btn1" />
<input type="button" value="first()選擇第一個 div 元素" id="btn2" />
<input type="button" value="last()選擇最後一個 div 元素" id="btn3" />
<input type="button" value="filter()在div中選擇索引為偶數的" id="btn4" />
<input type="button" value="is()判斷#one是否為:empty或:parent" id="btn5" />
<input type="button" value="has()選擇div中包含.mini的" id="btn6" />
<input type="button" value="not()選擇div中class不為one的" id="btn7" />
<input type="button" value="children()在body中選擇所有class為one的div子元素" id="btn8" />
<input type="button" value="find()在body中選擇所有class為mini的div後代元素" id="btn9" />
<input type="button" value="next()#one的下一個div" id="btn10" />
<input type="button" value="nextAll()#one後面所有的span元素" id="btn11" />
<input type="button" value="nextUntil()#one和span之間的元素" id="btn12" />
<input type="button" value="parent().mini的父元素" id="btn13" />
<input type="button" value="prev()#two的上一個div" id="btn14" />
<input type="button" value="prevAll()span前面所有的div" id="btn15" />
<input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
<input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
<input type="button" value="add()選擇所有的 span 元素和id為two的元素" id="btn18" />
<h3>基本選擇器.</h3>
<br /><br />
文字框<input type="text" name="account" disabled="disabled" />
<br><br>
<div class="one" id="one">
id 為 one,class 為 one 的div
<div class="mini">class為mini</div>
</div>
<div class="one" id="two" title="test">
id為two,class為one,title為test的div
<div class="mini" title="other"><b>class為mini,title為other</b></div>
<div class="mini" title="test">class為mini,title為test</div>
</div>
<div class="one">
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini" title="tesst">class為mini,title為tesst</div>
</div>
<div style="display:none;" class="none">style的display為"none"的div</div>
<div class="hide">class為"hide"的div</div>
<span id="span1">^^span元素 111^^</span>
<div>
包含input的type為"hidden"的div<input type="hidden" size="8">
</div>
<span id="span2">^^span元素 222^^</span>
<div id="mover">正在執行動畫的div元素.</div>
</body>
Jquery 的屬性操作
html() 跟innerHTML一樣。 設定和獲取起始標籤和結束標籤中的內容
text() 跟innerText一樣。 設定和獲取起始標籤和結束標籤中的文字
val() 跟value屬性一樣。 專門用來操作表單項的value屬性。
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
// val()方法來操作
//val()方法除了可以設定表單項的value屬性值之外。
// 還可以批量操作表單項的選中狀態
// $(":radio").val(["radio2"]);// 操作單選
// $(":checkbox").val(["checkbox3","checkbox2","checkbox1"]);//批量操作複選框被選中
// $("#multiple").val(["mul1","mul3","mul4"]);// 批量操作多選的下拉列表，多個被選中
// $("#single").val(["sin3"]);// 操作單選的下拉列表，一個被選中
$(":radio,:checkbox,#multiple,#single").val(["checkbox3","radio2","checkbox2","mul2","mul3","sin2"]);
});
</script>
</head>
<body>
單選：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多選：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
下拉多選 ：
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
下拉單選 ：
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
attr() attr可以設定和獲取屬性的值。
prop() prop可以設定和獲取屬性的值。
prop方法它可以忽略undefined錯誤。checked屬性、selected屬性、disalbed屬性，readonly屬性，等。這些屬性在dom物件中都會有true和false值的情況。
並且使用attr操作有返回undefined的情況下。使用prop方法。prop方法只推薦用來操作dom屬性中值是true和false的屬性。其他的屬性都使用attr方法。
attr還有它強大的地方。它可以操作非標準的屬性（自定義的屬性）。
需求：
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// 全選
$("#checkedAllBtn").click(function(){
$(":checkbox").prop("checked",true);
});
// 全不選
$("#checkedNoBtn").click(function(){
$(":checkbox").prop("checked",false);
});
// 反選
$("#checkedRevBtn").click(function(){
// 全部球類的複選框
$(":checkbox[name='items']").each(function(){
// 在遍歷的each方法的function函式中，有一個this物件，
// 這個this物件是當前正在遍歷到的dom物件
this.checked = !this.checked;
});
// 需要檢查一下，是否全部的球類複選框都選中了
// 如果都選中了，設定【全選/全不選 】也選中，反之亦然
// 獲取全部的球類的個數
var allCount = $(":checkbox[name='items']").length;
// 獲取選中的球類的個數
var checkedCount = $(":checkbox[name='items']:checked").length;
if (allCount == checkedCount) {
// 全選啦
$("#checkedAllBox").prop("checked",true);
} else {
// 還沒選滿
$("#checkedAllBox").prop("checked",false);
}
});
// 提交按鈕
$("#sendBtn").click(function(){
// 選中的全部和複選框
$(":checkbox[name='items']:checked").each(function(){
alert(this.value);
});
});
// 給【全選/全不選 】複選框繫結單擊事件
$("#checkedAllBox").click(function(){
// 在事件的function函式中，也有一個this物件。這個this物件是當前正在響應事件的dom物件
// 1 獲取【全選/全不選 】的選中狀態
// alert( this.checked );
// 2 把【全選/全不選 】的選中狀態。設定給全部的球類
$(":checkbox[name='items']").prop("checked",this.checked );
});
// 給每一個球類都要繫結單擊事件
$(":checkbox[name='items']").click(function(){
// 在事件的function函式中，也有一個this物件。這個this物件是當前正在響應事件的dom物件
// 需要檢查一下，是否全部的球類複選框都選中了
// 如果都選中了，設定【全選/全不選 】也選中，反之亦然
// 獲取全部的球類的個數
var allCount = $(":checkbox[name='items']").length;
// 獲取選中的球類的個數
var checkedCount = $(":checkbox[name='items']:checked").length;
if (allCount == checkedCount) {
// 全選啦
$("#checkedAllBox").prop("checked",true);
} else {
// 還沒選滿
$("#checkedAllBox").prop("checked",false);
}
})
});
</script>
</head>
<body>
<form method="post" action="">
你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="籃球" />籃球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 選" />
<input type="button" id="checkedNoBtn" value="全不選" />
<input type="button" id="checkedRevBtn" value="反 選" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
Dom的增刪改
內部插入
appendTo(content)
a.appendTo(b); 把a加到b裡面 新增到最後面
prependTo(content)
a.prependTo(b); 把a新增到b裡面 新增到最前面
外部插入
insertAfter(content)
a.insertAfter(b); 把a插入到b的後面
insertBefore(content)
a.insertBefore(b); 把a插入到b的前面
替換
replaceWith(content|fn)
a.replaceWith(b) 把a用b替換
replaceAll(selector)
a.replaceAll(b) 用a替換所有的b
刪除
empty()
a.empty() 把a掏空，把a裡面的所有元素都刪除 （內容）
remove([expr])
a.remove(b) 所有的a，是b的話就會刪除 a.remove()刪除a （內容和結構）
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM增刪改</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#btn01").click(function(){
//建立一個"廣州"節點,新增到#city下[appendTo()]
//子節點.appendTo(父節點)
$("<li>廣州</li>").appendTo($("#city"))
});
$("#btn02").click(function(){
//建立一個"廣州"節點,新增到#city下[prependTo()]
$("<li>廣州</li>").prependTo($("#city"));
});
$("#btn03").click(function(){
//將"廣州"節點插入到#bj前面[insertBefore()]
//前邊.insertBefore(後邊的)
$("<li>廣州</li>").insertBefore($("#bj"));
});
$("#btn04").click(function(){
//將"廣州"節點插入到#bj後面[insertAfter()]
//後邊.insertAfter(前邊的)
$("<li>廣州</li>").insertAfter($("#bj"));
});
$("#btn05").click(function(){
//使用"廣州"節點替換#bj節點[replaceWith()]
//被替換的.replaceWith()
$("#bj").replaceWith("<li>廣州</li>")
});
$("#btn06").click(function(){
//使用"廣州"節點替換#bj節點[replaceAll()]
//新的節點.replaceAll(舊的節點)
$("<li>廣州</li>").replaceAll($("#bj"));
});
$("#btn07").click(function(){
//刪除#rl節點[remove()]
//$("ul").remove("#rl");
//$("#rl").remove();
$("li").remove("#rl");
});
$("#btn08").click(function(){
//掏空#city節點[empty()]
$("#city").empty();
});
$("#btn09").click(function(){
//讀取#city內的HTML程式碼
alert($("#city").html())
});
$("#btn10").click(function(){
//設定#bj內的HTML程式碼
alert($("#bj").text())
});
});
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>你喜歡哪個城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
<p>你喜歡哪款單機遊戲?</p>
<ul id="game">
<li id="rl">紅警</li>
<li>實況</li>
<li>極品飛車</li>
<li>魔獸</li>
</ul>
<p>你手機的作業系統是?</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">建立一個"廣州"節點,新增到#city下[appendTo()]</button></div>
<div><button id="btn02">建立一個"廣州"節點,新增到#city下[prependTo()]</button></div>
<div><button id="btn03">將"廣州"節點插入到#bj前面[insertBefore()]</button></div>
<div><button id="btn04">將"廣州"節點插入到#bj後面[insertAfter()]</button></div>
<div><button id="btn05">使用"廣州"節點替換#bj節點[replaceWith()]</button></div>
<div><button id="btn06">使用"廣州"節點替換#bj節點[replaceAll()]</button></div>
<div><button id="btn07">刪除#rl節點[remove()]</button></div>
<div><button id="btn08">掏空#city節點[empty()]</button></div>
<div><button id="btn09">讀取#city內的HTML程式碼</button></div>
<div><button id="btn10">設定#bj內的HTML程式碼</button></div>
</div>
</body>
JQuery練習
從左到右，從右到左練習
需求：
案例程式碼：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//【選中新增到右邊】單擊事件
$("button:eq(0)").click(function(){
// 先查找出左邊下拉列表中哪些option被選中
// 呼叫appendTo()
$("select:eq(0) option:selected").appendTo( $("select:eq(1)") );
});
//【全部新增到右邊】單擊事件
$("button:eq(1)").click(function(){
// 先查找出左邊下拉列表中哪些option被選中
// 呼叫appendTo()
$("select:eq(0) option").appendTo( $("select:eq(1)") );
});
//【選中刪除到左邊】單擊事件
$("button:eq(2)").click(function(){
// 先查找出左邊下拉列表中哪些option被選中
// 呼叫appendTo()
$("select:eq(1) option:selected").appendTo( $("select:eq(0)") );
});
//【全部刪除到左邊】單擊事件
$("button:eq(3)").click(function(){
// 先查找出左邊下拉列表中哪些option被選中
// 呼叫appendTo()
$("select:eq(1) option").appendTo( $("select:eq(0)") );
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">選項1</option>
<option value="opt02">選項2</option>
<option value="opt03">選項3</option>
<option value="opt04">選項4</option>
<option value="opt05">選項5</option>
<option value="opt06">選項6</option>
<option value="opt07">選項7</option>
<option value="opt08">選項8</option>
</select>
<button>選中新增到右邊</button>
<button>全部新增到右邊</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>選中刪除到左邊</button>
<button>全部刪除到左邊</button>
</div>
</body>
動態新增、刪除表格記錄（絕對的重點）
需求：
案例程式碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 頁面載入完成之後
$(function(){
// 定義刪除的函式，重複使用
var deleteAFun = function(){
var $trObj = $(this).parent().parent();
// find 查詢後代
var name = $trObj.find("td:first").text();
// confirm是javaScript中提供的一個確認提示框函式，
// 它接收的引數就是提示框的提示文字內容
// 這個確認提示框有兩個按鈕，一個確認，一個取消
// 使用者點選確認，就返回true
// 使用者點選取消，就返回false
if( confirm("是否需要刪除【" + name + "】嗎?") ){
$trObj.remove();
}
// 在事件的function函式中，有一個this物件，這個this物件是當前正在響應事件的dom物件
// 刪除點選所在行
// 不希望跳轉怎麼辦？
// return false 可以阻止元素的預設行為。
return false;
}
//提交按鈕繫結單擊事件
$("#addEmpButton").click(function(){
// 獲取輸入框中，名稱，郵箱，工資
var nameText = $("#empName").val();
var emailText = $("#email").val();
var salaryText = $("#salary").val();
// 建立一個行物件
var $trObj = $("<tr>"
+ "<td>" + nameText + "</td>"
+ "<td>" + emailText + "</td>"
+ "<td>" + salaryText + "</td>"
+ "<td><a href=\"deleteEmp?id=003\">Delete</a></td>"
+ "</tr>");
// 找到創建出來的a標籤，再給它繫結單擊事件
$trObj.find("a").click(deleteAFun);
// 新增表表格中
$trObj.appendTo( $("#employeeTable") );
});
// 給刪除的a標籤繫結單擊事件
$("a").click( deleteAFun );
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>新增新員工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS樣式操作
addClass() 新增樣式
removeClass() 刪除樣式
toggleClass() 有就刪除，沒有就新增
offset() 設定和獲取標籤和座標
案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width:100px;
height:260px;
}
div.whiteborder{
border: 2px white solid;
}
div.redDiv{
background-color: red;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var $divEle = $('div:first');
$('#btn01').click(function(){
//addClass() - 向被選元素新增一個或多個類
$divEle.addClass("redDiv blueBorder");
});
$('#btn02').click(function(){
//removeClass() - 從被選元素刪除一個或多個類
$divEle.removeClass();
});
$('#btn03').click(function(){
//toggleClass() - 對被選元素進行新增/刪除類的切換操作
$divEle.toggleClass("redDiv");
});
$('#btn04').click(function(){
//offset() - 返回第一個匹配元素相對於文件的位置。
var pos = $divEle.offset();
console.log(pos);
// 設定座標
$divEle.offset({
top: 110, left: 384
});
});
})
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="border">
</div>
</td>
<td>
<div class="btn">
<input type="button" value="addClass()" id="btn01"/>
<input type="button" value="removeClass()" id="btn02"/>
<input type="button" value="toggleClass()" id="btn03"/>
<input type="button" value="offset()" id="btn04"/>
</div>
</td>
</tr>
</table>
</body>
</html>
Jquery動畫
基本動畫
show() 顯示隱藏的元素
第一個引數是 動畫執行的時候，（單位是毫秒）
第二個引數是 動畫執行完成時的回撥函式
hide() 隱藏可見的元素
第一個引數是 動畫執行的時候，（單位是毫秒）
第二個引數是 動畫執行完成時的回撥函式
toggle() 可見就隱藏，隱藏狀態就顯示
第一個引數是 動畫執行的時候，（單位是毫秒）
第二個引數是 動畫執行完成時的回撥函式
淡入淡出動畫
fadeIn() 淡入 讓隱藏可見
fadeOut() 淡出 讓可見消失
fadeTo()
fadeToggle() 讓消失的可見，讓可見的慢慢消失
案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//顯示 show()
$("#btn1").click(function(){
$("#div1").show(1000);
});
//隱藏 hide()
$("#btn2").click(function(){
$("#div1").hide(1000);
});
//切換 toggle()
$("#btn3").click(function(){
$("#div1").toggle(1000);
});
//淡入 fadeIn()
$("#btn4").click(function(){
$("#div1").fadeIn(500);
});
//淡出 fadeOut()
$("#btn5").click(function(){
$("#div1").fadeOut(500);
});
//淡化到 fadeTo()
$("#btn6").click(function(){
$("#div1").fadeTo("slow",Math.random());
});
//淡化切換 fadeToggle()
$("#btn7").click(function(){
$("#div1").fadeToggle("slow","linear");
});
})
</script>
</head>
<body>
<table style="float: left;">
<tr>
<td><button id="btn1">顯示show()</button></td>
</tr>
<tr>
<td><button id="btn2">隱藏hide()</button></td>
</tr>
<tr>
<td><button id="btn3">顯示/隱藏切換 toggle()</button></td>
</tr>
<tr>
<td><button id="btn4">淡入fadeIn()</button></td>
</tr>
<tr>
<td><button id="btn5">淡出fadeOut()</button></td>
</tr>
<tr>
<td><button id="btn6">淡化到fadeTo()</button></td>
</tr>
<tr>
<td><button id="btn7">淡化切換fadeToggle()</button></td>
</tr>
</table>
<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
jquery動畫定義了很多種動畫效果，可以很方便的使用這些動畫效果
</div>
</body>
</html>
練習：CSS_動畫 品牌展示
需求：
1.點選按鈕的時候，隱藏和顯示卡西歐之後的品牌。
2.當顯示全部內容的時候，按鈕文字為“顯示精簡品牌”
然後，小三角形向上。所有品牌產品為預設顏色。
3.當只顯示精簡品牌的時候，要隱藏卡西歐之後的品牌，按鈕文字為“顯示全部品牌”
然後小三形向下。並且把 佳能，尼康的品牌顏色改為紅色（給li標籤新增promoted樣式即可）
案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示練習</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
// 初始化隱藏
$("li:gt(5):not(:last)").hide();
// 給按鈕繫結單擊事件
$("div div a").click(function(){
// 點選的時候，讓卡西歐之後的品牌，要麼顯示，要麼隱藏
$("li:gt(5):not(:last)").toggle();
if ($("li:gt(5):not(:last)").is(":hidden")) {
// 如果品牌隱藏了，要顯示的【顯示全部品牌】
$("div div a span").html("顯示全部品牌");
//角標向下showmore
$("div div").removeClass();//先刪除原來的樣式
$("div div").addClass("showmore");//先刪除原來的樣式
//去掉高亮，廣告
$("li:contains('愛國者'),li:contains('明基')").removeClass();
} else {
//如果品牌都可見了，要顯示【顯示精簡品牌】
$("div div a span").html("顯示精簡品牌");
//角標向上showless
$("div div").removeClass();//先刪除原來的樣式
$("div div").addClass("showless");//先刪除原來的樣式
//加高亮，廣告
$("li:contains('愛國者'),li:contains('明基')").addClass("promoted");
}
// 阻止 a的預設 跳轉
return false;
});
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440) </i></li>
<li><a href="#">索尼</a><i>(27220) </i></li>
<li><a href="#">三星</a><i>(20808) </i></li>
<li><a href="#">尼康</a><i>(17821) </i></li>
<li><a href="#">松下</a><i>(12289) </i></li>
<li><a href="#">卡西歐</a><i>(8242) </i></li>
<li><a href="#">富士</a><i>(14894) </i></li>
<li><a href="#">柯達</a><i>(9520) </i></li>
<li><a href="#">賓得</a><i>(2195) </i></li>
<li><a href="#">理光</a><i>(4114) </i></li>
<li><a href="#">奧林巴斯</a><i>(12205) </i></li>
<li><a href="#">明基</a><i>(1466) </i></li>
<li><a href="#">愛國者</a><i>(3091) </i></li>
<li><a href="#">其它品牌相機</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>顯示全部品牌</span></a>
</div>
</div>
</body>
</html>
$(function(){});和window.onload = function(){}的區別？
window.onload是js原生的事件，$(function(){})是Jquery的方法(等價於$(document).ready(function(){}) )，兩者主要有以下幾點差別：
1、window.onload：在頁面所有資源載入完後執行，如果有多個定義則只執行最後一個
2、$(function(){})：在Dom節點建立完成後執行，如果有多個定義則依次執行
可以看出$(function(){})在window.onload前執行
他們分別是在什麼時候觸發？
jquery頁面載入完成之後的觸發時間點：
// jquery的頁面載入完成之後。只是等瀏覽器核心解析完html標籤，建立好dom物件之後。就馬上執行了
原生js頁面載入完成之後的觸發時間是：
// 原生js除了要等瀏覽器核心解析完標籤，建立好dom物件之外，
// 還需要等頁面中所有元素去準備好自己顯示時需要的資料。完成之後才會執行。
他們觸發的順序？
jquery的頁面載入完成之後先執行，
js原生的頁面載入完成之後後執行。
他們執行的次數？
window.onload只可以使用一次
$(function(){})可以使用多次
原生js只會執行最後一次的賦值函式。
而jquery的頁面載入完成之後，會把所有註冊了函式都按照註冊的順序，依次全部執行。
事件
click()
繫結單擊事件。觸發單擊事件
mouseover()
繫結滑鼠移入事件。
mouseout()
繫結滑鼠移出事件。
bind()
可以同時給標籤繫結一個或多個事件
one()
給標籤繫結只響應一次的事件
live()
live可以給匹配了選擇器的所有元素都繫結事件，哪怕這個元素是後面動態建立的。
unbind()
跟bind做相反的操作。解除繫結事件
事件繫結案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//*1.通常繫結事件的方式
//給元素繫結事件
//jquery物件.事件方法(回撥函式(){ 觸發事件執行的程式碼 }).事件方法(回撥函式(){ 觸發事件執行的程式碼 }).事件方法(回撥函式(){ 觸發事件執行的程式碼 })
//繫結事件可以鏈式操作
$(".head").click(function(){
$(".content").toggle();
}).mouseover(function(){
$(".content").toggle();
});
//*2.jQuery提供的繫結方式：bind(type,[data],fn)函式把元素和事件繫結起來
//type表示要繫結的事件 [data]表示傳入的資料 fn表示事件的處理方法
//bind(事件字串,回撥函式),後來新增的元素不會繫結事件
//使用bind()繫結多個事件 type可以接受多個事件型別，使用空格分割多個事件
/* $(".head").bind("click mouseover",function(){
$(".content").toggle();
}); */
//3.one()只繫結一次,繫結的事件只會發生一次one(type,[data],fn)函式把元素和事件繫結起來
//type表示要繫結的事件 [data]表示傳入的資料 fn表示事件的處理方法
/* $(".head").one("click mouseover",function(){
$(".content").toggle();
}); */
//4.live方法會為現在及以後新增的元素都繫結上相應的事件
/** $(".head").live("click",function(){
$(".content").toggle();
});
$("#panel").before("<h5 class='head'>什麼是jQuery?</h5>");
*/
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什麼是jQuery?</h5>
<div class="content">
jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由 John Resig 創建於2006年1月的開源專案。jQuery憑藉簡潔的語法和跨平臺的相容性，極大地簡化了JavaScript開發人員遍歷HTML文件、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的程式碼風格改變了JavaScript程式設計師的設計思路和編寫程式的方式。
</div>
</div>
</body>
</html>
事件移除案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
//給li繫結兩種事件：單擊和滑鼠移入
$("li").bind("click mouseenter", function() {
alert(this.innerHTML);
});
//點選第一個button，將#bj上的mouseenter事件移除
//unbind()可以移除指定的事件，只需要傳一個事件名作為引數
//unbind(type,[data|fn]])
//type事件型別 當傳入type的時候會解除type事件
//如果沒有傳入type值，會移除所有事件
$("button:eq(0)").click(function() {
$("li").unbind("click mouseenter");
});
//點選第二個button，將#rl上的所有事件移除,沒有傳入type值,移除所有事件
$("button:eq(1)").click(function() {
$("#rl").unbind();
});
});
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>你喜歡哪個城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
<br> <br>
<p>你喜歡哪款單機遊戲?</p>
<ul id="game">
<li id="rl">紅警</li>
<li>實況</li>
<li>極品飛車</li>
<li>魔獸</li>
</ul>
</div>
<button>移除#bj的mouseenter事件</button>
<button>移除#rl所有事件</button>
</div>
</body>
</html>
事件的冒泡
什麼是事件的冒泡？
事件的冒泡是指，父子元素同時監聽同一個事件。當觸發子元素的事件的時候，同一個事件也被傳遞到了父元素的事件裡去響應。
那麼如何阻止事件冒泡呢？
在子元素事件函式體內，return false; 可以阻止事件的冒泡傳遞。
事件冒泡案例：
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
$("#content").click(function() {
alert("div說哥很帥！");
});
$("span").click(function() {
alert("span也說哥很帥！");
// 阻止事件冒泡
r