【Jquery 课堂笔记02】复杂结构的标签获取与修改

【Jquery 课堂笔记02】复杂结构的标签获取与修改_后代选择器

复杂结构的标签获取_后代选择器

效果展示

【Jquery 课堂笔记02】复杂结构的标签获取与修改_后代选择器_jquery

如图所示，本节讲的是

在复杂的页面结构中去获取到指定位置的标签内容
jquery的赋值方式

注意：

由于jquery的$中支持多种选择器的使用，所以在获取到指定的标签内容的时候我们可以通过多种的选择器搭配使用
在前面提到过获取文本内容一般是Text(),此时该方法的参数为空，如果方法中传入内容的话便可以实现标签内容的修改
当使用派生选择器进行标签内容修改的话，一旦没有指明下标的话，会全部修改

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <div id="d1">
      <span class="ss"></span>
      <span class="ss">
        <p>第一个p标签的内容</p>
        <p>第二个p标签的内容</p>
        <p>第三个p标签的内容</p>
      </span>
    </div>

    <!-- 引入外部jquery资源文件 -->
    <script src="./js/jquery-2.1.1.min.js"></script>
    <script>// 获取第二个p标签的内容
      var p2 = $("#d1 .ss:eq(1) p:eq(1)").text();
      alert(p2);

      // 赋值
      var msg = "这是赋值操作！";
      $("#d1 .ss:eq(1) p:eq(0)").text(msg);

      // 注意：一旦没有指明下标的话，会全部修改
      $("p").text(msg);</script>
  </body>
</html>

0 条评论