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生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
Javascript String.replace的妙用
Sep 08 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
js实现拾色器插件(ColorPicker)
May 21 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实现MySQL数据库备份与还原类实例
2014/12/09 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
查找iframe里元素的方法可传参
2013/09/11 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
vue的mixins属性详解
2018/03/14 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
Python中格式化format()方法详解
2017/04/01 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Django如何将URL映射到视图
2019/07/29 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
python如何进入交互模式
2020/07/06 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
Java如何读取CLOB字段
2013/10/10 面试题
《记金华的双龙洞》教学反思
2014/04/19 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
人民检察院起诉书
2015/05/20 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis