jQuery的插件
寻找需要的插件
npm查找，gitHub查找
引入需要的插件
- 在gitHub中下载到本地之后，直接引入相关文件(CSS文件，JS文件)
- 在CDN中查找到之后，CDN引入(CSS文件，JS文件)
常用的jQuery插件
- slice(走马灯)：GitHub，官网
- chosen(普通选择框)：GitHub
- pickadate(日期选择框)：GitHub，官网
- Magnific-Popup(图片显示)：GitHub，官网
工具函数
与其他JS库一起使用
// jQuery.noConflict(jqueryPropertyToo);
// jQuery真是海纳百川！
jQuery.noConflict();
// 交还 $ 的控制权，以后就只能使用jQuery变量
$j = jQuery.noConflict(true);
// 把jQuery变量的控制权交给$j，以后就只能用$j变量
浏览器及特性检测
- $.support
- modernizr：如果要做兼容性处理的话，建议使用这个库
移除字符串两侧的空白字符：$.Trim()
// JS有提供原生的Trim方法
// IE9和IE9之后的浏览器才支持原生JS的trim方法
// 如果要兼容IE9之前的浏览器，建议使用jQuery提供的Trim方法
// 如果不需要兼容IE9之前的浏览器，可以直接使用原生JS的Trim方法
var str = ' hello world ';
console.log(str); // " hello world "
console.log($.trim(str)); // "hello world"
console.log(str); // " hello world "
console.log(str.trim()); // "hello world"
遍历属性和集合：$.each()
var arr = ['one', 'two', 'three'];
var obj = {
one: 1,
two: 2,
three: 3
};
// $.each(collection, callback)
// return true：相当于continue
// return false：相当于break
$.each(arr, function (index, value) {
if (index === 1) {
return true
}
console.log(index);
console.log(value);
})
// 0
// one
// 2
// three
$.each(obj, function (propertyName, valueOfProperty) {
if (propertyName === 'two') {
return false
}
console.log(propertyName);
console.log(valueOfProperty);
})
// one
// 1
过滤数组：$.grep()
// $.grep(array,callback[,invert])
// 返回值是true，那么就会留下这个值
// 如果设定第三个参数invert为true，那么返回值是false的时候留下，反之不留下
var arr = [1, 3, 6, 13, 38, 9, 8, 24, 15];
var arr2 = $.grep(arr, function (value, index) {
return value > 10;
})
console.log(arr);
console.log(arr2);
转换数组：$.map()
// $.map(collection,callback)
var arr = [1, 2, 3, 4, 5];
var arr2 = $.map(arr, function (value, index) {
return value + 1;
// return null; 不会被收集，最终返回空数组
// return undefined; 不会被收集，最终返回空数组
// return ''; 会被收集，最终返回空字符串组成的数组
})
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr2); // [2, 3, 4, 5, 6]
确定元素在数组中的位置：$.inArray()
// $.inArray(value,array)
// 确定value在array中的位置，没有找到就返回-1
console.log($.inArray(2, [1, 2, 3, 4, 5])); // 1
将类数组对象转换为数组对象：$.makeArray()
// $.makeArray(object)
// 将类数组对象转换为数组对象
var arrayLikeObject = {
0: 'a',
1: 'b',
2: 'c',
length: 3
}
console.log(arrayLikeObject); // {0: "a", 1: "b", 2: "c", length: 3}
console.log($.makeArray(arrayLikeObject)); // ["a", "b", "c"]
合并数组2到数组1中：$.merge()
// $.merge(array1,array2)
// 把数组array2合并到array1中
var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]
$.merge(arr1, arr2);
console.log(arr1); // [0, 1, 2, 3, 4, 5]
console.log(arr2); // [3, 4, 5]
扩展对象：$.extend()
// $.extend([deep,]target,[source1,source2,...sourceN])
// 如果元对象中有重复的属性，后面的属性值会覆盖前面的属性值
var target = { a: 1, b: 2, c: 3 };
var source1 = { c: 4, d: 5, e: 6 };
var source2 = { c: 7, e: 8, f: 9 };
console.log($.extend(target, source1, source2)); // {a: 1, b: 2, c: 7, d: 5, e: 8, …}
var target = { a: 1, b: 2 };
var source1 = { b: { b1: 2.1, b2: 2.2 }, c: 3 };
var source2 = { b: { b3: 2.3, b4: 2.4 }, d: 4 };
console.log($.extend(target, source1, source2)); // 浅扩展
// {a: 1, b: { b3: 2.3, b4: 2.4 }, c: 3, d: 4}
console.log($.extend(true, target, source1, source2)); // 深扩展
// {a: 1, b: { b1: 2.1, b2: 2.2, b3: 2.3, b4: 2.4 }, c: 3, d: 4}
测试对象
$.isArray(param)，$.isEmptyObject(param)，$.isFunction(param)，$.isNumeric(param)
获取对象类型
console.log($.type(3)); // number
console.log($.type(true)); // boolean
console.log($.type('3')); // string
console.log($.type([1, 2, 3])); // array
console.log($.type({ a: 1 })); // object
console.log($.type(new Date())); // date
console.log($.type(/test/)); // regexp
console.log($.type(null)); // null
console.log($.type(undefined)); // undefined
其他方法
$.noop() // 空方法，相当于function(){ }
$.contains(container,contained) // 用于测试containerDOM节点是否包含containedDOM节点
$.error(string) // 抛出一个错误，可以在控制台中显示出来