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 相关文章推荐
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
实例讲解React 组件生命周期
Jul 08 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
phpnow php探针环境检测代码
2014/11/04 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python实现字符串格式化的方法小结
2017/02/20 Python
Python中模块string.py详解
2017/03/12 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
自我评价优秀范文分享
2013/11/30 职场文书
售后客服个人自我评价
2014/09/14 职场文书
个人向公司借款协议书
2014/10/09 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
单位租车协议书
2015/01/29 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python