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

<!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. 树莓派进阶之路 (015) - 树莓派使用DS18B20模块测量温度

    参考:http://shumeipai.nxez.com/2013/10/03/raspberry-pi-temperature-sensor-monitors.html 第一步,允许单总线接口 su ...

  2. 树莓派进阶之路 (008) - 树莓派安装ftp服务器(转)

    vsftpd是开源的轻量级的常用ftp服务器．   1,安装vsftpd服务器 (约400KB) sudo apt-get install vsftpd     2,启动ftp服务 sudo serv ...

  3. windows 7 开启无线wifi

    Windows 7 开启无线wifi步骤:1.选择“开始”-“运行”命令,在运行命令栏里输入“CMD”打开管理员: 2.在界面里输入以下命令:netsh wlan set hostednetwork ...

  4. 解决servlet-api包冲突问题(maven)

    问题描述:本人的项目是用Maven管理,而且用到了servlet3.0的技术,但是项目中用到servlet3.0的地方,总提示找不到类中的方法.很奇怪,在网上找到好多解决办法,综合一下终于解决了.现将 ...

  5. 安卓Textview的getLineCount返回0

    ViewTreeObserver observer = tv.getViewTreeObserver(); // textAbstract为TextView控件 observer.addOnGloba ...

  6. golang学习笔记 ---dup

    对文件做拷贝.打印.搜索.排序.统计或类似事情的程序都有一个差不多的程序结构:一个处理输入的循环,在每个元素上执行计算处理,在处理的同时或最后产生输出.我们会展示一个名为 dup 的程序的三个版本 p ...

  7. samba 服务器搭建

    为了能在两台机器上共享代码,方便测试不同平台性能和搭建分布式的web server,今天耗费半天时间搭建一个samba服务器共享数据,要求开放写权限,但多次实验均告失败,最终在 鸟哥 的提醒下 检查发 ...

  8. SharePoint 创建 Lookup 类型的Site Column解决跨站问题

    在某些情况下,我们需要去引用其他List中的数据,比如在网站集(Site Collection)上有个List叫Country,在其子网站(WebSite)有个List叫Employee,如果要在子S ...

  9. 【转载，待整理】初学 springmvc整合shiro

    1. shiro认证流程理解 2. 整合过程 http://blog.csdn.net/dawangxiong123/article/details/53020424 http://blog.csdn ...

  10. 查看mysql状态的常用命令

    在mysql客户端输入"show status"之后将会看到如下输出: 如果想要查看某个具体的值,可以使用如下命令: show status LIKE "%具体变量%&q ...