jQuery之美——链式语法

Posted 2021-04-08 WEB前端梦之蓝

链式语法，什么是链式语法？链式语法有什么作用？如何书写链式代码？

jQuery的这种链式代码，总的来说：节约JS代码；所返回的都是同一个对象，可以提高代码的效率。通过简单扩展原型方法并通过return this的形式来实现跨浏览器的链式调用。

下面通过一个简单的例子来说明上面的问题

<!-- html -->
<div id="div" title="jQuery之美">WEB前端</div>

/* HTML修改为 '梦之蓝' */
$("#div").html("梦之蓝");
/* 字符大小设置为 80px */
$("#div").css("font-size","80px");
/* 获取元素的 title 属性值 */
var title = $("#div").attr("title");

上面的代码对 #div 元素做了3件事，修改HTML内容，修改CSS样式，获取元素属性。但是代码不够优雅，如果用 链式语法 该如何去做呢？请看下面的代码

var title=$("#div").html("梦之蓝")
    .css("font-size","80px")
    .attr("title");

由于宽度问题，代码折行，请自行写行写成一行。

从上面例子可比较出，在功能完美实现的同时，又兼顾了代码美观。更多的是了解了jQuery支持链式语法的特点，从而更懂得jQuery之美。

下篇预告：jQuery之美——隐式遍历

更多精彩文章，敬请持续关注——WEB前端梦之蓝