04-老馬jQuery教程-DOM節(jié)點(diǎn)操作及位置和大小

1. jQuery創(chuàng)建DOM標(biāo)簽

1.1 DOM動(dòng)態(tài)創(chuàng)建標(biāo)簽的方法

DOM時(shí)代我們通過(guò)document的createElement方法動(dòng)態(tài)創(chuàng)建標(biāo)簽。創(chuàng)建標(biāo)簽后,動(dòng)態(tài)的給他添加屬性。例如代碼:

// 動(dòng)態(tài)創(chuàng)建標(biāo)簽
var domDiv = document.createElment('div');
// 動(dòng)態(tài)創(chuàng)建屬性
domDiv.setAttribute('id', 'box');
// 動(dòng)態(tài)設(shè)置內(nèi)部html標(biāo)簽
domDiv.innerHTML = '<span>動(dòng)態(tài)span</span>';
// 動(dòng)態(tài)追加到body標(biāo)簽中
document.body.appendChild(domDiv);

1.2 jQuery動(dòng)態(tài)創(chuàng)建標(biāo)簽的方式

jQuery的構(gòu)造函數(shù)本身可以接收html標(biāo)簽的字符串來(lái)動(dòng)態(tài)創(chuàng)建HTML標(biāo)簽。

語(yǔ)法結(jié)構(gòu): jQuery(html, [props])

參數(shù):

  • html:用于動(dòng)態(tài)創(chuàng)建DOM元素的HTML標(biāo)記字符串,注意標(biāo)簽盡量閉合。
  • props:用于附加到新創(chuàng)建元素上的屬性、事件和方法

返回值:返回新創(chuàng)建標(biāo)簽的jQuery包裝對(duì)象

// jq的 appendTo,類似DOM的appendTo方法
$("<div><p>Hello</p></div>").appendTo("body");

// 兩次參數(shù)的情況
$("<div></div>", {
  "class": "test", // 設(shè)置樣式類
  text: "Click me!",  // 設(shè)置內(nèi)容
  click: function(){  // 設(shè)置點(diǎn)擊事件處理程序
    $(this).toggleClass("test");
  }
}).appendTo("body"); // 追加到body標(biāo)簽

2. DOM節(jié)點(diǎn)操作

2.1 添加子節(jié)點(diǎn)append(content|fn)方法

  • 參數(shù):

    • content:類型String, Element, jQuery,添加的子節(jié)點(diǎn)。
    • fn(index,html):返回一個(gè)HTML字符串,用于追加到每一個(gè)匹配元素的里邊。接受兩個(gè)參數(shù),index參數(shù)為對(duì)象在這個(gè)集合中的索引值,html參數(shù)為這個(gè)對(duì)象原先的html值。
  • 返回值:當(dāng)前父包裝對(duì)象,jQuery

  • 實(shí)例:

<div id="msg">hi</div>
<script>
  $(function(){
    // 添加字符串
    $("#msg").append('<span>你好</span>');
    // 添加dom對(duì)象
    var domDiv = document.createElement('div');
    domDiv.innerHTML = "hi laoma q:515154084";
    $("#msg").append(domDiv);
    // 添加jQuery對(duì)象
    var $span = $('<span>我是 jQuery對(duì)象</span>');
    $("#msg").append($span);

    $("#msg").append(function(index, oldHtml) {
      return "<span>==" + index + "==</span>";
    });
  });
</script>

prepend(content|fn)方法跟append(content|fn)的使用方法一致,只不過(guò)一個(gè)是在最后追加子節(jié)點(diǎn),一個(gè)是在最前面追加子節(jié)點(diǎn)(prev vs after)

2.2 追加到appendTo(content)方法

  • 參數(shù):content: 用于被追加的內(nèi)容選擇器,String類型。
  • 返回值: 返回當(dāng)前的jQuery包裝對(duì)象。
  • 實(shí)例:
$("<div>****</div>").appendTo('body');

prependTo(content)方法,跟appendTo(content)的使用方法一致,一個(gè)是追加到最后,一個(gè)是追加到最前。

2.3 元素之后插入節(jié)點(diǎn)after(content|fn)方法

  • 參數(shù)
    • content:插入到每個(gè)目標(biāo)后的內(nèi)容,類型可以:String,DOM,jQuery
    • fn(index,html):函數(shù)必須返回一個(gè)html字符串。
  • 返回值: jQuery包裝對(duì)象
  • 實(shí)例
// 字符串
$('div').after('<p>1234</p>');
// jQuery對(duì)象
$("p").after($("#msg"));
// dom對(duì)象
$("p").after($("#msg")[0]);

// 傳入回調(diào)函數(shù)
$("div").after(function(index, html) {
  return '<p>' + index  + '</p>'
})

before(content|fn) 方法正好是after(content|fn)相反的方法,用法一致。

2.4 插入某個(gè)元素之后insertAfter(content)方法

參數(shù): content:插入到每個(gè)目標(biāo)后的內(nèi)容,類型可以:String,DOM,jQuery。

把所有匹配的元素插入到另一個(gè)、指定的元素元素集合的后面。實(shí)際上,使用這個(gè)方法是顛倒了常規(guī)的$(A).after(B)的操作,即不是把B插到A后面,而是把A插到B后面。

$("p").insertAfter("#foo");

insertBefore(content)跟此方法相反。

2.5 包裹節(jié)點(diǎn)wrap(html|element|fn)方法

  • 概述:

把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裹起來(lái)。
這種包裝對(duì)于在文檔中插入額外的結(jié)構(gòu)化標(biāo)記最有用,而且它不會(huì)破壞原始文檔的語(yǔ)義品質(zhì)。這個(gè)函數(shù)的原理是檢查提供的第一個(gè)元素(它是由所提供的HTML標(biāo)記代碼動(dòng)態(tài)生成的),并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素--這個(gè)祖先元素就是包裹元素。當(dāng)HTML標(biāo)記代碼中的元素包含文本時(shí)無(wú)法使用這個(gè)函數(shù)。因此,如果要添加文本應(yīng)該在包裹完成之后再行添加。

  • 參數(shù):
    • html, String類型,HTML標(biāo)記代碼字符串,用于動(dòng)態(tài)生成元素并包裹目標(biāo)元素
    • element, Element類型,用于包裝目標(biāo)元素的DOM元素。
    • fn: 生成包裹結(jié)構(gòu)的一個(gè)函數(shù),返回包裹結(jié)構(gòu)html
  • 返回值:jQuery包裝對(duì)象
  • 實(shí)例
<script>
// 把所有的段落用一個(gè)新創(chuàng)建的div包裹起來(lái)
$("p").wrap("<div class='wrap'></div>");
// 用ID是"content"的div將每一個(gè)段落包裹起來(lái)
$("p").wrap(document.getElementById('content'));
// 用原先div的內(nèi)容作為新div的class,并將每一個(gè)元素包裹起來(lái)
</script>

 <!-- HTML 代碼: -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<script>
// jQuery 代碼:
$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});
</script>

<!-- // 結(jié)果: -->
<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

2.6 去掉父節(jié)點(diǎn)包裹unwrap()方法

這個(gè)方法將移出元素的父元素。這能快速取消 .wrap()方法的效果。匹配的元素(以及他們的同輩元素)會(huì)在DOM結(jié)構(gòu)上替換他們的父元素。

<!-- HTML 代碼: -->
<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>
<script>
  // jQuery 代碼:
  $("p").unwrap()
</script>
<!-- 結(jié)果: -->
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

2.7 集合包裝wrapAll(html|ele)方法

  • 概述

將所有匹配的元素用單個(gè)元素包裹起來(lái)。這于 .wrap()是不同的,.wrap()為每一個(gè)匹配的元素都包裹一次。這種包裝對(duì)于在文檔中插入額外的結(jié)構(gòu)化標(biāo)記最有用,而且它不會(huì)破壞原始文檔的語(yǔ)義品質(zhì)。這個(gè)函數(shù)的原理是檢查提供的第一個(gè)元素并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素--這個(gè)祖先元素就是包裝元素。

  • 參數(shù)

    • html, String類型,HTML標(biāo)記代碼字符串,用于動(dòng)態(tài)生成元素并包裝目標(biāo)元素
    • elem, Element類型,用于包裝目標(biāo)元素的DOM元素
  • 示例

$("p").wrapAll("<div></div>");
// 用一個(gè)生成的div將所有段落包裹起來(lái)
$("p").wrapAll(document.createElement("div"));

2.8 包裹內(nèi)部子元素wrapInner(htm|element|fnl)方法

  • 概述

將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用一個(gè)HTML結(jié)構(gòu)包裹起來(lái)
這個(gè)函數(shù)的原理是檢查提供的第一個(gè)元素(它是由所提供的HTML標(biāo)記代碼動(dòng)態(tài)生成的),并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素--這個(gè)祖先元素就是包裝元素。

  • 參數(shù)

    • html, String類型,HTML標(biāo)記代碼字符串,用于動(dòng)態(tài)生成元素并包裝目標(biāo)元素
    • element,Element類型,用于包裝目標(biāo)元素的DOM元素
    • fn,F(xiàn)unction類型,生成包裹結(jié)構(gòu)的一個(gè)函數(shù)
  • 示例

// 把所有段落內(nèi)的每個(gè)子內(nèi)容加粗
$("p").wrapInner("<b></b>");
// 把所有段落內(nèi)的每個(gè)子內(nèi)容加粗
$("p").wrapInner(document.createElement("b"));
<!-- 用原先div的內(nèi)容作為新div的class,并將每一個(gè)元素包裹起來(lái) -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<script>
$('.inner').wrapInner(function() {
  return '<div class="' + $(this).text() + '" />';
});
</script>

<!-- 結(jié)果: -->
<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

2.9 替換階段

  • 方法:replaceAll(selector),用匹配的元素替換掉所有 selector匹配到的元素。

  • 方法:replaceWith(content),用于將匹配元素替換掉的內(nèi)容。可以是String\DOM\jQuery

// 替換掉所有的p,以下兩種方法都可以
$("p").replaceWith("<b>Paragraph. </b>");
$("<b>Paragraph. </b>").replaceAll("p");

2.10 清空子元素

empty()方法,刪除匹配的元素集合中所有的子節(jié)點(diǎn)

$("p").empty();

2.11 刪除節(jié)點(diǎn)

remove()方法從DOM中刪除所有匹配的元素。

// 刪除所有的p標(biāo)簽
$("p").remove();

2.12 復(fù)制節(jié)點(diǎn)

clone([Even[,deepEven]])方法可以對(duì)節(jié)點(diǎn)進(jìn)行克隆。

  • Even:一個(gè)布爾值(true 或者 false)指示事件處理函數(shù)是否會(huì)被復(fù)制。
  • deepEven:一個(gè)布爾值,指示是否對(duì)事件處理程序和克隆的元素的所有子元素的數(shù)據(jù)應(yīng)該被復(fù)制。

$("b").clone().prependTo("p");

上傳視頻標(biāo)簽文本框特效案例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>視頻標(biāo)簽案例</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet"  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style>
    html, body, div {
      padding: 0;
      margin: 0;
    }

    .label-wrap {
      width: 300px;
      /* height: 30px; */
      line-height: 30px;
      padding: 10px;
      border: 1px solid #ccc;
      overflow: hidden;
      margin: 100px auto;
    }

    .label-wrap .txt-lb {
      border: none;
      outline: none;
      height: 30px;
      line-height: 30px;
      width: 60px;
      float: left;
    }

    .label-wrap .lb-span {
      float: left;
      border: 1px solid #ccc;
      padding: 0 10px;
      margin-right: 10px;
    }
  </style>
  <script src="./lib/jquery-1.12.4.js"></script>
</head>
<body>
  <div class="label-wrap">
    <span class="lb-span">jQuery<i class="glyphicon glyphicon-remove"></i></span>
    <input type="text" class="txt-lb">
  </div>
  <script>
    $(function(){

      // 當(dāng)文本框按下按鍵時(shí)處理
      $('.txt-lb').on('keydown', function(e) {
        // 判斷用戶是否按下了回車: e.which == 13 回車鍵
        if( e.which == 13 ) {
          inputToLabel();
        } else if( e.which == 8) {
          // 按下了刪除鍵
          // 把最后一個(gè)lb-sapn標(biāo)簽刪除,把里面文本放到文本上去。
          if($(this).val().length <= 0) {
            var txt = $('.label-wrap span:last').text();
            $(this).val(txt);
            $('.label-wrap span:last').remove();

            // 取消默認(rèn)行為,取消后退鍵刪除字符的默認(rèn)行為
            e.preventDefault();
            e.stopPropagation();
          }
        }
      });

      // 給整個(gè)div綁定一個(gè)點(diǎn)擊事件,進(jìn)行給文本獲取焦點(diǎn)
      $('.label-wrap').on('click', function(e) {
        $('.txt-lb').focus();
      })

      // 當(dāng)文本框失去焦點(diǎn)到時(shí)候,給div添加span標(biāo)簽。另外input清空
      $('.txt-lb').on('blur', function(e) {
        inputToLabel();
      });

      // 刪除label按鈕點(diǎn)擊事件
      $('.label-wrap').on('click', 'i', function(e) {
        $(this).parent().remove();
      });

      //  將文本框中的文本生成 label樣式的標(biāo)簽。
      function inputToLabel() {
        // 判斷文本框不為空,則進(jìn)行添加標(biāo)簽操作
        if($(".txt-lb").val().length > 0 ) {
          // 當(dāng)前文本框的 文本生成一個(gè)span標(biāo)簽放到文本框之前
          var $lb = $('<span class="lb-span">' + $(".txt-lb").val() +'<i class="glyphicon glyphicon-remove"></i></span>');
          // 在文本框前面追加一個(gè)lb對(duì)象
          $(".txt-lb").before($lb);
          $(".txt-lb").val(''); // 設(shè)置value為空
        }
      }
    });
  </script>
</body>
</html>

3. DOM的CSS屬性讀寫

3.1 簡(jiǎn)單獲取元素的內(nèi)部寬高(不包括邊框和外邊距)

  • innerHeight()

獲取第一個(gè)匹配元素內(nèi)部區(qū)域高度(包括補(bǔ)白、不包括邊框)。此方法對(duì)可見和隱藏元素均有效。沒(méi)有參數(shù),返回值是Integer類型

  • 示例
獲取第一段落內(nèi)部區(qū)域高度。
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
</script>
<!-- 結(jié)果: -->
<p>Hello</p><p>innerHeight: 16</p>
  • innerWidth()

獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾龋òㄑa(bǔ)白、不包括邊框)。此方法對(duì)可見和隱藏元素均有效。沒(méi)有參數(shù),返回值是Integer類型

  • 示例
<!-- 獲取第一段落內(nèi)部區(qū)域?qū)挾取?-->
<p>Hello</p><p>2nd Paragraph</p>
<script>
  var p = $("p:first");
  $("p:last").text( "innerWidth:" + p.innerWidth() );
</script>
<!-- 結(jié)果: -->
<p>Hello</p><p>innerWidth: 40</p>

3.2 獲取元素的外部寬高(包括邊框或外邊距)

3.2.1 outerHeight([options])

  • 概述

獲取第一個(gè)匹配元素外部高度(默認(rèn)包括補(bǔ)白和邊框)。
此方法對(duì)可見和隱藏元素均有效。

  • 參數(shù): optionsBoolean默認(rèn)值:'false',設(shè)置為 true 時(shí),計(jì)算邊距在內(nèi)。

  • 示例

<!-- 獲取第一段落外部高度。 -->
<p>Hello</p><p>2nd Paragraph</p>
<script>
  var p = $("p:first");
  $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
</script>
<!-- 結(jié)果: -->
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>

3.2.2 outerWidth([options])

  • 概述

