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

<!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. PHP通过soap调用c#的WebService

    1:C# Contact public class Contact { private int _Id; private string _Name; public int id { get { ret ...

  2. 【Hibernate】解析hibernate中的缓存

    Hibernate中的缓存一共有三种,一级缓存.二级缓存.查询缓存.缓存除了使用Hibernate自带的缓存,还可以使用redis进行缓存,或是MongoDB进行缓存. 所使用的Demo: User. ...

  3. 【java】详解集合

    目录结构: contents structure [-] 集合概述 什么是集合 Collection和Map的区别 List和Set的区别 ArrayList和LinkedList的区别 HashSe ...

  4. Linux CentOS 7.x/6.x/5.x 导入epel源

    How to Enable EPEL Repository for RHEL/CentOS 7.x/6.x/5.x vim /etc/yum.repos.d/CentOS-Base.repo 取消注释 ...

  5. linux服务器rz命令上传文件

    1.首先,要是服务器不支持rz命令的话,需要安装执行 yum -y install lrzsz  2.再输入rz -be命令,选择需要上传的本地文件 

  6. Git Note

    Git 参考 http://chengshiwen.com/article/head-first-git/ 文件状态 Git目录: (git directory),亦即Git仓库,一般对应项目根目录下 ...

  7. android View未渲染时获得高度

    ViewTreeObserver vto = tv.getViewTreeObserver(); vto.addOnGlobalLayoutListener(new OnGlobalLayoutLis ...

  8. javascript的事件机制（百度文库）

    http://wenku.baidu.com/view/9c8761e1524de518964b7d65.html http://wenku.baidu.com/view/1c3d7228bd6478 ...

  9. 64位matlab中libsvm的安装

    因为windows版的matlab对编译器的识别不好.所以直接在网上下了已经编译好的libsvm文件放入toolbox文件夹就可以用libsvm了 libsvm已编译好的文件下载地址: 猛戳我下载 1 ...

  10. 关于 NSInvocation

    Invocation   调用的意思. 可想而知NSInvocation 是一个 方法调用 封装的类. 这体现了  面向对象的思想, 及一切皆对象.函数也不例外. 一般编程中,应该很少用到这个. 但是 ...