jQuery 文檔操做方法

時間 2020-01-09

標籤 jquery 文檔方法欄目 JQuery 简体版

原文原文鏈接

1. addClass() javascript

addClass() 方法向被選元素添加一個或多個類，該方法不會移除已存在的 class 屬性，僅僅添加一個或多個 class 屬性。css

提示：如需添加多個類，請使用空格分隔類名。語法：html

$(selector).addClass(class)

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<style type="text/css">
		.intro {
			color:red;
			font-size:120%;
		}
	</style>
</head>
<body>
	<p>what are u doing?</p>
	<p>what are u doing now?</p>
	<button>addClass</button>
</body>
<script type="text/javascript">
	$("button").click(function() {
		$("p:first").addClass("intro");
	});
</script>
</html>

2.append() java

append() 方法在被選元素的結尾（仍然在內部）插入指定內容。提示：append() 和 appendTo() 方法執行的任務相同。不一樣之處在於：內容的位置和選擇器。以及 append() 可以使用函數來附加內容。jquery

語法：$(selector).append(content->必需。規定要插入的內容（可包含 HTML 標籤）)api

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
	<p>what are u doing?</p>
	<p>what are u doing now?</p>
	<button>append</button>
</body>
<script type="text/javascript">
	$("button").click(function() {
		$("p").append("<b> Hello World!</b>");
	});
</script>
</html>

3.appendTo()app

appendTo() 方法在被選元素的結尾（仍然在內部）插入指定內容。函數

提示：append() 和 appendTo() 方法執行的任務相同。不一樣之處在於：內容和選擇器的位置，以及 append() 可以使用函數來附加內容。spa

語法

$(content).appendTo(selector)

參數	描述
content	必需。規定要插入的內容（可包含 HTML 標籤）。
selector	必需。規定把內容追加到哪一個元素上。

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
	<p>what are u doing?</p>
	<p>what are u doing now?</p>
	<button>append to</button>
</body>
<script type="text/javascript">
	$("button").click(function() {
		$("<b> Hello World!</b>").appendTo("p");
	});
</script>
</html>

4. attr() code

attr() 方法設置或返回被選元素的屬性值。根據該方法不一樣的參數，其工做方式也有所差別。

語法

$(selector).attr(attribute)

參數	描述
attribute	規定要獲取其值的屬性。

5.after()

after() 方法在被選元素後插入指定的內容。

6. before()

7.clone()

8.detach()

detach() 方法移除被選元素，包括全部文本和子節點。

9. empty()

10.hasClass()

11.html()

12.text()

13.insertAfter()

14.insertBefore()

15.prepend()

16.prependTo()

17.remove()

18.removeAttr()

19.removeClass()

20.replaceAll()

21.replaceWith()

22.toggleClass()

23.unwrap()

24.val()

定義和用法

val() 方法返回或設置被選元素的 value 屬性。

當用於返回值時：
該方法返回第一個匹配元素的 value 屬性的值。語法：$(selector).val()

當用於設置值時：
該方法設置全部匹配元素的 value 屬性的值。語法：$(selector).val(value)

注意：val() 方法一般與 HTML 表單元素一塊兒使用。

實例：設置 <input> 字段的值：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
</head>
<body>
	<p> 姓名: <input type="text" name="user"></p>
	<button>設置輸入字段的值</button>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function() {
			$("input:text").val("Alan Smith")
		})
	})
</script>
</html>

經過函數設置 value 屬性：語法：$(selector).val(function(index -> 返回集合中元素的 index 位置。,currentvalue ->返回被選元素的當前 value。) )

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
</head>
<body>
	<p> 姓名: <input type="text" name="user" value="Peter"></p>
	<button>設置輸入字段的值</button>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function() {
			$("input:text").val(function(n,c) {
				return c + " Griffin";
			});
		});
	});
</script>
</html>

25.wrap()

26.wrapAll()

27.wrapinner()