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的面向对象(二)
Nov 09 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
理解JavaScript原型链
Oct 25 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
php在线打包程序源码
2008/07/27 PHP
PHP脚本中include文件出错解决方法
2008/11/20 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
你真的了解JavaScript吗?
2007/02/24 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
原生JavaScript实现todolist功能
2018/03/02 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
python实现拼图小游戏
2020/02/22 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
phpquery中文手册
2021/03/18 PHP
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
读书心得体会
2013/12/28 职场文书
退休感言
2014/01/28 职场文书
工会经费申请报告
2015/05/15 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL