jQuery 工具方法（全）

下面是对jQuery中工具方法的整理，希望可以帮助到有需要的小伙伴。

一、类数组对象

１、length属性

length属性 - 获取当前jQuery对象中包含DOM对象的个数

实例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类数组操作</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script></head><body><div id="d1"></div><div></div><div></div><div></div><div></div><script>// length属性 - 获取当前jQuery对象中包含DOM对象的个数console.log($("div").length);  // 5for (var i=0;i<$("div").length;i++) {// jQuery对象[索引值] -> 转换为DOM对象，由此得到的值不能用jQuery操作，要用DOM操作var div = $("div")[i];}</script>
</body></html>

2、get()方法

get(索引值) – 返回索引值对应的内容

实例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类数组操作</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script></head><body><div id="d1"></div><div></div><div></div><div></div><div></div><script>// length属性 - 获取当前jQuery对象中包含DOM对象的个数console.log($("div").length);  // 5for (var i=0;i<$("div").length;i++) {// jQuery对象[索引值] -> 转换为DOM对象，由此得到的值不能用jQuery操作，要用DOM操作var div = $("div")[i];}// get(index)方法console.log($("div").get(0)); // 得到第一个div/** index(element)方法* 作用 - 在指定的jQuery对象中查找是否存在element* 存在 - 返回element对应的索引值* 不存在 - 返回-1* 参数element - 可以是DOM对象 / jQuery对象 / 选择器【注意：以jQuery对象来调用index()方法】*/ console.log($("div").index(document.getElementById('d1')));  // 0console.log($("div").index($("d1")));  // -1console.log($("div").index("#d1"));  // 0</script>
</body></html>

3、index()方法 - 只能查找jQuery对象

index(element)方法
- 作用 - 在指定的jQuery对象中查找是否存在element
  - 存在 - 返回element对应的索引值
  - 不存在 - 返回-1
- 参数element - 可以是DOM对象 / jQuery对象 / 选择器

【注意：以jQuery对象来调用index()方法】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类数组操作</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script></head><body><div id="d1"></div><div></div><div></div><div></div><div></div><script>/** index(element)方法* 作用 - 在指定的jQuery对象中查找是否存在element* 存在 - 返回element对应的索引值* 不存在 - 返回-1* 参数element - 可以是DOM对象 / jQuery对象 / 选择器【注意：以jQuery对象来调用index()方法】*/ console.log($("div").index(document.getElementById('d1')));  // 0console.log($("div").index($("d1")));  // -1console.log($("div").index("#d1"));  // 0</script>
</body></html>

4、$.inArray()方法 - 查找数组或对象

查找指定数组或对象中是否存在你要找的值，返回索引值

语法：

$.inArrray(value,array,fromIndex)

value - 表示要查找的数据内容
array - 表示指定的数组或对象

返回值：

存在 - 返回value所对应的索引值
不存在 - 返回-1

实例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类数组操作</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script></head><body><div id="d1"></div><div></div><div></div><div></div><div></div><script>/*$.inArrray(value,array,fromIndex)方法 - 【查找数组或对象】$代表jQuery对象，同时也是一个函数对象* 作用 - 在指定的数组或对象中查找是否存在value* 存在 - 返回value所对应的索引值* 不存在 - 返回-1* 参数* value - 表示要查找的数据内容* array - 表示指定的数组或对象*/console.log($.inArray(document.getElementById("d1"),$("div"))); // 0var arr = [1,2,3,4,5];console.log($.inArray(3,arr));  // 2console.log($.inArray(document.getElementById('d1'),document.getElementsByTagName('div')));  console.log($.inArray(8,arr)); // -1 </script>
</body></html>

index()方法与inArray()方法的区别
- 查找内容
  - index() 只能查找jQuery对象
  - inArrray(value,array,fromIndex)方法 - 查找数组或对象
- 调用
  - ().index(element)方法−由工厂函数().index(element) 方法 - 由工厂函数().index(element)方法−由工厂函数()调用
  - .inArrray(value,array,fromIndex)方法−由jQuery对象.inArrray(value,array,fromIndex)方法 - 由jQuery对象.inArrray(value,array,fromIndex)方法−由jQuery对象调用
- 参数
  - $().index(DOM对象 / jQuery对象 / 选择器) -
  - $.inArrray(value,数组 / 对象,fromIndex)方法
