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.jSelectDate.js 下拉列表式日期选择器插件实例,裸体版基本没有美化,其实这样更方便使用者自己美化,有些人可能会比较喜欢这种select列表式的日期选择功能,和个人习惯有关。功能介绍:1.支持闰年、大小月和...
jquery.timepickr 时间选择器
ColorPicker基于强大的jQuery,使用方便、配置简单,同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中,兼容各大浏览器。
* $(selector).tips({ //selector 为jquery选择器 * msg:'your messages!', //你的提示消息 必填 * side:1, //提示窗显示位置 1,2,3,4 分别代表 上右下左 默认为1(上) 可选 * color:'#FFF', //提示文字色 默认...
颜色选择器插件,多种形式都可以触发。
该版本主要修复之前两个版本中的一些bug和性能衰退问题,包括: •Deferred:当typeof( target)=='object'时,Deferred.promise( target)才能正常工作 •Event:使用委托事件和伪类时的性能...•修复了选择器的多个bug
Jquery选择器; 基本选择器;jQuery选择器;jQuery选择器; 层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery...
jquery.colorpicker.js一个颜色选择器,最好修改一下里面的.live方法使用
jquery calendar.js日历选择控件带节日日历选择器 jquery calendar.js日历选择控件带节日日历选择器 jquery calendar.js日历选择控件带节日日历选择器
(三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具(Utilities) 8 (五)验证器 (jQuery validation) 8 (六)内置验证方法 (jQuery validation) 10 (七)注意事项 (jQuery validation) 16 (八)应用...
jQuery是一个快速、简洁的JavaScript框架...具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
4. 层次选择器 5. 基本过滤选择器 6. 内容过滤选择器 7. 可见性过滤选择器 8. 属性过滤选择器 9. 子元素过滤选择器 10. 表单元素过滤选择器 11. 小结1 12. 选择器练习 13. 创建和插入节点 14. 重写 JS 实验之分类...
jQuery date_input日期选择器...发一JQUERY插件jQuery date_input,是日期选择器..... 这个选择器是我已经修改过的,官方下载的选择界面是英文的,然后我把它又汉化了一下..根据中国国情,又修改了日期格式!! 效果图演示: ...
jquery.datePicker日期选择器text文本框弹出日历
jQuery选择器全解.
jquery选择器.pdf
本篇文章记录了Jquery基础学习过程中的Jquery选择器以及核心函数。Jquery选择器:基本元素选择器,层级选择器,过滤选择器,子元素过滤选择器,表单过滤选择器,属性选择器,表单对象过滤选择器。
jQuery 1.8.1中重写了选择器引擎,大大提升了性能。此外,选择器引擎Sizzle修复了一些边缘问题和bug,包括对于多个选择符(~ > +)的改进、更好地检测浏览器bug等。 5. XSS防护 $()方法可以创建HTML元素,如果...
时间日期选择器,原官方时间插件的增强版本