上次学习的是页面加载完成后弹出一个警告框，这里我们改为当用户点击后弹出一个警告框。
<!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时才会有警告框。
表达式弹出
<!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框");
// });
$('input:gt(0)').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"/>
<input type="submit" />
</div>
</body>
</html>
大于0的input框弹出，注意，input是从0开始计算的，也就是只有第一个不弹出。
当然，还有第一个input弹出
$('input:first').click(function() {
alert("第一个input弹出");
});
或者最后一个input弹出
$('input:last').click(function() {
alert("最后一个input弹出");
});
这里的最后一个就是提交按钮了。