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

时间：2022-06-21 09:34:58

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

<!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 学习笔记2 点击时弹出一个对话框

用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弹出");

             });

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

相关文章