獲取第一個(gè)匹配元素外部寬度(默認(rèn)包括補(bǔ)白和邊框)。
此方法對(duì)可見和隱藏元素均有效。

  • 參數(shù):optionsBoolean默認(rèn)值:'false',設(shè)置為 true 時(shí),計(jì)算邊距在內(nèi)。

  • 示例

獲取第一段落外部寬度。
<p>Hello</p><p>2nd Paragraph</p>
<script>
  var p = $("p:first");
  $("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
</script>
<!-- 結(jié)果: -->
<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>

3.3 jQuery獲取元素內(nèi)容區(qū)域的寬高

3.3.1 height([val|fn])

  • 概述

取得匹配元素當(dāng)前計(jì)算的高度值(px)。在 jQuery 1.2 以后可以用來(lái)獲取 window 和 document 的高

  • 參數(shù)

valString 可以是: Number, Function兩種類似。

  • Number: 設(shè)定CSS中 'height' 的值,可以是字符串或者數(shù)字,還可以是一個(gè)函數(shù),返回要設(shè)置的數(shù)值。函數(shù)接受兩個(gè)參數(shù),第一個(gè)參數(shù)是元素在原先集合中的索引位置,第二個(gè)參數(shù)為原先的高度。

  • function(index, height) index:String, height:Number 返回用于設(shè)置高度的一個(gè)函數(shù)。接收元素的索引位置和元素舊的高度值作為參數(shù)。

  • 示例

//第一種:無(wú)參數(shù)描述:
// 獲取第一段的高
$("p").height();
// 第二種:一個(gè)參數(shù)參數(shù)val 
// 把所有段落的高設(shè)為 20:
$("p").height(20);

// 參數(shù)function(index, height) 
// 以 10 像素的幅度增加 p 元素的高度
  $("button").click(function(){
    $("p").height(function(n,c){
    return c+10;
    });
  });

3.3.2 width([val|fn])

width的用法跟height一致,不再贅述。

3.4 獲取和設(shè)置滾動(dòng)條的寬高

3.4.1 scrollTop([val])

  • 概述

獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移。此方法對(duì)可見和隱藏元素均有效。

  • 參數(shù): val 可以是:String, Number類型

  • 實(shí)例:

var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
$("div.demo").scrollTop(300);

3.4.2 scrollLeft([val])

用法通scrollTop,不再贅述。

3.5 獲取位置和偏移量

3.5.1 position()

  • 概述

獲取匹配元素相對(duì)父元素的偏移。此方法只對(duì)可見元素有效。從邊框開始計(jì)算。

  • 返回值:Object{top,left} 返回的對(duì)象包含兩個(gè)整型屬性:top 和 left。 為精確計(jì)算結(jié)果,請(qǐng)?jiān)谘a(bǔ)白、邊框和填充屬性上使用像素單位。
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
// 結(jié)果:<p>Hello</p><p>left: 15, top: 15</p>

3.5.2 offset([coordinates])

  • 概述

獲取匹配元素在當(dāng)前視口的相對(duì)偏移。返回的對(duì)象包含兩個(gè)整型屬性:top 和 left,以像素計(jì)。此方法只對(duì)可見元素有效。

  • 參數(shù)可以省略(獲?。蛘?coordinates 是Object類型,屬性:{top,left} 必需。規(guī)定以像素計(jì)的 top 和 left 坐標(biāo)。比如 {top:100,left:0} ,或者:帶有 top 和 left 屬性的對(duì)象
// 獲取第二段的偏移
// <p>Hello</p><p>2nd Paragraph</p>
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
// 結(jié)果:
// <p>Hello</p><p>left: 0, top: 35</p>

// 設(shè)置最后一個(gè)段落的top和left值
$("p:last").offset({ top: 10, left: 30 });

預(yù)告:
下一篇:jQuery的動(dòng)畫系統(tǒng)詳解。


對(duì)應(yīng)視頻地址:http://qtxh.ke.qq.com
老馬qq: 515154084
老馬微信:請(qǐng)掃碼

微信:Flydragon_malun
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容