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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 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汉字转换拼音的类
2013/06/18 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
python集合类型用法分析
2015/04/08 Python
PyMongo安装使用笔记
2015/04/27 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
python解析含有重复key的json方法
2019/01/22 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
jupyter notebook实现显示行号
2020/04/13 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
中专自我鉴定
2014/02/05 职场文书
可口可乐广告词
2014/03/20 职场文书
军训口号
2014/06/13 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年政协工作总结
2014/12/09 职场文书
中小企业员工手册范本
2015/05/14 职场文书
2015年中秋节主持词
2015/07/30 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
Python 发送SMTP邮件的简单教程
2021/06/24 Python