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 继承机制实例
Aug 12 Javascript
ExtJS的FieldSet的column列布局
Nov 20 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
BootStrap前端框架使用方法详解
Feb 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中的phpinfo()函数
2013/06/06 PHP
PHP数组实例详解
2016/06/26 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
一篇不错的Python入门教程
2007/02/08 Python
pytyon 带有重复的全排列
2013/08/13 Python
Python中optparse模块使用浅析
2015/01/01 Python
Python ftp上传文件
2016/02/13 Python
python字典操作实例详解
2017/11/16 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python实现电脑自动关机
2018/06/20 Python
python实现微信防撤回神器
2019/04/29 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
使用python实现滑动验证码功能
2019/08/05 Python
pycharm 安装JPype的教程
2019/08/08 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
商场消防管理制度
2014/01/12 职场文书
2014年教研员工作总结
2014/12/23 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
深入理解go slice结构
2021/09/15 Golang