jquery层级查找方式

原创 2013年12月04日 09:52:32

下面使用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="lib/jquery-1.6.4.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&amp;tab=photo&amp;view=photo_detail&amp;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&amp;tab=photo&amp;view=photo_detail&amp;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常用的元素查找方法总结 .

ID选择器: $("#myELement") 选择id值等于myElement的元素,                               id值不能重复在文档中只能有一个id值是myEl...
  • tiantian1980
  • tiantian1980
  • 2014年09月05日 14:43
  • 3409

jQuery选择器之层级选择器

背景:我们可以把文档中的所有的节点节点之间的关系,用传统的家族关系来描述,可以把文档树当作一个家谱,那么节点与节点直接就会存在父子,兄弟,祖孙的关系了。 >(大于号)紧跟父子关系 如$("div >...
  • ljp1919
  • ljp1919
  • 2017年03月24日 09:55
  • 468

jQuery基础一(样式篇)--层级&基本筛选

仔细观察层级选择器之间还是有很多相似与不同点 层级选择器都有一个参考节点后代选择器包含子选择器的选择的内容一般兄弟选择器包含相邻兄弟选择的内容相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一...
  • jidongdesheyou_xl
  • jidongdesheyou_xl
  • 2017年03月21日 12:32
  • 204

jQuery 层次选择器,属性选择器

jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")...
  • tangdou5682
  • tangdou5682
  • 2016年12月01日 10:40
  • 544

Jquery层级选择过滤器

jQuery层级选择器A B ,获得A元素内部所有的B后代元素。(父子,爷孙..) A > B ,获得A元素内部所有的B子元素。(父子) A + B ,获得A元素后面的第一个兄弟B。(兄弟) ...
  • melissa_heixiu
  • melissa_heixiu
  • 2016年12月20日 10:24
  • 283

JQuery的父、子、兄弟节点查找方法

JQuery的父、子、兄弟节点查找方法
  • u012382571
  • u012382571
  • 2015年04月30日 13:27
  • 807

jQuery 选择器(基本选择器/层级选择器/过滤选择器/筛选选择器)

jQuery选择器 1. JS中选择DOM元素的方法 考虑兼容性的话,js里面提供的选择DOM的方法只有两个: JavaScript选择元素的方法 ...
  • carriehaohao
  • carriehaohao
  • 2017年03月04日 15:38
  • 709

前端学习笔记-jquery-6-层级选择器及对应jquery方法

层级关系:子元素 后代元素 兄弟元素 相邻元素 1、$(“parent>child”)子选择器 div id="box">p>xxxp>box> /* css代码 */ #box>p{ ...
  • weixin0605
  • weixin0605
  • 2018年01月06日 22:20
  • 29

mysql的逆袭:如何做递归层次查询

mysql的逆袭:如何做递归层次查询 2012-09-03 10:30:36     我来说两句       作者:曾老师 收藏    我要投稿 mysql的逆袭:如何做递归...
  • wangxianhong
  • wangxianhong
  • 2014年03月15日 23:20
  • 1343

二.javaweb笔记之JQuery学习路线+语法+常用选择器

JQuery学习路线 1. jQuery简介 为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函...
  • yuexianchang
  • yuexianchang
  • 2017年04月20日 07:16
  • 467
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery层级查找方式
举报原因:
原因补充:

(最多只允许输入30个字)