jquary-------------层次选择器

最新推荐文章于 2023-04-06 14:35:13 发布
最新推荐文章于 2023-04-06 14:35:13 发布
阅读量514 收藏 1
点赞数
分类专栏： jquary 文章标签： xhtml div border function html 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxiaohui6687/article/details/7650910
版权

第一个选择器：（后代选择器：控制的是子子孙孙）

第二个选择器：只控制儿子级别的

l 紧接相邻选择器 prev + next 可以使用 next() 方法替代
l 后面相邻兄弟选择器 prev ~siblings 可以使用 nextAll () 方法替代
l 选择前后相邻兄弟可以使用 siblings() 方法







<!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>无标题文档</title>
<style type="text/css">
#two{width:100px;height:100px;border:1px solid #000;display:none;}
div{width:200px;height:100px;border:1px solid #000;}
#three{height:400px;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //$("#three ul").css("background","red")----------选取#three元素里面的所有的后代元素，改变背景颜色
        //$("#three>ul").css("background","red")----------选取#three元素里面子元素，改变背景颜色
        //$('h3+ul').css("background","red")--------选取H3的下一个兄弟元素ul，改变样式
        //$('#three h3+ul').css("background","red")--------选取#three里面的H3的下一个兄弟元素ul，改变样式
        //$('h3~ul').css("background","red")--------选取h3后面的H3的兄弟元素ul，改变样式（如果在h3前面，就无法改变样式）
        
        
        
        
            })
</script>
</head>

<body>

<h3>改变标题的原色</h3>
<div id="two">这是一个动画盒子</div>
<h3>这是h3</h3>
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
<div id="three">
    <h3>这是h3</h3>
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
    <div id="three_three" style="border:none">
    <ul>
      <li>2</li>
      <li>2</li>
      <li>2</li>
      <li>2</li>
      </ul>
    </div>
</div>
<div>
    <ul>
      <li>1</li>
      <li>1</li>
    </ul>
</div>
<div>第一个div</div>
<div>
    <p>2222222222</p>
</div>
<div></div>
</body>
</html>

第二次练习

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

#box {
    background-color: #F00;
    height: 500px;
    width: 500px;
}
#cengci {
    height: 500px;
    width: 500px;
    border:1px solid #F00;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function(){
/*        $("#box").click(function(){
                $(this).hide('slow',function(){//hide可以换成slideDown（up）
                        alert("我被隐藏了")
                    });
            })*/
        //$("#cengci ul").css("background-color","red")//后代选择器管理的是子子孙孙
        //$("#cengci > ul").css("background-color","red")//只控制儿子级别的
        //$("h3+ul").css("background-color","red")//所有H3元素的下一个元素会发生改变(可以用下面的next（）代替)
        //$("h3~ul").css("background-color","green");//只要在H3后面是我的兄弟元素就都会发生改变(可以用下面的nextAll（）代替)
        //$('div').css("background-color","#0000FF");
        //$('#cengci div').css("background-color","#0000FF");
        //$('#cengci+#two').css("background-color","#0000FF");
        //$('#cengci').next().css("background-color","#0000FF");
        //$("h3").nextAll("ul").css("background","red");//上面的4444就没有发生变化（想让444也变化就要用siblings）
        $("h3").siblings("ul").css("background","red")//选择所有同辈的兄弟元素
    })
</script>
</head>

<body>
<!--
<div id="box">
    点击会隐藏
</div>--><!--这是第一个-->
    <ul>
      <li>44444444444</li>
      <li>44444444444</li>
      <li>44444444444</li>
      <li>44444444444</li>
    </ul>

<h3>下面的ul颜色会发生改变</h3>
    <ul>
      <li>11111111111</li>
      <li>11111111111</li>
      <li>11111111111</li>
      <li>11111111111</li>
    </ul>

<div id="cengci">
    <h3>下面的ul颜色会发生改变</h3>
    <ul>
      <li>11111111111</li>
      <li>11111111111</li>
      <li>11111111111</li>
      <li>11111111111</li>
    </ul>
    <ul>
      <li>333333</li>
      <li>333333</li>
      <li>333333</li>
      <li>333333</li>
    </ul>
    <div>
        <ul>
          <li>2222222222</li>
          <li>2222222222</li>
          <li>2222222222</li>
          <li>2222222222</li>
        </ul>
    </div>
</div>
<div id="two">
第二个div
</div>
<div id="two">
第二个div
</div>
</body>
</html>


