文档章节

jQuery中的事件与应用

-愚公移山-
 -愚公移山-
发布于 2016/11/13 13:57
字数 4596
阅读 15
收藏 0

严格来说,事件在触发后被分为两个阶段,一个是捕获,另一个则是冒泡。但有些遗憾的是,大多数浏览器并不是都支持捕获阶段,jQuery也不支持。因此在事件触发后,往往执行冒泡过程。所谓的冒泡,其实质就是事件执行中的顺序。

事件中的冒泡现象:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件中的冒泡现象</title>
	<style type="text/css">
	  body,input{font-family:"微软雅黑";}
	  #show{display:none;}
	  div{width:300px;margin:0px auto;text-align:center;border:#000 thin  solid;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	   $(function(){
	   	  var index=0;
	   	  $("body,input,div").click(function(){
	   	  	index++;
	   	  	$("#show").html("欢迎你来到jQuery世界!").show().append("<div>事件被执行了<b>"+index+"</b>次</div>");
	   	  });
	   });
	   //body元素是块状元素,宽度默认为100%,高度由内容决定
	</script>
</head>
<body>
	<div>
		<input type="button" value="点我吧"/>
	</div>
	<div id="show"></div>
</body>
</html>

为什么仅是单击按钮,但却执行了3次同样的程序呢?这是因为事件在执行过程中存在冒泡现象,即虽然单击的是按钮,但是按钮外围的<div>元素的事件也被触发,div外围的body元素的事件也随之被触发,整个事件波及的过程就像水泡一样往外冒,故称为冒泡过程。

在实际的需要中,我们并不希望事件的冒泡现象发生,即执行单一的事件,不触发其他外围事件。在jQuery中,可以通过stopPropagation()方法实现。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件中的冒泡现象</title>
	<style type="text/css">
	  body,input{font-family:"微软雅黑";}
	  #show{display:none;}
	  div{width:300px;margin:0px auto;text-align:center;border:#000 thin  solid;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	   $(function(){
	   	  var index=0;
	   	  $("body,input,div").click(function(){
	   	  	index++;
	   	  	$("#show").html("欢迎你来到jQuery世界!").show().append("<div>事件被执行了<b>"+index+"</b>次</div>");
	   	  	event.stopPropagation();//或者return false;
	   	  });
	   });
	   //body元素是块状元素,宽度默认为100%,高度由内容决定
	</script>
</head>
<body>
	<div>
		<input type="button" value="点我吧"/>
	</div>
	<div id="show"></div>
</body>
</html>

在代码中,除了使用stopPropagation()方法阻止事件冒泡外,还可以通过语句return false实现停止事件的冒泡过程。

页面加载事件ready()方法,该方法类似于传统javaScript中的onLoad()方法。只不过在事件执行时间上有区别:OnLoad()方法的执行必须是页面中的全部元素完全加载到浏览器后才触发。jQuery中的ready()方法只要页面的DOM模型加载完毕就会触发。因此,两者在事件的执行效果上,ready()方法明显优于onload()方法。

ready()方法的几种写法:

第一种:
$(document).ready(function(){});

第二种:
$(function(){});

第三种:
jQuery(document).ready(function(){});

第四种:
jQuery(function(){});

在jQuery中,可以使用bind()方法进行事件的绑定。bind()方法的功能是为每个被选择元素的事件定义处理函数。语法格式:bind(type,[data],fn)

其中参数type为一个或多个类型字符串,如"click"或"change",也可以自定义类型;可以被参数type调用的类型包括:

blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,error,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keyup,keypress,mousemove。

参数data是作为event.data的属性传递给事件对象的额外数据对象。

参数fn是绑定到事件中的处理函数。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用bind()方法绑定事件</title>
	<style type="text/css">
	  body,input{text-align:center;font-family:"微软雅黑";}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	  $(function(){
	  	 $("input").bind("click",function(){
	  	       $("input").prop("disabled",true);
	     });
	  });
	</script>
</head>
<body>
	<input type="button" value="点我禁用"/>
</body>
</html>

如果要在一个元素中绑定多个事件,可以将事件用空格间隔开。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用bind()方法在一个元素中绑定多个事件</title>
	<style type="text/css">
	 body,input{text-align:center;font-family:"微软雅黑";}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	  $(function(){
	  	$("input").bind("click mouseout",function(){//两个事件使用同一个事件处理函数
	  		$(this).prop("disabled",true);
	  	});
	  });
	</script>
