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 validate poshytip 自定义样式
Nov 26 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
react-router中的属性详解
2017/06/01 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
简单了解什么是神经网络
2017/12/23 Python
transform python环境快速配置方法
2018/09/27 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
一文读懂Python 枚举
2020/08/25 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
文员自我评价怎么写
2013/09/19 职场文书
创业培训计划书
2014/05/03 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
党员发展大会主持词
2015/07/03 职场文书