console.log($(this).css("background-color", "pink").html("hello"));
jQuery对象调用除了节点关系的方法以外,其余的方法执行后,返回值就是对象本身,能够继续链式调用其余的jQuery对象的方法和属性。这样能够达到简化代码书写javascript
点击一个元素,使它本身变粉色,兄弟变黄色,其父级变蓝色,父级的兄弟变色,父级的兄弟的本身变橘色css
<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") //父级的兄弟的本身变橘色 })