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关于select的相关操作说明
Jan 13 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 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接收POST数据方式
2015/06/05 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
JS实现商品倒计时实现代码
2013/05/03 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
linux下安装easy_install的方法
2013/02/10 Python
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
python中的for循环
2018/09/28 Python
python对于requests的封装方法详解
2019/01/03 Python
python em算法的实现
2020/10/03 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
财务部副经理岗位职责
2014/03/14 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
Django migrate报错的解决方案
2021/05/20 Python
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server