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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
js数组常用最重要的方法
Feb 04 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
angularjs性能优化的方法
Sep 05 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
Python list操作用法总结
2015/11/10 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
艺术用品:Arteza
2018/11/25 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
李培根演讲稿
2014/05/22 职场文书
学风建设演讲稿
2014/09/12 职场文书
自查自纠整改报告
2014/11/06 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技