欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jq: 工具方法

程序员文章站 2024-03-23 17:58:52
...

工具方法为实例方法提供底层搭建
$.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))

      

jq: 工具方法

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

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

      

jq: 工具方法

$.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>
      

jq: 工具方法

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

第一个参数查找的字符

第二个参数所在的数组

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

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

      

jq: 工具方法

$.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);

      

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

      

jq: 工具方法

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

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

      

jq: 工具方法

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

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

      

jq: 工具方法

$.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: 工具方法

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

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

      

jq: 工具方法

也可以用工具方法:

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

      

jq: 工具方法