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 相关文章推荐
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
vue移动端屏幕适配详解
Apr 30 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
event.srcElement+表格应用
2006/08/29 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
使用PYTHON接收多播数据的代码
2012/03/01 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
pywinauto自动化操作记事本
2019/08/26 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
药学专业学生的自我评价分享
2014/02/06 职场文书
《颐和园》教学反思
2014/02/26 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
大学生受助感言
2015/08/01 职场文书
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS