jQuery基础——工具函数

最新推荐文章于 2024-09-02 17:34:07 发布

雷特IT

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量1.5k

点赞数 14

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_54066656/article/details/141772761

版权

写在前面

参考文献：莫振杰《从0到1：jQuery快速上手》

这期主讲工具函数。

工具函数

啥是工具函数，指的是JQ对象上定义的函数，属于全局性函数。

你也可以理解为JQ内置的一些函数，使得我们能够直接使用这些函数。

语法：$.函数名()

注意这个语法，跟之前的完全不一样。

这里，我们不需要通过$()来选取JQ元素，反而是直接使用$，在这里$的意思就是全局的jQuery对象。

对了，$等价于jQuery，$.函数名()等价于jQuery.函数名()。

在JQ中，有5大类工具函数：

字符串操作

URL操作

数组操作

对象操作

检测操作

这些工具函数都是全局函数，可以在全局调用。

字符串操作

有关字符串操作的工具函数，其实就一种，那就是$.trim()方法。

trim()方法的作用是去除字符串首尾的空白字符，JS中也有这个方法。

语法：$.trim()

返回值是返回去除空格后的字符串。

URL操作

URL操作其实就一种——$.params()，URL操作一般都是跟URL地址中的参数有关。

在JQ中，我们使用$.params()方法将数组或对象转化为字符串序列，以便于URL查询字符串，或者Ajax请求。

语法：$.params(obj、array)

什么是字符串序列？

就是通过“&”符号连接起来的字符串序列，这个序列可以用于URL查询字符串，或Ajax请求。

什么是URL查询字符？

地址栏中“?”后面的一般都是查询字符串，通过“&”符号连接多个查询参数。

数组操作

数组操作是一个很重要、很常见的操作。

$.inArray()	判断元素
$.merge()	合并数组
$.makeArray()	转换数组
$.grep()	过滤数组
$.each()	遍历数组

下面我们一个一个展开说说。

判断元素：$.inArray()

inArray的意思就是在数组；所以这个方法是用于判断某个值是否在数组内，所以我们的参数有两个：value，Array；也就是值和操作数组。

语法：$.inArray(value, Array)

这个方法其实很像是JS中数组对象中indexOf()方法。

如果value存在于Array中，就返回value首次出现的位置（下标）；如果value不存在，则返回-1。

注意，跟indexOf()一样，都是只返回第一个。

合并数组：$.merge()

在JS中，我们并没有学到怎么合并数组。

实话说，之前学的JS其实是皮毛而已，JS还有很多高阶语法，比如说数组对象中的filter()方法，以及箭头函数，我们并没有学习到。

还是那句话，多看同一个技术内容 / 作者不同的书，这样可以开阔你的眼界。

语法：$.merge(arr1, arr2)

既然是合并数组，那意味着参数需要两个数组，返回值是合并之后的数组。

转换数组：$.makeArray()

之前我们学习过类数组对象，也就是伪数组/类数组。

伪数组/类数组只拥有length属性，以及index（下标）属性，而不拥有其他数组方法。

那么我们怎么将这个伪数组/类数组转化为真正的数组呢？

既然是转换数组，那参数就必须要有要转换的对象。

语法：$.makeArray(obj)

参数obj必须是一个类数组对象，否则返回值是一个空数组。

正常情况下，返回值应该是一个数组。

对了，你还知道什么是基本数据类型，什么是引用数据类型吗？

过滤数组：$.grep()

过滤数组，其实跟JS中数组对象的高阶语法很像，只不过函数名不一样而已。

既然都是过滤了，你得有操作对象arr数组，过滤条件吧？

语法：$.grep(array, function(value, index) { ... }, false)

第一个参数array，是要操作的数组对象。

第二个参数是一个匿名函数，也就是过滤条件。

匿名函数有两个参数，一个是value，也就是当前元素；一个是index，也就是下标。

注意：array[index] = value。

这跟JS中数组对象的filter()方法很类似，下次学习的时候可以关联起来。

第三个参数是一个布尔值。false的时候，表示只收集函数返回true的数组元素；true的时候，表示只收集返回false的数组元素；是不是很意外，居然™的是相反的。

这个方法一般都是用于找出两个数组之间的相同/不同部分。

疑惑：三个参数里不就一个是arr数组吗？你这两个数组，怎么操作？

答疑：我们可以在第二个参数，也就是函数里使用第二个数组，结合JS中的indexOf()方法，或者是JQ中的inArray()方法，判断当前数组值是否存在于另外一个数组中。

怎么查找出相同的部分？第三个参数的作用就来了，false表示返回true的值。

遍历数组：$.each()

数组中，除了过滤方法很重要，遍历数组也是另外一个很重要的方法。

既然是遍历数组，那指定得有个arr数组，还得有个处理方法。

这跟JS中数组对象中的foreach()方法很像，都是只遍历不返回。

语法：$.each(arr, function(index, valule) { ... })

这个语法就很调皮，匿名函数中的参数位置跟过滤数组中的居然是相反的。

参数解读跟上面的grep()方法一致。

如果我们需要退出each循环，可以在回调函数中返回false，也就是return false即可。

这个方法其实还有个用处，后面会说到。

对象操作

对象操作的方法只有一个，那就是$.each()。

是不是惊呆了，这么快就说到了each()方法的另外一个用处。

当然啦，两者还是有区别的，下面细说。

语法：$.each(obj, function(key, value) { ... })

第一个参数是obj，也就是对象。

第二个参数还是匿名函数，但是其中的参数完全不同。

对象是由一个个的键值对组成的，所以说匿名函数里面的参数刚好对应上——key-键，value-值。

跟数组操作中的each()方法类似，退出循环都是使用return false。

除了使用value来取当前遍历到的值之外，我们还可以使obj[key]的方法来获取到对应的值。

说完了这么多工具函数，前面的都是我们常接触到的类型，下面说一点“真正”的工具。

检测操作

检测操作是啥意思？

很多时候，我们需要获取对象或元素的各种状态，是否为数组、对象、为空等，这个时候又没有一些用于检测的操作？

$.isFunction(obj)	判断变量是否为一个函数
$.isArray(obj)	判断变量是否为一个数组
$.isEmptyObject(obj)	判断变量是否为一个空对象
$.isPlainObject(obj)	判断变量是否为一个原始对象
$.contains(node1, node2)	判断一个DOM节点是否包含另外一个DOM节点

什么是原始对象？指的是通过“{}”或“new Object()”来创建的对象。

这些方法都是判断的，所以说返回值是一个布尔值。

最后一个方法要注意区别什么是DOM节点，什么是JQ对象。