jq: 工具方法

工具方法为实例方法提供底层搭建
$.type() 判断数据类型
$.trim() 消除字符串两边的空格
$.makeArray()/$.inArray()/$.each()/$.merge()
$.noConflict() 移交$权限
$.data()

$.type()

原生js中typeOf只能判断基本的数据类型:
number string undefined boolean object
然后可以使用Object.prototype.toString.call()来更精确的判断

在jq中，我们可以使用$.type()来判断。返回字符串

        var arr = [1, 2, '2', '三'];
console.log($.type(arr))

      

$.trim() 消除字符串两边的空格

        var str = "  afef fdsaf fsdafas";
console.log(str);
console.log($.trim(str));

      

$.makeArray() 使类数组变成数组 数组具有pop push方法

        <lu>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</lu>
<div class="wrapper" data-name="fanghuayong"></div>
<script src="../jquery-3.4.1.js"></script>
<script>
    console.log($.makeArray($('li')));
</script>
      

$.inArray() 判断数组中是否包含某个字符串 有返回索引 没有返回-1

第一个参数查找的字符

第二个参数所在的数组

第三个参数从哪个位置开始找

        var arr = [1, 2, '2', '三'];
console.log($.inArray('三', arr));

      

$.each() 循环遍历项 可以遍历数组 可以遍历对象

        var data = [{
     name: 'yangcai',
     age: 23,
},{
     name: 'lizhuli',
     age: 22,
},{
     name: 'fanghuayong',
     age: 24,
},]
var str1 = '';
$.each(data, function(index, ele) {     // 循环遍历
    str1 += `<p>姓名:${ele.name}  年龄:${ele.age}</P>`
})
$('.wrapper').append(str1);

      

        var obj2= {
    name: 'huahuayong',
    age: 24,
    sex: "male",
}
 var str2 = '';
 $.each(obj2, function(a, b) {
     str2 = `${a} : ${b}<br>`
     $('.wrapper').append(str2);
  })

      

$.merge() 合并数组或者类数组到第一个数组中 执行完返回合并后的第一个数组

        var arr1 = [1, 2, 3];
var arr2 = ['一', '二', '三'];
$.merge(arr1, arr2) // 合并数组到第一个数组中  执行完返回arr1
console.log(arr1)

      

$.noConflict() 移交$权限 可以赋值给其他变量

        var j = $.noConflict(true); // 移交$权限 如果传true $和jQuery都不能使用  可以赋值
console.log(j.prototype.jquery); // 兼容多版本的时候可以查看使用的是什么版本

      

$.data() 标记数据

dom元素上可以使用data-xxx 用户缓存数据(标记)

        <div class="wrapper" data-name="fanghuayong"></div>
      

查看

        var wrapper = document.getElementsByClassName('wrapper')[0];
var data = wrapper.dataset;
console.log(data)

      

jq中可以用实例方法来标记:

        var wrapper1 = $('.wrapper');
wrapper1.data('age', 19);
console.log(wrapper1.data('age'))
console.log($('.wrapper').data())

      

也可以用工具方法:

        var wrapper1 = $('.wrapper');
$.data(wrapper1, 'age1', 20);
console.log($.data(wrapper1))