jQuery基础学习7——层次选择器find()方法
<!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=utf-8" />
<title>2-5</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 引入jQuery -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="lib/assist.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//选择 body内的所有div元素.
$('#btn1').click(function(){
//$('body div').css("background","#bbffaa"); //和find()方法是等价的，祖先和后代的关系，和parents()方法是对立的
//$('body').find('div').css("background","#bbffaa"); //$('body').find().css("background","#bbffaa"); //没有制定搜索的条件则返回空
//$('body').find('#abc').css("background","#bbffaa"); //查找不存在的元素也返回空
//$('body').find('#two-one').css("background","#bbffaa"); //查找唯一的元素就返回该元素 //$('.one').find('#one-one').css("background","#bbffaa"); //class寻找唯一元素
$('.one').find('.mini').css("background","#bbffaa"); //class寻找class
}) //在body内的选择 元素名是div 的子元素.
$('#btn2').click(function(){
//$('body > div').css("background","#bbffaa"); //和children()方法是等价的，父子关系，和parent()方法是对立的
//$('body').children('div').css("background","#bbffaa"); //$('body').children().css("background","#bbffaa"); //没有搜索条件的时候返回元素的所有子节点
//$('body').children('#abc').css("background","#bbffaa"); //查找不存在的元素也返回空
//$('body').children('#two-two').css("background","#bbffaa"); //查找唯一的元素就返回该元素 //$('.one').children().css("background","#bbffaa"); //class寻找所有的子节点
//$('.one').children('#one-one').css("background","#bbffaa"); //class寻找唯一元素
$('.one').children('.mini').css("background","#bbffaa"); //class寻找class
}) //选择 所有class为one 的下一个div元素.
$('#btn3').click(function(){
//$('.one + div').css("background","#bbffaa"); //和next()方法是等价的，前后关系，和prev()方法是对立的
//$('.one').next('div').css("background","#bbffaa"); //$('.one').next().css("background","#bbffaa"); //不指定向后查找的元素条件则返回开始class的第二个元素到临近的第一个元素
//$('.one').next('#abc').css("background","#bbffaa"); //向后查找不存在的元素返回为空
//$('.one').next('#two-one').css("background","#bbffaa"); //向后查找临近的元素
//$('.one').next('#two-two').css("background","#bbffaa"); ////向后查找不临近的元素，则返回为空 //$('.two').prev('div').css("background","#bbffaa"); //查找跟class临近的所有div元素
//$('.two').prev().css("background","#bbffaa"); //查找跟class临近的所有元素
//$('.two').prev('#abc').css("background","#bbffaa"); //向前查找不存在的元素返回为空
//$('.two').prev('#four').css("background","#bbffaa"); //查找跟class临近的指定id元素
//$('.two').prev('#three').css("background","#bbffaa"); //查找的元素不是临近的也返回空 //$('#two').next('div').css("background","#bbffaa"); //查找跟指定id元素邻近的所有div元素
//$('#two').next('#three').css("background","#bbffaa"); //查找跟指定id元素临近的指定id元素
//$('#two').next('#four').css("background","#bbffaa"); //查找跟指定id元素不临近的指定id元素，则返回为空 $('#two-one').prev('div').css("background","#bbffaa"); //查找跟指定id元素之前的所有div元素
//$('#two-one').prev('#four').css("background","#bbffaa"); //查找跟指定id元素之前的指定id元素
//$('#two-one').prev('#three').css("background","#bbffaa"); //查找跟指定id元素之前的不临近指定id元素，则返回为空
}) //选择 id为two的元素后面的所有div兄弟元素.
$('#btn4').click(function(){
//$('#two ~ div').css("background","#bbffaa"); //和nextAll()方法是等价的，前后关系，和prevAll()方法是对立的
//$('#two').nextAll('div').css("background","#bbffaa"); //$('#two').nextAll().css("background","#bbffaa"); //不指定向后查找的元素条件则返回开始id元素到最后的元素
//$('#two').nextAll('#abc').css("background","#bbffaa"); //指定向后查找的元素不存在的时候则返回空
//$('#two').nextAll('#three').css("background","#bbffaa"); //查找指定id元素后的指定id元素，返回存在的元素
//$('#two').nextAll('#two-two').css("background","#bbffaa"); //查找指定id元素后的指定id元素，返回存在的元素 //$('#four').prevAll('div').css("background","#bbffaa"); //向前查找所有的div元素
//$('#four').prevAll().css("background","#bbffaa"); //向前查找所有的元素
//$('#four').prevAll('#abc').css("background","#bbffaa"); //向前查找不存在的元素，则返回空
//$('#four').prevAll('#three').css("background","#bbffaa"); //向前查找指定id的元素
//$('#four').prevAll('#two').css("background","#bbffaa"); //向前查找指定id的元素 $('.one').nextAll('div').css("background","#bbffaa"); //向后查找class元素后的所有div元素 //$('.two').prevAll('div').css("background","#bbffaa"); //向前查找class元素前的所有div元素
}) $('#btn5').click(function(){
//$('#three').siblings('div').css("background","#bbffaa"); //查找所有和指定id同级的div元素
//$('#three').siblings().css("background","#bbffaa"); //查找所有和指定id同级的元素
//$('#three').siblings('#abc').css("background","#bbffaa"); //找不到符合条件的同级元素就返回空 //$('.one').siblings('div').css("background","#bbffaa"); //class元素的所有div兄弟元素
//$('.one').siblings('.two').css("background","#bbffaa"); //class元素的所有class兄弟元素
//$('.one').siblings('#two-two').css("background","#bbffaa"); //class元素的指定id兄弟元素 $('.one').siblings().css("background","#bbffaa"); //class的所有兄弟元素
}) $('#btn6').click(function(){
//$('#one').nextUntil('#two-one').css("background","#bbffaa");
//$('#one').nextUntil().css("background","#bbffaa");
//$('#one').nextUntil('#abc').css("background","#bbffaa");
//如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll()效果一样。 //$('.one').nextUntil('.two').css("background","#bbffaa"); //Unitl的条件为class的时候，只要达到该class就立马停止
//start是从class的第一个元素，stop也是第一个元素 $('.one').nextUntil('#two-two').css("background","#bbffaa");
//如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。
//这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。
}) $('#btn7').click(function(){
//$('#four').prevUntil('#one').css("background","#bbffaa");
//$('#four').prevUntil().css("background","#bbffaa");
//$('#four').prevUntil('#abc').css("background","#bbffaa");
//如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的 .prevAll()效果一样。 //$('.two').prevUntil('#one').css("background","#bbffaa");
//如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。
//这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括那个选择器匹配到的元素。 $('.two').prevUntil('.one').css("background","#bbffaa"); //Unitl的条件为class的时候，只要达到该class就立马停止
//start是从class的最后一个元素，stop也是最后一个元素
}) $('#btn8').click(function(){
//$('#one-one-one').parent().css("background","#bbffaa"); //没有过滤条件，就是返回直接父亲节点
//$('#one-one-one').parent('#one-one').css("background","#bbffaa"); //查找id为one-one的父亲节点(只查找id为one-one)
$('#one-one-one').parent('#one-two').css("background","#bbffaa"); //查找不存在的父亲节点(如果条件不成立，返回空)
}) $('#btn9').click(function(){
//$('#one-one-one').parents().css("background","#bbffaa"); //没有过滤条件的时候，一直向上找祖先节点
$('#one-one-one').parents('#one').css("background","#bbffaa"); //查找id为one的祖先节点(只查找id为one)
//$('#one-one-one').parents('#one-two').css("background","#bbffaa"); //查找不存在的祖先节点(如果条件不成立，返回空)
}) $('#btn10').click(function(){
//$('#one-one-one').parentsUntil().css("background","#bbffaa"); //没有过滤条件的时候，一直向上找祖先节点
//$('#one-one-one').parentsUntil('#one').css("background","#bbffaa"); //查找直到id为one的祖先节点(不包括id为one)
$('#one-one-one').parentsUntil('#one-two').css("background","#bbffaa"); //查找不存在的祖先节点(如果条件不成立的时候，就会一直向上查找)
})
});
</script>
</head>
<body>
<h3>层次选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <input type="button" value="祖先关系find()方法." id="btn1"/>
<input type="button" value="父子关系children方法()" id="btn2"/>
<input type="button" value="前后关系next()和prev()方法." id="btn3"/>
<input type="button" value="前后关系nextAll()和prevAll()方法." id="btn4"/>
<input type="button" value="前后关系siblings()方法." id="btn5"/>
<input type="button" value="前后关系nextUntil()方法." id="btn6"/>
<input type="button" value="前后关系prevUntil()方法." id="btn7"/>
<input type="button" value="父子关系parent()方法" id="btn8"/>
<input type="button" value="祖先关系parents()方法" id="btn9"/>
<input type="button" value="祖先关系parentsUntil()方法" id="btn10"/> <br /><br /> <!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini" id="one-one">class为mini
<div id="one-one-one">三层</div>
</div>
</div> <div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div> <div class="one" id="three">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div> <div class="one" id="four">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div> <div class="two" id="two-one">class为two，id为two-one</div>
<div class="two" id="two-two">class为two，id为two-two</div> <div style="display:none;" class="none" id="five">
style的display为"none"的div
</div> <div class="hide" id="six">class为"hide"的div</div> <div id="seven">
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div> <span id="mover">正在执行动画的span元素.</span> </body>
</html>
$('body div').css("background","#bbffaa");
$('body').find('div').css("background","#bbffaa"); 和$('body div')是等价的
$('body').find().css("background","#bbffaa"); 没有制定搜索的条件则返回空
$('body').find('#abc').css("background","#bbffaa"); 查找不存在的元素也返回空
$('body').find('#two-one').css("background","#bbffaa"); 查找唯一的元素就返回该元素
$('.one').find('#one-one').css("background","#bbffaa"); //class寻找唯一元素
$('.one').find('.mini').css("background","#bbffaa"); //class寻找class
jQuery基础学习7——层次选择器find()方法的更多相关文章
- jQuery基础学习8——层次选择器children()方法
$('body > div').css("background","#bbffaa"); //和children()方法是等价的,父子关系,和parent ...
- jQuery基础学习8——层次选择器next()和prev()方法
$('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 ...
- jQuery基础学习6——基本选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
- jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- 【jQuery基础学习】01 jQuery选择器
关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选 ...
- jQuery 基础学习笔记总结（一）
Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...
- jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...
- 【jQuery基础学习】08 编写自定义jQuery插件
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...
随机推荐
- csv,txt,excel文件之间的转换,perl脚本
最近接触一些需要csv,txt,excel文件之间的转换,根据一些网上搜索加上自己的改动,实现自己想要的结果为主要目的,代码的出处已经找不到了,还请见谅,以下主要是针对csv&excel 和t ...
- BCB遍历所有窗体的组件
for(iFormIdx=0; iFormIdx<Screen->FormCount; iFormIdx++) { TForm *pForm = Screen->Forms[iFor ...
- jenkins 状态管理
如何安装Jenkins as rpm: $ sudo service jenkins restart Usage: /etc/init.d/jenkins {start|stop|status|res ...
- UVa 10288 (期望) Coupons
题意: 每张彩票上印有一张图案,要集齐n个不同的图案才能获奖.输入n,求要获奖购买彩票张数的期望(假设获得每个图案的概率相同). 分析: 假设现在已经有k种图案,令s = k/n,得到一个新图案需要t ...
- UVa 120 Stacks of Flapjacks【构造法】
题意:给出n张煎饼,从上到下输入,每张煎饼上面都有一个数字,厨师每次可以选择第k张煎饼,进行翻转操作,设计一种方法使得所有煎饼按照从小到大排序(最上面的煎饼最小) 首先是这个翻转的操作,如下图 如图所 ...
- LeetCode Binary Tree Preorder Traversal 先根遍历
题意:给一棵树,求其先根遍历的结果. 思路: (1)深搜法: /** * Definition for a binary tree node. * struct TreeNode { * int va ...
- C扩展Python
基本想法: 先看中文小介绍,再看英文详细文档. 1. 参考 首先参考THIS, IBM的工程师好像出了好多这样的文章啊,而且每次看到时间戳,我都想戳自己- -! 2. ERROR 可能遇到错误: fa ...
- c & c++中const
1 const的基本用法 常变量: const 类型说明符 变量名 #在c语言中,仍是一个变量.c++中则变为一个常量,比如可以设置为数组的长度 常引用: const 类型说明符 &引用名 ...
- JavaScript的事件代理（转）
如果你想给网页添加点JavaScript的交互性,也许你已经听过JavaScript的事件代理(event delegation),并且觉得这是那些发烧友级别的JavaScript程序员才会关心的什么 ...
- HTTP请求中浏览器缓存
本文导读:浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制.客户端缓存是否需要是可以在服务端代码上控制的.那就是响应头.响应头告诉缓存器不要保留缓存,缓存器就不会缓存相应内容:如果请求信息是需要 ...