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()