jQuery ???
???? ??????
??? ???? ?? ???? ??? ????? ???.
??? ???? HTML?? ?? ???? ??? ? ???? ???? ?????.
?:
?? ?? ???? ?????.
??? ?? ??
?? ??
"???"(?? "??")?? ??? "?? ?? ? ? ??? ???? ?????"? ?? ????? ?? ?????.
???? DOM ???:
| Event | Description |
|---|---|
| click | ? ???? ???? ??? ? ??????. |
| keypress | ???? ?? ???? ?? ? ??????. |
| submit | ??? ??? ? ??? |
| load | ???? ??? ? ??? |
| dblclick | ???? ? ? ???? ?????? |
| keydown | ?? ?? ? ??????. ???? ??? |
| change | ?? ??? ???? ?? ?? ??? ??? ? ????? |
| resize | ???? ? ??? ??? ? ?? |
| mouseenter | ??/??? mouseenter ??? |
| keyup | ????? ?? ???? ?? ? ???? |
| focus | ??? ???? ?? ? ???? |
| scroll | ??? ??? ??/??? |
| mouseleave | mouseleave ??? ??/??? |
| blur | blur ??? ??/??? |
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">
<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(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你點(diǎn)我，我就會(huì)消失。</p>
<p>點(diǎn)我消失!</p>
<p>點(diǎn)我也消失!</p>
</body>
</html>????? ???? ??? ???
dblclick()
??? ?????? dblclick ???? ?????.
dblclick() ???? dblclick ???? ?????? dblclick ???? ??? ? ??? ??? ?????.
<!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(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>雙擊鼠標(biāo)左鍵的，我就消失。</p>
<p>雙擊我消失！</p>
<p>雙擊我也消失！</p>
</body>
</html>????? ???? ??? ???.
mouseenter()
??? ???? ??? ? ??? ?? mouseenter ???? ?????.
mouseenter() ???? mouseenter ???? ?????? mouseenter ???? ??? ? ??? ??? ?????.
<!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").mouseenter(function(){
alert("您的鼠標(biāo)移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠標(biāo)指針進(jìn)入此處，會(huì)看到彈窗。</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">這是一個(gè)段落</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("你進(jìn)入了 p1!");
},
function(){
alert("拜拜! 現(xiàn)在你離開(kāi)了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落。</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>????? ???? ??? ???
??? ??? ?? ???? ??? ? ? ????
