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+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
js动态设置div的值下例子
Oct 29 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
node-red File读取好保存实例讲解
Sep 11 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 带逗号千位符数字的处理方法
2012/01/10 PHP
深入解析php之sphinx
2013/05/15 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP实现文件下载详解
2014/11/27 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
jquery 学习笔记一
2010/04/07 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
JS中数组重排序方法
2016/11/11 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
Python解决鸡兔同笼问题的方法
2014/12/20 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
python绘制双柱形图代码实例
2017/12/14 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
python excel和yaml文件的读取封装
2021/01/12 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
教师绩效考核方案
2014/01/21 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
人事任命书怎么写
2014/06/05 职场文书
新闻编辑求职信
2014/07/13 职场文书
2014年人大工作总结
2014/12/10 职场文书
刑事撤诉申请书
2015/05/18 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript