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的闭包
Jan 17 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
vue debug 二种方法
Sep 16 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
js表达式与运算符简单操作示例
Feb 15 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
discuz安全提问算法
2007/06/06 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
PHP对象相关知识总结
2017/04/09 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
javascript如何写热点图
2015/12/08 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
python读取Excel实例详解
2018/08/17 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python基于opencv 实现图像时钟
2021/01/04 Python
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
个人自我鉴定总结
2014/03/25 职场文书
安全生产月活动总结
2014/05/04 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
学校食品安全责任书
2015/01/29 职场文书
小学教师节活动总结
2015/03/20 职场文书
2015年司法所工作总结
2015/04/27 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle