九度網(wǎng)站建設(shè)網(wǎng)站建設(shè)方案
一、jQuery介紹
????????jQuery，顧名思義，也就是JavaScript和查詢（Query），它就是輔助JavaScript開發(fā)的js類庫。它的核心思想是write less，do more（寫得更少，做得更多），所以它實現(xiàn)了很多瀏覽器的兼容問題。jQuery是免費、開源的，jQuery的語法設(shè)計可以使開發(fā)更加便捷，例如操作文檔對象、選擇DOIL元素、制作動畫效果、事件處理、使用Ajax以及其他功能
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">//使用$()代替window.onload$(function(){//使用選擇器獲取按鈕對象，隨后綁定單擊響應(yīng)函數(shù)$("#btnId").click(function(){//彈出Helloalert('Hello');});});</script>
</head>
<body><button id="btnId">SayHello</button>
</body>
</html>?
?
二、?jQuery核心函數(shù)
$ 是jQuery的核心函數(shù)，能完成jQuery的很多功能。$( )?就是調(diào)用?$?這個函數(shù)
1、傳入?yún)?shù)為函數(shù)時：表示頁面加載完成之后。相當(dāng)于window.οnlοad=function( ) { }
2、傳入?yún)?shù)為[HTML字符串時：會幫我們創(chuàng)建這個html標(biāo)簽對象
3、傳入?yún)?shù)為選擇器字符串時：$(“#id屬性值”)；id選擇器，根據(jù)id查詢標(biāo)簽對象
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(“標(biāo)簽名”)；標(biāo)簽名選擇器，根據(jù)指定的標(biāo)簽名查詢標(biāo)簽對象
?????????????????????????????????????????????????????$(“.class屬性值”)；類型選擇器，可以根據(jù)class屬性查詢標(biāo)簽對象? ? ? ? ? ? ? ? ? ? ? ? ?
4、傳入?yún)?shù)為[DOM對象時：會把這個dom對象轉(zhuǎn)換為jQuery對象
<!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">//核心函數(shù)的4個作用$(function () {// alert("頁面加載完成之后，自動調(diào)用");$(" <div>" +" <span>div-span1</span>" +" <span>div-span2</span>" +" </div>").appendTo("body");// alert($("button").length);var btnObj = document.getElementById("btn01");// alert(btnObj);// alert( $(btnObj) );// alert( $("<h1></h1>") );alert($("button"));});//傳入?yún)?shù)為[函數(shù)]時：在文檔加載完成后執(zhí)行這個函數(shù)//傳入?yún)?shù)為[HTML字符串]時：根據(jù)這個字符串創(chuàng)建元素節(jié)點對象//傳入?yún)?shù)為[選擇器字符串]時：根據(jù)這個字符串查找元素節(jié)點對象//傳入?yún)?shù)為[DOM對象]時：將DOM對象包裝為jQuery對象返回</script>
</head>
<body><button id="btn01">按鈕1</button><button>按鈕2</button><button>按鈕3</button>
</body>
</html>?
?
三、jQuery對象和DOM對象區(qū)分
1、Dom對象
通過getElementByd（查詢出來的標(biāo)簽對象是Dom對象
通過getElementsByName（查詢出來的標(biāo)簽對象是Dom對象
通過getElementsByTagName查詢出來的標(biāo)簽對象是Dom對象
通過createElement方法創(chuàng)建的對象，是Dom對象
?
2、jQuery對象
通過JQueny提供的API創(chuàng)建的對象，是JQuery對象
通過JQueny包裝的Dom對象，也是JQuery對象
通過JQueny提供的API查詢到的對象，是JQueny對象
?
3、jQuery對象的本質(zhì)：
jQuery對象是dom對象的數(shù)組 + jQuery提供的一系列功能函數(shù)
?
4、Dom對象和jQuery對象互轉(zhuǎn)
dom對象轉(zhuǎn)化為jQuery對象：
????????1、先有DOM對象
????????2、SDOM對象）就可以轉(zhuǎn)換成為jQuery對象
jQuery對象轉(zhuǎn)為dom對象：
? ? ? ? 1、先有jQueny對象
????????2、jQueny對象下標(biāo)取出相應(yīng)的DOM對象
<!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">$(function(){//testDiv.css("color","red")//testDiv.style.color = "blue";// var arr = [12,"abc",true];//// var $btns = $("button");//// for (var i = 0; i < $btns.length; i++){// alert($btns[i]);// }// document.getElementById("testDiv").innerHTML = "這是dom對象的屬性InnerHTML";// $("#testDiv").innerHTML = "這是dom對象的屬性InnerHTML";// $("#testDiv").click(function () {// alert("click()是jQuery對象的方法");// });// document.getElementById("testDiv").click(function () {// alert("click()是jQuery對象的方法");// });// alert( $(document.getElementById("testDiv"))[0] );alert( $("button:first") );});</script>
</head>
<body><div id="testDiv">Atguigu is Very Good!</div><button id="dom2dom">使用DOM對象調(diào)用DOM方法</button><button id="dom2jQuery">使用DOM對象調(diào)用jQuery方法</button><button id="jQuery2jQuery">使用jQuery對象調(diào)用jQuery方法</button><button id="jQuery2dom">使用jQuery對象調(diào)用DOM方法</button>
</body>
</html>?
?
四、jQuery選擇器?
1、基本選擇器
#ID選擇器：根據(jù)d查找標(biāo)簽對象
.class選擇器：根據(jù)class查找標(biāo)簽對象
element選擇器：根據(jù)標(biāo)簽名查找標(biāo)簽對象
*選擇器：表示任意的，所有的元素
selector1，selector2組合選擇器：合并選擇器1，選擇器2的結(jié)果并返回
<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</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">$(function () {//1.選擇 id 為 one 的元素 "background-color","#bbffaa"$("#btn1").click(function () {// css() 方法 可以設(shè)置和獲取樣式$("#one").css("background-color","#bbffaa");});//2.選擇 class 為 mini 的所有元素$("#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的元素$("#btn5").click(function () {$("span,#two").css("background-color","#bbffaa");});});</script></head><body>
<!-- <div><h1>基本選擇器</h1></div> --> <input type="button" value="選擇 id 為 one 的元素" id="btn1" /><input type="button" value="選擇 class 為 mini 的所有元素" id="btn2" /><input type="button" value="選擇 元素名是 div 的所有元素" id="btn3" /><input type="button" value="選擇 所有的元素" id="btn4" /><input type="button" value="選擇 所有的 span 元素和id為two的元素" id="btn5" /><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">class為mini,title為other</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><div>包含input的type為"hidden"的div<input type="hidden" size="8"></div><span class="one" id="span">^^span元素^^</span></body>
</html>?
2、層級選擇器
ancestor descendant?后代選擇器：在給定的祖先元素下匹配所有的后代元素
parent > child 子元素選擇器：在給定的父元素下匹配所有的子元素
prev + next 相鄰元素選擇器：匹配所有緊接在prev元素后的next元素prev ~ sibings 之后的兄弟元素選擇器：匹配prev元素之后的所有siblings元素
<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</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(){//1.選擇 body 內(nèi)的所有 div 元素$("#btn1").click(function(){$("body div").css("background", "#bbffaa");});//2.在 body 內(nèi), 選擇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");});});</script></head><body> <!-- <div><h1>層級選擇器:根據(jù)元素的層級關(guān)系選擇元素</h1>ancestor descendant ：parent > child ：prev + next ：prev ~ siblings ：</div> --><input type="button" value="選擇 body 內(nèi)的所有 div 元素" id="btn1" /><input type="button" value="在 body 內(nèi), 選擇div子元素" id="btn2" /><input type="button" value="選擇 id 為 one 的下一個 div 元素" id="btn3" /><input type="button" value="選擇 id 為 two 的元素后面的所有 div 兄弟元素" id="btn4" /><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">class為mini,title為other</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><div>包含input的type為"hidden"的div<input type="hidden" size="8"></div><span id="span">^^span元素^^</span></body>
</html>?
3、過濾選擇器
:first????????獲取第一個元素
:last????????獲取最后個元素
:not(selector)????????除所有與給定選擇器匹配的元素
:even????????匹配所有索引值為偶數(shù)的元素，從0升始計數(shù)
:odd????????匹配所有索引值為奇數(shù)的元素，從0開始計數(shù)
:eq(index)????????匹配一個給定素引值的元素
:gt(index)????????匹配所有大于給定素引值的元素
:lt(index)????????匹配所有小于給定素引值的元素
:header????????匹配如h1，h2，h3之類的標(biāo)題元素
:animated????????匹配所有正在執(zhí)行動畫效果的元素
<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</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();});$(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.選擇索引值為偶數(shù)的 div 元素$("#btn4").click(function(){$("div:even").css("background", "#bbffaa");});//5.選擇索引值為奇數(shù)的 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.選擇所有的標(biāo)題元素$("#btn9").click(function(){$(":header").css("background", "#bbffaa");});//10.選擇當(dāng)前正在執(zhí)行動畫的所有元素$("#btn10").click(function(){$(":animated").css("background", "#bbffaa");});//11.選擇沒有執(zhí)行動畫的最后一個div$("#btn11").click(function(){$("div:not(:animated):last").css("background", "#bbffaa");});});</script></head><body><input type="button" value="選擇第一個 div 元素" id="btn1" /><input type="button" value="選擇最后一個 div 元素" id="btn2" /><input type="button" value="選擇class不為 one 的所有 div 元素" id="btn3" /><input type="button" value="選擇索引值為偶數(shù)的 div 元素" id="btn4" /><input type="button" value="選擇索引值為奇數(shù)的 div 元素" id="btn5" /><input type="button" value="選擇索引值為大于 3 的 div 元素" id="btn6" /><input type="button" value="選擇索引值為等于 3 的 div 元素" id="btn7" /><input type="button" value="選擇索引值為小于 3 的 div 元素" id="btn8" /><input type="button" value="選擇所有的標(biāo)題元素" id="btn9" /><input type="button" value="選擇當(dāng)前正在執(zhí)行動畫的所有元素" id="btn10" /> <input type="button" value="選擇沒有執(zhí)行動畫的最后一個div" id="btn11" /><h3>基本選擇器.</h3><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">class為mini,title為other</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><div>包含input的type為"hidden"的div<input type="hidden" size="8"></div><div id="mover">正在執(zhí)行動畫的div元素.</div></body>
</html>?
4、內(nèi)容過濾器
:contains（text)????????匹配包含給定文本的元素
:empty????????匹配所有不包含子元素或者文本的空元素
:parent????????匹配含有子元素或者文本的元素
:hasselector????????配管有選擇器所匹配的元素的元素
<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</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(); });/** :contains(text) :empty :has(selector) :parent */$(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");});});</script></head><body> <input type="button" value="選擇 含有文本 'di' 的 div 元素" id="btn1" /><input type="button" value="選擇不包含子元素(或者文本元素) 的 div 空元素" id="btn2" /><input type="button" value="選擇含有 class 為 mini 元素的 div 元素" id="btn3" /><input type="button" value="選擇含有子元素(或者文本元素)的div元素" id="btn4" /><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">class為mini,title為other</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><div>包含input的type為"hidden"的div<input type="hidden" size="8"></div><div id="mover">正在執(zhí)行動畫的div元素.</div></body>
</html>?
5、屬性過濾器
[attribute]?? ? ? ?匹配包含給定屬性的元素。
[attribute=value]????????匹配給定的屬性是某個特定值的元素
[attribute=value]????????匹配所有不含有指定的屬性，或者屬性不等于特定值的元素
[attribute=value]????????匹配給定的屬性是以某些值始的元素
[attributes=value]????????匹配給定的屬性是以某些值結(jié)尾的元素
[attribute*=value]????????匹配給定的屬性是以包含某些值的元素
[attrsel1][attrsel2][attrselN]????????復(fù)合屬性選擇器，需要同時滿足多個條件時使用?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</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">/**
[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'結(jié)束 的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元素，然后在結(jié)果中 選取屬性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");});});
</script>
</head>
<body><input type="button" value="選取含有 屬性title 的div元素." id="btn1" style="display: none;"/><input type="button" value="選取 屬性title值等于'test'的div元素." id="btn2" /><input type="button"value="選取 屬性title值不等于'test'的div元素(沒有屬性title的也將被選中)." id="btn3" /><input type="button" value="選取 屬性title值 以'te'開始 的div元素." id="btn4" /><input type="button" value="選取 屬性title值 以'est'結(jié)束 的div元素." id="btn5" /><input type="button" value="選取 屬性title值 含有'es'的div元素." id="btn6" /><input type="button"value="組合屬性選擇器,首先選取有屬性id的div元素，然后在結(jié)果中 選取屬性title值 含有'es'的 div 元素."id="btn7" /><input type="button"value="選取 含有 title 屬性值, 且title 屬性值不等于 test 的 div 元素." id="btn8" /><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">class為mini,title為other</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><div>包含input的type為"hidden"的div<input type="hidden" value="123456789"size="8"></div><div id="mover">正在執(zhí)行動畫的div元素.</div>
</body>
</html>?
6、表單過濾器
<!DOCTYPE HTML>
<html><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(){/**:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden 表單對象的屬性:enabled :disabled :checked :selected *///1.對表單內(nèi) 可用input 賦值操作$("#btn1").click(function(){// val()可以操作表單項的value屬性值// 它可以設(shè)置和獲取$(":text:enabled").val("我是萬能的程序員");});//2.對表單內(nèi) 不可用input 賦值操作$("#btn2").click(function(){$(":text:disabled").val("管你可用不可用，反正我是萬能的程序員");});//3.獲取多選框選中的個數(shù) 使用size()方法獲取選取到的元素集合的元素個數(shù)$("#btn3").click(function(){alert( $(":checkbox:checked").length );});//4.獲取多選框，每個選中的value值$("#btn4").click(function(){// 獲取全部選中的復(fù)選框標(biāo)簽對象var $checkboies = $(":checkbox:checked");// 老式遍歷// for (var i = 0; i < $checkboies.length; i++){// alert( $checkboies[i].value );// }// each方法是jQuery對象提供用來遍歷元素的方法// 在遍歷的function函數(shù)中，有一個this對象，這個this對象，就是當(dāng)前遍歷到的dom對象$checkboies.each(function () {alert( this.value );});});//5.獲取下拉框選中的內(nèi)容 $("#btn5").click(function(){// 獲取選中的option標(biāo)簽對象var $options = $("select option:selected");// 遍歷，獲取option標(biāo)簽中的文本內(nèi)容$options.each(function () {// 在each遍歷的function函數(shù)中，有一個this對象。這個this對象是當(dāng)前正在遍歷到的dom對象alert(this.innerHTML);});});}) </script></head><body><h3>表單對象屬性過濾選擇器</h3><button id="btn1">對表單內(nèi) 可用input 賦值操作.</button><button id="btn2">對表單內(nèi) 不可用input 賦值操作.</button><br /><br /><button id="btn3">獲取多選框選中的個數(shù).</button><button id="btn4">獲取多選框選中的內(nèi)容.</button><br /><br /><button id="btn5">獲取下拉框選中的內(nèi)容.</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>
</html>?
?
五、jQuery元素篩選
eq()：獲取給定素引的元素
first()：獲取第一個元素
ast()：獲取最后一個元素
filter(exp)：留下匹配的元素
is()：判斷是否匹配給定的選擇器，只要有一個匹配就返回，true
has(exp)：返回包含有匹配選擇器的元素的元素
not(exp)：刪除匹配選擇器的元素
children(exp)：返回匹配給定選擇器的子元素
find(exp)：返回匹配給定選擇器的后代元素next()：返回當(dāng)前元素的下一個兄弟元素
nextAII()：返回當(dāng)前元素后面所有的兄弟元素
nextUntil()：返回當(dāng)前元素到指定匹配的元素為止的后面元素parent()：返回父元素
prevl(exp)：返回當(dāng)前元素的上一個兄弟元素
prevAlI()：返回當(dāng)前元素前面所有的兄弟元素
prevUnit(exp)：返回當(dāng)前元素到指定匹配的元素為止的前面元素siblings(exp)：返回所有兄弟元素
add()：把add匹配的選擇器的元素添加到當(dāng)前jquery對象中
<!DOCTYPE HTML>
<html><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();/**過濾eq(index|-index) first() last() hasClass(class) filter(expr|obj|ele|fn) is(expr|obj|ele|fn)1.6* has(expr|ele) not(expr|ele|fn) slice(start,[end]) 查找children([expr]) closest(expr,[con]|obj|ele)1.6* find(expr|obj|ele) next([expr]) nextall([expr]) nextUntil([exp|ele][,fil])1.6* parent([expr]) parents([expr]) parentsUntil([exp|ele][,fil])1.6* prev([expr]) prevall([expr]) prevUntil([exp|ele][,fil])1.6* siblings([expr]) 串聯(lián)add(expr|ele|html|obj[,con]) *///(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中選擇索引為偶數(shù)的$("#btn4").click(function(){//filter() 過濾 傳入的是選擇器字符串$("div").filter(":even").css("background-color","#bfa");});//(5)is()判斷#one是否為:empty或:parent//is用來檢測jq對象是否符合指定的選擇器$("#btn5").click(function(){alert( $("#one").is(":empty") );});//(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("div").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().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中選擇索引為偶數(shù)的" 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">正在執(zhí)行動畫的div元素.</div></body>
</html>?
?
六、jQuery的屬性操作?
html()：它可以設(shè)置和獲取起始標(biāo)簽和結(jié)束標(biāo)簽中的內(nèi)容
text()：它可以設(shè)置和獲取起始標(biāo)簽和結(jié)束標(biāo)簽中的文本
val()：它可以設(shè)置和獲取表單項的 value 屬性值。
attr()：可以設(shè)置和獲取屬性的值，不推薦操作 checked、readOnly、selected、disabled 等等 attr 方法還可以操作非標(biāo)準(zhǔn)的屬性。比如自定義屬性：abc,bbj
prop()：可以設(shè)置和獲取屬性的值,只推薦操作 checked、readOnly、selected、disabled 等等
<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {// 不傳參數(shù)，是獲取，傳遞參數(shù)是設(shè)置// alert( $("div").html() );// 獲取// $("div").html("<h1>我是div中的標(biāo)題 1</h1>");// 設(shè)置// 不傳參數(shù)，是獲取，傳遞參數(shù)是設(shè)置// alert( $("div").text() ); // 獲取// $("div").text("<h1>我是div中的標(biāo)題 1</h1>"); // 設(shè)置// 不傳參數(shù)，是獲取，傳遞參數(shù)是設(shè)置$("button").click(function () {alert($("#username").val());//獲取$("#username").val("超級程序猿");// 設(shè)置});});</script>
</head>
<body><div>我是div標(biāo)簽 <span>我是div中的span</span></div><input type="text" name="username" id="username" /><button>操作輸入框</button>
</body>
</html>?
?
七、DOM的增刪改查
內(nèi)部插入：
appendTo()：a.appendTo(b) 把 a 插入到 b 子元素末尾，成為最后一個子元素
prependTo()：a.prependTo(b) 把 a 插到 b 所有子元素前面，成為第一個子元素
?外部插入：
insertAfter()：a.insertAfter(b) 得到 ba
insertBefore()：a.insertBefore(b) 得到 ab
替換:
replaceWith()：a.replaceWith(b) 用 b 替換掉 a
replaceAll()：a.replaceAll(b) 用 a 替換掉所有 b
刪除：
remove()：a.remove(); 刪除 a 標(biāo)簽
empty()：a.empty(); 清空 a
<!DOCTYPE html>
<html>
<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 () {$("select:eq(0) option:selected").appendTo($("select:eq(1)"));});// 第二個按鈕 【全部添加到右邊】$("button:eq(1)").click(function () {$("select:eq(0) option").appendTo($("select:eq(1)"));});// 第三個按鈕 【選中刪除到左邊】$("button:eq(2)").click(function () {$("select:eq(1) option:selected").appendTo($("select:eq(0)"));});// 第四個按鈕 【全部刪除到左邊】$("button:eq(3)").click(function () {$("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>
</html>?
?
八、CSS 樣式操作
addClass()：添加樣式
removeClass()：刪除樣式
toggleClass()：有就刪除，沒有就添加樣式。
offset()：獲取和設(shè)置元素的坐標(biāo)?
<!DOCTYPE html>
<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:100,left:50});});})
</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><br /> <br /><br /> <br /></body>
</html>?
?
九、jQuery動畫
基本動畫：
show()：將隱藏的元素顯示
hide()：將可見的元素隱藏
toggle()：可見就隱藏，不可見就顯示
淡入淡出動畫：
fadeIn()：淡入（慢慢可見）
fadeOut()：淡出（慢慢消失）
fadeTo()：在指定時長內(nèi)慢慢的將透明度修改到指定的值。0 透明，1 完成可見，0.5 半透明 fadeToggle()：淡入/淡出、切換
以上動畫方法都可以添加參數(shù)：
1、第一個參數(shù)是動畫 執(zhí)行的時長，以毫秒為單位
2、第二個參數(shù)是動畫的回調(diào)函數(shù) (動畫完成后自動調(diào)用的函數(shù))?
<!DOCTYPE HTML>
<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">/* 基本show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed],[easing],[fn]) 滑動slideDown([spe],[eas],[fn]) slideUp([speed,[easing],[fn]]) slideToggle([speed],[easing],[fn]) 淡入淡出fadeIn([speed],[eas],[fn]) fadeOut([speed],[eas],[fn]) fadeTo([[spe],opa,[eas],[fn]]) fadeToggle([speed,[eas],[fn]])*/$(function(){//顯示 show()$("#btn1").click(function(){$("#div1").show(2000,function () {alert("show動畫完成 ")});}); //隱藏 hide()$("#btn2").click(function(){$("#div1").hide(1000,function () {alert("hide動畫 執(zhí)行完成 ")});}); //切換 toggle()$("#btn3").click(function(){$("#div1").toggle(1000,function () {alert("toggle動畫 完成 ")});});// var abc = function(){// $("#div1").toggle(1000,abc);// }// abc();//淡入 fadeIn()$("#btn4").click(function(){$("#div1").fadeIn(2000,function () {alert("fadeIn完成 ")});}); //淡出 fadeOut()$("#btn5").click(function(){$("#div1").fadeOut(2000,function () {alert("fadeOut完成 ")});}); //淡化到 fadeTo()$("#btn6").click(function(){$("#div1").fadeTo(2000,0.5,function () {alert('fadeTo完成 ')});}); //淡化切換 fadeToggle()$("#btn7").click(function(){$("#div1").fadeToggle(1000,function () {alert("fadeToggle完成 ")});}); })
</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>
?
?
十、jQuery事件操作?
1、$( function(){} ); 和 window.onload = function(){} 的區(qū)別
他們分別是在什么時候觸發(fā)：
1、jQuery 的頁面加載完成之后是瀏覽器的內(nèi)核解析完頁面的標(biāo)簽創(chuàng)建好 DOM 對象之后就會馬上執(zhí)行。
2、原生 js 的頁面加載完成之后，除了要等瀏覽器內(nèi)核解析完標(biāo)簽創(chuàng)建好 DOM 對象，還要等標(biāo)簽顯示時需要的內(nèi)容加載完成
?
他們觸發(fā)的順序：
1、jQuery 頁面加載完成之后先執(zhí)行 2、原生 js 的頁面加載完成之后
?
他們執(zhí)行的次數(shù)：
1、原生 js 的頁面加載完成之后，只會執(zhí)行最后一次的賦值函數(shù)。
2、jQuery 的頁面加載完成之后是全部把注冊的 function 函數(shù)，依次順序全部執(zhí)行
?
2、jQuery中其他的事件處理方法?
click()：它可以綁定單擊事件，以及觸發(fā)單擊事件
mouseover()：鼠標(biāo)移入事件
mouseout()：鼠標(biāo)移出事件
bind()：可以給元素一次性綁定一個或多個事件。
one()：使用上跟 bind 一樣。但是 one 方法綁定的事件只會響應(yīng)一次。
unbind()：跟 bind 方法相反的操作，解除事件的綁定
live()：也是用來綁定事件。它可以用來綁定選擇器匹配的所有元素的事件。哪怕這個元素是后面動態(tài)創(chuàng)建出 來的也有效
<!DOCTYPE HTML>
<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(){// $("h5").click(function () { // 傳function是綁定事件// alert('h5單擊事件 == click方法綁定')// });// 使用live綁定的單擊事件$("h5").live("click",function () {alert('h5單擊事件 == live方法綁定');});$('<h5 class="head">什么是jQuery?</h5>').appendTo( $("#panel") );// $("button").click(function () {// $("h5").click(); // 不傳function是觸發(fā)事件// });//鼠標(biāo)移入// $("h5").mouseover(function () {// console.log("你進來了")// });// //鼠標(biāo)移出// $("h5").mouseout(function () {// console.log("你出去了")// });// 使用bind綁定事件// $("h5").bind("click mouseover mouseout",function () {// console.log("這是bind綁定的事件");// });// $("h5").one("click mouseover mouseout",function () {// console.log("這是one綁定的事件");// });// $("h5").unbind();});</script></head><body><div id="panel"><h5 class="head">什么是jQuery?</h5><div class="content">jQuery是繼Prototype之后又一個優(yōu)秀的JavaScript庫，它是一個由 John Resig 創(chuàng)建于2006年1月的開源項目。jQuery憑借簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、操作DOM、處理事件、執(zhí)行動畫和開發(fā)Ajax。它獨特而又優(yōu)雅的代碼風(fēng)格改變了JavaScript程序員的設(shè)計思路和編寫程序的方式。</div><button>按鈕</button></div></body></html>
?
3、事件的冒泡
事件的冒泡是指，父子元素同時監(jiān)聽同一個事件。當(dāng)觸發(fā)子元素的事件的時候，同一個事件也被傳遞到了父元素的事件里去 響應(yīng)。
阻止事件冒泡：在子元素事件函數(shù)體內(nèi)，return false; 可以阻止事件的冒泡傳遞。
<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">*{margin: 0;padding: 0;}body{font-size: 13px;line-height: 130%;padding: 60px;}#content{width: 220px;border: 1px solid #0050D0;background: #96E555;}span{width: 200px;margin: 10px;background: #666666;cursor: pointer;color: white;display: block;}p{width: 200px;background: #888;color: white;height: 16px;}</style><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');return false;});})</script></head><body><div id="content">外層div元素<span>內(nèi)層span元素</span>外層div元素</div><div id="msg"></div> <br><br><a href="http://www.hao123.com">WWW.HAO123.COM</a> </body>
</html>?
4、javaScript事件對象
事件對象，是封裝有觸發(fā)的事件信息的一個 javascript 對象。
獲取?javascript 事件對象：
在給元素綁定事件的時候，在事件的 function( event ) 參數(shù)列表中添加一個參數(shù)，這個參數(shù)名，我們習(xí)慣取名為 event。 這個 event 就是?javascript 傳遞參事件處理函數(shù)的事件對象。
<!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">#areaDiv {border: 1px solid black;width: 300px;height: 50px;margin-bottom: 10px;}#showMsg {border: 1px solid black;width: 300px;height: 20px;}</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">//1.原生javascript獲取 事件對象// window.onload = function () {// document.getElementById("areaDiv").onclick = function (event) {// console.log(event);// }// }//2.JQuery代碼獲取 事件對象$(function () {// $("#areaDiv").click(function (event) {// console.log(event);// });//3.使用bind同時對多個事件綁定同一個函數(shù)。怎么獲取當(dāng)前操作是什么事件。$("#areaDiv").bind("mouseover mouseout",function (event) {if (event.type == "mouseover") {console.log("鼠標(biāo)移入");} else if (event.type == "mouseout") {console.log("鼠標(biāo)移出");}});});
</script>
</head>
<body><div id="areaDiv"></div><div id="showMsg"></div>
</body>
</html>