jQuery學習筆記-3-HTML操作

阿新 • • 發佈：2018-11-15

一.獲取內容和屬性

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

1.jQuery DOM 操作

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

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

DOM = Document Object Model（文件物件模型）

DOM 定義訪問 HTML 和 XML 文件的標準：

“W3C 文件物件模型獨立於平臺和語言的介面，允許程式和指令碼動態訪問和更新文件的內容、結構以及樣式。”

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

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

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

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

<!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(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">這是段落中的 <b>粗體</b> 文字。</p>
<button id="btn1">顯示文字</button>
<button id="btn2">顯示 HTML</button>
</body>
</html>

執行結果：

Text: 這是段落中的粗體文字。
HTML: 這是段落中的 <b>粗體</b> 文字。

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

<script>
$(document).ready(function(){
	$("button").click(function(){
		alert("值為："+$("#test").val());
	});
});
</script>
<button>顯示值</button>
<input type="text" id="test" value="test">

3.獲取屬性 - attr()

jQuery attr() 方法用於獲取屬性值。

下面的例子演示如何獲得連結中 href 屬性的值：
例項

<!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(){
    alert($("#ty").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="https://blog.csdn.net/qq_39492374?t=1" id="ty">菜鳥教程</a></p>
<button>顯示 href 屬性的值</button>
</body>
</html>

二.設定內容和屬性

1.設定內容 - 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(){
	$("#b1").click(function(){
		$("#01").text("我是改變後！");
	});
	$("#b2").click(function(){
		$("#02").html("<b>我是改變後2！</b>");
	});
	$("#b3").click(function(){
		$("#03").val("我是改變後3！");
	});
});

</script>
</head>

<body>
<p id="01">改變之前</p>
<p id="02">改變之前2</p>
<p>輸入框：<input type="text" id="03" value="改變之前03"></p>
<button id="b1">改變文字</button>
<button id="b2">改變網頁</button>
<button id="b3">改變屬性值</button>
</body>
</html>

2.text()、html() 以及 val() 的回撥函式

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

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

<!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(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 + ")"; 
    });
  });

});
</script>
</head>

<body>
<p id="test1">這是一個有 <b>粗體</b> 字的段落。</p>
<p id="test2">這是另外一個有 <b>粗體</b> 字的段落。</p>
<button id="btn1">顯示 新/舊 文字</button>
<button id="btn2">顯示 新/舊 HTML</button>
</body>
</html>

3.設定屬性 - attr()

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

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

<!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(){
    $("#runoob").attr("href","https://blog.csdn.net/qq_39492374?t=1");
  });
});
</script>
</head>

<body>
<p><a href="http://www.baidu.com" id="baidu">百度</a></p>
<button>修改 href 值</button>
<p>點選按鈕修改後，可以點選連結檢視連結地址是否變化。</p>
</body>
</html>

4.attr() 的回撥函式

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#csdn").attr("href", function(i, origValue){
            return origValue + "/qq_39492374?t=1";
        });
    });
});
</script>
</head>
<body>

<p><a href="https://blog.csdn.net" id="csdn">csdn</a></p>

<button>修改 href 值</button>

<p>點選按鈕修改後，可以點選連結檢視 href 屬性是否變化。</p>

</body>
</html>

結果：
在原來連結的地址上加上了/qq_39492374?t=1

三.新增元素

通過 jQuery，可以很容易地新增新元素/內容。

1.新增新的 HTML 內容

我們將學習用於新增新內容的四個 jQuery 方法：

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

2.jQuery append() 方法

jQuery append() 方法在被選元素的結尾插入內容（仍然該元素的內部）。

<!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(){
    $("p").append(" <b>追加文字</b>。");
  });

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

<body>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">新增文字</button>
<button id="btn2">新增列表項</button>
</body>
</html>

3.jQuery prepend() 方法

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

$("p").prepend("在開頭追加文字");

4.通過 append() 和 prepend() 方法新增若干新元素

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText(){
	var txt1="<p>文字。</p>";              // 使用 HTML 標籤建立文字
	var txt2=$("<p></p>").text("文字。");  // 使用 jQuery 建立文字
	var txt3=document.createElement("p");
	txt3.innerHTML="文字。";               // 使用 DOM 建立文字 text with DOM
	$("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>
<body>

<p>這是一個段落。</p>
<button onclick="appendText()">追加文字</button>

</body>
</html>

5.jQuery after() 和 before() 方法

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

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

$("#btn2").click(function(){
$(“img”).after(“之後”);
});
});

之前插入之後插入

before和after與append/prepend的區別：

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

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

6.通過 after() 和 before() 方法新增若干新元素

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
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);          // 在圖片後新增文字
}
</script>
</head>
<body>

<img src="/images/logo2.png" >
<br><br>
<button onclick="afterText()">之後插入</button>

</body>
</html>

四.刪除元素

通過 jQuery，可以很容易地刪除已有的 HTML 元素。

1.刪除元素/內容

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

remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素

2.jQuery remove() 方法

jQuery remove() 方法刪除被選元素及其子元素。
刪除被選元素本身

$("#div1").remove();

