jQuery基础——工具函数

写在前面

参考文献:莫振杰《从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对象。

通过$()获取的都是JQ对象

通过getElementById()等方法获取到的是DOM对象。


除了官方提供的工具函数之外,其实我们还可以自定义工具函数。

自定义工具函数

为啥要自定义工具函数?

因为官方提供的功能有限,有些时候,一些需求刚好官方的无法满足,这个时候就需要自定义函数了,比如说排序。

语法:(function($) {

        $.extend({

                "函数名": function(参数) {

                        ...

                }

        })

})

注意:(function () { ... })()是JS中的立即执行函数。

$.extend({

        "函数名": function(参数) {

                ...

        }

})

其实主要的功能都是由这段代码实现的,那为什么我们还要在外面套一层那什么立即执行函数呢?

其实是因为“$”这个符号,使用$.extend方法定义自定义工具函数时,很有可能会受到其他JS库中的“$”影响,为了解决这种麻烦,我们就使用立即执行函数了。

写在最后

没想到就一个工具函数都能够写这么多,下次再细说别的吧。

你可能感兴趣的:(jquery,前端,javascript)