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 相关文章推荐
jquery.validate使用攻略 第一部
Jul 01 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
vue配置多代理服务接口地址操作
Sep 08 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获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
PHP代码加密的方法总结
2020/03/13 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Django框架实现的分页demo示例
2019/05/25 Python
Django 用户认证组件使用详解
2019/07/23 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
爽歪歪广告词
2014/03/20 职场文书
白岩松演讲
2014/05/21 职场文书
投标授权委托书范文
2014/08/02 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
先进党支部事迹材料
2014/12/24 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
MYSQL如何查看进程和kill进程
2022/03/13 MySQL