发表于: 2020-03-10 23:21:56

1 1352


今天完成的事情:今天学习了jQ的尺寸方法和遍历祖先的方法
明天计划的事情:继续学习jQ的后续内容
遇到的问题:实际操作不足还是要多多熟练下
收获:尺寸方法可以很容易处理元素和浏览器窗口的尺寸。

width() 和 height() 方法

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。例如

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        var txt = "";
        txt += "div 的宽度是: " + $("#div1").width() + "</br>";
        txt += "div 的高度是: " + $("#div1").height();
        $("#div1").html(txt);
      });
    });
  </script>
</head>

<body>

  <div id="div1"
    style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
  <br>
  <button>显示 div 元素的尺寸</button>
  <p>width() - 返回元素的宽度</p>
  <p>height() - 返回元素的高度</p>

</body>

</html>

运行结果


点击获取

innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        var txt = "";
        txt += "div 宽度: " + $("#div1").width() + "</br>";
        txt += "div 高度: " + $("#div1").height() + "</br>";
        txt += "div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>";
        txt += "div 高度,包含内边距: " + $("#div1").innerHeight();
        $("#div1").html(txt);
      });
    });
  </script>
</head>

<body>
  <div id="div1"
    style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
  <br>

  <button>显示 div 元素的尺寸</button>
  <p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
  <p>innerHeight() - 返回元素的高度 (包含内边距)。</p>

</body>

</html>

运行结果

点击

成功获取

uterWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        var txt = "";
        txt += "div 宽度: " + $("#div1").width() + "</br>";
        txt += "div 高度: " + $("#div1").height() + "</br>";
        txt += "div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
        txt += "div 高度,包含内边距和边框: " + $("#div1").outerHeight();
        $("#div1").html(txt);
      });
    });
  </script>
</head>

<body>
  <div id="div1"
    style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
  <br>

  <button>显示 div 元素的尺寸</button>
  <p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p>
  <p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p>

</body>

</html>

运行结果

同样的

jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达期望的某个元素为止。

jQuery Dimensions

图示解析:

  • <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
  • <ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
  • 左边的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
  • <span> 元素是 <li> 的子元素,同时是 <ul> 和 <div> 的后代。
  • 两个 <li> 元素是同胞(拥有相同的父元素)。
  • 右边的 <li> 元素是 <b> 的父元素,<ul> 的子元素,同时是 <div> 的后代。
  • <b> 元素是右边的 <li> 的子元素,同时是 <ul> 和 <div> 的后代。

向上遍历 DOM 树

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .ancestors * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("span").parent().css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body>

  <div class="ancestors">
    <div style="width:500px;">div (曾祖父元素)
      <ul>ul (祖父元素)
        <li>li (父元素)
          <span>span</span>
        </li>
      </ul>
    </div>

    <div style="width:500px;">div (祖父元素)
      <p>p (父元素)
        <span>span</span>
      </p>
    </div>
  </div>

</body>

</html>

运行结果

返回了span的直接父元素

parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .ancestors * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("span").parents().css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body class="ancestors">body (曾曾祖父元素)
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>
  </div>
</body>

</html>

运行结果

可以使用可选参数来过滤对祖先元素的搜索。

<!DOCTYPE html>
<html>

<head>
  <style>
    .ancestors * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("span").parents("ul").css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body class="ancestors">body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>
  </div>
</body>

</html>

运行结果

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    .ancestors * {
      displayblock;
      border2px solid lightgrey;
      colorlightgrey;
      padding5px;
      margin15px;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("span").parentsUntil("div").css({ "color": "red""border": "2px solid red" });
    });
  </script>
</head>

<body class="ancestors"> body (曾曾祖父元素)
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>
  </div>
</body>

运行结果

成功捕捉span和div间的元素

剩下的明天继续


返回列表 返回列表
评论

    分享到