你不知道的jQuery

不要恨我这个标题党,且看下面的分享。
最近做业务发现jquery的一些方法有其他的用法,可以帮助我解决一些问题,下面我就说说吧。大家共同进步,欢迎大家斧正错误哦。

val(字符串|函数|数组)

val(字符串|函数|数组):为所匹配到的表单元素赋值。
这个函数我们最常用的是参数传入字符串,而且用的不亦乐乎。下面我们来看看余下的两种吧
假设我们这做的项目有很多这样的需求:批量处理一些数据然后提交,比如是按金额每个宝贝的价格上调1元。

图片描述

var price = Number($('.J_money').val()),
    $spanPrice = $('.trade-body [data-column="price"]');
    $spanPrice.val(function(index,value){
        return (+value + price) ;
    });

执行完上面代码后

图片描述

此次调用val() 传入一个函数,此函数有两个参数:调用者的元素下标和元素当前值。函数返回值作为当前元素要设置的值。
这样我们就可以批量修改一些东西了,很棒吧 ^v^

接下来我们来看看第三种用法吧(选中复选框、单选按钮或者下拉框select),这种方法可是让我的心情激动很久呢。下面我来举个荔枝^v^
事情是这样的:我们有很多这样的业务需求,比如记录下我们的操作或者初始化一些东西。

var value = [1,208,182];

$('.group-list input[type="checkbox"]').val(value);

图片描述

是不是很爽呢,之前的做法需要遍历、比较、选中这些繁琐的过程都没有了。

还有radio、select的我就不举栗子了,大家可以自己试试!

其实jquery函数里很多都是可以传函数作为参数的,而用法大致相同。已函数作为参数为例,假如我们的目标元素们不是表单元素而是普通的像span这样的元素,我们又想批量处理怎么办呢,我们应该想到了html()或者text()这两个函数了,拿text()为例

图片描述

var price = Number($('.J_money').val()),
    $spanPrice = $('.trade-body [data-column="price"]');
$spanPrice.text(function(index,text){
    return (+text+ price) ;
});

图片描述

大家可以去jQuery官网去看下文档大部分我们平时用到的函数都用这样的用法,如:attr()、css()...所以函数就在那里,用法也在那里,如果你get到了那就用到你的项目中去吧。

在这里我在提几个大家能用的着的而用到时有不一定能想起来的几个函数

inArray(value,array):返回传入值第一次在改数组中出现的下标。如果没有查到返回-1。 在项目中我们经常会遇到判断一个值是否在某个数组中存在(不考虑重复值,多个也是存在)我们可以使用这个函数

var index = $.inArray('hello', ['hi','hello','你好']),
    index2 = $.inArray('some other', ['hi','hello','你好']);
console.log(index);
console.log(index2);

图片描述

isArray(o): 如果o是JavaScript数组,则返回true,如果o是类数组对象,则返回false。

var isArray = $.isArray(['hi','hello','你好']),
    isArray2 = $.isArray($('div'));
console.log(isArray);
console.log(isArray2);

图片描述

isEmptyObject(o): 如果o是没有属性的JavaScript对象,则返回true,否则返回false,这里的属性包括从prototype继承下来的属性。我们可以用它来做空对象判断。

var isEmptyObject = $.isEmptyObject({}),
    isEmptyObject2 = $.isEmptyObject({'a':1});
console.log(isEmptyObject);
console.log(isEmptyObject2);

图片描述

类数组转换

上面 $.isArray($('div'));返回false。说明$('div')返回的不是数组,这我们早就知道。如果想让它变成数组呢?get()、toArray()都能做到。

var isArray = $.isArray($('div')),
    isArray2 = $.isArray($('div').get()),
    isArray3 = $.isArray($('div').toArray());
console.log(isArray);
console.log(isArray2);
console.log(isArray3);

图片描述

好了,刚开始写东西,大家给点鼓励,谢谢。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值