jQuery 中常用的API

最新推荐文章于 2022-05-06 17:52:34 发布

Curry 3O

最新推荐文章于 2022-05-06 17:52:34 发布

阅读量724

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_42552393/article/details/97625259

版权

jQuery 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1.val()

val([value])用来读取或修改【表单元素】value属性的值.
参数：无参，获取value值
参数：value，设置value的值
参数：function(index,oldVal) 回调函数，index索引，oldVal当前val
实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用API</title>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			//获取value值
			//如果选择器选中多个，使用val()只获取第一个元素的value值
			var $res = $('input').val();
			console.log($res);   //1
			//效果一样
			console.log($('input')[0].value);   //1
			
			//如果需要获取所有input的value值，可以用each()方法循环遍历
			$('input').each(function(index,item){
				console.log($(item).val());   //1   2   3
			});
			
			//设置value值
			//如果选择器选中多个，使用val(参数)   value全部修改
			$('input').val(11);   //所有input的value值都为11
		});
	</script>
</head>
<body>
	<input type="text" value="1">
	<input type="text" value="2">
	<input type="text" value="3">
</html>

2.html()

html([html])用为读取和修改元素的HTML标签.
参数：无参，获取html的值
参数：value，设置html的值
参数：function(index,oldhtml) 回调函数，index索引，oldhtml当前html
实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用API</title>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			//获取内容
			//如果选择器选中多个，使用html()只拿取第一个元素的内容
			var $res = $('div').html();
			console.log($res);   //<span>one</span>
			
			//获取每一个选中元素的html
			$('div').html(function(index,item){
				console.log(index,item);
				//0 <span>one</span>
				//1 <span>two</span>
				//2 <span>three</span>
			});
			//使用each()方法也行
			$('div').each(function(index,item){
				console.log($(item).html());
				//<span>one</span>
				//<span>two</span>
				//<span>three</span>
			});
			
			//设置内部内容  
			//如果选择器选中多个，使用html(参数)   全部修改
			$('div').html('<h2>hello</h2>'); //所有div的都变成<div><h2>hello</h2></div>
		});
	</script>
</head>
<body>
	<div><span>one</span></div>
	<div><span>two</span></div>
	<div><span>three</span></div>
</html>

3.text()

text([text])用来读取或修改元素的纯文本内容.
参数：无参，获取文本值
参数：value，设置文本值
参数： function(index,oldText)回调函数，index索引，oldText当前text
实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用API</title>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			//获取文本内容
			//如果选择器选中多个，使用text()拿取所有元素的文本
			var $res = $('div').text();
			console.log($res);  //onetwothree
		    
		    //使用each()方法获取每一个选中元素的text
		    $('div').each(function(index,item){
				console.log($(item).text());
				//one
				//two
				//three
			});
			
			//设置内部文本	使用text(参数)   全部修改
		    $('div').text('hello');  //所有div的span标签里的文本内容都变成了hello
		});
	</script>
</head>
<body>
	<div><span>one</span></div>
	<div><span>two</span></div>
	<div><span>three</span></div>
</html>

4.get()

参数：无参，调用这个方法将会返回所有匹配的DOM节点，这些节点包含在一个标准的数组中。
参数：有参，index: 索引，从0开始计数，用来确定获取索引指定【DOM对象】
如果index的值超出范围小于元素数量的负数或等于或大于元素的数量，那么它将返回undefined.
实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用API</title>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			//get()将jQuery对象转换成数组
			var arr = $('div').get();
			console.log(arr);
			//Array(4) [ div, div, div, div, ]
			
			//获取索引上的元素  get(index)
			//返回DOM节点
			var temp = $('div').get(1);
			console.log(temp);
			//<div>
		});
	</script>
</head>
<body>
	<div>hello1</div>
	<div>hello2</div>
	<div>hello3</div>
	<div>hello4</div>
</html>

5. toArray()

无参：返回一个包含jQuery对象集合中的所有DOM元素数组。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用API</title>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			//toArray()将jQuery对象转换成数组
			arr = $('div').toArray();
			console.log(arr);
			//Array(4) [ div, div, div, div, ]
		});
	</script>
</head>
<body>
	<div>hello1</div>
	<div>hello2</div>
	<div>hello3</div>
	<div>hello4</div>
</html>

6. eq(index)

参数 index ：用于指示元素的索引，当为负数时从集合中的最后一个元素开始倒数；返回指定索引位置上的【jQuery对象】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用API</title>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			//返回jQuery对象
			var a = $('div').eq(1);    //第二个div
			console.log(a);
			//Object { 0: div, length: 1, prevObject: {…} }
		});
	</script>
</head>
<body>
	<div>hello1</div>
	<div>hello2</div>
	<div>hello3</div>
	<div>hello4</div>
</html>

7. first()

获取匹配元素集合中第一个元素，无参数。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用API</title>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			//获取第一个元素  返回jQuery对象
			var $res = $('div').first();    //第一个div
			console.log($res);
			//Object { 0: div, length: 1, prevObject: {…} }
			//效果一样
			console.log($('div:first'));
			//Object { 0: div, length: 1, prevObject: Object(1) }
		});
	</script>
</head>
<body>
	<div>hello1</div>
	<div>hello2</div>
	<div>hello3</div>
	<div>hello4</div>
</html>

8. last()

获取匹配元素集合中最后一个元素。无参数。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用API</title>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			//获取最后一个元素  返回jQuery对象
			var $res = $('div').last();    //最后一个div
			console.log($res);
			//Object { 0: div, length: 1, prevObject: {…} }
			//效果一样
			console.log($('div:last'));
			//Object { 0: div, length: 1, prevObject: Object(1) }
		});
	</script>
</head>
<body>
	<div>hello1</div>
	<div>hello2</div>
	<div>hello3</div>
	<div>hello4</div>
</html>

9. filter()

参数：选择器字符串
参数： function(index){} 匿名函数，如果函数返回true，该元素将被包含在筛选集合中；返值:jQuery对象。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用API</title>
	<script src="../js/jquery-3.4.1.min.js"></script>
	<script>
		$(function(){
			//filter()过滤  返回值:jQuery对象
			//过滤出div文本后缀大于2
			var $res = $('div').filter(function(index,item){
				var text = $(item).text();
				console.log(text);
				//hello1
				//hello2
				//hello3
				//hello4
				text = text.slice(text.length-1);
				return text > 2;
			});
			console.log($res);   //返回第三个和第四个div
			//Object { 0: div, 1: div, length: 2, prevObject: {…} }
		});
	</script>
</head>
<body>
	<div>hello1</div>
	<div>hello2</div>
	<div>hello3</div>
	<div>hello4</div>
</html>

10. map()

该方法特别适用于获取或设置元素集合中的值；参数function(index,item){}回调函数。

11. not()

从匹配的元素集合中移除指定的元素。

12. is()

判断当前匹配的元素集合中的元素，是否为一个选择器/DOM元素/jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true.返回值：boolean类型.

13. has()

筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素。

12. slice()

根据指定的下标范围，过滤匹配的元素集合，并生成一个新的jQuery对象。
参数(start,[end]).start整数，从0开始计数的下标。代表将要被选择的元素的起始下标。如果指定的下标是一个负数，那么代表从末尾开始计数。end整数，从0开始计数的下标(结果不包含end)。代表将要被选择的元素的结束下标。如果指定的下标是一个负数，那么代表从末尾开始计数。如果忽略此参数，则选择的范围是从start开始，一直到最后。