Jquery中的事件
- 格式：doc
- 大小：273.50 KB
- 文档页数：7
下载文档原格式
合集下载
jQuery-focusinfocusoutfocusblur事件的区别与不同
jQuery-focusinfocusoutfocusblur事件的区别与不同focus与blur事件：不⽀持冒泡focusin与focusout：⽀持冒泡事件触发顺序：对于同时⽀持这4个事件的浏览器，事件执⾏顺序为focusin（聚焦） > focus > focusout（失焦） > blurHTML代码：<div class="parent"><input type="text" /></div><div class="log"></div>JavaScript代码：function log(str){$('.log').append($('<div/>').text(str));}$('.parent').focusin(function(){log('div focusin');}).focusout(function(){log('div focusout');}).focus(function(){log('div focus');}).blur(function(){log('div blur');});$('input').focusin(function(){log('input focusin');}).focusout(function(){log('input focusout');}).focus(function(){log('input focus');}).blur(function(){log('input blur');});结果：从执⾏结果可以看到4个事件的执⾏顺序，同时也可以看到 focus/blur是不⽀持冒泡的，所以.parent 元素绑定的focus和blur事件回调并没有触发。
50个实用的jquery案例
1. 如何创建嵌套的过滤器：1.//允许你减少集合中的匹配元素的过滤器，2.//只剩下那些与给定的选择器匹配的部分。
在这种情况下，3.//查询删除了任何没（:not）有（:has）4.//包含class为“selected”（.selected）的子节点。
5..filter(":not(:has(.selected))")2. 如何重用元素搜索1.var allItems = $("div.item");2.var keepList = $("div#container1 div.item");3.//现在你可以继续使用这些jQuery对象来工作了。
例如，4.//基于复选框裁剪“keep list”，复选框的名称5.//符合6.< DIV >class names:7.$(formToLookAt + " input:checked").each(function() {8. keepList = keepList.filter("." + $(this).attr("name"));9.});10.< /DIV>3. 任何使用has()来检查某个元素是否包含某个类或是元素：1.//jQuery 1.4.*包含了对这一has方法的支持。
该方法找出2.//某个元素是否包含了其他另一个元素类或是其他任何的3.//你正在查找并要在其之上进行操作的东东。
4.$("input").has(".email").addClass("email_icon");4. 如何使用jQuery来切换样式表1.//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。
2.$('link[media='screen']').attr('href', 'Alternative.css');5. 如何限制选择范围（基于优化目的）：1.//尽可能使用标签名来作为类名的前缀，2.//这样jQuery就不需要花费更多的时间来搜索3.//你想要的元素。
Jquery页面加载完成自动触发按钮点击事件
Jquery页⾯加载完成⾃动触发按钮点击事件主要应⽤到jquery的trigger()⽅法，trigger() ⽅法触发被选元素的指定事件类型。
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"2"/TR/xhtml1/DTD/xhtml1-transitional.dtd">3<html xmlns="/1999/xhtml">4<head>5<title>弹出层</title>6<script type="text/javascript" src="/activityPlatform/resource/scripts/jquery-1.7.1.min.js"></script> 7<style>8.black_overlay{9 display: none;10 position: absolute;11 top: 0%;12 left: 0%;13 width: 100%;14 height: 100%;15 background-color: black;16 z-index:1001;17 -moz-opacity: 0.8;18 opacity:.80;19 filter: alpha(opacity=80);20}21.white_content {22 display: none;23 position: absolute;24 top: 10%;25 left: 10%;26 width: 80%;27 height: 80%;28 border: 16px solid lightblue;29 background-color: white;30 z-index:1002;31 overflow: auto;32}33.white_content_small {34 display: none;35 position: absolute;36 top: 20%;37 left: 30%;38 width: 40%;39 height: 50%;40 border: 16px solid lightblue;41 background-color: white;42 z-index:1002;43 overflow: auto;44}45</style>46<script type="text/javascript">47//弹出隐藏层48function ShowDiv(show_div,bg_div){49 document.getElementById(show_div).style.display='block';50 document.getElementById(bg_div).style.display='block' ;51var bgdiv = document.getElementById(bg_div);52 bgdiv.style.width = document.body.scrollWidth;53// bgdiv.style.height = $(document).height();54 $("#"+bg_div).height($(document).height());55};56//关闭弹出层57function CloseDiv(show_div,bg_div)57function CloseDiv(show_div,bg_div)58{59 document.getElementById(show_div).style.display='none';60 document.getElementById(bg_div).style.display='none';61};6263/**64 * 虚拟点击按钮事件65*/66function btnClick() {67 $('#Button1').trigger('click');68}69$(function() {70 window.onload = btnClick;//页⾯加载完执⾏模拟点击事件7172 $('#Button1').on('click',function() {//点击按钮事件展⽰弹框73 ShowDiv('MyDiv','fade');74 });75});76</script>77</head>78<body>79<input id="Button1" type="button" value="点击弹出层"/>80<!--弹出层时背景层DIV-->81<div id="fade" class="black_overlay">82</div>83<div id="MyDiv" class="white_content">84<div style="text-align: right; cursor: default; height: 40px;">85<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span> 86</div>87我的奖品弹框88</div>89</body>90</html> window.onload = btnClick;//页⾯加载完执⾏模拟点击事件,btnClick不能写为btnClick();。
菜鸟教程jquery语法
菜鸟教程jquery语法jQuery是一种高效、简洁又方便的JavaScript库，它简化了HTML文档的操作、事件处理、动画设计以及AJAX交互等操作，为前端开发者提供了非常方便的编程工具。
本篇文章将为大家简单介绍jQuery的语法和用法，包括选择器、事件、动画和AJAX交互等常用功能。
1. jQuery选择器选择器是jQuery的核心功能之一，它允许我们通过CSS样式来获取文档中的HTML元素。
以下是一些常见选择器：- 元素选择器$('p')：获取所有的p元素$('#header')：获取id为header的元素$('.nav')：获取class为nav的元素jQuery中的事件和原生JavaScript的事件类似，但是它的处理方式更为方便和高效。
以下是一些常用的事件处理方法：- click()：点击事件$('button').click(function(){//执行操作});- hover()：鼠标悬停事件jQuery提供了一些强大的动画效果，比如淡入淡出、滑动等。
以下是一些常用的动画效果：- fadeIn()：淡入效果$('div').fadeIn();- slideUp()：上滑效果4. jQuery AJAX交互jQuery AJAX可以实现页面的异步交互，比如发送请求、接收数据等。
以下是一些常用的AJAX方法：- $.ajax()：发送和接收请求的函数$.ajax({type: 'post',url: 'test.php',data: {'name': '小明','age': 18},success: function(data){console.log(data);}});总结本文对jQuery的语法和用法进行了简单介绍，包括选择器、事件、动画和AJAX交互等常用功能。
jQuery文本框（inputtextare）事件绑定方法教程
jQuery⽂本框（inputtextare）事件绑定⽅法教程jquery 的事件绑定已经⽤on替换了原来的bind，接下来为⼤家分享下bind的使⽤⽅法及input textare事件。
⽬前1.7以上，jquery?的事件绑定已经⽤on替换了原来的bind，接下来为⼤家介绍下bind的使⽤⽅法及input textare事件，感兴趣的朋友可以参考下(1)jquery 绑定事件⽬前1.7以上，jquery的事件绑定已经⽤on替换了原来的bind；区别：(个⼈理解)bind是⼀次绑定事件到每⼀个⼦节点；on是只绑定到⽗节点，然后冒泡到各个⼦节点；⽤法：bind⼀个事件，⼀个⽅法：$(".class input").bind('click',function(e){...;e.stopPropagation;})两个事件，⼀个⽅法：$(".class input").bind('click mouseover',function(e){...;e.stopPropagation;})两个事件，两个⽅法：$(".class input").bind({ click:function(e){...;e.stopPropagation;}, mouseover:function(e){...;e.stopPropagation;} }) on,可以直接替换掉bind，就是说上述的⽤法都适⽤于on；此外，on⽐bind多了两个可选参数on( events [, selector ] [, data ], handler(eventObject) )selector:要绑定的元素，上⾯的例⼦可以写成：$(".class").bind('click','input',function(e){...;e.stopPropagation;})(需要注意的是，有⼀个事件不好⽤，就是'⼤便'ie下独有的事件：onpropertychange；可以⽤：$(".class input").bind('propertychange',function(e){...;e.stopPropagation;})没反应：$(".class").bind('propertychange','input',function(e){...;e.stopPropagation;}))data:传递给event.data的参数，$(".class").bind('click','input','123',function(e){alert(e.data/*123*/);e.stopPropagation;})(更具体⽤法可查看⼿册)；(2)input textare 事件之前做⼀个⽂本框内容实时变化事件触发时，⽤onkeyup + onchange；但onchang必须在⽂本框失焦后才会触发，后来发现可以⽤(if IE) onpropertychange + else oninput 来处理。
解决jQuery使用append添加的元素事件无效的问题
解决jQuery使⽤append添加的元素事件⽆效的问题jquery api官⽅的例⼦在新增的元素上添加事件$(document).on("click",'#lyysb a',function(){if(!$(this).hasClass('cur')){$(this).addClass('cur');} else {$(this).removeClass('cur');}});on() ⽅法在被选元素及⼦元素上添加⼀个或多个事件处理程序。
⾃ jQuery 版本 1.7 起，on() ⽅法是 bind()、live() 和 delegate() ⽅法的新的替代品。
注意：使⽤ on() ⽅法添加的事件处理程序适⽤于当前及未来的元素（⽐如由脚本创建的新元素）。
提⽰：如需移除事件处理程序，请使⽤ off() ⽅法。
提⽰：如需添加只运⾏⼀次的事件然后移除，请使⽤ one() ⽅法。
*把事件绑定在docunmet就和原来的live⽅法没有区别了。
原先的live()⽅法，处理函数是默认绑定在document对象上不能变的，如果DOM嵌套结构很深，事件冒泡通过⼤量祖先元素会导致较⼤的性能损失。
⽽使⽤.on()⽅法，事件只会绑定到$()函数的选择符表达式匹配的元素上，因此可以精确地定位到页⾯中的⼀部分，⽽事件冒泡的开销也可以减少。
例如我会在zkdiv中动态添加多个class=”zk”的dom节点，也想对动态增加的节点绑定相同的事件则可以通过以下代码实现<div id="zkdiv"><input type="button" value="展开" id="zk" class="zk"/> <br></div>//展开按钮点击触发事件$("#zkdiv").on("click",".zk",function(){console.log("on 点击⼀次");});var html2 = "<input type='button' class='zk' value='新⽣成的展开' />";$("#zkdiv").append(html2);*这样⼀来处理函数就绑定到#zkdiv的选择器上去了，事件冒泡导致的性能损失会⼤⼤降低（使⽤该⽅法时要确保.on前⾯的选择器能选择到对象否则不起作⽤）click是点击事件，但是在页⾯加载完之后，jquery事件新添加的元素，⽤click的话是⽆法获取元素的，这个时候要⽤on去获取元素事件，简单的说页⾯加载完成时候页⾯显⽰的元素可以⽤on，也可以⽤click，但是页⾯加载完成之后后期再追加的元素只能⽤on。
jquery--onchange
jquery--onchange触发onchange⾸先页⾯有⼀个input标签，并且已绑定onchange事件，如：1<input type="text"onchange="console.log(this.value);"/>这个事件要做的动作很简单，只是把input的值在控制台上打印出来就好。
效果：这个onchange是怎么触发的呢？经过实验，⼤致是以下⼏个步骤⼀、当input捕获到焦点后，系统储存当前值⼆、当input焦点离开后，判断当前值与之前存储的值是否不等，如果为true则触发onchange事件。
⾮IE可以回车触发这个⾏为有点意思，即当input获取焦点后，不仅是焦点离开时会去校验当前的值与获取焦点临时存储值是否⼀致，还会在你敲回车的时候就去⼲这事。
⽐如，我输⼊⼀些内容以后，我想让它触发onchange事件，但⼜不想使⽤⿏标点别处，于是敲回车它就触发⼀次onchange事件，当然，如果你敲回车的时候，前后两次的值不相等才会触发，为了形象的展⽰这个案例，我们修改页⾯代码的input：1<input type="text"onkeydown="console.log('from onkeydown : ' + event.keyCode);"onchange="console.log('from onchange : ' + this.value);"/>效果如下：这个例⼦在FireFox，Chrome，Safari下测试通过。
通过DOM对象赋值不会触发虽然表⾯上感觉是当内容发⽣变化时，就会触发onchange事件，但是那只能在页⾯上操作。
⽽如果通过dom对象去修改它的value则什么事也不会发⽣。
如：通过dom对象赋值后，虽然值发⽣了变化，但并没有触发onchange事件，即使你像下⾯这样模拟真实输⼊也不管⽤实际案例假如，在实际中，我们有这么⼀个案例1<input type="text"onchange="a(this);"/>js代码：1 2 3function a(obj){console.log(obj.value); }这个功能在正常的页⾯操作下都没问题，但我希望通过dom对象改变value时也触发a()函数，那有很多种做法。
jquery失去焦点的方法(一)
jquery失去焦点的方法(一)jQuery失去焦点介绍在网页开发中，经常需要处理用户与页面元素之间的交互。
用户输入完成后，经常需要对输入框进行验证或执行其他操作，这就需要用到”失去焦点”事件。
jQuery提供了多种方式来处理元素失去焦点的情况，下面列举了几种常用的方法。
方法一：blur()方法使用该方法可以直接将事件绑定到元素上，当元素失去焦点时则触发该事件。
$('input').blur(function(){// 在这里执行失去焦点后的操作});方法二：focusout()方法focusout()方法与blur()方法类似，不过它的主要区别是可以冒泡。
也就是说，当元素及其子元素都失去焦点时，都会触发该事件。
$('input').focusout(function(){// 在这里执行失去焦点后的操作});on()方法是jQuery的事件绑定函数，它可以绑定多个事件类型。
可以使用该方法来绑定blur和focusout事件。
$('input').on('blur focusout', function(){// 在这里执行失去焦点后的操作});方法四：delegate()方法delegate()方法可以用于向未来元素而未添加到文档中的元素添加事件处理程序。
它可以将blur和focusout事件绑定到元素上。
$(document).delegate('input', 'blur focusout', func tion(){// 在这里执行失去焦点后的操作});方法五：bind()方法bind()方法将一个事件处理程序附加到指定元素，并为指定的事件类型绑定函数。
$('input').bind('blur focusout', function(){// 在这里执行失去焦点后的操作});live()方法是一个历史遗留方法，它已在版本中被弃用。
JQuery绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参
JQuery绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参<script src="jquery.min.js" type="text/javascript"></script><script language="javascript" type="text/javascript"> $(document).ready(function(){ $('#mySelect').change(function(){ alert($(this).children('option:selected').val()); var p1=$(this).children('option:selected').val();//这就是selected的值 var p2=$('#param2').val();//获取本页⾯其他标签的值 window.location.href="xx.php?param1="+p1+"m2="+p2+"";//页⾯跳转并传参 })})</script><select id="mySelect"> <option value="1">one</option> <option value="2" selected="selected">two</option> <option value="3">three</option></select><input type="text" value="ooo" name="param2" id="param2"/>jquery获取select选择的⽂本与值获取select 选中的 text :$("#ddlregtype").find("option:selected").text();获取select选中的 value:$("#ddlregtype ").val();获取select选中的索引:$("#ddlregtype ").get(0).selectedindex;1、获取选中select的value和text,html代码如下：<select id="mySelect"><option value="1">one</option><option value="2">two</option><option value="3">three</option></select>1、则可通过以下script代码s来获取选中的value和text$("#mySelect").val(); //获取选中记录的value值$("#mySelect option:selected").text(); //获取选中记录的text值2、运⽤new Option("⽂本","值")⽅法添加选项option：var obj = document.getElementById("mySelect");obj.add(new Option("4","4"));3、删除所有选项option：var obj = document.getElementById("mySelect");obj.options.length = 0;4、删除选中选项option：var obj = document.getElementById("mySelect");var index = obj.selectedIndex; obj.options.remove(index);5、修改选中选项optionvar obj = document.getElementById("mySelect");var index = obj.selectedIndex; obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = true; //保持选中状态6、删除select：var obj = document.getElementById("mySelect");obj.parentNode.removeChild(obj); //移除当前对象7、select选择的响应事件：$("#mySelect").change(function(){//添加所需要执⾏的操作代码})。
jquery单选框radio绑定click事件实现方法
jquery单选框radio绑定click事件实现⽅法本⽂实例讲述了jquery单选框radio绑定click事件实现⽅法。
分享给⼤家供⼤家参考。
具体实现⽅法如下：复制代码代码如下:<html><head><title>单选框radio绑定click事件</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><script type="text/javascript" src="jquery-1.8.2.min.js"></script><script type="text/javascript">$(function(){$(":radio").click(function(){alert("您是..." + $(this).val());});});</script><style type="text/css">h5{color:blue;}textarea{resize:none;}#word{color:red;}</style></head><body><h5>单选框 radio 绑定 click 事件</h5><form action="" method=""><input type="radio" name="gender" value="男性">男性<input type="radio" name="gender" value="⼥性">⼥性<input type="radio" name="gender" value="春哥">春哥</form></body></html>希望本⽂所述对⼤家的jQuery程序设计有所帮助。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
目录Jquery中的事件 (1)加载DOM (1)事件绑定 (1)合成事件 (1)事件冒泡 (3)事件对象的属性 (3)移除事件 (4)模拟操作 (4)~~~笔记是本人看书时所记，需要测试时所写代码的的发邮箱623565791@~ (7)Jquery中的事件加载DOM$(document).ready(function(){});//执行时机，文档中DOM加载完毕即执行，不需要等图片等加载完（window.onload需要）。
简写方式：$().ready(function(){}) ; $(function(){});$(window).load(function(){});与window.onload一样~事件绑定bind（type [,data] ,fn）;参数1：事件类型click,blur等。
参数2：作为event.data属性值传给事件对象的额外数据对象。
表示不知道是干嘛的~！参数3：处理函数。
注：type比普通的JS少了on。
click---onclick合成事件hover();和toggle();a)hover(enter , leave) 当光标移到触发enter事件，当光标移开触发leave事件b)toggle(fn1 , fn 2 , fn3 ….fnN)用于模拟鼠标连续单击事件，第一次单机触发fn1,第二次触发fn2….知道最后一个~随后又重头开始~toggle可以简化很多代码：----未使用toggle----$(function(){$(".article #header").click(function(){if( $(this).next("#section").is(":visible") && $(this).nextAll("#footer").is(":visible")){$(this).next("#section").hide();$(this).nextAll("#footer").hide();$(this).css({"color" : "black" , "background" : "#FFFFFF"});}else{$(this).next("#section").show();$(this).nextAll("#footer").show();$(this).css({"color" : "black" , "background" : "#cc00cc"});}});});----使用toggle----$(function(){$(".article #header").toggle(function(){$(this).next("#section").show();$(this).nextAll("#footer").show();$(this).css({"color" : "black" , "background" : "#cc00cc"});},function(){$(this).next("#section").hide();$(this).nextAll("#footer").hide();$(this).css({"color" : "black" , "background" : "#FFFFFF"});});});事件冒泡a)事件冒泡介绍：元素间嵌套，且都绑定了相同的事件类型，则触发内部元素事件时外部元素也会触发。
之所以叫冒泡，因为传递是层层向外的,像水泡一样往外冒。
eg:body中含有div，div中含有panel，3个元素绑定click事件，当panel触发时，触发顺序为：panel---div---bodyb)处理事件冒泡：i.使用事件对象处理事件冒泡$(“span”).bind(“click” , function(event){//event事件对象//..doSomeThingevent.stopPropagation();//停止事件传播（冒泡），当然也可以改为//return false；});ii.阻止默认行为：网页中有的元素有默认应为，例如表单有自动提交的行为，单机链接后会跳转等。
Eg:校验表单：<input type=”submit” id=”sub” />$(“#sub”).bind(“click” , function(event){//表单内容不合法event.preventDefault();//阻止默认行为（表单提交）,当然也可以//改为return false；});iii.事件捕获：事件捕获和事件冒泡刚好是相反的过程。
Body—div---panel ,遗憾的是jquery并不支持事件捕获。
事件对象的属性$(function(){$("div").click(function(e){alert(e.type);//获得事件类型--clickalert(e.target.style.width);//e.target获得响应事件的对象switch(e.which)//在鼠标单机事件中，获得左键、右键、中键{case 1 :alert("左键");break;case 2:alert("中键");break;case 3 :alert("右键");break;}});});e.metaKey()键盘事件中获取ctrl键。
e.originalEvent():指向原始的事件对象。
移除事件unbind([type][,fn ]);参数1：需要移出的事件类型参数2：具体绑定的函数,不要加引号~u nbind(“click”);移出元素所有的click事件a)移出元素按钮上的以前注册的事件删除元素的所有click事件：$(“delAll”).click(function(){$(“btn”).unbind(“click”); });删除元素的所有事件：$(“delAll”).click(function(){$(“btn”).unbind(); });b)移出元素按钮上具体的一个函数$("button:eq(2)").click( fun1 = function(){alert("具体的事件1~");}).click( fun2 = function(){alert("具体的事件2~")}).click( fun3 = function(){alert("具体的事件3~")});$("button:eq(3)").click(function(){$("button:eq(2)").unbind("click",fun2);//删除具体的绑定函数fun2});c)对与只要触发一次就立即移出：one();one(type [,data] , fn);$("button:eq(4)").one("click" , function(){alert("only invoke ones~");});//只触发一次~模拟操作trigger(type[,data]);参数1：要触发的事件类型。
参数2：要传递给事件处理函数的附加数据，以数组形式传递。
a）常用模拟模拟用户单机，不需要用户真正点击~$(function(){$("button:eq(0)").bind("click" , function(){alert("不需要用户单机哦~")});// $("button:eq(0)").trigger("click"); //模拟触发单机事件b$("button:eq(0)").click();//简写方式});b）触发自定义事件$(function(){$("button:eq(0)").bind("myClick" , function(){alert("模拟myClick事件~~")});$("button:eq(0)").trigger("myClick");//$("button:eq(0)").myClick();貌似这样不行~因为没有myClick函数吧~ });c）传递数据：trigger(type[,data]);参数1：要触发的事件类型。
参数2：要传递给事件处理函数的附加数据，以数组形式传递。
$(function(){$("button:eq(0)").bind("myClick" , function(event , msg1 , msg2){alert("模拟myClick事件~传递参数~"+msg1 + "," +msg2)});$("button:eq(0)").trigger("myClick" , ["我的自定义" , "事件"]);});d)执行默认操作trigger()方法触发事件后，会使浏览器执行默认操作。
$(“input”).trigger(“foucs”);//不但会触发input的focus事件，还会让input获得焦点~ 若只希望触发focus事件，不执行浏览器默认操作，使用jquery中triggerHandler（）方法。
即：$(“input”).triggerHandler(“foucs”);e)其他用法i.bind一次性绑定多个事件$(“div”).bind(“ mouseover mouseout” , function(){this.toggerClass(“over”);});ii.添加事件命名空间，便于管理$(function(){$("div").bind("click.plugin" , function(){alert("click.plugin~")}).bind("dblclick", function(){alert("dbClick");}).bind("mouseover.plugin" ,function(){$(this).html("mouser.plugin~")});$("button:eq(0)").click(function(){$("div").unbind(".plugin");//在删除事件时，只要指明事件的命名空间即可~ 注//意有个点~.plugin~ 还有dblclick这么写});});iii.相同事件名称不同事件命名空间的方法$(function(){$("div").bind("click.plugin" , function(){alert("click.plugin~")}).bind("click", function(){alert("click");});$("button:eq(0)").click(function(){$("div").trigger("click!");//！代表触发所有不包含在命名空间//中的click方法~！即弹出click$("div").trigger("click");//触发所有click事件});});~~~笔记是本人看书时所记，需要测试时所写代码的的发邮箱623565791@~。