wangxiaohui6687
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WEB05-jQuery-源代码.rar
08-19
代码： 使用JQuery完成页面定时弹出广告(DOM转换和选择器) 使用JQuery完成表格的隔行换色 使用JQuery完成复选框的全选效果(jQuery的属性操作) ...掌握JQuery的基本选择器,层次选择器 会使用JQuery完成DOM的基本操作.
【16】CSS基础（2）——选择器②高级选择器
倏存的博客
01-31 1081
CSS高级选择器:后代选择器/交集选择器/并集选择器
CSS复合选择器之后代选择器
m0_61629312的博客
04-06 585
CSS复合选择器之后代选择器
【CSS 教程系列第 8 篇】什么是 CSS 中的后代选择器
“Allen Su”的博客
11-25 6486
后代选择器，用来选择元素或元素组的所有后代元素。
复合选择器之后代选择器
weixin_47481102的博客
04-20 1344
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。 1、复合选择器可以更准确、更高效的选择目标元素（标签） 2、复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 3、常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
jQuery权威指南-源代码
11-11
2.2.2　层次选择器/20 2.2.3　简单过滤选择器/22 2.2.4　内容过滤选择器/25 2.2.5　可见性过滤选择器/27 2.2.6　属性过滤选择器/28 2.2.7　子元素过滤选择器/30 2.2.8　表单对象属性过滤选择器/32 2.2.9　表单选择器...
jQuery层次选择器用法示例
10-21
主要介绍了jQuery层次选择器用法,结合实例形式分析了jQuery针对页面元素层级操作的层次选择器使用技巧,需要的朋友可以参考下
jquery层次选择器的介绍
01-21
jquery层次选择器 jquery层次选择器，包括空格、>、next、+、nextAll、~、siblings、prev()、prevAll()等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在之后的同辈...
JQuery中层次选择器用法实例详解
10-24
主要介绍了JQuery中层次选择器用法,以实例形式较为详细的分析了jQuery中层次选择器的各种常见使用技巧,并备有较为详细的注释说明,需要的朋友可以参考下
CSS复合选择器---后代选择器、子选择器、并集选择器、伪类选择器
whileqq的博客
03-14 5392
CSS复合选择器 建立在基础选择器上，对基本选择器进行组合形成的 可以更准确、更高效的选择目标元素（标签） 包含：后代选择器、子选择器、并集选择器、伪类选择器 一、后代选择器 又称为包含选择器，可以选择父元素里面的子元素。 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。 ol li { color: pink; } <ol> <li>我是ol的孩子</li
后代选择器
weixin_30315905的博客
05-18 75
后代选择器（重点）写法：选择器+空格+...+选择器{属性：值}特点：无限隔代. 只要能代表标签，标签、类选择器、ID选择器的自由组合。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <tit...
后代选择器和子选择器
lzf的博客
04-15 1765
后代选择器 h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素 有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。 例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。 .div01 ul li { height: 50px; width: 1
jQuery-Selectors(选择器)的使用(二、层次篇)
12-01 88
.div { width:95%; margin-left:15px; margin-top:15px; margin-right:15px; padding-left:5px; padding-top:5px; padding-bottom:5px; background-color:#ccc; border:#999 1px solid; line-he...
后代选择器+nth-child()选择器
Fawna_huang的博客
09-25 2732
后代选择器“>”+nth-child()选择器之前一道面试题： .list img{ width: 10px; height: 20px; background: blue; } .list>p:nth-child(even) img{ background: red; } .list>p:last
CSS样式中的后代选择器和子代选择器
博客之家
04-18 5949
后代选择器 子代选择器 样式属性的继承性
CSS后代选择器
歪脖先生的博客
12-02 1万+
关系选择器 关系选择器，顾名思义，是根据HTML元素在DOM树中的关系来选择元素，这些关系包括后代、父子、同胞、相邻同胞。于是，关系选择器就包括后代选择器、子选择器、相邻同胞选择器、同胞选择器。 表 2-2 关系选择器 选择器 语法 功能描述 版本 后代选择器 E F 选择E元素的所有后代F元素 1
后代选择器和子代选择器的区别
热门推荐
c2311156c的博客
09-05 1万+
1.后代选择器： 写法：$("ancestor descendant") 例：$("div span")  指的是div标签下的所有span标签，不管是什么层级； 2.子代选择器： 写法：$("parent >  child") 例：$("div > span") 指的是div标签下的下一个层级的span，并不是所有；
CSS的后代选择器和子代选择器的区别
daponi的博客
03-04 2606
1.后代选择器： 写法：$(“ancestor descendant” ，标签之间用空格隔开 例在的代码中写： &lt;div&gt; &lt;p&gt; &lt;span&gt;s1&lt;/span&gt; &lt;/p&gt; &lt;span&gt;s2&lt;/span&gt; &lt;div&gt; &lt;span&gt;s3&lt;
jQuery层次选择器
最新发布
06-07
jQuery层次选择器可以用于选择指定元素在其父元素或祖先元素中的位置。以下是常用的层次选择器： 1. 子元素选择器（child selector）：使用>符号选择指定元素的直接子元素。例如，选择class为parent的元素的直接子...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值