jQuery常用数据处理方法小结


Posted in Javascript onFebruary 20, 2015

本文实例总结了jQuery常用数据处理方法。分享给大家供大家参考。具体如下:

$.trim():删除字符串前后的空白字符。

var str = ' 薯条 ';
var formatStr = $.trim(str);  //'薯条'

$.param():数组或者对象序列化。

var obj = {
  name: 'dog',
  count: 10
};
var str = $.param(obj); //"name=dog&count=10"

$.isArray():检测是否为数组。
$.isFunction():检测是否为函数类型。
$.each(obj, [callback]):遍历数组或者集合对象。obj是要遍历的集合对象,callback表示回调函数,该函数将在遍历每个成员时出发。回调函数包含两个参数,第一个参数为对象成员或数组的索引,第二个参数为对应的值。

var a = [x,y,z];
$.each(a, function(index, value) {
  console.log(index); //0,1,2
  console.log(value); //x,y,z
});
var b = {x:1, y:2, z:3};
$.each(b, function(key, value)) {
  console.log(key);  //x,y,z
  console.log(value); //1,2,3
}

说明:如果中途要退出each()循环,可以在回调函数中返回false,其他返回值将被忽略。

$.each()和$(selector).each()功能相同,但$.each()可以遍历任何对象或数组,而$(selector).each()只能遍历当前选择器选择的jQuery对象。

$.makeArray():把类数组对象转换为数组对象。所谓类数组对象,就是拥有length属性,索引从0到length-1。但是这些对象不能够调用数组方法。

var arr = $.makeArray($('li')); //类数组对象转换为数组
$('ul').html(arr.reverse()); //可以调用数组的reverse()方法了

$.grep():根据过滤函数过滤掉数组中不符合条件的元素。

$.grep(array, callback, [invert]);

说明:参数array表示要过滤的数组,callback表示过滤函数。如果过滤函数返回true,则保留元素,如果过滤函数返回false,则删除元素。参数invert,可选,如果为false或者没有设置,则返回数组中由过滤函数返回true的元素;如果该参数为true,则返回过滤函数中返回false的元素。

var a = [1,2,3,4,5];
a = $.grep(a, function(value, index)) {
  return value > 3; //a现在为[4,5]
});
var b = [1,2,3,4,5];
b = $.grep(b, function(value, index)) {
  return value > 3; //b现在为[1,2,3]
}, true);

$.map():映射数组。
$.map(array, callback);

var a = [1,2,3,4];
a = $.map(a, function(elem)) {
  return elem * 2; //a现在为[2,4,6,8]
});

$.merge():合并数组。
说明:接受两个数组参数。

var a = [1,2,3];
var b = [4,5];
var c = $.merge(a,b); //c为[1,2,3,4,5];

$.unique():删除DOM元素数组中的重复项。

...
<a id="1" class="link link1"></a>
<a id="2" class="link"></a>
<a id="3" class="link"></a>
...
var $link = $('.link'); //包含#1,#2,#3
var $firstLink = $('.link1'); //包含#1
var $links = $.merge($link, $firstLink); //包含#1,#2,#3,#1
var $linkList = $.unique($link); //包含#1,#2,#3

说明:只能处理DOM元素数组,不能处理字符串或者JavaScript数组。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
jQuery数据缓存用法分析
Feb 20 #Javascript
jQuery性能优化技巧分析
Feb 20 #Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 #Javascript
jQuery源码解读之addClass()方法分析
Feb 20 #Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 #Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 #Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 #Javascript
You might like
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
jquery $.ajax入门应用二
2008/11/19 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python初学者常见错误详解
2019/07/02 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
好人好事事迹材料
2014/02/12 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
Redis 常见使用场景
2021/08/30 Redis
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers