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 相关文章推荐
javascript 对象比较实现代码
Apr 27 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
JavaScript 函数的执行过程
May 09 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
express express-session的使用小结
Dec 12 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 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中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python生成不重复随机值的方法
2015/05/11 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
Python的多态性实例分析
2015/07/07 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
请解释接口的显式实现有什么意义
2012/05/26 面试题
医学生自荐信范文
2013/12/03 职场文书
经销商培训邀请函
2014/01/21 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
公司股东合作协议书
2014/09/14 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
毕业生见习报告总结
2014/11/08 职场文书
教师求职信怎么写
2015/03/20 职场文书
督导岗位职责范本
2015/04/10 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
停发工资证明范本
2015/06/12 职场文书
创业计划书之家教托管
2019/09/25 职场文书