断链

<script>
//获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件
$(function () {
//获取ul->li
$("ul>li").mouseenter(function () {
$(this).css("backgroundColor","red").siblings().css("backgroundColor","");
}).mouseleave(function () {
$(this).css("backgroundColor","").siblings().css("backgroundColor","");
}).click(function () {
  //当前元素前面的所有兄弟元素背景颜色为黄色
  $(this).prevAll().css("backgroundColor","yellow");
  //当前元素后面的所有兄弟元素背景颜色为蓝色
  $(this).nextAll().css("backgroundColor","blue");

  //链式编程代码
  //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,
  //解决断链--->恢复到断链之前的一个效果--修复断链
  end()方法恢复到断链之前的效果
  $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
  });
});
</script>

posted @ 2020-04-09 15:38  花木兰r  阅读(217)  评论(0编辑  收藏  举报