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 相关文章推荐
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
关于vue-router的那些事儿
May 23 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
浅谈layui里的上传控件问题
Sep 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
jsonp原理及使用
2013/10/28 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python过滤列表用法实例分析
2016/04/29 Python
Python调用服务接口的实例
2019/01/03 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Django REST 异常处理详解
2020/07/15 Python
中国制造网:Made-in-China.com
2019/10/25 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
出国签证在职证明
2014/01/16 职场文书
规范化管理年活动总结
2014/08/29 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
七年级作文之秋游
2019/10/21 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
python开发制作好看的时钟效果
2022/05/02 Python