`
dawuafang
  • 浏览: 1091778 次
文章分类
社区版块
存档分类
最新评论

系统学习jQuery.核心知识.局部.jQuery选择器.层次选择器

 
阅读更多

1.层次选择器介绍

前面基本选择器是直接通过DOM节点本身来进行选择的,这里的层次选择器则是基于DOM元素的层次关系获取特定的元素,例如相邻元素、同辈元素、子元素与后代元素,也就是迂回的方式来选择相应的元素。

2.详解每个层次选择器


3.应用实例

<html>
	<head>
		<title>基本选择器</title>
		<style type="text/css">
			div,span,p{
				width:240px;
				height:240px;
				border:#000 1px solid;

				background:#aaa;
				
				font-family:Verdana;
				font-size:17px;

				float:left;
				margin:5px;
			}
			div.mini{
				width:80px;
				height:80px;
				background-color:#aaa;
				font-size:12px;
			}
			div.hide{
				display:none;
			}
		</style>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//$(".one .mini").css("background-color","#0F0");//①祖先后代选择器
				//$(".one > .mini").css("background-color","#0F0");//②注意与前面的差别
				//$("#two+div").css("background-color","#0F0");//③#two的下一个同辈元素
				//$("#two~div").css("background-color","#0F0");//④#two所有的同辈元素,注意与前一个差别
				
				//上述第3个方法,可用下列方法来代替
				//$("#two").next("div").css("background-color","#0F0");
				
				//上述第4个方法,可用下列方法来代替
				//$("#two").nextAll("div").css("background-color","#0F0");
				//nextAll方法相类似但有明显差别的是.siblings(),可以选择其所有的同辈元素
				$("#two").siblings("div").css("background-color","#0F0");
			});
		</script>
	</head>
	
	<body>
		<!--第1个div-->
		<div class="one" id="one">
			id为one,class为one的div
			<div class="mini">
				class为mini的div
			</div>
		</div>
		<!--第2个div-->
		<div class="one" id="two" title="Jason">
			id为two,class为one,title为jason的div.
			<div class="mini" id="spanish" title="Spanish">
				class为mini,title为Spanish的div
			</div>
			<div class="mini" title="Jason">
				class为mini,title为Jason为div
				<div class="mini">Hello</div>
			</div>
		</div>
			
		<!--第3个div-->
		<div class="one">
			<div class="mini">class为mini的div</div>
			<div class="mini">class为mini的div</div>
			<div class="mini">class为mini的div</div>
			<div class="mini"></div>
		</div>
		
		<!--第4个div-->
		<div style="display:none" class="none">
			style的display为"none"的div.
		</div>
		
		<!--第5个div-->
		<div class="hide">
			class为hide的div
		</div>
		
		<!--第6个div-->
		<div>
			包含input的type为"hidden"的div<br/>
			<input type="hidden" size="8"/>
		</div>

		<span id="mover">正在执行动画的span元素</span>
	</body>
</html>


分享到:
评论

相关推荐

    jquery.datepair日期时分秒选择器

    jquery.datepair日期时分秒选择器 jquery.datepair日期时分秒选择器 jquery.datepair日期时分秒选择器

    jquery.jSelectDate.js 下拉列表式日期选择插件实例.rar

    jquery.jSelectDate.js 下拉列表式日期选择器插件实例,裸体版基本没有美化,其实这样更方便使用者自己美化,有些人可能会比较喜欢这种select列表式的日期选择功能,和个人习惯有关。功能介绍:1.支持闰年、大小月和...

    jquery.timepickr 时间选择器

    jquery.timepickr 时间选择器

    jQuery颜色选择器ColorPicker

    ColorPicker基于强大的jQuery,使用方便、配置简单,同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中,兼容各大浏览器。

    jquery.tips.js

    * $(selector).tips({ //selector 为jquery选择器 * msg:'your messages!', //你的提示消息 必填 * side:1, //提示窗显示位置 1,2,3,4 分别代表 上右下左 默认为1(上) 可选 * color:'#FFF', //提示文字色 默认...

    颜色选择器jquery.colorpicker

    颜色选择器插件,多种形式都可以触发。

    最新jquery.min.js

    该版本主要修复之前两个版本中的一些bug和性能衰退问题,包括: •Deferred:当typeof( target)=='object'时,Deferred.promise( target)才能正常工作 •Event:使用委托事件和伪类时的性能...•修复了选择器的多个bug

    Web前端开发技术-Jquery选择器.pptx

    Jquery选择器; 基本选择器;jQuery选择器;jQuery选择器; 层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery...

    jquery.colorpicker 下载资源

    jquery.colorpicker.js一个颜色选择器,最好修改一下里面的.live方法使用

    jquery calendar.js日历选择控件带节日日历选择器

    jquery calendar.js日历选择控件带节日日历选择器 jquery calendar.js日历选择控件带节日日历选择器 jquery calendar.js日历选择控件带节日日历选择器

    jquery.validate Validation .js验证框架 帮助 手册 文档 chm

    (三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具(Utilities) 8 (五)验证器 (jQuery validation) 8 (六)内置验证方法 (jQuery validation) 10 (七)注意事项 (jQuery validation) 16 (八)应用...

    jquery.1.11.1.js 和 jquery.1.11.1.min.js

    jQuery是一个快速、简洁的JavaScript框架...具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

    jquerydemo

    4. 层次选择器 5. 基本过滤选择器 6. 内容过滤选择器 7. 可见性过滤选择器 8. 属性过滤选择器 9. 子元素过滤选择器 10. 表单元素过滤选择器 11. 小结1 12. 选择器练习 13. 创建和插入节点 14. 重写 JS 实验之分类...

    jQuery date_input日期选择器

    jQuery date_input日期选择器...发一JQUERY插件jQuery date_input,是日期选择器..... 这个选择器是我已经修改过的,官方下载的选择界面是英文的,然后我把它又汉化了一下..根据中国国情,又修改了日期格式!! 效果图演示: ...

    jquery.datePicker日期选择器text文本框弹出日历

    jquery.datePicker日期选择器text文本框弹出日历

    jQuery选择器全解.

    jQuery选择器全解.

    jquery选择器.pdf

    jquery选择器.pdf

    Jquery01.md

    本篇文章记录了Jquery基础学习过程中的Jquery选择器以及核心函数。Jquery选择器:基本元素选择器,层级选择器,过滤选择器,子元素过滤选择器,表单过滤选择器,属性选择器,表单对象过滤选择器。

    最新jquery.1.8.1

    jQuery 1.8.1中重写了选择器引擎,大大提升了性能。此外,选择器引擎Sizzle修复了一些边缘问题和bug,包括对于多个选择符(~ &gt; +)的改进、更好地检测浏览器bug等。 5. XSS防护 $()方法可以创建HTML元素,如果...

    jquery.timepickerPlus.js

    时间日期选择器,原官方时间插件的增强版本

Global site tag (gtag.js) - Google Analytics