博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
你不知道的jQuery
阅读量:5838 次
发布时间:2019-06-18

本文共 2133 字,大约阅读时间需要 7 分钟。

不要恨我这个标题党,且看下面的分享。

最近做业务发现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);

图片描述

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

转载地址:http://rzncx.baihongyu.com/

你可能感兴趣的文章
Js中遇到的坑点汇总
查看>>
一个页面重构工程师眼中的“用户体验”
查看>>
JS2 -- 继承
查看>>
bootstrap-table表格插件获取分页参数
查看>>
《UML大战需求分析》-读后感一
查看>>
[HNOI2008]神奇的国度
查看>>
字符串转换成js的日期格式
查看>>
MYSQL数据库
查看>>
Chrome
查看>>
HTML基础知识(常见元素、列表、链接元素、图片元素)
查看>>
AngularJS之手动加载模块app和controller
查看>>
C++ 设计模式 —— 訪问者(Visitor)
查看>>
Toast分析——实现自己的Toast
查看>>
Single Number II
查看>>
linux下获取硬盘使用情况[总结]
查看>>
很纯粹的转贴,来自http://www.byywee.com/page/M0/S219/219366.html,就是为了以后知道这么配置...
查看>>
ZROI2018提高day1t2
查看>>
商务谈判的要素(外包)
查看>>
popup定位引擎popper.js介绍
查看>>
洛谷 P1281 书的复制
查看>>