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 相关文章推荐
intro.js 页面引导简单用法 分享
Aug 06 Javascript
js显示文本框提示文字的方法
May 07 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
js实现简单的点名器随机色实例代码
Sep 20 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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Djang中静态文件配置方法
2015/07/30 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
Python算法之图的遍历
2017/11/16 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
python读取Kafka实例
2019/12/23 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
学生个人自我鉴定
2014/03/26 职场文书
出纳工作检讨书
2014/10/18 职场文书