jQuery 相关特性

@


1. 隐式迭代

案例

<div>123456<div>
<div>123456<div>
<div>123456<div>
<div>123456<div>
<script>
    //css('style','value'); 该方法为jQuery内部封装好的方法,用于设置样式
	$('div').css('color', 'red');
</script>    

通过上述案例发现4个div内的文字颜色都变红色,css()具体执行步骤为:1、遍历jQuery对象内部所有的元素对象。2、给每一个元素对象添加css这个方法

遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。


2. jQuery的链式操作

链式编程是为了节省代码量,看起来更优雅。

//链式写法:
$(this).css('color', 'red').sibling().css('color', '');
/*分两步:
1. $(this).css('color','red')
2. $(this).sibling().css('color','')
*/

3. jQuery 排他思想

实现多选一的效果, 排他思想: 当前元素设置样式,其余的兄弟元素清除样式

//当前元素对象设置样式
$(this).css('color','red');
//清除当前元素的兄弟元素对象样式
$(this).siblings().css('color','');

//可简写成如下的链式写法
$(this).css('color','red').siblings().css('color','');




作者:Hong•Guo

出处:https://www.cnblogs.com/ghnb1/p/15848571.html

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   Hong•Guo  阅读(42)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示