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))
$.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))
上一篇: 关键字"extern"
下一篇: JQ 常用的jQuery方法
推荐阅读
-
JQ 常用的jQuery方法
-
jq: 工具方法
-
JQ 作业一
-
jq wrap方法
-
JQ 插件的理解
-
jq处理div的一些操作及思路
-
Linux操作系统SSH远程登录慢的解决方法
-
分布式搜索elasticsearch集群监控工具bigdesk 博客分类: ElasticSearch 分布式搜索elasticsearch集群监控工具bigdesk監控
-
条形码区域解码:Web小工具
-
java.lang.OutOfMemoryError: unable to create new native thread 博客分类: javalinux系统架构lucene Java的性能监控工具profileunable to create new native threadJVMPI an experimental interfaceis no longer supported