jQuery 学习笔记2 点击时弹出一个对话框

上次学习的是页面加载完成后弹出一个警告框，这里我们改为当用户点击后弹出一个警告框。

 

<!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             });

这里的最后一个就是提交按钮了。

posted @ 2013-12-01 09:58  r3call  阅读(4700)  评论(0)  编辑  收藏  举报