你不知道的jQuery

jubincn 发布于2019-08-20 11:24 / 1303人阅读

摘要：不要恨我这个标题党，且看下面的分享。字符串函数数组字符串函数数组为所匹配到的表单元素赋值。函数返回值作为当前元素要设置的值。你好如果是没有属性的对象，则返回，否则返回，这里的属性包括从继承下来的属性。说明返回的不是数组，这我们早就知道。

不要恨我这个标题党，且看下面的分享。
最近做业务发现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);

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

云服务器 GPU云服务器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80558.html

你不知道的Chrome DevTools（4）：推荐几款DevTools插件

摘要：下面推荐几款插件，有些是博主亲自试用过的，希望对大家的开发调试有帮助。这有点类似前面说过的插件。类似的针对不同框架的调试工具还有最后介绍的不是的插件，而是主题。总结好的，这次的插件就推荐了这几个。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12改一下页面元素的...

svtter 2019-08-21 12:17 评论0 收藏0
你不知道的jQuery

摘要：不要恨我这个标题党，且看下面的分享。字符串函数数组字符串函数数组为所匹配到的表单元素赋值。函数返回值作为当前元素要设置的值。你好如果是没有属性的对象，则返回，否则返回，这里的属性包括从继承下来的属性。说明返回的不是数组，这我们早就知道。不要恨我这个标题党，且看下面的分享。最近做业务发现jquery的一些方法有其他的用法，可以帮助我解决一些问题，下面我就说说吧。大家共同进步，欢迎大家斧...

Jochen 2019-08-29 11:23 评论0 收藏0
你不知道的jQuery

摘要：不要恨我这个标题党，且看下面的分享。字符串函数数组字符串函数数组为所匹配到的表单元素赋值。函数返回值作为当前元素要设置的值。你好如果是没有属性的对象，则返回，否则返回，这里的属性包括从继承下来的属性。说明返回的不是数组，这我们早就知道。不要恨我这个标题党，且看下面的分享。最近做业务发现jquery的一些方法有其他的用法，可以帮助我解决一些问题，下面我就说说吧。大家共同进步，欢迎大家斧...

VEIGHTZ 2019-08-01 15:46 评论0 收藏0
你不知道的Chrome DevTools（2）：那些debug的技巧

摘要：我打算把一些上使用的高级技巧写成你不知道的这一系列的博文，希望大家一起学习学习。然而，这还不是最严重的，因为的语法比较宽松和随意，所以同一功能多种写法，各种奇葩都有。总结前端在调试代码的时候，知道开发工具上的小技巧，可以提高查找问题的效率。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔...

warnerwu 2019-08-19 14:38 评论0 收藏0