程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

常用工具方法：
$.type()
$.trim()
$makeArray() / $.inArray() / $.each()
$.noConflict()
$.data()

之前我们使用的方法，是通过$()筛选匹配返回的实例对象的原型上的方法，称为实例方法
无需实例化就可以调用的函数，称为工具方法

$.type()：准确返回数据类型

// 数组
var arr = ['a', 'b', 'c'];
console.log(typeof(arr)); //输出object
console.log( Object.prototype.toString.call( arr ) ); //输出[object Array]
console.log($.type( arr )); //输出array

// null
console.log(typeof( null )); //输出object
console.log( Object.prototype.toString.call( null ) ); //输出[object Null]
console.log($.type( null )); //输出null

// 对象
var obj = { name: 'ccy'};  
console.log( typeof( null ) ); //输出object
console.log( Object.prototype.toString.call( obj ) ); //输出[object Object]
console.log($.type( obj )); //输出object   

$.trim()：清除字符串前后空格

var str = '    sdfg    asdf    ';
console.log('[' + str + ']');  //输出：[    sdfg    asdf    ]
console.log('[' + $.trim(str) + ']');  //输出：[sdfg    asdf]

$makeArray() / $.inArray() / $.each() / $.merge():操作数据

$makeArray()：将类数组转成数组

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

console.log( $.makeArray( $('li') ) );

$('li')获得类数组，$.makeArray将其转为数组，可以使用数组的push()/pop()方法

$.inArray()：判断某值是否在数组中

var arr = ['a', 'b', 'c'];
// 判断'b'是否在arr数组中
console.log( $.inArray('b', arr)); //存在，返回索引：1
// 判断'd'是否在arr数组中
console.log( $.inArray('d', arr)); //不存在，返回-1
// 判断从索引1开始寻找，'b'是否在arr数组中
console.log( $.inArray('b', arr, 1)); //存在，返回索引：1
// 判断从索引2开始寻找，'b'是否在arr数组中
console.log( $.inArray('b', arr, 2)); //不存在，返回-1

$.each()：循环遍历数据

遍历数组

var data = [
    {   name: 'ccy',
        age: 18},
    {   name: 'zxq',
        age: 19
    }
]

var str = ''
$.each(data, function(index, ele){
    str += '<p>' +ele.name + ',' + ele.age + '</p>' 
})// 用字符串拼接的方式，集体append，省性能
$('body').append(str);

$.each处理函数下的this指的是每一个ele数据

效果：往body最后添加两个p标签，标签内容为给定的数据

each也有一个实例方法，处理dom对象，如：$('li').each( function() {} )处理的是每一个li元素

遍历对象

var data = {
    ccy : 18,
    zxq : 19
}
    

var str = ''
$.each(data, function(key, value){
    str += '<p>' +key + ',' + value + '</p>' 
})
$('body').append(str);

效果一致，此时成功回调函数的参数是对象中的key和value

$.merge():合并数组、类数组

合并数组

var arr1 = ['a', 'b', 'c']
var arr2 = ['d', 'e', 'f']
$.merge(arr1, arr2);//将arr2合并到arr1，并返回arr1
console.log(arr1);

效果：

合并类数组

var arrLike1 = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
}
var arrLike2 = {
    0: 'd',
    1: 'e',
    2: 'f',
    length: 3
}
$.merge(arrLike1, arrLike2);//将arrLike2合并到arrLike1，并返回arrLike1
console.log(arrLike1);

效果：

合并数组和类数组

合并后的数据类型，以第一个参数的类型为准
合并(数组，类数组)，将类数组合并到数组上，返回数组；
合并(类数组，数组)，将数组合并到类数组上，返回类数组

$.merge(arr1, arrLike2);
console.log(arr1);

效果：返回arr1，数组

$.merge(arrLike1, arr2);
console.log(arrLike1);

效果：返回arrLike1，类数组

$.noConflict()避免冲突

避免与其他框架冲突

jQuery 使用 $ 符号作为 jQuery 的简写
而其他 JavaScript 框架也会使用 $ 符号作为简写
为避免冲突，可以将$标识符的控制权释放出去，这样别的类库就可以使用

$.noConflict()基本使用

//释放权限
$.noConflict()
//jQ就不能再使用$符号了
// console.log($('ul'));//报错提示“$ is not a function”
//需要使用jQuery()
console.log(jQuery('ul'))

$.noConflict(true)

当里面传true时，符号和jQuery()方法的权限都被移交

$.noConflict(true)
//jQ就不能再使用$符号和jQuery()了
console.log(jQuery('ul'));//报错“jQuery is not a function”

var j = $.noConflict(true)

将符号和jQuery()方法的权限移交，如果要使用jQuery的功能，可以用j():

var j = $.noConflict(true)
//jQ就不能再使用$符号和jQuery()了,但可以使用j()
console.log(j('ul'));//顺利打印

避免新旧版本冲突

新版本的jQ对一些功能不再兼容，如ie6，如果需要兼容，就要用旧版本的jQ；但新版本的新增功能我也想使用，就需要同时使用新旧版本
用$.noConflict()把符号的使用权交给后引入的那个版本

<!--同时使用3.6.0版本和2.2.4版本-->
<script src="./jQuery/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
    //noConflict
    //释放权限
    var j = $.noConflict();
    //查看当前使用j的是哪个jQuery版本
    console.log(j.prototype.jquery);//输出：2.2.4
</script>

$.data()：操作dom上的缓存数据

//js中的data使用
var wrapper = document.getElementsByClassName('wrapper')[0];
console.log(wrapper.dataset.name);//获取缓存数据,输出：ccy
wrapper.dataset.age = 19; //设置缓存数据
console.log(wrapper.dataset.age);//输出19

//data实例方法
var wrapper = $('.wrapper');
console.log( wrapper.data('name') );//获取缓存数据,输出：ccy
wrapper.data('age', 19);//设置缓存数据
console.log( wrapper.data('age') );//输出19

//data工具方法
var wrapper = $('.wrapper');
$.data(wrapper, 'age', 19);//设置单个数据
console.log( $.data( wrapper, 'age') );

$.data(wrapper, {
    'aa':'aa',
    'nn':'nn'
});//设置多个数据
console.log( $.data( wrapper) );//获取全部缓存数据：{age: 19, aa: "aa", nn: "nn"}

原文链接:https://blog.csdn.net/qq_43523725/article/details/115440870