层次选择器 - body{
- font-family: “Microsoft YaHei”
- }
- .divCls {
- width:180px;
- height:180px;
- color: white;
- border: solid 1px white;
- margin-left: 10px;
- float: left;
- }
- .subDivCls {
- width:60px;
- height:60px;
- color:white;
- border: solid 1px white;
- font-size: 12px;
- margin: 5px;
- float: right;
- }
- .spanCls{
- color:white;
- border: solid 1px white;
- margin: 5px;
- float: left;
- height: 50px;
- }
- div span{
- border: solid 1px white;
- font-size: 12px;
- margin:5;
- }
- .cGreen{background-color: #4CA902}
- .cPink{background-color: #ED4A9F}
- .cBlue{background-color: #0092E7}
- .cCyan{background-color: #01A6A2}
- .cYellow{background-color: #DCA112}
- .cRed{background-color: #B7103B}
- .cPurple{background-color: #792F7C}
- .cBlack{background-color: #110F10}
- .hide{display: none;}
- /* 层级选择器:
- 通过DOM元素之间的层次关系来获取特定的元素,
- 例如后代元素,子元素,相邻元素和兄弟元素。
- 1.后代元素选择器:
- 选取这个div中所有的span(不论其中嵌了多少层)
- #div2 span、#div2 .span1、#div2 #span2
- 2.子元素选择器:
- 选中当前div下的第一层元素。->元素集合
- #div2 > span、#div2 > .span1
- 3.相邻元素:
- 当前元素同层级的相邻的兄弟元素。->元素集合
- #div2 + 、#div2 + div
- 4.兄弟元素:
- 当前元素同层级的所有兄弟元素。->元素集合
- */
- $(document).ready(function() {
- /* */
- // 后代选择器
- $(“#btn1”).click(function() {
- /*
- $(“#div2 “):单一个空格,表示取所有的子元素;
- 如果要取特定标签的元素、特定id的元素或特定class的元素
- 要加上对应的名称。
- 注意:可以无限往后嵌套。
- */
- // $(“#div2 “).addClass(“cBlack”);
- // $(“#div2 #span1”).addClass(“cBlack”);
- // $(“#div2 .subDivCls”).addClass(“cBlack”);
- $(“#div2 span”).addClass(“cBlack”);
- });
- /* */
- // 子元素选择器
- $(“#btn2”).click(function() {
- $(“#div2 > span”).addClass(“cBlack”);
- });
- /* */
- /*
- 下一个兄弟元素
- 相邻元素选择器,只能下一个
- */
- $(“#btn3”).click(function() {
- // $(“#div2 + div”).addClass(“cBlack”);
- /* 在下觉得用上面的写法较好,因为是下一个兄弟元素
- 并不一定就是div,因为只能取next位置的元素节点,所以不如省略标签名称
- 正确率更高,也不容易引起歧义。*/
- // 注意:只有next:+;没有$(“#div2 -“).addClass(“cBlack”);这种写法! :(
- $(“#div2 +”).addClass(“cBlack”);
- // 但是其实 #div2 + div 也有一个好处,先确认next元素为div元素才会选中,不然不会选中!
- });
- /* */
- // 兄弟选择器,只能从当前开始,同级往后。
- $(“#btn4”).click(function() {
- /*
- 此方法获取了当前div2之后的所有的兄弟节点元素(注意是之后的!)
- 什么都不写的话,就获取了所有,如果想要获取特定类型的标签节点。
- 就要加上对应的节点名称,例如题上的div2之后的所有的div
- */
- // $(“#div2 ~”).addClass(“cBlack”);
- $(“#div2 ~ div”).addClass(“cBlack”);
- });
- /* */
- /*
- 此方法不是层级选择器中有的,是拓展的,
- 为了补充上面的只能选择之后的兄弟标签,
- 那么现在通过这个补充的方法就可以选择
- 到所有的兄弟标签了。
- sbilings():获取所有的兄弟标签的方法
- */
- $(“#btn5”).click(function() {
- // 选择所有的兄弟标签
- // $(“#div2”).siblings().addClass(“cBlack”);
- // 只要兄弟标签中的div标签
- $(“#div2”).siblings(“div”).addClass(“cBlack”);
- });

- id 为div3 的div,title为itcast,包含隐藏输入框
- div3的兄弟元素span
- id 为div4 的div
- subDivCls
- span4
- title为itcast
- class为subDivCls的div
- class设置为隐藏的,隐藏div
- style的display为none的隐藏div
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 ZLME@xxxxxxxx@hotmail.com 举报,一经查实,立刻删除。