jQuery -- 遍历
来源:互联网 发布:淘宝app我的分享在哪里 编辑:程序博客网 时间:2024/06/01 19:07
jQuery中的遍历方法:
第一种: 向下遍历:
1 children()
2 find()
相同点:
$( "div1” ).children(“#div2”).css( "background-color", "red" ); $( "div1” ).find(“#div2”).css( "background-color", "red" );
上面两个方法,都可以修改 div1 内部的 div2 模型的颜色
不同点:
如果 div1 内部有多个层次的子元素,那么children只能改变 div1 之后的第一层子级
而find () 可以通过传递参数,寻找到 div1 模型中任意一个层次的子级元素,而且find是必须要传入参数,而children默认是传入子级元素的参数
第二种: 向上遍历
1 parent() 只能寻找到直接父类
2 parents() 能向上遍历所有的元素
3 parentsUntil() 遍历一个区间
// 只能向上遍历一层$( "div4” ).parent(“#div3”).css( "background-color", "red" );// 向上遍历到最外层父类,改变所给的参数元素属性$( "div4” ).parents( “#div1”).css( "background-color", "red" );// 遍历一个区间,不包括边界的 div4 和 div1,修改区间内的所有元素属性$( "div4” ).parents(“#div1” ).css( "background-color", "red" );
第三种: 同级之间的遍历
在一个div中有多个p标签:
方法包含:
1 siblings () 修改与其同级的所有元素
2 next () 修改下一个元素
3 nextAll () 修改之后的所有
4 nextUntil () 修改一个区间的 所有元素,不包括边界,方向只能向下
5 prev() 作用与 next系列相同,方向向上
6 preAll ()
7 preUntil ()
$( “#p1” ).sibings().css( "background-color", "red" );$( “#p1” ).next().css( "background-color", "red" );$( “#p1” ).nextAll().css( "background-color", "red" );$( “#p1” ).nextUntil(“#p3”).css( "background-color", "red" );
第四种: 过滤
在一个div中包含多个p标签,而且没有id:
方法包含:1 first () 元素中的第一个2 last () 元素中的最后一个3 eq() 需要传入想要修改的下标4 filter () 5 not ()
$( “div p” ).first().css( "background-color", "red" );$( “div p” ).last().css( "background-color", "red" );$( “div p” ).eq(1).css( "background-color", "red" ); // 下标计数从0开始,如果符合的只有一个,那么越界。$( “div p” ).filter(“p”).css( "background-color", "red" ); // 创建一个满足条件的集合,并返回$( “div p” ).not(“p”).css( "background-color", "red" ); // not 和 filter的作用相反,返回的是不满足条件的集合
0 0
- JQuery遍历
- JQUERY遍历
- Jquery遍历
- jquery遍历
- jQuery 遍历
- jQuery 遍历
- jQuery 遍历
- jquery 遍历
- jQuery 遍历
- jQuery 遍历
- jQuery遍历
- JQuery 遍历
- jQuery 遍历
- jQuery遍历
- jQuery 遍历
- JQuery 遍历
- jQuery遍历
- jquery 遍历
- 5月份FPGA总结.
- PPT中如何对齐多个对象
- 49.表示数值的字符串
- RHEL7内核模块的操作和使Linux系统支持ntfs读写
- static auto extern register变量存储类型
- jQuery -- 遍历
- BZOJ 2818——Gcd
- HDOJ1004
- iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控
- vb6.0的学习心得
- 查询自动售货机中商品的价格
- 用户接口指南
- JAVA线程-示例代码
- [线性代数] 矩阵#1