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 full screen 全屏显示页面元素的方法
Sep 27 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
vscode中Vue别名路径提示的实现
Jul 31 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
PDO::prepare讲解
2019/01/29 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
python 数据加密代码
2008/12/24 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
高级Java程序员面试题
2016/06/23 面试题
家居装修公司创业计划书范文
2014/03/20 职场文书
家长写给孩子的评语
2014/04/18 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
经营场所证明范本
2015/06/19 职场文书
军训新闻稿范文
2015/07/17 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
工商局调档介绍信
2015/10/22 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang