链式编程jquery(实例详解jQuery的链式编程风格)
类别:编程学习 浏览量:2354
时间:2022-01-22 01:36:16 链式编程jquery
实例详解jQuery的链式编程风格链式编程的实现原理
jQuery可以让我们开发者一直使用点语法调用自身方法的原理,主要原因是jQuery内部利用了js的对象来实现。
在jQuery中,如果一直对同一个元素或元素的其他关系元素(兄弟元素,父子元素)进行操作,那么可以使用 .语法(点语法),一直写下去。
$("#box").css("background", "pink").css("font-size":"29px"); $("#box").siblings().css("background", "");
可以写成:
$("#box").css("background", "pink").siblings().css("background", "red");
实现链式编程jQuery选择器本身是一个jquery对象。jQuery内部利用this返回了自己本身。
//js中,声明一个对象 var obj = { name:"姓名", desc: function(){ console.log(this); // 打印当前自身对象 console.log(this.name); // 调用自身对象的属性 return this; // 实现链式编程的原理,就是在调用方法后,方法本身返回对象。 }, read: function(){ console.log("hello!"); return this; }}
jQuery的链式编程风格实例
首先本人通过一个案例来展示jQuery的链式编程风格。先写一个页面,展示一个列表,代码如下:
<body> <li> <ul class="menu"> <li class="level1"> <a href="#">水果</a> <ul class="level2"> <li><a href="#">苹果</a></li> <li><a href="#">菠萝</a></li> <li><a href="#">香瓜</a></li> </ul> </li> <li class="level1"> <a href="#">主食</a> <ul class="level2"> <li><a href="#">面条</a></li> <li><a href="#">馒头</a></li> <li><a href="#">米饭</a></li> </ul> </li> </ul> </li> </body> <script type="text/javascript"> $(function() { $(".level1 > a").click(function() { $(this).addClass("current").next().show().parent.siblings().children("a").removeClass("current").next().hide(); return false; }); }); </script>
代码执行后的效果如下图所示:
上述代码的扩展效果就是通过jQuery的链式操作实现的,所有增加current类的操作、查询子元素的方法调用、动画方法的调用等都是对同一个元素进行的,所以在开始获取到一个jQuery对象后,后面的所有方法、属性的调用都通过 “.” 进行连续调用即可,这种模式就是链式操作。
为了增加代码的可读性和可维护性,我们将上面的链式代码格式的修改如下:
<script type="text/javascript"> $(function() { $(".level1 > a").click(function() { // 给当前的元素添加current样式 $(this).addClass("current") // 下一个元素显示 .next().show() // 父元素的同辈元素的子元素a移除current样式 .parent.siblings().children("a").removeClass("current") // 他们的下一个元素隐藏 .next().hide(); return false; }); }); </script>
经过规范格式的调整后,增加了代码的易读性,更加方便后期的维护。
与此同时,我们对于同一个jQuery对象进行链式操作时,主要遵循下面3条格式规范。
(1)对于同一个对象不超过3个操作,可以直接写成一行,代码如下:
<script type="text/javascript"> $(function() { $("li").show().unbind("click"); }); </script>
(2)对于同一个对象的较多操作,建议每行写一个操作,代码如下:
<script type="text/javascript"> $(function() { $(this).removeClass("mouseout") .addClass("mouseover") .stop() .fadeTo("fast", 0.5) .fadeTo("fast", 1) .unbind("click") .click(function() { ....... }); }); </script>
(3)对于多个对象的少量操作,可以每个对象写一行,如果涉及子元素,可以考虑适当的缩进。代码如下:
<script type="text/javascript"> $(function() { $(this).addClass("highLight") .children("a").show().end() .siblings().removeClass("highLight") .children("a").hide(); }); </script>
以上就是有关jQuery的链式编程风格。
总结
到此这篇关于jQuery链式编程风格的文章就介绍到这了,更多相关jQuery链式编程内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- jQuery toggleClass
- jquery插件开发
- jquery解析xml
- jquery中hasClass()、is()判断是否包含指定的class
- jquery中animate
- jquery中filter
- jquery弹出窗口过渡效果(jQuery实现大屏滚动播放效果)
- jquery左右选择框
- jquery实现微信中长按识别二维码
- jquery鼠标滑过显示提示框
- jquery的直接设置下拉框的选中值(jquery实现户籍地选择下拉框)
- jQuery如何操作下拉框select
- jquery图片轮播代码
- jquery隐藏动画教程(jquery插件实现鼠标隐藏)
- jquery中使用detach 移除元素
- jquery中find()与filter()的区别
- 《小敏家》金波想要复婚 这只是他圈套的第1步,更可恶的在后面(小敏家金波想要复婚)
- 小敏家 剧情离谱一锅乱炖,但他们俩绝对是这部剧的一大 亮点(剧情离谱一锅乱炖)
- 《倚天屠龙记》再遭翻拍,关晓彤主演赵敏,蒋劲夫演张无忌,你怎么看(倚天屠龙记再遭翻拍)
- 吴启华与曾舜晞两代张无忌同框,戏里经典的他却没活出原著的潇洒(吴启华与曾舜晞两代张无忌同框)
- 经常发这三种 朋友圈 的人,要迅速屏蔽(经常发这三种朋友圈)
- 有种尴尬叫朋友圈忘屏蔽,大学生上演社死现场,父母亲自下场吐槽(有种尴尬叫朋友圈忘屏蔽)
热门推荐
- docker安装java8(docker安装java环境的实现步骤)
- python能操作微信定时发消息(python给微信好友定时推送消息的示例)
- python入门之字符串处理(Python中常用的8种字符串操作方法)
- docker打包镜像命令(docker 打包本地镜像,并到其他机器进行恢复操作)
- sqlserver技术文档(sql server2016里面的json功能浅析)
- jenkins 设置gitlab(jenkins+gitlab+nginx部署前端应用实现)
- C#匿名类
- html5布局(Html5让容器充满屏幕高度或自适应剩余高度的布局实现)
- docker自动执行镜像(docker实现重新打tag并删除原tag的镜像)
- linux中基本操作系统有什么(Linux操作系统的概述与简介)