jQuery（三）jQuery HTML、text()、html()、attr()、prop ()、添加洗掉元素、不同方法創建元素、獲取并設定 CSS 類、尺寸

文章目錄

jQuery（三）jQuery HTML、text()、html()、attr()、prop ()、添加洗掉元素、不同方法創建元素、獲取并設定 CSS 類、尺寸
- 1. jQuery - 獲取內容和屬性
- - jQuery DOM 操作
  - 獲得內容 - text()、html() 以及 val()
  - 獲取屬性 - attr()
  - **attr** 和 prop
- 2. jQuery - 設定內容和屬性
- - 設定內容 - text()、html() 以及 val()
  - text()、html() 以及 val() 的回呼函式
  - 設定屬性 - attr()
  - attr() 的回呼函式
- 3. 添加元素
- - jQuery append() 方法
  - jQuery prepend() 方法
  - 通過 append() 和 prepend() 方法添加若干新元素
  - jQuery after() 和 before() 方法
  - 通過 after() 和 before() 方法添加若干新元素
- 4. jQuery - 洗掉元素
- - 洗掉元素/內容
- 5. jQuery - 獲取并設定 CSS 類
- - jQuery 操作 CSS
  - 實體樣式表
  - jQuery addClass() 方法
  - jQuery removeClass() 方法
  - jQuery toggleClass() 方法
- 5. jQuery css() 方法
- - 回傳 CSS 屬性
  - 設定 CSS 屬性
  - 設定多個 CSS 屬性
- 6. jQuery 尺寸
- - jQuery 尺寸方法
  - jQuery 尺寸
  - jQuery width() 和 height() 方法
  - jQuery innerWidth() 和 innerHeight() 方法
  - jQuery outerWidth() 和 outerHeight() 方法
- 7. 復習this

總結：
text()、html() 以及 val()，同樣擁有回呼函式，回呼函式有兩個引數：被選元素串列中當前元素的下標，以及原始（舊的）值

append/prepend 是在選擇元素內部嵌入，

after/before 是在元素外面追加
function afterText(){
    var txt1="<b>I </b>";                    // 使用 HTML 創建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 創建元素
    var txt3=document.createElement("big");  // 使用 DOM 創建元素
    txt3.innerHTML="jQuery!";
    $("img").after([txt1,txt2,txt3]);          // 在圖片后添加文本
}
remove() - 洗掉被選元素（及其子元素），全部洗掉

empty() - 從被選元素中洗掉子元素，僅洗掉本身

width() 方法設定或回傳元素的寬度（不包括內邊距、邊框或外邊距），

height() 方法設定或回傳元素的高度（不包括內邊距、邊框或外邊距），

innerWidth() 方法回傳元素的寬度（包括內邊距），

innerHeight() 方法回傳元素的高度（包括內邊距），

outerWidth() 方法回傳元素的寬度（包括內邊距和邊框），

outerHeight() 方法回傳元素的高度（包括內邊距和邊框），

1. jQuery - 獲取內容和屬性

jQuery 擁有可操作 HTML 元素和屬性的強大方法，

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力，

jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易，

DOM = Document Object Model（檔案物件模型）

DOM 定義訪問 HTML 和 XML 檔案的標準：

“W3C 檔案物件模型獨立于平臺和語言的界面，允許程式和腳本動態訪問和更新檔案的內容、結構以及樣式，”

獲得內容 - text()、html() 以及 val()

三個簡單實用的用于 DOM 操作的 jQuery 方法：

text() - 設定或回傳所選元素的文本內容
html() - 設定或回傳所選元素的內容（包括 HTML 標記）
val() - 設定或回傳表單欄位的值

下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

下面的例子演示如何通過 jQuery val() 方法獲得輸入欄位的值：

$("#btn1").click(function(){
  alert("值為: " + $("#test").val());
});

獲取屬性 - attr()

jQuery attr() 方法用于獲取屬性值，

下面的例子演示如何獲得鏈接中 href 屬性的值：

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

attr 和 prop

prop()函式的結果:

1.如果有相應的屬性，回傳指定屬性值，

2.如果沒有相應的屬性，回傳值是空字串，

attr()函式的結果:

1.如果有相應的屬性，回傳指定屬性值，

2.如果沒有相應的屬性，回傳值是 undefined，

對于HTML元素本身就帶有的固有屬性，在處理時，使用prop方法，

對于HTML元素我們自己自定義的DOM屬性，在處理時，使用 attr 方法，

實體 1：

<a href="https://www.runoob.com" target="_self" class="btn">菜鳥教程</a>

這個例子里元素的 DOM 屬性有: href、target 和 class，這些屬性就是元素本身就帶有的屬性，也是 W3C 標準里就包含有這幾個屬性，或者說在 IDE 里能夠智能提示出的屬性，這些就叫做固有屬性，處理這些屬性時，建議使用 prop 方法，

<a href="#" id="link1" action="delete" rel="nofollow">洗掉</a>

這個例子里元素的 DOM 屬性有: href、id 和 action，很明顯，前兩個是固有屬性，而后面一個 action 屬性是我們自己自定義上去的，元素本身是沒有這個屬性的，這種就是自定義的 DOM 屬性，處理這些屬性時，建議使用 attr 方法，

2. jQuery - 設定內容和屬性

設定內容 - text()、html() 以及 val()

我們將使用前一章中的三個相同的方法來設定內容：

text() - 設定或回傳所選元素的文本內容
html() - 設定或回傳所選元素的內容（包括 HTML 標記）
val() - 設定或回傳表單欄位的值

下面的例子演示如何通過 text()、html() 以及 val() 方法來設定內容：

<!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(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
  });
});
</script>
</head>

<body>
<p id="test1">這是一個段落，</p>
<p id="test2">這是另外一個段落，</p>
<p>輸入框: <input type="text" id="test3" value="菜鳥教程"></p>
<button id="btn1">設定文本</button>
<button id="btn2">設定 HTML</button>
<button id="btn3">設定值</button>
</body>
</html>

text()、html() 以及 val() 的回呼函式

上面的三個 jQuery 方法：text()、html() 以及 val()，同樣擁有回呼函式，回呼函式有兩個引數：被選元素串列中當前元素的下標，以及原始（舊的）值，然后以函式新值回傳您希望使用的字串，

下面的例子演示帶有回呼函式的 text() 和 html()：

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

設定屬性 - attr()

jQuery attr() 方法也用于設定/改變屬性值，

下面的例子演示如何改變（設定）鏈接中 href 屬性的值：

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

attr() 方法也允許您同時設定多個屬性，

下面的例子演示如何同時設定 href 和 title 屬性：

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

attr() 的回呼函式

jQuery 方法 attr()，也提供回呼函式，==回呼函式有兩個引數：被選元素串列中當前元素的下標，以及原始（舊的）值，==然后以函式新值回傳您希望使用的字串，

下面的例子演示帶有回呼函式的 attr() 方法：

$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

3. 添加元素

我們將學習用于添加新內容的四個 jQuery 方法：

append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之后插入內容
before() - 在被選元素之前插入內容

jQuery append() 方法

jQuery append() 方法在被選元素的結尾插入內容（仍然在該元素的內部，并且可以直接添加html標簽），====

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>追加文本</b>，");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>追加串列項</li>");
  });
});
</script>

jQuery prepend() 方法

jQuery prepend() 方法在被選元素的開頭插入內容，

<script>
$(document).ready(function(){
	$("#btn1").click(function(){
		$("p").prepend("<b>在開頭追加文本</b>， ");
	});
	$("#btn2").click(function(){
		$("ol").prepend("<li>在開頭添加串列項</li>");
	});
});
</script>

通過 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我們只在被選元素的開頭/結尾插入文本/HTML，

不過，==append() 和 prepend() 方法能夠通過引數接收無限數量的新元素，==可以通過 jQuery 來生成文本/HTML（就像上面的例子那樣），或者通過 JavaScript 代碼和 DOM 元素，

在下面的例子中，我們創建若干個新元素，這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建，然后我們通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效）：

function appendText(){
    var txt1="<p>文本-1，</p>";              // 使用 HTML 標簽創建文本
    var txt2=$("<p></p>").text("文本-2，");  // 使用 jQuery 創建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本-3，";               // 使用 DOM 創建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

jQuery after() 和 before() 方法

append/prepend 是在選擇元素內部嵌入，

after/before 是在元素外面追加，

jQuery after() 方法在被選元素之后插入內容，

jQuery before() 方法在被選元素之前插入內容，

$("img").after("在后面添加文本");
 
$("img").before("在前面添加文本");

通過 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能夠通過引數接收無限數量的新元素，可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建新元素，

在下面的例子中，我們創建若干新元素，這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建，然后我們通過 after() 方法把這些新元素插到文本中（對 before() 同樣有效）：

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 創建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 創建元素
    var txt3=document.createElement("big");  // 使用 DOM 創建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在圖片后添加文本
}

4. jQuery - 洗掉元素

通過 jQuery，可以很容易地洗掉已有的 HTML 元素，

洗掉元素/內容

如需洗掉元素和內容，一般可使用以下兩個 jQuery 方法：

remove() - 洗掉被選元素（及其子元素），全部洗掉
```
$("#div1").remove();
```
empty() - 從被選元素中洗掉子元素，僅洗掉本身
```
$("#div1").empty();
```

5. jQuery - 獲取并設定 CSS 類
addClass('c1 c2 ...' | function(i, c)) -- 添加一個或多個類，

removerClass('c1 c2 ...' | function(i, c)) -- 洗掉一個或多個類，

toggleClass('c1 c2 ...' | function(i, c), switch?) -- 切換一個或多個類的添加和洗掉，
第一個引數表示要添加或洗掉的類，既可以用類串列，也可以用函式回傳值指定（i 是選擇器選中的所有元素中當前物件的索引值，c 是當前物件的類名），

switch: 布林值，true 表示只添加，false 表示只洗掉，

jQuery 操作 CSS

jQuery 擁有若干進行 CSS 操作的方法，我們將學習下面這些：

addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素洗掉一個或多個類
toggleClass() - 對被選元素進行添加/洗掉類的切換操作
css() - 設定或回傳樣式屬性

實體樣式表

下面的樣式表將用于本頁的所有例子：

.important
{
        font-weight:bold;
        font-size:xx-large;
}
 
.blue
{
        color:blue;
}

jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 屬性，當然，在添加類時，您也可以選取多個元素：

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

您也可以在 addClass() 方法中規定多個類：

$("button").click(function(){
  $("body div:first").addClass("important blue");
});

jQuery removeClass() 方法

下面的例子演示如何在不同的元素中洗掉指定的 class 屬性：

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

jQuery toggleClass() 方法

下面的例子將展示如何使用 jQuery toggleClass() 方法，該方法對被選元素進行添加/洗掉類的切換操作：

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

5. jQuery css() 方法

css() 方法設定或回傳被選元素的一個或多個樣式屬性，

回傳 CSS 屬性

如需回傳指定的 CSS 屬性的值，請使用如下語法：

css(“propertyname”);

下面的例子將回傳首個匹配元素的 background-color 值：

$("p").css("background-color");

設定 CSS 屬性

如需設定指定的 CSS 屬性，請使用如下語法：

css(“propertyname”,“value”);

下面的例子將為所有匹配元素設定 background-color 值：

$("p").css("background-color","yellow");

設定多個 CSS 屬性

如需設定多個 CSS 屬性，請使用如下語法：

css({“propertyname”:“value”,“propertyname”:“value”,…});

下面的例子將為所有匹配元素設定 background-color 和 font-size：

$("p").css({"background-color":"yellow","font-size":"200%"});

6. jQuery 尺寸

通過 jQuery，很容易處理元素和瀏覽器視窗的尺寸，

jQuery 尺寸方法

jQuery 提供多個處理尺寸的重要方法：

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

jQuery 尺寸

jQuery Dimensions

jQuery width() 和 height() 方法

width() 方法設定或回傳元素的寬度（不包括內邊距、邊框或外邊距），

height() 方法設定或回傳元素的高度（不包括內邊距、邊框或外邊距），

下面的例子回傳指定的

元素的寬度和高度：

$("button").click(function(){
  var txt="";
  txt+="div 的寬度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法回傳元素的寬度（包括內邊距），

innerHeight() 方法回傳元素的高度（包括內邊距），

下面的例子回傳指定的

元素的 inner-width/height：

$("button").click(function(){
  var txt="";
  txt+="div 寬度，包含內邊距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含內邊距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法回傳元素的寬度（包括內邊距和邊框），

outerHeight() 方法回傳元素的高度（包括內邊距和邊框），

下面的例子回傳指定的

元素的 outer-width/height：

$("button").click(function(){
  var txt="";
  txt+="div 寬度，包含內邊距和邊框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含內邊距和邊框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

7. 復習this

使用場合嚴格對照這三種用法：

全域環境

全域環境使用this，它指的就是頂層物件window，
```
this === window // true

function f() {
  console.log(this === window);
}
f() // true
```
上面代碼說明，不管是不是在函式內部，只要是在全域環境下運行，this就是指頂層物件window，
建構式

建構式中的this，指的是實體物件，
```
var Obj = function (p) {
  this.p = p;
};
```
上面代碼定義了一個建構式Obj，由于this指向實體物件，所以在建構式內部定義this.p，就相當于定義實體物件有一個p屬性，
```
var o = new Obj('Hello World!');
o.p // "Hello World!"
```
物件的方法

如果物件的方法里面包含this，this的指向就是方法運行時所在的物件，該方法賦值給另一個物件，就會改變this的指向，

但是，這條規則很不容易把握，請看下面的代碼，
```
var obj ={
  foo: function () {
    console.log(this);
  }
};

obj.foo() // obj
```
上面代碼中，obj.foo方法執行時，它內部的this指向obj，

但是，下面這幾種用法，都會改變this的指向，
```
// 情況一
(obj.foo = obj.foo)() // window
// 情況二
(false || obj.foo)() // window
// 情況三
(1, obj.foo)() // window
```
上面代碼中，obj.foo就是一個值，這個值真正呼叫的時候，運行環境已經不是obj了，而是全域環境，所以this不再指向obj，
- 如果this所在的方法不在物件的第一層，這時this只是指向當前一層的物件，而不會繼承更上面的層，
```
var a = {
  p: 'Hello',
  b: {
    m: function() {
      console.log(this.p);
    }
  }
};

a.b.m() // undefined
```
  上面代碼中，a.b.m方法在a物件的第二層（b沒有緊跟著a的意思），該方法內部的this不是指向a，而是指向a.b，因為實際執行的是下面的代碼，
```
var b = {
  m: function() {
   console.log(this.p);
  }
};

var a = {
  p: 'Hello',
  b: b
};

(a.b).m() // 等同于 b.m()
```
  如果要達到預期效果，只有寫成下面這樣，（這里b緊跟a后面，this就指向a了）
```
var a = {
  b: {
    m: function() {
      console.log(this.p);
    },
    p: 'Hello'
  }
};
```
- 如果這時將嵌套物件內部的方法賦值給一個變數，this依然會指向全域物件，
```
var a = {
  b: {
    m: function() {
      console.log(this.p);
    },
    p: 'Hello'
  }
};

var hello = a.b.m;
hello() // undefined
```
  上面代碼中，m是多層物件內部的一個方法，為求簡便，將其賦值給hello變數，結果呼叫時，this指向了頂層物件，為了避免這個問題，可以只將m所在的物件賦值給hello，這樣呼叫時，this的指向就不會變，（賦值的時候不緊貼著包含this的那個屬性，即m，通過.m()的方式呼叫m）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294967.html

標籤：其他

上一篇：JavaWeb_JSON篇

下一篇：JavaScript中開發常用方法-總結-持續更新