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 扩展方法
May 06 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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项目打包方法
2008/02/18 PHP
超级强大的表单验证
2006/06/26 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
一套SQL笔试题
2016/08/14 面试题
机电一体化自荐信
2013/12/10 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
停电放假通知
2015/04/14 职场文书
终止劳动合同通知书
2015/04/16 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
Python基础之条件语句详解
2021/06/16 Python
Python办公自动化PPT批量转换操作
2021/09/15 Python