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传递变量: 值传递?引用传递?
Feb 22 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
C++中的string类的用法小结
Aug 07 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
layui分页效果实现代码
May 19 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 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和ACCESS写聊天室(二)
2006/10/09 PHP
php5.2时间相差8小时
2007/01/15 PHP
15种PHP Encoder的比较
2007/04/17 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
python+opencv实现阈值分割
2018/12/26 Python
Pytorch之finetune使用详解
2020/01/18 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
pymysql模块使用简介与示例
2020/11/17 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
商业活动邀请函
2014/02/04 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
中国世界遗产导游词
2015/02/13 职场文书
建国大业观后感
2015/06/01 职场文书
活动简报范文
2015/07/22 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL