详解jQuery 链式调用
更新时间：2021年05月07日 09:33:41 作者：小白可别不举铁
这篇文章主要介绍了jQuery 链式调用的相关资料，帮助大家更好的理解和学习使用jQuery，感兴趣的朋友可以了解下
链式调用
jQuery对象调用任何方法(除了节点关系方法)执行完后,方法都会有一个返回值,返回值就是jQuery对象自己,这个现象给我们提供了便利,可以对执行结果继续打点调用jQuery的方法和属性。即——可以使用jQuery对象进行连续打点调用
console.log($(this).css("background-color", "pink").html("hello"));
jQuery对象调用除了节点关系的方法之外，其他的方法执行后，返回值就是对象自己，可以继续链式调用其他的jQuery对象的方法和属性。这样可以达到简化代码书写
一个小案例
点击一个元素，使它自己变粉色，兄弟变黄色，其父级变蓝色，父级的兄弟变色，父级的兄弟的自己变橘色
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 60px;
border: 1px solid #000;
margin-top: 2px;
}
.box p,.box h2 {
float: left;
width: 60px;
height: 60px;
margin-right: 20px;
background-color: rgb(164, 247, 233);
}
</style>
<!------------------------------------------------------------------->
<body>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<h2>h2</h2>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<h2>h2</h2>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<h2>h2</h2>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<h2>h2</h2>
</div>
<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
var $p = $("p");
var $box = $(".box")
$p.click(function () {
// 链式调用实现
$(this).css("background-color","pink") //自己变粉色
.siblings().css("background-color","yellow") //自己的兄弟变黄色
.parent().css("background-color","skyblue") //并且自己的父级变蓝色 .siblings().css("background-color","lightgreen") //父级的兄弟跟着变成浅绿色
.children().css("background-color","orange") //父级的兄弟的自己变橘色
})
以上就是详解jQuery 链式调用的详细内容，更多关于jQuery 链式调用的资料请关注脚本之家其它相关文章！
相关文章
本文简单介绍了jQuery对象初始化传参方式，以及具体的示例，是篇非常不错的文章，这里推荐给小伙伴们。2015-02-02
正好项目中准备使用thickbox，于是干脆抛弃prototype.js，看起jquery.js了。JQuery确实不错，体积比Prototype小了许多，而且使用起来更方便更灵活。有人说Prototype像JAVA，正统；而JQuery像Ruby，灵活，更趋于OOP。2009-10-10
今闲着无聊 顺便看了下jquery ui的拖拽插件，实现拖拽的方法很简单，看到效果后兴奋小下...2010-11-11
下面小编就为大家带来一篇jquery <li>标签 隔若干行加空白或者加虚线的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要介绍了jQuery实现的点击标题文字切换字体效果,涉及jQuery基于事件响应实现页面元素属性动态变换相关操作技巧,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了jQuery函数map()和each()介绍及异同点分析,需要的朋友可以参考下2014-11-11
这篇文章主要介绍了jQuery实现微信长按识别二维码的功能，非常不错，具有参考借鉴价值，对jquery长按识别二维码的相关知识感兴趣的朋友一起学习吧2016-08-08
本文主要介绍了Jquery Easyui验证扩展，Easyui验证，Easyui校验，js正则表达式。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
在文章的正文中，往往会出现一些超大的图片，把页面撑开变形，影响了美观。用这段JS代码就可解决这个问题，你可以把图片的最大值限定在一定范围内，当图片大小超出这个尺寸后，就会被自动按比例缩小2012-10-10
在一些电商网站和家居网站上我们会看到这样的应用，一张图片中显示多种商品，点击每个商品可以弹出对应商品的简单介绍，包括价格等等，极大的提高了用户体验，今天我们通过实例给大家分享使用jQuery插件来实现这一效果2016-03-03
最新评论