这篇文章主要给大家分享jQuery链式调用的内容，下文有对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链式调用的内容，大家可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS截取字符串常用方法有几种，存在什么区别呢?

  js中有三个截取字符的方法，分别是substring()、substr()、slice()，平时我们可能都用到过，但总是会对这些方法有点混淆，特别是substring()和substr()，连方法名都差不多，下面就具体来看一下区别。

• canvas制作雨滴下落至消失的特效方法是怎样

  这篇文章主要为大家详细介绍了JavaScript canvas实现雨滴特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 使用mysql-libmysqlclient报错该怎么办

  因为要用到mysql-libmysqlclient模块，所以运行以下的命令进行安装npminstallmysql-libmysqlclient报错如下： 这是因为对Mysql的一些环境变量的目录没有配置好。先安装Mysql，Mac如何安装这里不细说，Mysql的官网有专门的Mac的dmg包下载，去官网下载，然后用鼠标戳几下就好了然后把Mysql的bin目录添加到PATH的环

• vue-cli3配置全局scss怎样实现，报错怎么办呢

  目录vue-cli3配置全局scss报错vue-cli3配置全局scss变量1. 找到vue.config.js文件2. 在文件内编写如下代码3. 重启项目,即可使用vue-cli3配置全局scss报错在vue.config.js配置的时候用prependData不要用datasass: {  // 根据自己样式文件的

• JS中click事件常用的有哪些，是怎样的

  本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于常用的click事件的相关内容，包括了onclick异步性、同步性、事件触发的先后顺序以及时间注册等内容，下面一起来看一下，希望对大家有帮助。