jQuery三种事件绑定方式.bind(),.live(),.delegate()
JS绑定事件三种方式
JS绑定事件三种⽅式三种⽅式1、在DOM中直接绑定2、在JS代码中直接绑定3、使⽤事件监听函数绑定事件⼀、在DOM中直接绑定也就是直接在html标签中通过 onXXX=“” 来绑定。
举个例⼦：<input type="button" value="点我呦" οnclick="alert("hello world!")"/><!--或者--><input type="button" value="点我呦" οnclick="testAlert()"><script type="text/javascript">function testAlert(){alert("hello world!");}</script>缺点：不利于⾏为和结构相分离，耦合度太⾼，不建议在项⽬中使⽤。
在遇到相同类型的事件时，只会去处理第⼀个事件，⽽忽略后续的事件。
传统⽅法只会在事件冒泡中运⾏，⽽⾮捕获和冒泡事件对象参数(e)仅⾮IE浏览器可⽤优点：⾮常简单和稳定，可以确保它在你使⽤的不同浏览器中运作⼀致处理事件时，this关键字引⽤的是当前元素事件解绑对象.on事件名字=null;<body><input type="button" value="第⼀个按钮" id="btn1"/><input type="button" value="⼲掉第⼀个按钮的事件" id="btn2"/><div id="dv"></div><script>document.getElementById("btn1").onclick = function () {console.log("码仙");};document.getElementById("btn2").onclick = function () {document.getElementById("btn1").onclick = null;};</script></body>⼆、JavaScript代码中直接绑定在JavaScript中通过查找DOM对象，对其绑定，elementObject.οnclick=function(){} 的格式，举例如下<input type="button" value="点我呦" id="demo"><script type="text/javascript">document.getElementById("demo").οnclick=function testAlert(){alert("hello world!");}</script>优点将⾏为与结构分离开了⾮常简单和稳定，可以确保它在你使⽤的不同浏览器中运作⼀致处理事件时，this关键字引⽤的是当前元素缺点：传统⽅法只会在事件冒泡中运⾏，⽽⾮捕获和冒泡⼀个元素⼀次只能绑定⼀个事件处理函数。
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的属性,事件及操作1.属性操作1.1 基本属性操作$("img").attr("src") 返回⽂档中所有图像的src属性值$("img").attr("src","test.jpg") 设置⽂档中所有图像的src属性值$("img").removeAttr("src") 将⽂档中图像的src属性删除$("input[type='checkbox']").prop("checked",true) 选中复选框$("input[type='checkbox']").prop("checked",false) 取消复选框$("img").removeProp("src") 删除img的src属性值attr与prop的区别:attr可以找到⾃定义的属性,prop只能找到固有的属性例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><button class="select_all">全选</button><button class="reverse">反选</button><button class="cancel">取消</button><hr><table border="1"><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr></table><script>//为"select_all"类绑定点击事件$(".select_all").click(function(){$(":checkbox").prop("checked",true);//选中所有的"checkbox"标签});//为"cancel"类绑定点击事件$(".cancel").click(function(){$(":checkbox").prop("checked",false);//取消选中的"checkbox"标签});//为"reverse"类绑定点击事件$(".reverse").click(function(){//循环每⼀个"checkbox"标签$(":checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));//把所有的"checkbox"标签的属性取反})});</script></body></html>1.2 class属性操作$("p").addClass("test") 为p元素加上"text"类$("p").removeClass("test") 从p元素中删除"test"类$("p").toggleClass("test") 如果存在就删除,否则就添加"test"类$("p").hasClass("test") 判断有没有"test",返回⼀个布尔值1.3 标签⽂本text/HTML的属性$("p").html() 返回p标签的html内容$("p").html("hello world") 设置p标签的html内容$("p").text() 返回p标签的text内容$("p").text("test") 设置p标签的text内容$("input").val() 获取⽂本框中的值$("input").val("test") 设置⽂本框中的内容2.CSS操作2.1 样式$("p").css("color") 访问查看p元素的color属性$("p").css("color","red") 设置p元素的color属性的"red"$("p").css({"color":"red","bakcground-color":"yellow"}) 设置p元素的color为"red",background属性为"yellow"(设置多个属性要⽤{}字典形式) 2.2 位置$("p").offset() 元素在当前窗⼝的相对偏移,object{top:100,left:100}$("p").offset().top 元素相对窗⼝顶部的偏移$("p").offset().left 元素相对窗⼝左侧的偏移$("p").position() 元素相对⽗元素的偏移,对可见元素有效,object{top:100,left:100}例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script><style type="text/css">*{margin:0;padding:0;}</style></head><body><div class="div1" style="width:200px;height:200px;background-color:darkblue"></div><script>var val_x=0;//初始化标签到浏览器左边框的距离var val_y=0;//初始化标签到浏览器上边框的距离//定义当⿏标悬浮在标签上⾯的时候,⿏标的样式为移动$(".div1").mouseover(function(){$(this).css("cursor","move")});//为盒⼦绑定⿏标左键按下事件$(".div1").mousedown(function(e){val_x=e.clientX;//定义标签的初始x坐标val_y=e.clientY;//定义标签的初始y坐标var $box_x=$(".div1").offset().left;//获取盒⼦相对窗⼝左侧的偏移var $box_y=$(".div1").offset().top;//获取盒⼦相对窗⼝顶侧的偏移//定义⿏标移动的操作$(document).mousemove(function(e){var move_x=e.clientX;//获取⿏标的偏移量var move_y=e.clientY;//移动窗⼝到指定的偏移量$(".div1").offset({left:$box_x+move_x-val_x,top:$box_y+move_y-val_y})});//绑定⿏标左键松开事件$(document).mouseup(function(){$(document).off();//关闭事件})});</script></body></html>这样可以使div盒⼦跟随⿏标的移动⽽移动$(window).scrollTop() 获取窗⼝滚动条的⾼度$(window).scrollLeft() 获取窗⼝滚动条的宽度$(window).scrollTop("100") 获取窗⼝滚动条的⾼度为100例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><div class="box"></div><div id="returnTop">to top</div><script>//定义窗⼝的滚动条$(window).scroll(function(){console.log($(window).scrollTop());//打印滚动条的位置//当滚动条的位置⼤于200的时候if($(window).scrollTop()>200){$("#returnTop").show();//显⽰滚动条}else{$("#returnTop").hide();//隐藏滚动条}//为返回顶部按钮绑定点击事件$("#returnTop").click(function(){$(window).scrollTop(0);//使窗⼝返回顶部})})</script></body></html>2.3 尺⼨$("p").height() 获取p元素的⾼度$("p").width() 获取p元素的宽度$("p:first").innerHeight() 获取p元素的第⼀个元素的内部区域的⾼度(不包括边框) $("p:first").innerWidth() 获取p元素的第⼀个元素的内部区域宽度(不包括边框)$("p:first").outerHeight() 获取p元素的第⼀个元素的外部区域的⾼度(默认包括边框) $("p:first").outerWidth() 获取p元素的第⼀个元素的外部区域的宽度(默认包括边框) $("p:first").outerHeight(true) 为true时包括边框例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script><style>.box{width:200px;height:100px;padding:50px;border:10px solid red;background-color:pink;margin:20px;}</style></head><body><div class="box">DIV</div><script>console.log($(".box").height());//获取盒⼦的⾼度console.log($(".box").width());//获取盒⼦的宽度console.log($(".box").innerHeight());//获取盒⼦的内部区域的⾼度(包括填充)console.log($(".box").innerWidth());//获取盒⼦的内部区域的宽度(包括填充)console.log($(".box").outerHeight());//获取盒⼦的外部区域的⾼度(包括边框)console.log($(".box").outerWidth());//获取盒⼦的外部区域的宽度(包括边框)console.log($(".box").outerHeight(true));//获取盒⼦的外部区域的⾼度(⽰包括边距) console.log($(".box").outerWidth(true));//获取盒⼦的外部区域的宽度(不包括边距) </script></body></html>显⽰如下:打印结果如下:3. ⽂档处理3.1 内部插⼊$("p").append("<p>p1</p>") 在p标签后⾯追加标签"<p>p1</p>" $("p").appendTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"后⾯$("p").prepend("<p>p1</p>") 在p标签前⾯追加标签"<p>p1</p>" $("p").prependTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"前⾯3.2 外部插⼊$("p").after("<p>p1</p>") 在p标签的同级标签后⾯插⼊标签"<p>p1</p>" $("p").before("<p>p1</p>") 在p标签的同级标签前⾯插⼊标签"<p>p1</p>" $("p").insertAfter("<p>p1</p>") 把p标签插⼊到标签"<p>p1</p>"后⾯$("p").insertBefore("<p>p1</p>") 把p标签插⼊到标签"<p>p1</p>"前⾯3.3 替换$("p").replaceWith("<img src='a.jpg'>") 把p标签替换成图⽚$(".div1").replaceAll("p") 把div类替换成⽂档中所有的p标签例⼦⼀:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><div class="div1">div5</div><div class="div1">div6</div><div class="div1">div7</div><script>$(".div1").replaceWith("<p>p1</p>");//把p标签替换成p标签</script></body></html>显⽰如下:例⼦⼆:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><div class="div1">div5</div><div class="div1">div6</div><div class="div1">div7</div><script>$(".div1").replaceAll("p");//把div类替换成⽂档中所有的p标签</script></body></html>显⽰如下:3.4 删除$("p").empty() 删除所有的p标签中的所有的⼦标签$("p").remove([expr]) 删除所有的p标签以及p标签中的⼦标签3.5 复制$("p").clone() 克隆p标签$("p").clone(true) 布尔值指定事件处理函数是否会被复制3.6 循环使⽤jQuery实现的集合循环⽅式⼀:$.each(Array,function(){function_suite})⽅式⼆:$(element).each(function(){function_suite})例⼦:使⽤each循环进⾏判断代码⼀:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><script>li=[11,22,33,44,55,66,77];$.each(li,function(i,v){if(v==33){return;}console.log(v);});</script></body></html>打印如下:代码⼆:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><script>li=[11,22,33,44,55,66,77];//定义循环,i为列表的索引,v为列表索引对应的值$.each(li,function(i,v){//当循环中的值为33时if (v==33){return false;}console.log(v);});</body></html>打印如下:结论:each的参数function内如果出现return,结束当次循环,类似于continueeach的参数function内如果出现return false,结束的是整个each循环,类似break4. 事件4.1 事件$("p").click() 单击事件$("p").dbclick() 双击事件$("p").mouseover() 当⿏标指针位于元素上⽅时触发事件$("p").mousemove() 当⿏标指针在指定的元素中移动时触发事件$("p").mouseout() 当⿏标指针从元素上移开时触发事件$("input[type='text']").focus() 元素获得焦点时,触发focus事件$("input[type='text']").blur() 元素失去焦点时,触发blur事件$("input[type='text']").change() 当元素的值发⽣改变时触发事件$("button").mousedown() 当按下⿏标时触发事件$("button").mouseup() 元素上放开⿏标按键时触发事件$(window).keydown() 当键盘或按钮被按下时触发事件$(window).keypress() 当键盘或按钮被按下时触发事件,每输⼊⼀个字符都触发⼀次事件$(window).scroll() 当⽤户滚动窗⼝的滚动条时触发事件$(window).resize() 当调整浏览器窗⼝的⼤⼩时触发事件$(window).unload() ⽤户离开页⾯时,触发事件$("input").keyup() 当按钮被松开时触发事件$("input").select() 当input元素中的⽂本被选择时触发事件$("form").submit() 当提交表单时触发事件4.2 绑定⽅式$(标签).事件(函数内容)4.3 事件委托通过其上级(可以是多层上级)事件委托,当点击这个标签时才会绑定事件在页⾯不刷新的情况下添加⼀⾏数据,⾏数据有操作按钮,点击并⽆效果,就可以通过事件委托来解决委托⽅式:$("ul").on("click","li",function(){function_suite})例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.2.1.js"></script></head><body><div id="box"><div class="item">111</div><div class="item">222</div><div class="item">333</div><div class="item">444</div><div class="item">555</div><div class="item">666</div></div><button>ADD</button><script>//为"button"按钮添加点击事件$("button").click(function(){$("#box").append("<div class='item'>777</div>");//在div标签后⾯添加⼀⾏//为"box"下的"item"类添加点击事件$("#box").on("click",".item",function(){console.log($(".item").text());//打印"item"类的⽂本})</script></body></html>4.4 event object所有的事件函数都可以传⼊event参数⽅便处理事件⽅式:$("p").click(function(event){function_suite})(event_object)的属性⽅法event.pageX 事件发⽣时,⿏标距离⽹页左上⾓的⽔平距离event.pageY 事件发⽣时,⿏标距离⽹页左上⾓的垂直距离event.type 事件的类型event.which 按下了哪⼀个键event.data 在事件对象在绑定数据,然后传⼊事件处理函数event.target 事件针对的⽹页元素event.preventDefault() 阻⽌事件的默认⾏为(⽐如点击链接,会⾃动打开新页⾯)event.stopPropagation() 停⽌事件向上层元素冒泡4.5 动画效果基点$("p").show() 显⽰隐藏的匹配元素$("p");show("slow") 参数表⽰速度,("slow","normal","fast"),也可以设置为毫秒$("p").hide() 隐藏显⽰的元素$("p").toggle() 切换显⽰/隐藏例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script></head><body><img src="a.jpg">;//定义⼀张图⽚<hr><button class="hide_element">hide</button>;//定义隐藏按钮<button class="show_element">show</button>;//定义显⽰按钮<button class="toggle_element">toggle</button>;//定义切换按钮<script>//定义隐藏的点击事件$(".hide_element").click(function(){$("img").hide()});//定义显⽰的点击事件$(".show_element").click(function(){$("img").show()});//定义切换按钮的点击事件$(".toggle_element").click(function(){$("img").toggle()});</script></body></html>⽤浏览器打开的效果如下:可以看到,图⽚是显⽰的,点击"hide"按钮,图⽚就被隐藏起来,然后再点击"show"按钮,图⽚就⼜会被显⽰出来了.另外,当图⽚显⽰的时候,点击"toggle"按钮,图⽚就会隐藏,⽽当图⽚是隐藏的时候,点击"toggle"按钮,图⽚⼜会显⽰出来.4.6 滑动操作$("p").slideDown("1000") ⽤1000毫秒的时间将段落滑下$("p").slideUp("1000") ⽤1000毫秒的时间将段落滑上$("p").slideToggle("1000") ⽤1000毫秒的时间将段落滑上,滑下例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script></head><body><img src="a.jpg" style="width:500px;height:300px"><hr><button class="slide_up">slide_up</button><button class="slide_down">slide_down</button><button class="toggle">toggle</button><script>//对"slide_up"类绑定点击事件$(".slide_up").click(function(){$("img").slideUp(1000);//⽤1000毫秒的时间将段落收起});//对"slide_down"类绑定点击事件$(".slide_down").click(function(){$("img").slideDown(1000);//⽤1000毫秒的时间将段落滑下});//对"toggle"类绑定点击事件$(".toggle").click(function(){$("img").slideToggle(1000);//⽤1000毫秒的时间将段落滑下或者收起 });</script></body></html>4.7 淡⼊淡出$("p").fadeIn("1000") ⽤1000毫秒时间将段落淡⼊$("p").fadeOut("1000") ⽤1000毫秒时间将段落淡出$("p").fadeToggle("1000") ⽤1000毫秒时间将段落淡⼊,淡出$("p").fadeTo("slow",0.6) ⽤慢速度将段落的透明度调整到0.6例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><img src="a.jpg" style="width:500px;height:300px"><hr><button class="fade_in">fadeIn</button><button class="fade_out">fadeOut</button><button class="fade_toggle">fadeToggle</button><button class="fade_to">fadeTo</button><script>//对"fade_in"类绑定点击事件$(".fade_in").click(function(){$("img").fadeIn(1000);//⽤1000毫秒时间将段落淡⼊});//对"fade_out"类绑定点击事件$(".fade_out").click(function(){$("img").fadeOut(1000);//⽤1000毫秒时间将段落淡出});//对"fade_toggle"类绑定点击事件$(".fade_toggle").click(function(){$("img").fadeToggle(1000);//⽤1000毫秒时间将段落淡⼊或淡出});//对"fade_to"类绑定点击事件$(".fade_to").click(function(){$("img").fadeTo("slow",0.6);//⽤慢速度将图⽚的透明度调整到0.6 });</script></body></html>4.8 页⾯载⼊页⾯载⼊,也就是当页⾯载⼊成功后⽴即运⾏的函数事件$(document).ready(function(){function_suite})也可以简写为:$(function(){function_suite})。
jQuery中on（）方法用法实例
jQuery中on（）⽅法⽤法实例这篇⽂章主要介绍了jQuery中on()⽅法⽤法,实例分析了on()⽅法的功能、定义及在匹配元素上绑定⼀个或者多个事件处理函数的使⽤技巧,需要的朋友可以参考下本⽂实例讲述了jQuery中on()⽅法⽤法。
分享给⼤家供⼤家参考。
具体分析如下：此⽅法可以在匹配元素上绑定⼀个或者多个事件处理函数。
使⽤off()⽅法可以删除on()⽅法绑定的事件。
语法结构⼀:$(selector).on(events,[selector],[data],fn)参数列表:参数描述events⼀个或多个⽤空格分隔的事件类型和可选的命名空间。
selector 可选。
⼀个选择器字符串，⽤以过滤选定的元素，该选择器的后裔元素将调⽤处理程序。
如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
data可选。
作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。
fn该事件被触发时执⾏的函数。
false值也可以做⼀个函数的简写，返回false。
实例代码:实例⼀:<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="/"/><title>脚本之家</title><style type="text/css">div{width:60px;height:60px;border:1px solid green;font-size:12px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){$("div").on("click",function(){$(this).text("脚本之家欢迎您");})})</script></head><body><div>原来内容</div></body></html>以上代码为div绑定⼀个click事件，点击div时候能够为div设置新的⽂本内容。
jQuery中事件绑定
jQuery中事件绑定⼀、前⾔最近在做项⽬中要⽤到jQuery来绑定事件，⾸先想到的是$(selector).事件名();这样绑定事件的⽅式，这种⽅式对事件进⾏绑定其实也就是bind()⽅法，但当选择器匹配的元素过多，$(selector).事件名();对每个元素进⾏迭代绑定，会影响性能。
除了这种⽅式可以绑定事件以外，还有live()(已过期)、delegate()、on()⽅法绑定事件，接下来分析⼀下它们的区别，以及使⽤哪种⽅式最值得推荐。
由于live()⽅法已过期，只分析另外三种，欢迎拍砖、吐槽~~~⼆、⽤法与区别先准备⼀个example，⽤于不同⽅法绑定事件测试与对⽐。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>on()、delegate()、bind()事件绑定测试</title><link rel="stylesheet" type="text/css" href="bootstrap.css"></head><body><div style="width:800px;margin:50px auto;"><botton class="btn btn-success" id="btn">新增⼀个p元素</botton><p>1</p><p>2</p></div><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn').click(function(){$('div').append('<p>新增⼀个p元素</p>');});});</script></body></html>接下来对所有的p元素绑定click事件，如：bind()⽅法：为被选元素添加⼀个或多个事件处理程序，并规定事件发⽣时运⾏的函数。
jq中bind的用法
jq中bind的用法在jq中，`bind()` 方法用于将一个或多个事件处理程序附加到匹配元素上。
语法：().bind(eventType[, eventData][, preventBubble])参数说明：- eventType：必需，一个或多个由空格分隔的事件类型和可选的命名空间，例如"click"、"keydown.myPlugin"。
- eventData：可选，附加到事件对象上的额外数据。
- preventBubble：可选，一个布尔值，指定是否阻止事件冒泡。
`bind()` 方法在一个或多个元素上附加一个或多个事件处理程序，并在事件发生时执行这些处理程序。
可以在事件处理程序中通过`event` 参数来获取事件对象，从而访问与该事件相关的信息，如事件类型、目标元素、键盘按键等。
下面是一些常见的用法和示例：1. 绑定单个事件处理程序：可以将一个单独的函数作为事件处理程序绑定到元素上。
例如，当一个按钮被点击时，显示一个提示框。
("button").bind("click", function(){alert("Button clicked!");});上面的代码将在页面中所有按钮元素上绑定点击事件处理程序，当其中任何一个按钮被点击时，都会弹出一个提示框显示"Button clicked!"。
2. 绑定多个事件处理程序：可以将多个函数作为事件处理程序绑定到元素上，它们将按照绑定的顺序执行。
例如，当一个按钮被点击时，会显示两个不同的提示框。
("button").bind("click", function(){alert("Button clicked first!");});("button").bind("click", function(){alert("Button clicked second!");});上面的代码将在页面中所有按钮元素上绑定两个点击事件处理程序。
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 来处理。
js调用jquery方法
js调用jquery方法
JavaScript可以调用jQuery方法来实现一些功能，下面介绍一些常见的方法：
1. 选择器：使用jQuery的选择器可以方便地获取HTML元素，例如：$('p')表示选择所有的段落元素。
2. 事件绑定：使用jQuery的on()方法可以绑定事件，例如：$('p').on('click', function(){})表示绑定点击事件。
3. 隐藏和显示元素：使用jQuery的hide()和show()方法可以隐藏和显示HTML元素，例如：$('p').hide()表示将所有段落元素隐藏。
4. 修改样式：使用jQuery的css()方法可以修改元素的样式，例如：$('p').css('color', 'red')表示将所有段落元素的颜色修改为红色。
5. 属性操作：使用jQuery的attr()、prop()和val()方法可以操作元素的属性，例如：$('input').val()表示获取所有输入框的值。
6. 动画效果：使用jQuery的动画效果可以让元素呈现出平滑的动态效果，例如：$('p').slideDown()表示让所有段落元素向下滑动。
7. Ajax请求：使用jQuery的ajax()方法可以发送异步请求，例如：$.ajax({url: 'test.php', success: function(result){}})表示发送一个请求到test.php并在请求成功后执行回调函数。
总之，使用jQuery可以方便地操作HTML元素和发送Ajax请求，提高开发效率。
事件绑定的方法
事件绑定的方法1. 直接绑定事件：通过给DOM元素的属性赋予事件处理函数，实现事件绑定。
给按钮元素的onclick属性赋值一个函数名，当按钮被点击时，对应的函数将会被执行。
2. 使用addEventListener方法：这是一种更现代化的事件绑定方式，可以给DOM元素动态地添加或移除事件处理函数。
它接受三个参数：事件类型、事件处理函数和一个可选的布尔值，用于指定事件是在捕获阶段还是冒泡阶段触发。
3. 使用事件委托：事件委托是利用事件冒泡原理，在父级元素上添加事件处理函数，然后利用事件冒泡的特性，当子元素触发事件时，父级元素的事件处理函数也会被触发。
这种方式可以减少事件处理函数的数量，并提升性能。
4. 使用事件代理：与事件委托类似，但是事件代理多了一个中介的角色，即事件代理对象。
通过给事件代理对象绑定事件处理函数，然后在事件处理函数中判断触发事件的元素，从而执行相应的逻辑。
5. 使用jQuery库：jQuery库提供了很多方便的事件绑定方法，如通过选择器选中元素后，使用on方法来绑定事件处理函数。
它还可以通过off方法来解除绑定的事件处理函数。
6. 使用第三方插件：除了jQuery，还有许多其他的第三方插件和库可以用来绑定事件。
React框架有自己的事件绑定方式，Vue框架中使用v-on指令来绑定事件。
7. 使用原生JavaScript的bind方法：bind方法可以用来创建一个新的函数，并绑定指定的this值和参数。
通过使用bind方法，可以将函数作为事件处理函数，并绑定到指定的this上下文。
8. 使用原生JavaScript的call方法：call方法可以用来调用一个函数，并指定this 值和参数。
通过使用call方法，可以将函数作为事件处理函数，并指定this上下文。
9. 使用原生JavaScript的apply方法：apply方法类似于call方法，只是参数的传递方式不同。
通过使用apply方法，可以将函数作为事件处理函数，并指定this上下文。
js select 绑定方法
js select 绑定方法在JavaScript中，要绑定一个方法到一个选择器（selector）上，可以使用事件监听器或者事件委托的方式来实现。
以下是两种常见的方法：1. 使用事件监听器：可以通过document.querySelector或者document.getElementById等方法选中要绑定事件的元素，然后使用addEventListener方法来绑定事件和方法。
例如：javascript.document.querySelector('#myButton').addEventListener('click ', myFunction);这样当id为myButton的按钮被点击时，就会调用myFunction方法。
2. 使用事件委托：事件委托是一种将事件绑定到父元素，然后利用事件冒泡原理来判断具体触发事件的子元素的方法。
这样可以减少事件处理程序的数量，提高性能。
例如，如果有一个ul元素包含多个li元素，我们可以将点击li元素的事件绑定到ul元素上，然后通过event.target来判断具体点击了哪个li元素，从而调用相应的方法。
示例代码如下：javascript.document.querySelector('ul').addEventListener('click', function(event) {。
if (event.target.tagName === 'LI') {。
// 调用相应的方法。
myFunction(event.target);}。
});以上是两种常见的方法，可以根据实际情况选择合适的方式来绑定方法到选择器上。
希望这些信息能够帮助到你。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jQuery三种事件绑定方式.bind(),.live(),.delegate()
.bind(), .live(), 和 .delegate()之间的区别并不明显。
但是理解它们的不同之处有助于写
事件冒泡（也称作事件传递）（Event bubbling aka event propagation）
所以一次点击会触发一个alert。
然后，这个click事件会从DOM树向上传递，传播到父元素，然后传递给每一个祖先元素。
在DOM树中， document 是根节点。
jQuery绑定处理函数到$(document) 元素，并把…click‟ 和…a‟ 作为函数的参数。
有事件冒泡到document节点的时候，检查这个事件是不是click 事件，target element 能不能匹配…a‟ css选择器，如果两个条件都是true，处理函数执行。
速度
上面第二个执行比第一个快，因为第一个会遍历整个文档查找$(…a‟) 元素，并保存为jQuery对象，但是live方法只需要传一个字符串参数‟a'而已，$() 方法并不知道我们会用链式表达式在后面用上.live()。
delegate 方法就只需要找到并存贮$(document)元素就够了。
有一种hack是在$(document).ready()之外调用live方法，这样就会立即执行。
这时候DOM还没有填充，也就不会查找元素或创建jQuery对象。
灵活性和链式语法
这方面live方法依然令人费解。
想一下，它链在$(…a‟)对象，但实际上是在$(document)对象起作用。
因为这个原因，在链式表达式中使用live让人很不安，我觉得live方法变成一个全局的jQuery方法$.live(…a‟,…) 会更有意义。
只支持css选择器
最后，live方法有一个最大的缺点，只能用css选择器，用起来很不方便。
有关css选择器的缺点，参看Exploring jQuery .live() and .die()。
原作者更新
为什么使用 .live() 或 .delegate() 而不用 .bind()
最后，bind 方法看起来更清晰，更直接，是吗？但是这里有两个原因我们推荐delegate 或live:
但是在这里，用live 或delegate 方法绑定的事件会一直传递到事件真正绑定的地方才会执行。
这时其他的函数已经执行过了。