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 相关文章推荐
Js切换功能的简单方法
Nov 23 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
原生js实现贪吃蛇游戏
Oct 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无限分类的深入理解
2013/06/02 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
javascript回到顶部特效
2016/07/30 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
Python开发编码规范
2006/09/08 Python
python获取本机外网ip的方法
2015/04/15 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
python实现人机五子棋
2020/03/25 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
explicit和implicit的含义
2012/11/15 面试题
代收款委托书范本
2014/10/01 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
php访问对象中的成员的实例方法
2021/11/17 PHP
python脚本框架webpy的url映射详解
2021/11/20 Python