jQuery之美——链式语法

版权声明:黄河爱浪,[email protected], https://blog.csdn.net/u013350495/article/details/82532519

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

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前端梦之蓝

用微信扫描下方的二维码可直接关注该公众号哦,或者打开微信公众号搜索 “web-7258”,关注后会在第一时间将最新文章推送给您哦!

猜你喜欢

转载自blog.csdn.net/u013350495/article/details/82532519