zoukankan      html  css  js  c++  java
  • 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时才会有警告框。

    表达式弹出

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     5     <script src="./js/jquery-1.9.1.min.js"></script>
     6     <script>
     7         $(document).ready(function(){
     8             $('a').click(function()
     9             {
    10                 alert("你点击了一个链接");
    11             }
    12                 );
    13 
    14             // $('input:submit').click(function(){
    15             //     alert("你点击了一个input");
    16             // });
    17             // $('input:text[name="name1"]').click(function() {
    18             //     alert("点击了name为name1的input框");
    19             // });
    20             $('input:gt(0)').click(function(){
    21                 alert("你点击了一个input");
    22             });
    23         });
    24     </script>
    25     <title>点击弹出警告框</title>
    26 </head>
    27 <body>
    28     <div id="alert">
    29         <a href="#">点我干嘛</a>
    30     </div>
    31     <div id="in">
    32         <input type="text" name="name1"/>
    33         <input type="text"/>
    34         <input type="submit" />
    35     </div>
    36 </body>
    37 </html>

    大于0的input框弹出,注意,input是从0开始计算的,也就是只有第一个不弹出。

    当然,还有第一个input弹出

    1                 $('input:first').click(function() {
    2                 alert("第一个input弹出");
    3             });

    或者最后一个input弹出

    1             $('input:last').click(function() {
    2                 alert("最后一个input弹出");
    3             });

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

  • 相关阅读:
    UVa中国麻将(Chinese Mahjong,Uva 11210)
    Nginx-upstream模块
    Nginx-配置文件
    Nginx 负载均衡和反向代理实践
    Nginx-1
    linux下发送报警邮件(mailx)
    dns服务器搭建
    linux 时间相关
    Centos7调整swap分区
    rm 删除命令
  • 原文地址:https://www.cnblogs.com/tk091/p/3452224.html
Copyright © 2011-2022 走看看