《JQuery 能干点啥~》第7讲 层级选择器_1

CSS 选择器 上节课 讲完了 这节课 将 层级选择器 ,这名字 是我自己起的，如果一会我讲完了大家有别的好名字，可以提下建议

-------------------------------------------- 开讲了-----------------------------------------------

在 HTML 中 经常会出现 嵌套 的结构，如果用白话 来说，就是 一个标签内部 好包含其他标签，以此类推吧~~
那么，如果 我们想的 得到某一个标签下的所有子标签，第一个子标签 等等的，用 CSS 选择器 直接操作可能不是那么容易~
JQ 提供了一些选择器，方便我们的查找~

现在 先说 所有后代元素吧 ！！语法为：$("ancestor descendant")  这里，请大家注意，两个单词之间是有一个空格的
现在 我来说 这两个单词是什么意思~，首先，这两个都是 选择器，第一个 是父标签的选择器，第二个是子标签的选择器
貌似有点乱，我来举个例子

?

双击复制代码

<table id="table父">

         <tr id="table的子,td的父">

                <td id="tr的子1"></td>

                <td id="tr的子2"></td>

         </tr>

 </table>

通过 id 应该很容易看出 他们的父子关系了把 (id 这里 ，只是为了给大家举例子！又用汉字，有用符号的，是不规范的，不建议大家模仿 )

那么 根据语法 ，我想得到 table中的所有 tr 的写法应该为

?

双击复制代码

$("table tr")

以前 好像一直没强调过，JQ 获得的对象，一般是一个集合！ id 除外~~~~ 这个 希望大家 留心一下，以后会在将另一个 方法 each的时候 看的很明显！~~

接着说 所有后代元素 ! 有人说，这很麻烦啊，我在每个 tr 都加一个 class 属性，然后 用上节课 讲的 CSS 选择器 中的标签选择器 和 class 选择器 都能得出来啊！

这里我只能说 条条大路通罗马!  上吊不一定都吊死在一个歪脖树上呢! 所以 这个具体选择用什么选择器 ，是要根据实际情况来定的
这个 以后我也就不强调了，我只负责讲~至于怎么用，我只建议 不强求~

时间还够~ 再讲一个  层级选择器 中的  一级子元素  
所谓一级子元素   就是 父选择器下的第一层子元素 ！语法   $("parent > child")  这里 >  是一个 大于号，这个应该不难看出来吧

还是上面的例子 我要得到所有 tr 
写法应该为

?

双击复制代码

$("table>tbody>tr")

 

有人会很纳闷，为什么 多出来个 tbody ！！ 看下图！相信大家有点 朦朦胧胧的 明白了
 
看完图，我在说下 一级子元素 和所有 所有后代元素 有什么不同~
举个形象点的例子！
有个 姓张的老头，儿孙满堂的！！
有一天  他好奇，他儿子谁右脸上 有痣 ，好嘞！ 他用了一级子元素 选择器，筛选了一下儿子，结果找出张三 李四 王五…………
又有一天 他又好起了， 在他们 张氏家族中 有多少个人 右脸 上有痣 ，结果他用了 所有后代元素  ！筛选了一下 所有后代！ 结果找出了张三 李四 王五………… ，还有张三儿子，李四姑娘，王五孙子，赵六加丫头…………

是不是 理解了~~
那我就再概括下~~

一级子元素  选择器就是 儿子辈元素~
所有后代元素  选择器 就是 父类元素 标签内所有标签都要参与选择

从上面的说明 应该很容易发现，在选择 子元素的时候 用一级子元素 选择器 效率会高出 所有后代元素 

好了，今天就讲这么多吧~  讲多了容易 混乱
下周一接着讲 层级选择器~

本人的原文出自 http://bbs.coderli.com/forum.php?mod=viewthread&tid=409&fromuid=7

有需要样例代码的 童鞋 可以去下载