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的eval JSON object问题
Nov 15 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 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桌面中心(一) 创建数据库
2007/03/11 PHP
PHP 文件类型判断代码
2009/03/13 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
vue实现计算器功能
2020/02/22 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
2014年财务人员工作总结
2014/11/11 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
外出听课学习心得体会
2016/01/15 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技