jQuery的层级查找方式分析


Posted in Javascript onJune 16, 2016

本文实例分析了jQuery的层级查找方式。分享给大家供大家参考,具体如下:

下面使用jquery的层级查找方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
  function(){
    /*第一种方式层级查找,查找的是a标签对象——选择器*/
    $('.thumb-hover a:has(img)').each(function(){
       alert($(this).attr("pid"));
    });
    /*第三种层级查找,使用方法进行筛选——筛选器*/
    $('.thumb-hover a').has("img").each(function(){
       alert($(this).attr("pid"));
    });
    /*第二种方式层级查找,查找的是img标签对象——基本层级选择器*/
    $('.thumb-hover a img').each(function(){
      alert($(this).attr("alt"));
    });
  }
);
</script>
<title>无标题文档</title>
</head>
<DIV class=thumb sizcache="17" sizset="84">
  <SPAN class=thumb-hover sizcache="17" sizset="84">
  <A class=lightbox-enabled href="/user/showuser.php?uid=u1373373094&tab=photo&view=photo_detail&pid=72464692#detail" target=_blank pid="72464692" oid="27" src="http://pic03.babytreeimg-dev.com/foto3/thumbs/2012/0106/43/8/51dc02a6279c0ef6c728e5_mb.jpg" jQuery1640004568396895048288="1">
  <IMG alt=DSC_0723.JPG src="http://pic05.babytreeimg-dev.com/foto3/thumbs/2012/0106/43/8/51dc02a6279c0ef6c728e5_sm.jpg"> </A>
  <SPAN style="DISPLAY: none" id=72464692 class=mouse-wrap>
  <IMG class=unselect src="http://pic.babytree.com/img/mybabytree/photo/pix.png">
  </SPAN> 
  </SPAN>
</DIV>
<DIV class=thumb>
  <SPAN class=thumb-hover sizcache="0" sizset="2">
  <A class=lightbox-enabled href="/user/showuser.php?uid=u3073373044&tab=photo&view=photo_detail&pid=72464732#detail" target=_blank pid="72464732" oid="5" src="http://pic02.babytreeimg-dev.com/foto3/thumbs/2012/0216/48/9/b72ff3742c8c172650a0d1_nb.jpg" jQuery16405726906849340585="1"><IMG alt=Koala.jpg src="http://pic01.babytreeimg-dev.com/foto3/thumbs/2012/0216/48/9/b72ff3742c8c172650a0d1_sm.jpg"> </A>
  <SPAN style="DISPLAY: none" id=72464732 class=mouse-wrap>
  <IMG class=unselect alt=DSC_0724.JPG src="http://pic.babytree.com/img/mybabytree/photo/pix.png">
  </SPAN> 
  </SPAN>
</DIV>
<body>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 #Javascript
JS中sort函数排序用法实例分析
Jun 16 #Javascript
JS原型对象的创建方法详解
Jun 16 #Javascript
JS使用单链表统计英语单词出现次数
Jun 16 #Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 #Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 #Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 #Javascript
You might like
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
JS 分号引起的一段调试问题
2009/06/18 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
vue中@change兼容问题详解
2019/10/25 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
大学迎新标语
2014/06/26 职场文书
园林技术专业求职信
2014/07/28 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
关于分班的感言
2015/08/04 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