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中String对象的slice()方法分析
Dec 20 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP正则验证Email的方法
2015/06/15 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
小程序api实现promise封装过程解析
2019/11/21 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
numba提升python运行速度的实例方法
2021/01/25 Python
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
灵泰克Java笔试题
2016/01/09 面试题
外贸英语专业求职信范文
2013/12/25 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
20年同学聚会感言
2014/02/03 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
电力培训心得体会
2014/09/02 职场文书
2015年林业工作总结
2015/05/14 职场文书
运动会3000米加油稿
2015/07/21 职场文书