index()方法与inArray()方法的相同点
- 返回值
- 都是返回查找内容的索引值
  - 存在 - 返回value所对应的索引值
  - 不存在 - 返回-1

注：

$代表jQuery对象，同时也是一个函数对象
$()和jQuery()是jQuery的核心函数，执行这两个元素返回的是一个DOM元素
$()是一个函数，等同于jQuery()，可在括号内传参数，传参后可获取元素

5、toArray()方法

toArray() 方法

作用 - 返回 jQuery 选择器匹配的元素。
返回值 - 数组

语法：

$(selector).toArray()

selector – 选择器

实例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类数组操作</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script></head><body><div id="d1"></div><div></div><div></div><div></div><div></div><script>/** $().toArray()方法* 作用 - 把jQuery对象转换为数组*/console.log($("div").toArray());console.log($.makeArray(document.getElementsByTagName('div')));</script>
</body></html>

6、$.makeArray()方法

将一个类似数组的对象转换为真正的数组对象

语法：

$.makeArray( object )

Object – 需要转换为数组的类数组对象。

注意：

类数组对象具有许多数组的属性(例如length属性，[]数组访问运算符等)

但是类数组对象不是真正的数组，没有从数组的原型对象上继承下来的内置方法(例如：pop()、reverse()等)。

实例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类数组操作</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script></head><body><div id="d1"></div><div></div><div></div><div></div><div></div><script>/** $.makeArray(obj)方法* 作用 - 将类数组转换为数组* 参数obj - 表示类数组对象*/console.log($.makeArray($("div")));console.log($.makeArray(document.getElementsByTagName('div')));</script>
</body></html>

7、jQuery工厂函数与全局对象

jQuery的工厂函数(),本质上是一个DOM对象，但是它所使用的方法都封装在了jQuery上。所以不能用() , 本质上是一个DOM对象，但是它所使用的方法都封装在了jQuery上。所以不能用(),本质上是一个DOM对象，但是它所使用的方法都封装在了jQuery上。所以不能用()使用JS的方法，DOM对象也不能使用jQuery的方法。

jQuery 就是 $ , jQuery也是一个对象

jQuery()工厂函数的调用会返回JQuery对象

$().index() – index()方法就是jQuery对象的方法

$.inArray() – jQuery是一个jQuery的全局对象

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全局对象与工厂函数</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body><div id="d1"></div><div></div><div></div><div></div><div></div><script>/*  $ 就是 jQuery* $().index()* jQuery() - 工厂函数的调用 -> 返回jQuery对象* index()方法是jQuery对象的方法* $.inArray()* jQuery - 也是一个对象 -> jQuery的全局对象*/var index1 = $("div").index("#d1");  // 0var index2 = $.inArray(document.getElementById('d1'),$("div"));  // -1console.log(index1,index2);// 所有函数都是Function类型的对象function fun(){console.log("this is function");}fun();  // 函数调用console.log(fun instanceof Object);  // true</script>
</body>
</html>

8、遍历类数组

$().each()方法【工厂函数的方法】
```
$element.each(callback);
```
- callback
$.each()方法【全局对象的方法】
```
$.each(obj,callback)
```
- obj：需要遍历的对象或数组
- callback：对于每个匹配的元素所要执行的函数

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>遍历类数组</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body><div id="d1"></div><div id="d2"></div><div id="d3"></div><div id="d4"></div><div id="d5"></div><script>var $divs = $("div");/*$().each(callback)方法  【只能遍历jQuery】* 作用 - 用于遍历jQuery对象* 参数callback - 回调函数function(index,domEle){}* index - 索引值* domEle - 遍历后的DOM对象*/$divs.each(function(index,domEle){console.log(index,domEle);});/* $.each(obj,callback)方法  【都能遍历】* 作用 - 用于遍历的数组或对象* 参数* obj - 表示遍历数组或对象* callback - 回调函数function(index,domEle){}* index - 索引值* domEle - 遍历后的DOM对象*/$.each(document.getElementsByTagName('div'),function(index,domEle){console.log(index,domEle);});</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3qpy3lpl-1604674317592)(pic/遍历类数组.png)]

二、字符串操作

$.trim()方法

去掉字符串起始和结尾的空格

$.trim(str);

str：需要处理的字符串

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字符串操作</title><script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body><script>// $.trim(需要处理的字符串); console.log($.trim("   I am a bird.  "));</script>
</body>
</html>