当前位置：首页 > ds >正文

jQuery 中常用的API

ds 2025/8/12 20:34:04

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);    //第二个divconsole.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();    //第一个divconsole.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();    //最后一个divconsole.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文本后缀大于2var $res = $('div').filter(function(index,item){var text = $(item).text();console.log(text);//hello1//hello2//hello3//hello4text = 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开始，一直到最后。

查看全文

http://www.xdnf.cn/news/11499.html