你不知道的jQuery

不要恨我这个标题党,且看下面的分享。
最近作业务发现jquery的一些方法有其余的用法,能够帮助我解决一些问题,下面我就说说吧。你们共同进步,欢迎你们斧正错误哦。css

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

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

图片描述

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

执行完上面代码后jquery

图片描述

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

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

var value = [1,208,182];

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

图片描述

是否是很爽呢,以前的作法须要遍历、比较、选中这些繁琐的过程都没有了。spa

还有radio、select的我就不举栗子了,你们能够本身试试!prototype

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

图片描述

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

图片描述

你们能够去jQuery官网去看下文档大部分咱们平时用到的函数都用这样的用法,如:attr()、css()...因此函数就在那里,用法也在那里,若是你get到了那就用到你的项目中去吧。code

在这里我在提几个你们能用的着的而用到时有不必定能想起来的几个函数

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

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

图片描述

好了,刚开始写东西,你们给点鼓励,谢谢。

相关文章
相关标签/搜索