上次學習的是頁面加載完成后彈出一個警告框，這里我們改為當用戶點擊后彈出一個警告框。
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('a').click(function()
{
alert("你點擊了一個鏈接");
}
);
});
</script>
<title>點擊彈出警告框</title>
</head>
<body>
<div id="alert">
<a href="#">點我干嘛</a>
</div>
</body>
</html>
注意：如果直接寫
$('a').click(function()
{
alert("你點擊了一個鏈接");
}
);
是不能成功的，必須要加載ready，活着把代碼寫到頁面的最后位置。
原因是代碼執行時，a標簽還沒有內容
結果：
用jQuery的方法比較簡單，首先要確定的就是我們要操作誰？
下面我們多試幾個
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('a').click(function()
{
alert("你點擊了一個鏈接");
}
);
$('input').click(function(){
alert("你點擊了一個input");
});
});
</script>
<title>點擊彈出警告框</title>
</head>
<body>
<div id="alert">
<a href="#">點我干嘛</a>
</div>
<div id="in">
<input type="text" name="name1"/>
<input type="text"/>
</div>
</body>
</html>
這樣，input的所有框點擊時都會彈出警告框。
下面測試下，name的值對應的框，先把上面的代碼注釋掉
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('a').click(function()
{
alert("你點擊了一個鏈接");
}
);
// $('input').click(function(){
// alert("你點擊了一個input");
// });
$('input:text[name="name1"]').click(function() {
alert("點擊了name為name1的input框");
});
});
</script>
<title>點擊彈出警告框</title>
</head>
<body>
<div id="alert">
<a href="#">點我干嘛</a>
</div>
<div id="in">
<input type="text" name="name1"/>
<input type="text"/>
</div>
</body>
</html>
當點擊name為name1的時候有警告框，沒有name值的沒有警告框。
下面測試提交按鈕
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('a').click(function()
{
alert("你點擊了一個鏈接");
}
);
$('input:submit').click(function(){
alert("你點擊了一個input");
});
// $('input:text[name="name1"]').click(function() {
// alert("點擊了name為name1的input框");
// });
});
</script>
<title>點擊彈出警告框</title>
</head>
<body>
<div id="alert">
<a href="#">點我干嘛</a>
</div>
<div id="in">
<input type="text" name="name1"/>
<input type="text"/>
<input type="submit" />
</div>
</body>
</html>
這樣，就只有input的type為submit時才會有警告框。
表達式彈出
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <script src="./js/jquery-1.9.1.min.js"></script> 6 <script> 7 $(document).ready(function(){ 8 $('a').click(function() 9 { 10 alert("你點擊了一個鏈接"); 11 } 12 ); 13 14 // $('input:submit').click(function(){ 15 // alert("你點擊了一個input"); 16 // }); 17 // $('input:text[name="name1"]').click(function() { 18 // alert("點擊了name為name1的input框"); 19 // }); 20 $('input:gt(0)').click(function(){ 21 alert("你點擊了一個input"); 22 }); 23 }); 24 </script> 25 <title>點擊彈出警告框</title> 26 </head> 27 <body> 28 <div id="alert"> 29 <a href="#">點我干嘛</a> 30 </div> 31 <div id="in"> 32 <input type="text" name="name1"/> 33 <input type="text"/> 34 <input type="submit" /> 35 </div> 36 </body> 37 </html>
大於0的input框彈出，注意，input是從0開始計算的，也就是只有第一個不彈出。
當然，還有第一個input彈出
1 $('input:first').click(function() { 2 alert("第一個input彈出"); 3 });
或者最后一個input彈出
1 $('input:last').click(function() { 2 alert("最后一個input彈出"); 3 });
這里的最后一個就是提交按鈕了。