第四篇 jQuery中的事件与应用
4.1 事件中的冒泡现象，ready()方法
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件中的冒泡现象，ready()方法</title>
<style type="text/css">
body{ font-size:13px;}
.clsShow{ border:#ccc 1px solid; background-color:#eee; margin-top:15px; padding:5px; width:220px; line-height:.8em; display:none;}
.btn{ border:# 1px solid; padding:2px; width:50px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//事件触发分为：捕获，冒泡
//冒泡其实质就是事件执行中的顺序。
$(function(){
var intI=;
$("body,div,#btnShow").click(function(){
intI++;
$(".clsShow").show().html("welcome").append("<div>执行次数<b>"+intI+"</b></div>");
event.stopPropagation();//阻止冒泡过程
//代码中，除了使用stopPropagation()方法阻止事件的冒泡过程外，还可以通过语句return false实现停止事件的冒泡过程。
})
}) /*
jQuery中的 ready()方法：在jQuery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度，当然遇到执行ready()方法时，通过查看isReady值是否被设置，如果未被设置，那么就说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存一一执行。
$(function(){})
$(document).ready(function(){})
*/ </script>
</head>
<body>
<div><input id="btnShow" type="button" value="点击" class="btn" /></div>
<div class="clsShow"></div>
</body>
</html>
4.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>方法绑定事件</title>
<style type="text/css">
.btn{ border:# 1px solid; padding:2px; width:50px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//bind()
//bind(type,[data],fn)
$(function(){
$("#btnBind").bind("click",function(){
$(this).attr("disabled","disabled");//按钮不可用
});
}) //在一个元素中绑定多个事件
$(function(){
$("#btnBind").bind("click mouseout",function(){
$(this).attr("disabled","disabled");//按钮不可用
});
})
</script>
</head>
<body>
<input id="btnBind" type="button" value="Button" class="btn" />
</body>
</html>
4.3 映射方式绑定不同的事件
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>映射方式绑定不同的事件</title>
<style type="text/css">
body{ font-size:13px;}
.clsTip{ border:#ccc 1px solid; background-color:#eee; margin-top:15px; padding:5px; width:185px; display:none;}
.txt{ border:# 1px solid; padding:3px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script> //bind(type,[data],fn) $(function(){
$(".txt").bind({ focus:function(){$("#divTip").show().html("执行的是focus事件");},
change:function(){$("#divTip").show().html("执行的是change事件");}
})
})
//也可以这么写
//bind(type,[data],fn)
$(function(){
var meaaage_focus='执行的是focus事件';
$(".txt").bind("focus",{msg:meaaage_focus},function(event){
$("#divTip").show().html(event.data.msg);
})
})
</script>
</head>
<body>
<div>姓名：<input type="text" class="txt" /></div>
<div id="divTip" class="clsTip"></div>
</body>
</html>
4.4 切换事件hover
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>切换事件hover</title>
<style type="text/css">
body{ font-size:13px;}
.clsFrame{ border:solid 1px #; width:220px;}
.clsFrame .clsTitle{ background-color:#eee; padding:5px; font-weight:bold;}
.clsFrame .clsContent{ padding:5px; display:none;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//jQuery事件切换：hover(),toggle()
//切换事件--既有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。
//hover(over,out) ==> $("a").hover(function(){...},function(){...}) ==> $("a").mouseenter(function(){...}) $("a").mouseleave(function(){...})
//hover() hover(over,out) ==>当鼠标移动到所选的元素上面时，执行指定的第一个函数；当鼠标移出这个元素时，执行指定的第二个函数。 $(function(){
$(".clsTitle").hover(function(){
$(".clsContent").show();
},function(){
$(".clsContent").hide();
});
}) </script>
</head>
<body>
<div class="clsFrame">
<div class="clsTitle">jQuery简介</div>
<div class="clsContent">XXXXXXXXXXXXXXX</div>
</div>
</body>
</html>
4.5 切换事件toggle
(有点问题！)
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>切换事件toggle</title>
<style type="text/css">
body{ font-size:13px;}
img{ border:solid 1px #ccc; padding:3px; width:200px; height:60px;}
div{ width:200px; height:50px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//toggle(fn,fn2,[fn3,fn4,...]) --参数fn,fn2,...,fnN为单击时被依次调用的函数。
/*
$(function(){
$("img").toggle(function(){
$(this).attr("src","img/1.png");
$(this).attr("title","01");
},function(){
$(this).attr("src","img/2.png");
$(this).attr("title","02");
},function(){
$(this).attr("src","img/3.png");
$(this).attr("title","03");
}) //$("img").trigger("click");
})
*/ $(function(){
$("button").toggle(function(){
$("#div1").css("background-color","#030");
},function(){
$("#div1").css("background-color","#990");
},function(){
$("#div1").css("background-color","#C69");
});
})
</script>
</head>
<body>
<img />
<div id="div1"></div>
<button>test1</button>
</body>
</html>
4.6 unbind
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移除事件unbind</title>
<style type="text/css">
body{ font-size:13px;}
.btn{ border:# 1px solid; padding:2px; width:80px;}
div{ line-height:.8em;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
$(function(){
function oClick(){
$("#divTip").append("<div>按钮二的单击事件</div>");
}
$("input:eq(0)").bind("click",function(){
$("#divTip").append("<div>按钮一的单击事件</div>");
})
$("input:eq(1)").bind("click",oClick);
$("input:eq(2)").bind("click",function(){
$("input").unbind();
}) //unbind() --不仅可以删除某些类型的全部事件，还可以删除某个指定的自定义事件
$("input:eq(2)").bind("click",function(){
$("input").unbind("click",oClick);
})
})
</script>
</head>
<body>
<div>
<input id="Button1" type="button" value="按钮一" class="btn" />
<input id="Button2" type="button" value="按钮二" class="btn" />
<input id="Button3" type="button" value="按钮三" class="btn" />
</div>
<div id="divTip" style="padding-top:10px;"></div>
</body>
</html>
4.7 one事件
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>其他事件one</title>
<style type="text/css">
.btn{ border:# 1px solid; padding:2px; width:160px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
$(function(){
function btn_Click(){
this.value = "010-12345678";
}
$("input").bind("click",btn_Click);
})
</script>
</head>
<body>
<input id="Button1" type="button" value="点击查看联系方式" class="btn" />
</body>
</html>
4.8 事件trigger
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>其他事件trigger</title>
<style type="text/css">
body{ font-size:13px;}
.txt{ border:# 1px solid; padding:3px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
//trigger() 方法触发被选元素的指定事件类型。
$(function(){
var oTxt=$("input");
oTxt.trigger("select");
oTxt.bind("btn_Click",function(){
var txt = $(this).val();
$("#divTip").html(txt);
})
oTxt.trigger("btn_Click");
//自动触发的一些事件 //oTxt.triggerHandler("click");--如果不希望页面自动执行，可使用triggerHandler()方法，该方法不会自动执行其包含的事件。
})
</script>
</head>
<body>
姓名：<input id="Text1" type="text" class="txt" value="陶国荣" />
<div id="divTip" style="padding-top:5px"></div>
</body>
</html>
4.9 文本框中的事件应用，验证邮箱格式
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框中的事件应用，验证邮箱格式</title>
<style type="text/css">
body{ font-size:13px;}
/*元素初始状态样式*/
.divInit{ width:390px; height:55px; line-height:55px; padding-left:20px;}
.txtInit{ border:# 1px solid; padding:3px; background-image:url(img/.png) }
.spnTip{ width:179px; height:40px; line-height:40px; float:right; margin-top:8px; padding-left:10px; background-repeat:no-repeat;} /*元素丢失焦点样式*/
.divBlur{ background-color:#FEEEC2;}
.txtBlur{ border:# 1px solid; padding:3px; background-image:url(img/.png)}
.spnBlur{ background-image:url(img/.png);}
.divFocu{ background-color:#EDFFD5;}
.spnSucc{ background-image:url(img/.png);}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
$(function(){
//获取焦点事件，页面加载后获取焦点 备注：addClass()是增加某种CSS样式，为了更好地体现设置的样式，应先通过removeClass（），删除已加载过的页面样式
$("#txtEmail").focus(function(){
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divBlur").addClass("divFocu");
$("#spnTip").removeClass("spnBlur").removeClass("spnSucc").html("请输入常用邮箱地址！");
})
$("#txtEmail").trigger("focus");// //失去焦点事件
$("#txtEmail").blur(function(){
var $email = $("#txtEmail").val();
if($email.length ==)
{
//为空
$(this).removeClass("txtInit").addClass("txtBlur");
$("#email").removeClass("divFocu").addClass("divBlur");
$("#spnTip").addClass("spnBlur").html("邮箱地址不能为空！");
}
else
{
//不为空！ 判断邮箱的格式
if(checkEmail($email))
{
//true
$(this).removeClass("txtBlur").addClass("txtInit");
$("#email").removeClass("divFocu");
$("#spnTip").removeClass("spnBlur").addClass("spnSucc").html("");
}
else
{
//false
$(this).removeClass("txtInit").addClass("txtBlur");
$("#email").removeClass("divFocu").addClass("divBlur");
$("#spnTip").addClass("spnBlur").html("格式不正确！");
}
}
})
/**/
function checkEmail(str){
var re = /^(\w-*\.*)+@(\w-?)+(\.\w{,})+$/
if(re.test(str))
{
return true;
//alert("正确");
}else
{
return false;
//alert("错误");
}
}
})
</script>
</head>
<body>
<form id="form1" action="#">
<div id="email" class="divInit">
邮箱：<span id="spnTip" class="spnInit"></span>
<input id="txtEmail" type="tex" class="txtInit" />
</div>
</form>
</body>
</html>
4.10 列表框的事件
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表框事件应用</title>
<style type="text/css">
body{ font-size:13px;}
.clsInit{ width:435px; height:35px; line-height:35px; padding-left:10px;}
.clsTip{ padding-top:5px; background-color:#eee; display:none;}
.btn{ border:# 1px solid; padding:2px; width:65px; float:right; margin-top:6px; margin-right:6px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script> $(function(){
//$.each() --对数组遍历的处理
function objInit(obj){
return $(obj).html("<option>请选择</option>");
} //
var arrData={
厂商1:{品牌1_1:"型号1_1_1,型号1_1_2",
品牌1_2:"型号1_2_1,型号1_2_2"},
厂商2:{品牌2_1:"型号2_1_1,型号2_1_2",
品牌2_2:"型号2_2_1,型号2_2_2"},
厂商3:{品牌3_1:"型号3_1_1,型号3_1_2",
品牌3_2:"型号3_2_1,型号3_2_2"}
}; //遍历数据增加厂商项,第一次遍历
$.each(arrData,function(pF){
$("#selF").append("<option>"+pF+"</option>");
}) //
$("#selF").change(function(){
objInit("#selT");
objInit("#selC"); //品牌
$.each(arrData,function(pF,pS){
//
if($("#selF option:selected").text()==pF){
$.each(pS,function(pT,pC){
$("#selT").append("<option>"+pT+"</option>");
});
}
//型号
$("#selT").change(function(){
objInit("selC");
$.each(pS,function(pT,pC){
if($("#selT option:selected").text()==pT)
{
$.each(pC.split(","),function(){
//alert(this);
$("#selC").append("<option>"+this+"</option>");
})
}
})
})
})
}) //
$("#Button").click(function(){
var strValue="";
strValue += $("#selF option:selected").text();
strValue += " 您选择的品牌:";
strValue += $("#selT option:selected").text();
strValue += " 您选择的型号:";
strValue += $("#selC option:selected").text();
$("#divTip").show().addClass("clsTip").html(strValue);
}) })
</script>
</head>
<body> <div class="clsInit">
厂商:<select id="selF"><option>请选择</option></select>
品牌:<select id="selT"><option>请选择</option></select>
型号:<select id="selC"><option>请选择</option></select>
<input id="Button" type="button" value="查询" class="btn" />
</div>
<div class="clsInit" id="divTip"></div>
</body>
</html>
4.11
第四篇 jQuery中的事件与应用的更多相关文章
- 四、jquery中的事件与应用
当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.时间无论在页面元素本身还是在元素 ...
- 第四章 jQuery中的事件
1.加载DOM jQuery中,在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,此时可能元素的关联文件未下载完. jQuery中的 load()方法,会在元素的on ...
- jQuery 中的事件绑定
一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...
- 锋利的jQuery ——jQuery中的事件和动画（四）
一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){} 方法内注册的事件, ...
- Javascript事件模型系列（三）jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- jQuery中的事件监听方式及异同点
jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- jQuery：详解jQuery中的事件（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery学习笔记（三）jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
随机推荐
- C++入门经典-类成员的可访问性，继承后的可访问性
1:关键字public.private.protected说明类成员是共有的.私有的,还是保护的.这3个关键字将类划分为3个区域,在public区域的类成员可以在类作用域外被访问,而private区域 ...
- LeetCode 81. 搜索旋转排序数组 II（Search in Rotated Sorted Array II）
题目描述 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,0,1,2,2,5,6] 可能变为 [2,5,6,0,0,1,2] ). 编写一个函数来判断给定的目标值是否存在 ...
- Python定时框架 Apscheduler 详解【转】
内容来自网络: https://www.cnblogs.com/luxiaojun/p/6567132.html 在平常的工作中几乎有一半的功能模块都需要定时任务来推动,例如项目中有一个定时统计程序, ...
- This sample is for changing from “float64” to “int” for values did unmarshal using map[string]interface{}. When it did unmarshal using map[string]interface{}, a number with “int” was changed to “floa
This sample is for changing from “float64” to “int” for values did unmarshal using map[string]interf ...
- 【导航】JennyHui 老白兔记录贴
英语控 TED X - > 笔记 程序媛 2019-08-24 Java学习路径规划 思考记录 2018-08-24 常见的工作思考方式 浪费时间 百家讲坛 开卷八分钟
- 使用oracle的存储过程的例子
十几年没有用oracle的存储过程了,有些东西已经忘了,没有想到今天又要用.在这里写个例子.它演示了存储过程的格式,游标的使用,循环.判断的使用,还有直接执行一个拼接的SQL的用法.以下是代码: cr ...
- LC 963. Minimum Area Rectangle II
Given a set of points in the xy-plane, determine the minimum area of any rectangle formed from these ...
- 【React自制全家桶】七、React实现ajax请求以及本地数据mock
一.下载axios插件 yarn add axios 二.React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三.ajax之get请求 axios. ...
- linux之gzip命令
命令格式: gzip [选项] 压缩(解压缩)的文件名 参数: -d 将压缩文件解压. -l 对每个压缩文件,显示压缩文件的大小,未压缩文件的大小,压缩比,未压缩文件的名字 -v 对每一个压缩和解压 ...
- javascript中ClassName属性的详解与实例
在javascritp中,我们可以通过style属性可以控制元素的样式,从而实现行为层通过DOM的style属性去干预显示层显示的目标,但是这种方法是不好的,而且为了实现通过DOM脚本设置的样式,你不 ...