</head>
<body>
	<input type="button" value="点我或鼠标划出禁用"/>
</body>
</html>

在绑定事件时,还可以通过传入一个映射,对所选对象绑定多个处理函数。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用bind()方法同时定义多个事件处理函数</title>
	<style type="text/css">
	 body,input{text-align:center;font-family:"微软雅黑";}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	   $(function(){
	   	  $("input").bind({"focus":function(){  //同时绑定多个事件及事件处理函数
	   	  	$(this).val("");
	   	  },"change":function(){
	   	  	$(this).val("值发生改变");
	   	  }});
	   });
	</script>
</head>
<body>
	<input type="text" value="使用bind()方法同时定义多个事件处理函数" size="50"/>
</body>
</html>

在方法bind()中,参数data是可选项,表示作为event.data的属性传递给事件对象的额外数据对象。实际上,该参数很少使用,如果使用,那么可以通过该参数将一些附加的信息传递到事件处理函数fn中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用bind()方法的data参数</title>
	<style type="text/css">
	  body,input{font-family:"微软雅黑";text-align:center;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	  $(function(){
	  	$("input").bind("focus",{msg:"触发了focus事件"},function(event){
	  		$(this).val(event.data.msg);
	  	});
	  });
	</script>
</head>
<body>
	<input type="input" size="35" value="使用bind()方法的data参数"/>
</body>
</html>

在jQuery中有两个方法用于事件的切换,一个方法是hover(),另一个方法是toggle()。所谓事件切换,即有两个或以上的事件绑定于一个元素,在元素的行为动作间进行切换。

hover()方法的功能是当鼠标移动到所选的元素上时执行指定的第一个函数,当鼠标移出这个元素时执行指定的第二个函数,语法格式:hover(over,out)。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用hover()方法切换事件</title>
	<style type="text/css">
	 body{font-family:"微软雅黑";}
	 #contain{border:thin #000 solid;width:300px;margin:0px auto;}
	 div{text-align:center;}
	 #show{display:none;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	   $(function(){
	   	 $("h3").hover(function(){
	   	 	$("#show").show();
	   	 },function(){
	   	 	$("#show").hide();
	   	 });
	   });
	</script>
</head>
<body>
	<div id="contain">
	 <div id="header"><h3>加大学习力度,深入改革发展</h3></div>
	 <div id="show">
	 	应习近平在党十八大会议上的要求,各级党委机关,应当高度重视新中国以后的经济发展。应当加大学习力度,深入改革发展。
	 </div>
	</div>
</body>
</html>

