jQuery ???
jQuery ???
???? ??????
??? ???? ?? ???? ??? ????? ???.
??? ???? HTML?? ?? ???? ??? ? ???? ???? ?????.
?:
?? ?? ???? ?????. ??? ?? ?? ?? ??
"???"(?? "??")?? ??? "?? ?? ? ? ??? ???? ?????"? ?? ????? ?? ?????.
??? ??.
1.blur() ???? ????? ? ??????. ??? ??? ???? ??? Tab ?? ?? ????.
2.change() ??? ???? ??? ? ?? ???? ???? ??? ? ??????.
3.click() ???? ???? ?????.
4.dblclick() ???? ? ? ???? ??????.
5.error() JavaScript ??? ????? img? src ??? ???? ?? ? ?????.
6.focus() ??? ???? ??? ?????. ??: ?? ??? ???? ????.
7.focusin() ?? ?? ? ?? ??? ???? ?? ? ??????. focus()?? ???? ?? ?? ??? ???? ?? ?? ??? ? ??? ????.
8.focusout() ?? ?? ? ?? ??? ???? ?? ? ??????. focusout()?? ???? ?? ?? ??? ???? ?? ?? ??? ? ??? ????.?
? 9.keydown()? ???? ??? ? ??????.
10.keyup() ?? ??? ?????.
11.mousedown() ???? ???? ???? ?????.
12.mouseenter() ???? ?? ?? ??? ? ?????. mouseenter? mouseover? ???? ???? mouseover? ?? ?? ?? ??? ?? ?????? mouseenter? ??? ??? ????.
13.mouseleave() ???? ?? ??? ??? ? ?????.
14.mousemove() ???? ?? ?? ??? ? ?????. .clientX ? .clientY? ?? ???? X ??? Y ??? ?????.
15.mouseout() ???? ???? ???? ?????.
16.mouseover() ???? ?? ??? ??? ? ?????.
17.mouseup() ??? ?? ??? ???? ?? ?????.
18.resize() ???? ? ??? ???? ?????. $(window).resize();
19.scroll() ??? ??? ???? ?????.
20.select() ?? ??? ???? ?????.
21.submit() ??? ??? ?????.
22.unload() ???? ???? ? ??????.
jQuery ??? ??? ??
jQuery?? ???? DOM ????? ??? jQuery ???? ????.
????? ?? ???? ?????:
$("p").click();
?? ??? ???? ????? ??? ???? ????. ??? ??? ?? ?? ??? ? ????:
$("p").click(function(){ // ??? ???? ? ??? ?????!!});
????? ???? jQuery ??? ???
$(document).ready()
$(document).ready() ???? ???? ??? ??? ??? ? ??? ??? ? ????. ? ??? ???? jQuery ?? ??? ???????.
click()
click() ???? ?? ?? ???? ???? ? ???? ?????.
? ??? ???? HTML ??? ??? ? ?????.
?? ???? <p> ???? ?? ???? ???? ?? <p> ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>點我我就不見了！</p>
<p>我們?nèi)齻€都是的！</p>
<p>他們說的是真的！</p>
</body>
</html>dblclick()
dblclick ???? ??? ? ? ??? ? ?????.
dblclick() ???? dblclick ???? ?????? dblclick ???? ??? ? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>雙擊鼠標(biāo)左鍵的，我就消失。</p>
<p>雙擊我也消失！</p>
<p>雙擊我也是！</p>
</body>
</html>mouseenter(), mouseover() ??:
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不論鼠標(biāo)指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件。</p>
<p>只有在鼠標(biāo)指針穿過被選元素時，才會觸發(fā) mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被觸發(fā)的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被觸發(fā)的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>mouseleave()
? ??? ???? ??? ? ?????. ?? mouseleave ???? ?????.
mouseleave() ???? mouseleave ???? ?????? mouseleave ???? ??? ? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("再見，您的鼠標(biāo)離開了該段落。");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落。</p>
</body>
</html>mousedown()
mousedown ???? ??? ???? ?? ?? ???? ??? ??? ?? ? ?????. .
mousedown() ???? mousedown ???? ?????? mousedown ???? ??? ? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠標(biāo)在該段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落</p>
</body>
</html>mouseup()
mouseup ???? ???? ??? ??? ?? ? ?????.
mouseup() ???? mouseup ???? ?????? mouseup ???? ??? ? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("鼠標(biāo)在段落上松開。");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落。</p>
</body>
</html>hover()
hover() ???? ?? ?? ???? ??????? ? ?????.
???? ?? ?? ???? ??? ? ?? ??(mouseenter)? ????, ???? ?? ??? ???? ??? ? ?? ??(mouseleave)? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("你進入了 p1!");
},
function(){
alert("拜拜! 現(xiàn)在你離開了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落。</p>
</body>
</html>focus()
??? ???? ??? ??? ???? ?????.
??? ???? ??? ????? ? ?? ??? ???? ?? ??? ??? ?????.
focus() ???? ??? ???? ?????? ??? ???? ??? ? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>blur()
??? ???? ??? ?? ???? ?????.
blur() ???? ?? ???? ?????? ?? ???? ??? ? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
