jQuery 学习笔记2 点击时弹出一个对话框
上次学习的是页面加载完成后弹出一个警告框，这里我们改为当用户点击后弹出一个警告框。
<!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 点击时弹出一个对话框的更多相关文章
- jQuery 学习笔记1 弹出一个对话框
这里推荐使用sublime text 2来写,外加zen coding. 首先是写html 只需要html:xt,然后tab就可以得到一个html的完整结构. <!DOCTYPE html PU ...
- Android定位&地图&导航——基于百度地图，实现自定义图标绘制并点击时弹出泡泡
一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...
- 点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- ASP.NET点击按钮弹出确认对话框方法
开发asp.net网页应用程序的时候,有些页面的按钮需要增加一个确认对话框,比如: 实现这个功能比较简单,代码这样写: Button.Attributes["onclick"] = ...
- jQuery 学习笔记3 点击弹出一个div并允许拖拽移动
这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...
- jQuery第三课 点击按钮 弹出层div效果
jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...
- linux学习笔记-解决google-chrome打开后弹出输入密码以解锁您的登录密钥环的提示
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.理论知识 1.密钥的作用 google-chrome存储了网站登录时使用的账号和密码信息,这个密钥是用来保护这些信息的 2. ...
- Java 学习笔记 (二) Selenium WebDriver Java 弹出框
下面这段实例实现了以下功能: 1. profile使用用户本地电脑上的 (selenium 3有问题.因为selenium 3把profile复制到一个temp文件夹里,但并不复制回去.所以每次打开仍 ...
- 点击按钮弹出一个div层
JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
随机推荐
- Gedit 有用插件介绍
刚刚接触Ubuntu,对于高手们用的Vim,本人只能望尘莫及.但是,Ubuntu自带的Gedit让我找到了windows的感觉,而且在添加一些插件后更加喜欢这个工具了. gedit本身带有一些常用插件 ...
- Mac 重建 Spotlight 索引
前言 最近发现很多 mac 用户反映自己的 mac 系统显示内存占用高达 200 多 Gb,可是实际上自己下载的应用程序根本没那么多,使用专业的内存扫描工具扫的结果跟系统本身显示的完全不一样.那么出现 ...
- 【C语言】练习1-23
题目来源:<The C programming language>中的习题 练习1-23: 写一个删除C语言程序中所有的注释语句.要正确处理带引号的字符串与字符常量.在C语言中,注释不 ...
- Java 内存模型及GC原理 (转载)
一个优秀Java程序员,必须了解Java内存模型.GC工作原理,以及如何优化GC的性能.与GC进行有限的交互,有一些应用程序对性能要求较高,例如嵌入式系统.实时系统等,只有全面提升内存的管理效率,才能 ...
- mysql使用GROUP BY分组实现取前N条记录的方法
MySQL中GROUP BY分组取前N条记录实现 mysql分组,取记录 GROUP BY之后如何取每组的前两位下面我来讲述mysql中GROUP BY分组取前N条记录实现方法. 这是测试表(也不知道 ...
- Intent----android中的伟大邮差
在android中,intent就像是一个邮差,辛勤高效的在各个组件之间来回穿梭.我们可以通过它启动一个Activity或者Service,或者是发送给广播组件,又或者是与后台的Service进行通信 ...
- MFC中无标题栏窗口的移动
原文链接: http://blog.sina.com.cn/s/blog_6288219501015dwa.html 移动标准窗口是通过用鼠标单击窗口标题条来实现的,但对于没有标题条的窗口,就需要 ...
- （面试题）如何查找Oracle数据库中的重复记录
今天做了个面试题:查找Oracle数据库中的重复记录,下面详细介绍其他方法(参考其他资料) 本文介绍了几种快速查找ORACLE数据库中的重复记录的方法. 下面以表table_name为例,介绍三种不同 ...
- [转]使用spring中的@Transactional注解时，可能需要注意的地方
前情提要 在编写业务层方法时,会遇到很多需要事务提交的操作,spring框架为我们提供很方便的做法,就是在需要事务提交的方法上添加@Transactional注解,比起我们自己开启事务.提交以及控制回 ...
- vivado 的调试工具ILA抓到的波形可以保存
Vivado下debug后的波形通过图形化界面并不能保存抓取到波形,保存按钮只是保存波形配置,如果需要保存波形需要通过TCL命令来实现: write_hw_ila_data0730_ila_1 [up ...