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 实现的全选和反选
Apr 15 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 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面向对象法则
2012/02/23 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
详解Django中间件执行顺序
2018/07/16 Python
Python BS4库的安装与使用详解
2018/08/08 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
Python subprocess库的使用详解
2018/10/26 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
django 单表操作实例详解
2019/07/30 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
股东出资证明书(正规版)
2014/09/24 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js