jquery中获取元素里某一特定子元素的代码


Posted in Javascript onDecember 02, 2014

之前做的一些JQUERY应用都是些很基础的编程,对于选择器要求不高,像类似于“$('.class')”、“$('#id')”、“$('#id>.class')”、“$(this)”、“$(this).parent()”、“$(this).children()”这些简单的语句都能解决的。

问题的出现是我要选择一个ul里某个的li中的一个span,因为要利于编程,li是用 $('ul>li').eq(i) 来做的选择,虽然问题还是能用之前的方法解决,但总感觉代码有点臃肿,而且效率也很低下。既然JQUERY被誉为目前所有JS框架中最高效的代码,不可能连这个问题都要用一大坨代码来解决吧!

回头再翻翻JQUERY的API,才发现有一个非常适合这个场合使用的语句我一直没有注意过。那就是:$(选择器一).find(选择器二)。之前虽然读过find这段介绍,但一直因为用不到而被忽视。

这里说说find()的使用方法
API提供的的解释:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

使用方法:$(选择器一).find(选择器二);

以小剧客栈首页的焦点图,查找类为“.focusphoto”的DL下DD中的span并将其作淡出处理为例:

$('.focusphoto>dl>dd).eq(i).find(”span”).fadeOut('slow');

谈谈小剧对find()的理解

我这个应用实际上完全可以用children()来代替,但这并不是说find()和children()的用法是一样的,如果是这样的话find()的存在便没有了意义。在查询深度为一级的时候,这两者有相同之处,但区别就在于:find()是子查询选择器,它可以深入到子级的下层进行查询选择;而children():只是子级选择器,它只能选择下一层级的元素。

当然,以上仅仅是剧中人的一点拙见,如有错误或不完善的地方,请给于指正,谢谢!

Javascript 相关文章推荐
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
JavaScript分页组件使用方法详解
Jul 26 Javascript
JS逆序遍历实现代码
Dec 02 #Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 #Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 #Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 #Javascript
javascript框架设计读书笔记之种子模块
Dec 02 #Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 #Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 #Javascript
You might like
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
js获取url中"?"后面的字串方法
2014/05/15 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python科学计算之Pandas详解
2017/01/15 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
销售高级职员求职信
2013/10/29 职场文书
校友会欢迎辞
2014/01/13 职场文书
优秀教师工作感言
2014/02/16 职场文书
正科级干部考察材料
2014/05/29 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书