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 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
layui导航栏实现代码
May 19 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
python3 读取Excel表格中的数据
2018/10/16 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
python实现求特征选择的信息增益
2018/12/18 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
毕业生实习证明
2014/09/19 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
思想作风建设心得体会
2014/10/22 职场文书
安全责任书
2015/01/29 职场文书
公司借条范本
2015/05/25 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
MySQL创建表操作命令分享
2022/03/25 MySQL
原生JS实现分页
2022/04/19 Javascript