<!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(){
    $("#div1").remove();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

這是 div 中的一些文字。
<p>這是在 div 中的一個段落。</p>
<p>這是在 div 中的另外一個段落。</p>

</div>
<br>
<button>移除div元素</button>

</body>
</html>

3.jQuery empty() 方法

jQuery empty() 方法刪除被選元素的子元素。
刪除被選元素的內部所有元素

$("#div1").empty();

<!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(){
    $("#div1").empty();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

這是 div 中的一些文字。
<p>這是在 div 中的一個段落。</p>
<p>這是在 div 中的另外一個段落。</p>

</div>
<br>
<button>清空div元素</button>

</body>
</html>

4.過濾被刪除的元素

jQuery remove() 方法也可接受一個引數，允許您對被刪元素進行過濾。

該引數可以是任何 jQuery 選擇器的語法。

下面的例子刪除 class=“italic” 的所有

元素：

$(“p”).remove(".italic");

<!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(){
    $("p").remove(".italic");
  });
});
</script>
</head>
<body>

<p>這是一個段落。</p>
<p class="italic"><i>這是另外一個段落。</i></p>
<p class="italic"><i>這是另外一個段落。</i></p>
<button>移除所有  class="italic" 的 p 元素。</button>

</body>
</html>

五.獲取並設定css類

通過 jQuery，可以很容易地對 CSS 元素進行操作。

1.jQuery 操作 CSS

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

addClass() - 向被選元素新增一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行新增/刪除類的切換操作
css() - 設定或返回樣式屬性

2.jQuery addClass() 方法

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

<!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(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
</head>
<body>

<h1>標題 1</h1>
<h2>標題 2</h2>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
<div>這是一些重要的文字!</div>
<br>
<button>為元素新增 class</button>

</body>
</html>

結果：為對應元素新增css樣式

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("body div:first").addClass("important blue");
  });
});
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
</head>
<body>

<div id="div1">這是一些文字。</div>
<div id="div2">這是一些文字。</div>
<br>
<button>為第一個 div 元素新增類</button>

</body>
</html>

3.jQuery removeClass() 方法

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

<!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(){
    $("h1,h2,p").removeClass("blue");
  });
});
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
</head>
<body>

<h1 class="blue">標題 1</h1>
<h2 class="blue">標題 2</h2>
<p class="blue">這是一個段落。</p>
<p>這是另外一個段落。</p>
<br>
<button>從元素中移除 class</button>
</body>
</html>

4.jQuery toggleClass() 方法

下面的例子將展示如何使用 jQuery toggleClass() 方法。該方法對被選元素進行新增/刪除類的切換操作：

<!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(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1 class="blue">標題 1</h1>
<h2 class="blue">標題 2</h2>
<p class="blue">這是一個段落。</p>
<p>這是另外一個段落。</p>
<br>
<button>切換 class</button>
</body>
</html>

六.css()方法

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

1.返回CSS屬性

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

css(“propertyname”);

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

$(“p”).css(“background-color”);

<!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(){
    alert("背景顏色 = " + $("p").css("background-color"));
  });
});
</script>
</head>

<body>
<h2>這是一個標題</h2>
<p style="background-color:#ff0000">這是一個段落。</p>
<p style="background-color:#00ff00">這是一個段落。</p>
<p style="background-color:#0000ff">這是一個段落。</p>
<button>返回第一個 p 元素的 background-color </button>
</body>
</html>

2.設定CSS屬性

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

css(“propertyname”,“value”);

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

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

3.設定多個CSS屬性

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

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

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

<!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(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>
</head>

<body>
<h2>這是一個標題</h2>
<p style="background-color:#ff0000">這是一個段落。</p>
<p style="background-color:#00ff00">這是一個段落。</p>
<p style="background-color:#0000ff">這是一個段落。</p>
<p>這是一個段落。</p>
<button>為 p 元素設定多個樣式</button>
</body>
</html>

七.尺寸

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

1.jQuery 尺寸方法

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

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

2.jQuery 尺寸

圖例展示

3.jQuery 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>

4.jQuery innerWidth() 和 innerHeight() 方法

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

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

下面的例子返回指定的

元素的 inner-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() + "</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>

5.jQuery outerWidth() 和 outerHeight() 方法

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

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

下面的例子返回指定的

元素的 outer-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() + "</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>

2018.10.29-2018.10.30

jQuery學習筆記-3-HTML操作

一.獲取內容和屬性

1.jQuery DOM 操作

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

3.獲取屬性 - attr()

二.設定內容和屬性

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

2.text()、html() 以及 val() 的回撥函式

3.設定屬性 - attr()

4.attr() 的回撥函式

三.新增元素

1.新增新的 HTML 內容

2.jQuery append() 方法

3.jQuery prepend() 方法

4.通過 append() 和 prepend() 方法新增若干新元素

5.jQuery after() 和 before() 方法

6.通過 after() 和 before() 方法新增若干新元素

四.刪除元素

1.刪除元素/內容

2.jQuery remove() 方法

3.jQuery empty() 方法

4.過濾被刪除的元素

五.獲取並設定css類

1.jQuery 操作 CSS

2.jQuery addClass() 方法

3.jQuery removeClass() 方法

4.jQuery toggleClass() 方法

六.css()方法

1.返回CSS屬性

2.設定CSS屬性

3.設定多個CSS屬性

七.尺寸

1.jQuery 尺寸方法

2.jQuery 尺寸

3.jQuery width() 和 height() 方法

4.jQuery innerWidth() 和 innerHeight() 方法

5.jQuery outerWidth() 和 outerHeight() 方法

相關推薦