在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这些函数轮番调用。toggle()方法添加两个或多个函数,以响应被选元素的click事件之间的切换。当在元素上点击时调用第一个指定函数,再次点击时调用第二个函数,依次类推。该方法在调用函数时并非随机或者指定调用,而是通过函数设置的前后顺序进行调用,语法格式:toggle(f1,f2,f3.....).参数为单击时依次被调用的函数。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用toggle()方法</title>
	<style type="text/css">
	 body{text-align:center;}
	 img{border:#000 solid thin;}
	</style>
	<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
	<script>
	  $(function(){
	  	
	  		$("img").toggle(function(){
               $(this).attr("src","product-2.jpg");
	  		},function(){
	  			$(this).attr("src","product-3.jpg");
	  		},function(){
	  			$(this).attr("src","product-4.jpg");
	  		});
	  	
	  });
	</script>
</head>
<body>
	<img src="product-1.jpg"/>
	
</html>

注意,toggle()方法在jQuery版本1.8中被废弃,在版本1.9中被移除。

移除事件:在jQuery中,可以通过unbind()方法移除绑定的所有事件或某个指定的事件。unbind()方法的功能是移除元素绑定的事件,语法格式:unbind([type],[fn]).

其中,参数type为要移除的事件的类型,fn为要移除的事件处理函数。如果该方法没有参数,则移除元素上绑定的所有事件。如果带有参数type,则移除该参数所指定的类型的事件。如果带有参数fn,则只移除该参数指定的事件处理函数。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用unbind()方法移除绑定事件</title>
	<style type="text/css">
	 body,input{text-align:center;font-family:"微软雅黑";margin-top:20px;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	 $(function(){
	 	$("input:first").click(function(){
	 		$(this).val("触发了click事件");
	 	});
	 	$("input:eq(1)").hover(function(){
	 		$(this).val("鼠标移到元素上啦");
	 	},function(){
	 		$(this).val("鼠标移出元素啦");
	 	});
	 	$("input:last").click(function(){
	 		$("input").unbind();
	 	});
	 });
	</script>
</head>
<body>
	<input type="button" value="我有点击事件"/><br/>
	<input type="button" value="我有悬浮事件"/><br/>
	<input type="button" value="点我移除所有事件"/>
</body>
</html>

unbind()方法还可以移除某个指定的事件处理函数,或某个指定的事件。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用unbind()方法移除绑定事件</title>
	<style type="text/css">
	 body,input{text-align:center;font-family:"微软雅黑";margin-top:20px;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	 $(function(){
                //将事件处理函数写在外面
	 	function cli(){
	 		$("input:first").val("触发了点击事件");
	 	}
	 	$("input:first").click(cli);
	 	$("input:eq(1)").hover(function(){
	 		$(this).val("鼠标移到元素上啦");
	 	},function(){
	 		$(this).val("鼠标移出元素啦");
	 	});
	 	$("input:last").click(function(){
	 		/*$("input").unbind("click");*///指定只删除点击事件
	 		$("input").unbind("click",cli);//指定只删除单击事件中的cli事件处理函数
	 	});
	 });
	</script>
</head>
<body>
	<input type="button" value="我有点击事件"/><br/>
	<input type="button" value="我有悬浮事件"/><br/>
	<input type="button" value="点我移除指定事件"/>
</body>
</html>

方法one():方法one()的功能是为所选择的元素绑定仅触发一次的事件处理函数,语法格式:one(type,[data],fn).其中参数type为事件类型,参数data为可选参数,表示作为event.data的属性传递给事件处理函数的额外数据对象。fn为事件处理函数。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用one()方法绑定只响应一次的事件</title>
	<style type="text/css">
	 body,input{text-align:center;font-family:"微软雅黑";margin-top:20px;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	  $(function(){
	  	$("input").one({"mousemove":function(){
	  		$(this).val("13578992934");
	  	},"mouseout":function(){
	  		$(this).val("悬浮查看联系方式");
	  	}});
	  });
	</script>
</head>
<body>
	<input type="button" value="悬浮查看联系方式"/>
</body>
</html>

one()方法同样可以通过传入一个映射来一次定义多个事件及其事件处理函数。

方法trigger():trigger()方法的功能是在所选择的元素上触发指定类型的事件。语法格式:trigger(type,[data]).

其中参数type为触发事件的类型,参数data是可选的,表示在触发事件时传递给函数的附加参数。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用trigger()方法</title>
	<style type="text/css">
	 body,input{text-align:center;font-family:"微软雅黑";margin-top:20px;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	  $(function(){
	  	$("input").bind("click",function(){
              $("body").append("<div>"+$("input:first").val()+"</div>");
	  	});
	  	$("input").bind("cli",function(){
	  		$("body").append(function(){
	  			return $("<div>自动触发自定义事件</div>");
	  		});
	  	});
	  	$("input").trigger("select");//页面加载时自动选中文本框中的内容
	  	$("input").trigger("click");//自动触发绑定的单击焦点事件
	  	$("input").trigger("cli");//自动触发绑定的自定义事件
	  });
	</script>
</head>
<body>
	<input type="text" value="搜点什么吧"/>
</body>
</html>

注意:trigger()方法可以实现自动执行该方法中的事件,在这种情形下,其最终效果可能会有异样发生。如果不希望页面自动执行,可使用triggerHandler()方法,使用方法与trigger()方法基本相同,只是该方法不会自动执行其包含的事件。

处理文本框数据:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>处理表单数据</title>
	<style type="text/css">
	 body,input{font-family:"微软雅黑";}
	 body{margin-top:20px;text-align:center;}
	 input{color:#eee;padding:5px;border:#eee thin solid;margin-left:5px;}
	 .focus{boeder:#000 thin solid;color:#000;}
	 span{font-size:12px;color:red;display:inline-block;width:99px;padding:6px;background-image:url(b.png);}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	   $(function(){
	   	$("input").bind({"mousemove":function(){
            $(this).css("border","thin solid #000");
	   	},"mouseout":function(){
            $(this).css("border","thin solid #eee");
	   	},"focus":function(){
	   		$("input").addClass("focus").val("");
	   		$("#show").html("请输入邮箱地址!");
	   	},"blur":function(){
	   		$("input").css("color","#000");
            var str=$("input").val();
            if(str!=""){
            	var  regexp=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                if(regexp.test(str)){$("#show").html("格式正确");}
                else{$("#show").html("格式不正确");}
           }else{$("#show").html("内容不能为空");}
	   	}});
	   });
	</script>
</head>
<body>
	邮箱:<input type="text" size="50"/>
	<span id="show">请输入邮箱地址!</span>
</body>
</html>

关联下拉列表框数据:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>处理表单数据</title>
	<style type="text/css">
	  body,select{text-align:center;font-family:"微软雅黑";font-size:13px;}
	  select{width:100px;}
	  div{width:430px;margin:10px auto;text-align:left;border:#000 thin solid ;padding:10px;}
	  span{margin-top:10px;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	 $(function(){
	 	//定义数据
	 	 var infor={
	 	 	"厂商_1":{"名牌_1_1":["型号_1_1_1","型号_1_1_2","型号_1_1_3"],
	 	 	          "名牌_1_2":["型号_1_2_1","型号_1_2_2","型号_1_2_3"],
	 	 	          "名牌_1_3":["型号_1_3_1","型号_1_3_2","型号_1_3_3"]},
	 	 	"厂商_2":{"名牌_2_1":["型号_2_1_1","型号_2_1_2","型号_2_1_3"],
                      "名牌_2_2":["型号_2_2_1","型号_2_2_2","型号_2_2_3"],
	 	 	          "名牌_2_3":["型号_2_3_1","型号_2_3_2","型号_2_3_3"]},
	 	 	"厂商_3":{"名牌_3_1":["型号_3_1_1","型号_3_1_2","型号_3_1_3"],
	 	              "名牌_3_2":["型号_3_2_1","型号_3_2_2","型号_3_2_3"],
	 	              "名牌_3_3":["型号_3_3_1","型号_3_3_2","型号_3_3_3"]}
	 	 };
	 	 //初始化列表框函数
	 	 function  init(obj){
	 	 	return  $(obj).val("--请选择--");
	 	 }
        //加载厂商数据
	 	$.each(infor,function(name,key){
              $("select:first").append("<option>"+name+"</option>");
	 	});
	 	//关联品牌数据
	 	$("select:first").change(function(){
	 	   $("div span:first").html("").append($("select:first").val());
	 	   init("select:eq(1)");
	 	   init("select:last");
           $.each(infor,function(name,key){
              var str=$("select:first").val();
              if(str==name){
              	var len=$("select:eq(1) option").length;
                if(len>1){$("select:eq(1) option:gt(0)").remove();}
              	$.each(key,function(na){
                     $("select:eq(1)").append("<option>"+na+"</option>");
              	});
              }
	 	});
	 	});
	 	//关联型号数据
	 	$("select:eq(1)").change(function(){
	 		$("div span:eq(1)").html("").append($("select:eq(1)").val());
            $.each(infor,function(name,key){
                 $.each(key,function(na,val){
                     var str=$("select:eq(1)").val();
                     if(str==na){
                     	var len=$("select:last option").length;
                     	if(len>1){$("select:last option:gt(0)").remove();}
                     	$.each(val,function(){
                     		$("select:last").append("<option>"+this+"</option>");
                     	});
                     }
                 });
            });
	 	});
	 	$("select:last").change(function(){
	 		$("div span:last").html("").append($("select:last").val());
	 	});
	 });
	</script>
</head>
<body>
<form>
	厂商:&nbsp;<select><option selected>--请选择--</option></select>&nbsp;&nbsp;&nbsp;&nbsp;
	品牌:&nbsp;<select><option selected>--请选择--</option></select>&nbsp;&nbsp;&nbsp;&nbsp;
	型号:&nbsp;<select><option selected>--请选择--</option></select>
</form>
	<div>
		厂商:<span></span><br/>
		品牌:<span></span><br/>
		型号:<span></span><br/>
	</div>
</body>
</html>

导航效果:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航效果</title>
	<style type="text/css">
	 body{font-family:"微软雅黑";font-size:13px;}
	 ul{list-style:none;padding:0px;width:61px;border:#000 thin solid;}
	 #contain ul{display:none;position:absolute;}
	 li{padding:8px;cursor:pointer;text-align:center;margin:0px auto;}
	 .hover{background-color:#eee;}
	 span{display:none;position: absolute;}
	 #contain{margin:70px auto;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	   $(function(){
	   	//初始化位置参数
	   	var objTop;
	   	var objLeft;
	   	var objHg;
	   	var objWidth;
	   	var spanTop;
	   	var spanLeft;
	   	var tipTop;
	   	var tipLeft;
	    function init(obj){
           objTop=obj.offset().top;
           objLeft=obj.offset().left;
           objHg=obj.height();
           objWidth=obj.width();
           spanTop=objTop+(objHg/2)+"px";
           spanLeft=objLeft+objWidth+16+"px";
           tipTop=objTop-objHg-16+"px";
           tipLeft=objLeft+objWidth+23+"px";
	    }
          //绑定事件
	   	  $("#contain>li").hover(function(){
	   	    init($(this));
	   	    $(this).addClass("hover").find("ul").css({"top":tipTop,"left":tipLeft}).show();
	   	    $(this).find("span").css({"top":spanTop,"left":spanLeft}).show();
	   	  },function(){
	   	  	$(this).removeClass("hover").find("ul").hide();
	   	  	$(this).find("span").hide();
	   	  });
	   	  $("#contain ul>li").hover(function(){
	   	  	$(this).addClass("hover");
	   	  },function(){
	   	  	$(this).removeClass("hover");
	   	  });
	   });
	</script>
</head>
<body>
	<ul id="contain">
	   <li>女装
	         <span>&lt;</span>
             <ul>
                <li>针织衫</li>
                <li>连衣裙</li>
                <li>瘦身裤</li>
                <li>半身裙</li>
                <li>风衣</li>
             </ul>
	   </li>
	   <li>男装
	        <span>&lt;</span>
            <ul>
                <li>衬衫</li>
                <li>裤子</li>
                <li>保暖裤</li>
                <li>卫衣</li>
                <li>风衣</li>
            </ul>
	   </li>
	   <li>婴幼儿
	       <span>&lt;</span>
           <ul>
                <li>上衣</li>
                <li>裤子</li>
                <li>保暖裤</li>
                <li>套装</li>
                <li>手工精装</li>
           </ul>
	   </li>
	   <li>童装
	       <span>&lt;</span>
           <ul>
               <li>上衣</li>
               <li>连衣裙</li>
               <li>裤子</li>
               <li>卫衣</li>
               <li>毛衫</li>
            </ul>
	   </li>
	   <li>孕妇装
	        <span>&lt;</span>
            <ul>
            	<li>羊毛衫</li>
            	<li>大号套装</li>
            	<li>毛衫</li>
            	<li>上衣</li>
            	<li>手工针织</li>
            </ul>
	   </li>
	</ul>
</body>
</html>

选项卡:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style type="text/css">
	  body{font-family:"微软雅黑";font-size:13px;}
	  ul{list-style:none;border:thin solid #000;overflow:hidden;width:282px;margin:20px auto 0px;padding:0px;border-bottom:none;}
	  li{float:left;padding:10px 21px;background-color:#eee;cursor:pointer;}
	  div{margin:0px auto;border:#000 thin solid;width:262px;height:300px;border-top:none;display:none;padding:10px;}
	  .focus{background-color:#fff;font-weight:bold;}
	  p{line-height:30px;margin:0px;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
          $(function(){
          	$("li:first").addClass("focus");
          	$("div:first").show();
          	$("li").each(function(index){ //参数index表示当前元素的索引
                 $(this).click(function(){
                     $(this).addClass("focus").siblings().removeClass("focus");
                     $("div:eq("+index+")").show().siblings("div").hide();
                 });
          	});
          });
	</script>
</head>
<body>
	<ul>
	  <li>开心一刻</li>
	  <li>娱乐新闻</li>
	  <li>视频搞怪</li>
	</ul>
	<div>
		<p>有个女孩听说吃饭时筷子握的越长,以后嫁的越远。她从小就非常希望嫁到远方的国家,于是她吃饭时总是将两只筷子接起来用。后来,后来她嫁给
		了卖油条的。</p>
	</div>
	<div>
	   <a href="">由于受到台风影响,我国台湾近来风雨不断</a>
	   <a href="">美国大选即将落幕</a>
	   <a href="">人民群众积极学习党的号召</a>
	</div>
	<div>
	   <a href="">女神的新衣[完整版]</a>
	   <a href="">欢乐喜剧人</a>
	   <a href="">Hell0!女神</a>
	</div>
</body>
</html>

综合示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模式对话框</title>
	<style type="text/css">
	 body,input{font-family:"微软雅黑";font-size:13px;padding:5px;text-align:center;}
	 input{margin-right:5px;}
	 #bg{width:100%;height:100%;position:absolute;left:0px;top:0px;background-color:#000;display: none;z-index:100;
	     filter:alpha(opacity=70);/*IE滤镜*/-moz-opacity:0.7;/*火狐滤镜*/-webkit-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;/*其他浏览器*/}
	#show{display:none;width:300px;border:thin solid #000;position:absolute;z-index:200;background-color:#fff;}
	#show h3{background-color:#eee;padding:10px 5px;text-align:left;margin:0px;}
	#show h3 img{float:right;cursor:pointer;}
	#content #tip{height:100px;margin:0px;line-height:100px;}
	#content #select input{float:right;padding:5px 20px;cursor:pointer;}
	#select{overflow:hidden;margin:0px 0px 10px 0px;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script>
	   $(function(){
	   	  var showHg;
	   	  var showWidth;
	   	  var winHg;
	   	  var winWidth;
	   	  var scrollTop;
	   	  var scrollLeft;
	   	  var showTop;
	   	  var showLeft;
	   	  function init(){
	   	  	showHg=$("#show").height();
	   	  	showWidth=$("#show").width();
	   	  	//scrollTop=$(window).scrollTop();
	   	  	scrollLeft=$(window).scrollLeft();
	   	  	//winHg=$(window).height();
	   	  	winWidth=$(window).width();
	   	  	//showTop=(winHg-showHg)/2+"px";
	   	  	showLeft=scrollLeft+(winWidth-showWidth)/2+"px";
	   	  	showTop=100+"px";
	   	  	$("#show").css({"top":showTop,"left":showLeft});
	   	  }
         $(window).resize(function(){
         	if($("#show").is(":visible")) //窗口大小改变时,如果模式对话框是显示的,则重新设置对话框位置
         	init(); 
         });
         $("#show h3 img").click(function(){
         	$("#show").hide();
         	$("#bg").hide();
         });
         $("#show  input:first").click(function(){
         	$("#show").hide();
         	$("#bg").hide();
         });
         $("#data input:button").click(function(){
         	var len=$("#data input:checked").length;
         	if(len>0){
                init();
         	    $("#bg").show();
         	    $("#show").show();
         	}
         });
         $("#show input:last").click(function(){
         	$("#data p:has('input:checked')").remove();
         	$("#bg").hide();
         	$("#show").hide();
         });
	   });
	</script>
</head>
<body>
	<div id="data">
		<p><input type="checkbox"/><a href="">这是一条可以删除的数据</a></p>
		<p><input type="button" value="点我删除数据"/></p>
	</div>
	<div id="bg"></div>
	<div id="show">
		<h3>删除提示 <span><img src="error.png"></span></h3>
		<div id="content">
			<p id="tip"><img src="infor.png"/>你真的要删除该条记录吗?</p>
			<p id="select">
				<input type="button" value="取消"/>
				<input type="button" value="确定"/>
			</p>
		</div>
	</div>
</body>
</html>

 

© 著作权归作者所有

上一篇: 词法结构
下一篇: jQuery操作Dom
-愚公移山-
粉丝 0
博文 5
码字总数 24316
作品 0
郑州
前端工程师
私信 提问
在 ASP.NET 的 UpdatePanel 中使用 jQuery

简述 我在开发一个 ASP.NET Webforms 应用程序时, 发现 JQuery 会在我同时使用的 UpdatePanel 的时候失效! 在我深入研究后发现,原来是UpdatePanel 的局部刷新事件在调用完成后移除了JQuery ...

oschina
2013/06/04
646
0
jquery的一些用法 有用的用法。

AJAX 框架 用 Asp.net ajax 还是 Jquery ? AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。 刚开始学了 JQuqery, 众多的...

雪中漫步
2010/03/29
501
0
jquery技巧总结

一、简介 1.1、概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等,通过将...

晨曦之光
2012/03/09
204
0
使用 jQuery Mobile API 实现细粒度的自定义控制

jQuery Mobile API 针对移动网站定制提供了另一个级别的控制。从全局选项的自定义设置,到钩住交互事件和曝光的方法,一切都可以使用该 API 实现,并且在本文中进行介绍。在本文结束时,您就...

IBMdW
2012/05/27
1K
0
jQuery性能优化的28个建议

我一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些。找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来 一、选择器性能优化建议 1. 总是从#...

晨曦之光
2012/03/01
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部