JQuery第四天笔记之链式编程篇
今天为各位小伙伴讲解一下JQuery里面的链式编程
链式编程的好处:链式编程可以把原来的多行代码合并成一行代码,极大地提高了开发效率,所以链式编程受到了许多小伙伴的喜爱
如果才能进行链式编程呢?
首先你需要看代码返回的结果是不是对象,是对象才可以进行链式编程,不是对象则不能进行链式编程
下面通过一个案例,演示一下链式编程
要求:通过点击页面中的按钮,修改div元素的颜色并且在div中插入一段文字,利用链式编程的方式来实现,代码示例如下
下面是点击按钮前在浏览器中呈现的样子
接下来是点击按钮后再浏览器中呈现的样式
此时我们可以很明显的看到div的背景颜色被改变了,而且在后侧的console中打印出来的也是一个对象,这表示返回的结果是一个对象,那么我们就可以放心的进行链式编程了,代码示例如下
效果截图如下
有的小伙伴说为什么上面的例子写的这么简单呢,在这里主要是为了照顾初学者小伙伴的感受,例子虽然很简单,但是能够把链式编程的过程讲解清楚就可以了。
接下来来一个深入的例子
获取列表中每个li,然后当鼠标进入后,当前进入的li有高亮显示效果,点击的时候可以改变当前li的字体大小和颜色
代码截图如下
接着讲解JQuery中获取兄弟元素的一些方法
next():表示当前元素之后的第一个兄弟元素
nextAll():表示当前元素之后的所有的兄弟元素
prev():表示当前元素之前的第一个兄弟元素
prveAll():表示当前元素之前的所有的兄弟元素
siblings():表示当前元素的所有兄弟元素
断链:表示的是当前元素返回的不是对象,那么此时我们边不能进行链式编程了
解决断链:找到是在哪里断链的,那么就在哪里修复断链,只需要给断链的地方添加上一个end()方法,就可以修复断链了
修复完断链之后,我们就可以继续的在后面进行链式编程了
JQuery的链式编程就讲解到这里哈,谢谢大家的支持,如果觉得写的还不错的话,记得点赞呦。
希望大家积极发表建议哈!谢谢大家的支持