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

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

             });

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

jQuery 学习笔记2 点击时弹出一个对话框的更多相关文章

  1. jQuery 学习笔记1 弹出一个对话框

    这里推荐使用sublime text 2来写,外加zen coding. 首先是写html 只需要html:xt,然后tab就可以得到一个html的完整结构. <!DOCTYPE html PU ...

  2. Android定位&地图&导航——基于百度地图，实现自定义图标绘制并点击时弹出泡泡

    一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...

  3. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  4. ASP.NET点击按钮弹出确认对话框方法

    开发asp.net网页应用程序的时候,有些页面的按钮需要增加一个确认对话框,比如: 实现这个功能比较简单,代码这样写: Button.Attributes["onclick"] = ...

  5. jQuery 学习笔记3 点击弹出一个div并允许拖拽移动

    这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...

  6. jQuery第三课 点击按钮 弹出层div效果

    jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...

  7. linux学习笔记-解决google-chrome打开后弹出输入密码以解锁您的登录密钥环的提示

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.理论知识 1.密钥的作用 google-chrome存储了网站登录时使用的账号和密码信息,这个密钥是用来保护这些信息的 2. ...

  8. Java 学习笔记 (二) Selenium WebDriver Java 弹出框

    下面这段实例实现了以下功能: 1. profile使用用户本地电脑上的 (selenium 3有问题.因为selenium 3把profile复制到一个temp文件夹里,但并不复制回去.所以每次打开仍 ...

  9. 点击按钮弹出一个div层

    JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

随机推荐

  1. windows下如何生成gitlab ssh公钥

    1.查看是否已经有了ssh密钥:cd ~/.ssh如果没有密钥则不会有此文件夹,有则备份删除2.生存密钥: $ ssh-keygen -t rsa -C “你的邮箱”按3个回车,密码为空. Your ...

  2. Python学习笔记（十）—— 高级特性

    一.切片 1.定义: 经常取指定索引范围的操作,用循环十分繁琐,因此,Python提供了切片(Slice)操作符. 2.语法: A[1:3] 取出1到3,都是正数的情况下,缺填的为0(第一个),end ...

  3. 在JSP中如何使用JavaBean

    在JSP中使用JavaBean以后,可以实现HTML代码和Java代码的分离,是JSp更易于开发和维护.因此JavaBean成了JSP程序员必备的利器.虽然javaBean是java类,但是它也有自己 ...

  4. vfork 挂掉的一个问题

    在知乎上,有个人问了这样的一个问题——为什么vfork的子进程里用return,整个程序会挂掉,而且exit()不会?并给出了如下的代码,下面的代码一运行就挂掉了,但如果把子进程的return改成ex ...

  5. Java – How to add days to current date

    1. Calendar.add Example to add 1 year, 1 month, 1 day, 1 hour, 1 minute and 1 second to the current ...

  6. jsonp原理和jquey jsonp原理实践

    $.ajax({ type: "get", async: false, url: "ajax.htm", dataType: "jsonp" ...

  7. 奶瓶（beini）破解无线密码流程：安装、抓包、从虚拟机（VMware）拷贝握手包（拷贝到硬盘、U盘）、跑包

    1. 环境 1). Windows 7 64位版本 2). VMware 9.0.2版本 3). 奶瓶1.2.3版本(beini-1.2.3.iso) 2. 安装 2.1 安装方式一 将beini-1 ...

  8. [LeetCode] Paint House I & II

    Paint House There are a row of n houses, each house can be painted with one of the three colors: red ...

  9. Atitit hibernate3 hinernate4 hibernate5新特性attilax总结

    Atitit hibernate3 hinernate4 hibernate5新特性attilax总结 1.1. Hibernate3的新特性 1 1.2. hibernate4.1版本中的新特性和h ...

  10. Mac OS X 10.8.5 安装编译glib

    过程比较坎坷,就此记录一番一遍后人 1. 下载pkg-config然后解压安装: ./configure make -j 24 sudo make install 2.下载libiconv解压安装 . ...