一、链式编程

在jQuery中，如果一直对同一个元素进行函数操作，那么可以使用 .函数操作名，一直写下去。

二、常用绑定事件函数的链式编程

举例：

             //这是普通的事件绑定$("button").click(function() {console.log("1")})$("button").mouseenter(function() {console.log("2")})$("button").mouseleave(function() {console.log("3")})//与上文功能相同的链式编程$("button").click(function() {console.log("1")}).mouseenter(function() {console.log("2")}).mouseleave(function() {console.log("3")})

实现链式编程的核心，是函数调用结束之后返回的this对象，指的是当前调用者。这里的$("button").click(function(){})调用结束之后，返回this对象，它相当于$("button")，这样和后面的合在一起就实现了$("button").mouseenter(function() {})的函数调用，以上就是链式编程实现的一般步骤。

三、on函数的链式编程

举例：

         //普通写法$("#btn1").on("click",function(){console.log("点击事件")})$("#btn1").on("mouseenter",function(){  //注意这里的on函数的链式编程console.log("鼠标聚焦事件")})$("#btn1").on("mouseleave",function(){  //注意这里的on函数的链式编程console.log("鼠标失焦事件")})//链式编程$("#btn1").on("click",function(){console.log("点击事件")}).on("mouseenter",function(){  //注意这里的on函数的链式编程console.log("鼠标聚焦事件")}).on("mouseleave",function(){  //注意这里的on函数的链式编程console.log("鼠标失焦事件")})

这里的on函数链式编程，函数调用结束之后，会隐式返回this关键字，表示当前调用的对象，这里第一个on函数调用结束之后，返回的this关键字表示的就是$("#btn1")，所有之后再加上on函数是顺理成章的事情。

四、bind函数的链式编程

举例：

             //普通写法$("button").bind({"click":function(){console.log("点击事件")}})$("button").bind({"mouseenter":function(){console.log("鼠标聚焦事件")}})$("button").bind({"mouseleave":function(){console.log("鼠标离焦事件")}})//链式编程$("button").bind({"click":function(){console.log("点击事件")},"mouseenter":function(){console.log("鼠标聚焦事件")},"mouseleave":function(){console.log("鼠标离焦事件")}})

这里的bind函数链式编程，是将多个参数同时放在bind函数中，这是因为每个参数是以字典的形式存储，有着相同的格式，所以才可以同时作为并列参数放在bind函数中，需要记住这样的格式。

五、混合使用

举例：

 //混合使用$("button").bind({"click":function(){console.log("点击事件")}})$("button").bind({"mouseenter":function(){console.log("鼠标聚焦事件")}}).mouseleave(function(){console.log("混合使用的离焦事件")})

运行结果：

需要明白链式编程中各个函数的并列关系，这样在混合使用的时候，就知道到底是在哪里进行编写代码。

六、总结

链式编程在当前的代码编写过程中十分重要，本文只是针对jQuery中的绑定事件函数进行举例，实际在其他函数中使用的也是非常多的，需要我们平时多加注意和练习。

jQuery---链式编程相关推荐

009_jQuery链式编程
1. jQuery方法链接 1.1. 有一种名为链接(chaining)的技术, 允许我们在相同的元素上运行多条jQuery命令, 一条接着另一条. 1.2. 这样的话, 浏览器就不必多次查找相同的元 ...
JavaScriptJQuery_jQuery链式编程
jQuery链式编程在jquery中,链式编程指的是对同一个元素一直进行函数操作:链式编程是将多行代码合并成一行代码,每一个合并的方法返回的结果是元素对象才可以进行链式编程,语法为"元素对 ...
jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件
jQuery事件: jQuery中的事件和javascript中的事件基本相似,不同的是jQuery中的事件处理函数写在事件后面的括号中,如: <script>$('input').cli ...
jQuery 节流阀/链式编程 /插件
节流阀: keydown 事件缺点:当键盘一直处于按下时,事件会一直在触发. 解决: 节流阀, 当键盘按下时,如果没抬起, 阻止下一次事件触发 . 1.定义一个变量默认为true var ...
JavaScript——jQuery AJAX链式编程(流式编程)DEMO
基本概念链式编程:设计模式之一 DEMO doSubmit: function(){ return $.ajax({url: url,type: 'post',data: $("#fm&q ...
按键改变元素背景颜色链式编程的原理评分案例 each方法的使用
按键改变元素背景颜色 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
验证用户输入的是不是中文名字淘宝精品案例元素样式设置的方式链式编程
验证用户输入的是不是中文名字 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
Object-C 关于「链式编程」与「函数式编程」简单实践
第一次来「掘金」发文章~ 「函数式编程」:每个函数都有返回,函数作为第一类对象「链式编程」:函数返回的对象继续进行函数,组成一串长链(函数式编程的体现?) 拿 jQuery 简单举个例子 var t ...
22.仿淘宝五角星评论（链式编程、隐式迭代）
试玩(淘宝案例在下面): 效果: <!DOCTYPE html> <html lang="en"> <head><meta charset ...
java链式编程_Java链式编程学习
Java链式编程在使用jquery时肯定对它的链式编程惊艳到,慢慢的其它语言这种编程模式也逐渐增多.其本身并不复杂,在调用方法时,方法最后返回对象本身,以达到链式编程的效果. 链式编程比较简单,只要 ...

jQuery---链式编程

文章目录

一、链式编程

二、常用绑定事件函数的链式编程

三、on函数的链式编程

四、bind函数的链式编程

五、混合使用

六、总结

jQuery---链式编程相关推荐

最新文章

热门文章