jquery中children()与find()用法区别详解
来源:互联网 发布:c语言判断数字的位数 编辑:程序博客网 时间:2024/06/06 00:42
1.children()是一个筛选器,顾名思义就是筛选子元素,筛选那些符合条件的子元素。
完整的格式如下:.children(expr)
其中children是筛选器的名称,expr是表达式,所有选择器中的表达式都可以用在这,比如按标签名”div”,按类名”.class”,按序号”:first”等等,如果表达式为空,那么返回的是所有的孩子,返回的结果仍为jQuery对象。
jquery取索引使用eq函数。
eq() 选择器选取带有指定 index 值的元素。
index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。
经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素。
例子:
$(‘#test’).children().eq(1).css({‘display’:’inline-block’});
将id为test的元素的第二个子元素样式设置为’display’:’inline-block’。
另一种写法
$(“:eq(index)”)如:$(“p:eq(1)”)
2.find() 搜索所有段落中的后代 span 元素,并将其颜色设置为红色:
例子:
$(“p”).find(“span”).css(‘color’,’red’);
定义和用法
find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
语法
.find(selector)
find() 方法第一个明显特征是,其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。
请思考下面这个简单的嵌套列表:
<ul class=”level-1″>
<li class=”item-i”>I</li>
<li class=”item-ii”>II
<ul class=”level-2″>
<li class=”item-a”>A</li>
<li class=”item-b”>B
<ul class=”level-3″>
<li class=”item-1″>1</li>
<li class=”item-2″>2</li>
<li class=”item-3″>3</li>
</ul>
</li>
<li class=”item-c”>C</li>
</ul>
</li>
<li class=”item-iii”>III</li>
</ul>
我们将从列表 II 开始来查找其中的列表项:
$(‘li.item-ii’).find(‘li’).css(‘background-color’, ‘red’);
.item-ii下的所有li的背景色全变成红色
通过以上的解释,可以总结如下:
1:children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样。
2:children方法获得的仅仅是元素一下级的子元素
3:find方法获得所有下级元素
4:children方法的参数selector 是可选的(optionally),用来过滤子元素,但find方法的参数selector方法是必选的。
- jquery中children()与find()用法区别详解
- jquery中find与children的区别
- jQuery:find()与children()区别
- 基于jquery中children()与find()的区别介绍
- jquery中find,children,contents的区别
- jquery中children()、find()的区别
- jQuery中children()和find()的区别
- jquery中find()和children()的区别
- jquery find children 区别
- jquery遍历之children()与find()的区别
- jquery中find方法和children方法的区别
- jquery中find方法和children方法的区别
- jQuery中focusin()和focus()、find()和children()的区别
- jquery中filter,children,find三者的区别?
- jquery中选择器children和find的区别
- jQuery:find()及children()的区别
- jquery的find和children区别
- 通过一个例子了解filter()和find()的用法/children()与find()区别
- 数据库迁移、版本控制管理工具-Flyway
- 如何退出Node命令行环境
- OpenCV初探:一、windows桌面程序示例
- network interface card 网络接口卡
- 号称性能最好的JDBC连接池:HikariCP
- jquery中children()与find()用法区别详解
- hibernate getCurrentSession和Spring事务管理集成
- java 中try catch finally 与return位置的关系
- 1.A+B Problem
- 自动布局方法教程
- python os模块方法总结
- iOS中常用动画大集合
- 解决IE8不兼容HTML5标签的方法
- 多线程知识学习