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 相关文章推荐
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 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
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
Python struct模块解析
2014/06/12 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
关于建议书的格式范文
2014/05/20 职场文书
代理人委托书
2014/09/16 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL