讨论jQuery的文章很多。然而，关于jQuery的链式操作的文章并无多少。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。

下面就来讲讲jQuery的链式操作。

很多时候我们写代码的时候会这样去写:

$("div").css("background","#eee")
$("div").text("关注前端，关注用户体验-冀");

这重复的去获取DIV这个节点非常影响性能，这时你可能会想到这样去写：

var div = $("div")
div.css("background","#eee")
div.text("关注前端，关注用户体验-冀");

不错，这样写也对，也是优化了重复去寻找节点。但是有没有更为简便的方法去写代码呢？

答案就在jQuery链式操作，这是个非常好的减少代码的书写方式，也去优化了性能方面的问题。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid saddlebrown;
}
</style>
</head>
<body>

<div></div>

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("div").css("background","#eee").text("关注前端，关注用户体验-冀");
</script>
</body>
</html>

实现的原理就是在对象上的方法加上

return this

这样的方式简单明了，一行代码解决，好的代码就是这样的产生的，关注好的代码，关注好的代码速写，请关注我。

jQuery链式操作的更多相关文章

  1. JQUERY链式操作实例分析

    本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...

  2. jQuery链式操作[转]

    用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...

  3. jQuery链式操作如何返回上一级DOM

    有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...

  4. 强大的JQuery链式操作风格

    实例代码 <style type="text/css"> #menu {width: 300px;} .has_children {background:#555;co ...

  5. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  6. jquery中链式操作的this指向

    jquery中链式操作是如何实现? 例如:$(obj).children().css('color','red').next().css('color','red').siblings().css(' ...

  7. jQuery对象的链式操作用法分析

    可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...

  8. PHP链式操作输出excel（csv）

    工作中经常会遇到产品运营让导出一些简单的比较规范的数据,这时候要是有一个简单的方法可以用就简单多了.下面是我的一个输出简单的excel(csv)的方法类,用到了链式操作.说到链式操作,在jquery中 ...

  9. js实现链式操作

    前言:前不久阿里远程面试时问了我一个问题,如下: function Person(){}; var person = new Person(); //实现person.set(10).get()返回2 ...

随机推荐

  1. Visual Studio调试之断点基础篇

    Visual Studio调试之断点基础篇 我曾经问过很多人,你一般是怎么调试你的程序的? F9, F5, F11, F…… 有很多书和文章都是介绍怎么使用Visual Studio编写WinForm ...

  2. 转：Spine.JS+Rails重客户端Web应用技术选型思路：『风车』架构设计

    原文来自于:http://www.infoq.com/cn/articles/fengche-co-architecture 风车这个项目开始于 2011 年 11 月份,之前叫做 Pragmatic ...

  3. 转：MFC网络编程学习

    要学习好网路编程,主要看以下几个方面: 1.掌握概念,诸如:同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)等. 2.在实际Windows网络通信软件开发中,异步非阻 ...

  4. CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 之 （四）问题汇总

    关于外网无法访问虚拟机centos的问题 此一般由于centos默认防火墙配置,导致外部不允许访问80端口(或其他如9000端口).解决方法如下: 1.加入80端口的防火墙规则 /sbin/iptab ...

  5. delphi线程的创建、挂起、激活与终止（用绘图做实验，简单又好用）

    unit Unit1; interface usesWindows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, ...

  6. vbox端口转发

    端口转发:setting->network->adapter:attached to NAT.port forwarding rules->name    protocol     ...

  7. 30种IT技能让你年薪过10万美元！

    科技行业的高薪岗位向来不少,但在不断变化的职场中,热门技能却随时在变:今天的热门技术,明天可能就会过时.美国求职网站 Dice.com 最近发布了 2015 年薪酬报告,通过对 23,470 位 IT ...

  8. Codeforces Round #301 (Div. 2) E . Infinite Inversions 树状数组求逆序数

                                                                    E. Infinite Inversions               ...

  9. 轻量级mvvm Web开发框架 postby:http://zhutty.cnblogs.com

    今天特别郁闷,怎么说呢,之前一直就用angular,然后这两天用的是avalon这东西,反正,一开始没时间去玩它,第一个任务就是封装个jq插件,实现一个小功能.反正呢,就是越写越郁闷.用过angula ...

  10. Ubuntu16.04下部署 nginx+uwsgi+django1.9.7（虚拟环境pyenv+virtualenv）

    由于用的新版本系统,和旧的稍有差别,在网上搜了很多相关资料,搞了三天终于搞好在Ubuntu16.04下的部署,接下来就详细写写步骤以及其中遇到的问题.前提是安装有虚拟环境pyenv+virtualen ...