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

<!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. IDEA 配置Gradle编译工具

    下载解压自己需要的gradle版本:https://gradle.org/releases/(免安装) 配置环境变量 打开命令窗口,输入 gradle -v IDEA配置gradle:file-> ...

  2. MySQL的timestamp类型自动更新问题

    今天建了一个表,里面有一个列是timestamp类型,我本意是在数据更新时,这个字段的时间能自动更新.岂知对这个类型的值还不甚了解,导致出错.发现这个字段只是在这行数据建立的时候有值,在更新的却无变化 ...

  3. 为什么你学不会递归？告别递归，谈谈我的一些经验 关于集合中一些常考的知识点总结 .net辗转java系列（一）视野 彻底理解cookie，session，token

    为什么你学不会递归?告别递归,谈谈我的一些经验   可能很多人在大一的时候,就已经接触了递归了,不过,我敢保证很多人初学者刚开始接触递归的时候,是一脸懵逼的,我当初也是,给我的感觉就是,递归太神奇了! ...

  4. Windows中"打开方式..."无法指定程序的解决办法

    Windows真DT, 今天升级了vim, 从vim73到vim74, 突然发现右键菜单打开方式中的VIM不见了, 于是手动重新指定到vim74\gvim.exe, 未果, Windows就直接忽略了 ...

  5. 2014百度之星第一题Energy Conversion

    Energy Conversion Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  6. [转]Filter 过滤器

    1.简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 ...

  7. 翻译Java虚拟机的结构

    英文原版:  https://docs.oracle.com/javase/specs/jvms/se8/html/jvms-2.html 直接谷歌翻译: Java SE规范 > Java虚拟机 ...

  8. U811.1接口EAI系列之六--物料上传--VB语言

    1. 业务系统同步U811.1存货档案通用方法. 2.具体代码处理如下: 作者:王春天 2013-11-06 地址:http://www.cnblogs.com/spring_wang/p/34098 ...

  9. 解决Myeclipse中导入自定义的配色方案后，JSP中的js代码块为白色背景的问题

    捣鼓了大半个上午,终于搞定.这样设置就可以了: 点击MyEclipse上方的菜单栏中的window菜单.选择Preferences菜单项.在弹出的窗口的左侧树形菜单依次选择:MyEclipse.Fil ...

  10. Django 时间与时区设置问题

    django 时间与时区设置问题 在Django的配置文件settings.py中,有两个配置参数是跟时间与时区有关的,分别是TIME_ZONE和USE_TZ 如果USE_TZ设置为True时,Dja ...