实例详解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>
<div>
<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>
</div>
</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链式编程内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
使用JavaScript链式编程实现模拟Jquery函数
代码很简单,主要是给大家提供个思路,也算是学习javascript这么长时间的一个小小的练手. 链式编程 是将多个操作(多行代码)通过点号"."链接在一起成为一句代码.链式代码通常要求操作有返回值,但对于很多操作大都是void型,什么也不返回,这样就很难链起来了,当然也有解决办法,可能不太优雅.链式编程的新思想在jQuery中已流行使用 复制代码 代码如下: <span>Hello,World!</span> <script type="tex
-
实例详解jQuery的链式编程风格
链式编程的实现原理 jQuery可以让我们开发者一直使用点语法调用自身方法的原理,主要原因是jQuery内部利用了js的对象来实现. 在jQuery中,如果一直对同一个元素或元素的其他关系元素(兄弟元素,父子元素)进行操作,那么可以使用 .语法(点语法),一直写下去. $("#box").css("background", "pink").css("font-size":"29px"); $("#
-
实例详解jQuery Mockjax 插件模拟 Ajax 请求
1. 原理 jquery-mockjax是用于mock 前台ajax向后台请求的返回数据. 原理很简单 在你js代码要发送ajax请求的地方断点一下,然后比较在[引入jquery-mockjax] 和 [没有引入jquery-mockjax]的情况下$.ajax.toString()的值情况. 很明显,引入jquery-mockjax时,这个mock库会对jquery提供的ajax函数做替换.这样就很容易能mock起来. 在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这
-
实例详解jQuery表单验证插件validate
validate插件是一个基于jquery的表单验证插件了里面有许多的常用的一些验证方法我们可以直接调用,具体的我们一起来看看. 例子,html代码 <!DOCTYPE html> <html lang="en"> <head> <include file="Common/Header" /> <meta charset="utf-8"> <script src="/jq
-
实例详解jQuery的无new构建
jQuery的无new构建 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 回想一下使用 jQuery 的时候,实例化一个 jQuery 对象的方法: // 无 new 构造 $('#test').text('Test'); // 当然也可以使用 new var test = new $('#test'); test.text('Test'); 大部分人使用 jQuery 的时候都是使用第一种无 new 的构造方式,直接 $('') 进行构造,这也是 jQuery 十分便捷的
-
详解c/c++链式堆栈描述进制转换问题示例
目录 创建栈结构 代码实现 基础操作需要创建链表来存储数据 使用尾插法和尾删法来表示栈中的入栈和出栈 typedef struct node { int data; struct node* next; }Node,*LPNode; LPNode creatnode(int data) { LPNode newnode = (LPNode)malloc(sizeof(Node)); assert(newnode); newnode->data = data; newnode->next = N
-
实例详解jQuery结合GridView控件的使用方法
jQuery是一种非常强大的客户端JS编程技术,这里不想过多阐述它的相关背景知识,只想简单演示一下如何与asp.net的控件结合开发. 比如,我们要做一个下面如图所示的功能,效果是状态.编号.数字1.数字2.平均值所有的项都是通过后台绑定,如何点击checkbox按钮,来实现自动计算当前行两个数字的平均值呢?前提是用jQuery来实现? 我们直接在页面的Page_Load事件中输入如下代码: protected void Page_Load(object sender, EventArgs e)
-
JavaScript 引用类型实例详解【数组、对象、严格模式等】
本文实例讲述了JavaScript 引用类型.分享给大家供大家参考,具体如下: 数组 在ECMAScript中数组是非常常用的引用类型 ECMAScript所定义的数组和其他语言中的数组有着很大的区别 数组也是一种对象 创建数组 //方法一 var arr = new Array(); //方法二 var arr1 = []; 特点 数组即一组数据的集合 js数组更加类似java的map容器.长度可变,元素类型任意 数组长度随时可变!随时可以修改!(length属性) var arr1 = [1
-
详解jQuery 链式调用
链式调用 jQuery对象调用任何方法(除了节点关系方法)执行完后,方法都会有一个返回值,返回值就是jQuery对象自己,这个现象给我们提供了便利,可以对执行结果继续打点调用jQuery的方法和属性.即--可以使用jQuery对象进行连续打点调用 console.log($(this).css("background-color", "pink").html("hello")); jQuery对象调用除了节点关系的方法之外,其他的方法执行后,返回
-
Java编程思想对象的容纳实例详解
Java提供了容纳对象(或者对象的句柄)的多种方式,接下来我们具体看看都有哪些方式. 有两方面的问题将数组与其他集合类型区分开来:效率和类型.对于Java来说,为保存和访问一系列对象(实际是对象的句柄)数组,最有效的方法莫过于数组.数组实际代表一个简单的线性序列,它使得元素的访问速度非常快,但我们却要为这种速度付出代价:创建一个数组对象时,它的大小是固定的,而且不可在那个数组对象的"存在时间"内发生改变.可创建特定大小的一个数组,然后假如用光了存储空间,就再创建一个新数组,将所有句柄从
-
C++ 中 socket编程实例详解
C++ 中 socket编程实例详解 sockets(套接字)编程有三种,流式套接字(SOCK_STREAM),数据报套接字(SOCK_DGRAM),原始套接字(SOCK_RAW):基于TCP的socket编程是采用的流式套接字.在这个程序中,将两个工程添加到一个工作区.要链接一个ws2_32.lib的库文件. 服务器端编程的步骤: 1:加载套接字库,创建套接字(WSAStartup()/socket()): 2:绑定套接字到一个IP地址和一个端口上(bind()): 3:将套接字设置为监听模式