jQuery实用函数用法总结


Posted in Javascript onAugust 29, 2014

本文以实例的形式总结了jQuery的常见实用函数。分享给大家供大家参考之用。具体示例如下:

1.修剪字符串

$('#id').val($.trim($('#someid').val()))
 

2.遍历集合

可能这样写:

var anArray = ['one','two'];
for(var n = 0; n < anArray.length; n++){
  
}

还有可能这样写:

var anObject = {one: 1, two: 2};
for(var p in anObject){
  
}

但有了$.each函数后,就可以这样写了:

var anArray = ['one','two'];
$.each(anArray, funtion(n, value){
  
})
var anObject = {one: 1, two: 2};
$.each(anObjct, function(name,value){
  
})

3.筛选数组

使用$.grep()方法能筛选数组。先来看grep方法的定义:

grep: function(elems, callback, inv){
  var ret = [], retVal;
  inv = !!inv;
  for(var i = 0; length = elems.length; i < length; i++){
    retVal = !!callback(elems[i],i)
    if(inv !== retVal){
      ret.push(elems[i]);
    }
  }
  return ret;
}

以上示例中:
① grep方法的第二个参数是回调函数,该回调函数接收2个参数,一个是数组的元素,一个是数组的索引。
② grep方法的第三个参数inv,默认情况下是undefined,所以!!inv为false,即inv的默认值是false

举例1:int类型数组

var arr = [1, 2, 3, 4, 5, 6];
arr = $.grep(arr, function(val, index){
  return val > 3;
})
console.log(arr);//结果是:4 5 6

如果把grep的第三个参数显式地设置为true,结果怎样呢?

var arr = [1, 2, 3, 4, 5, 6];
arr = $.grep(arr, function(val, index){
  return val > 3;
}, true)
console.log(arr);//结果是:1 2 3

可见,当把grep方法的第三个参数设置为true后,会把不符合回调函数的数组元素过滤出来。

举例2:object类型数组

var arr = [
  {
    first: "Jeffrey",
    last: 'Way'
  },{
    first: 'Allison',
    last: 'Way'
  },{
    first: 'John',
    last: 'Doe'
  },{
    first: 'Thomas',
    last: 'Way'
  };
  arr = $.grep(arr, function(obj, index){
    return obj.last === 'Way';
  });
  console.log(arr);
];

4.转换数组

使用$.map(arr, callback)为数组的每一个元素调用回调函数,并返回一个新的数组

给数组的每一个元素加1:

var oneBased = $.map([0, 1, 2, 3, 4], function(value){return value +1;})

把字符串数组转换成整型数字数组,判断数组元素是否是数字:

var strings = ['1', '2', '3','4','S','6'];
var values = $.map(strings, function(value){
  var result = new Number(value);
  return isNaN(result) ? null : result;
})

把转换后的数组合并到原先的数组中:

var chars = $.map(['this','that'], function(value){return value.split(' ')});

5.返回数组元素的索引

使用$.inArray(value, array)返回传入的值第一次出现的下标,即索引。

var index = $.inArray(2, [1, 2, 3]);

6.将对象转换成数组

$.makeArray(object)将传入类似数组的对象转换成Javascript数组。

<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
<script>
  var elems = document.getElementsByTagName("div");
  var arr = jQuery.makeArray(elems);
  arr.reverse();
  $(arr).appendTo(document.body);
</script>

7.得到不含重复元素的数组

使用$.unique(array)返回由原始数组中不重复的元素组成的数组。

<div>There are 6 divs in this document.</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>
//把到所有div,get方法转换成javascript数组,总共6个div
var divs = $("div").get();
//再把3个class名为dup的div合并到前面的6个div
divs = divs.concat($(".dup").get());
alert(divs.length); //9个div
//过滤去掉重复
divs = jQuery.unqiue(divs);
alert(divs.length);//6个div

8.合并2个数组

$.merge(array1, array2)把第二个数组合并到第一个数组中,并返回第一个数组。

var a1 = [1, 2];
var a2 = [2, 3];
$.merge(a1, a2);
console.log(a1);//[1, 2, 2, 3]

9.把对象序列化成查询字符串

$.param(params)把传入的jquery对象或javascript对象转换成字符串形式。

$(document).ready(function(){
 personObj=new Object();
 personObj.firstname="John";
 personObj.lastname="Doe";
 personObj.age=50;
 personObj.eyecolor="blue"; 
 $("button").click(function(){
  $("div").text($.param(personObj));
 });
});

结果:firstname=John&lastname=Doe&age=50&eyecolor=blue

10.一些判断函数

$.isArray(o) 如果o是javascript数组,则返回true,如果是类似数组的jquery对象数组,返回false
$.isEmptyObject(o) 如果o是不包含属性的javascript对象,则返回true
$.isFunction(o) 如果o是javascript函数就返回true
$.isPlainObject(o) 如果o是通过{}或new Object()创建的对象,则返回true
$.isXMLDoc(node) 如果node是XML文档或者是XML文档中的节点,则返回true

11.判断一个元素是否包含在另外一个元素中

$.contains(container, containee)第二个参数是被包含

$.contains( document.documentElement, document.body ); // true
$.contains( document.body, document.documentElement ); // false

12.把值存储到某元素上

$.data(element, key, value)第一个是javascript对象,第二、第三个是键值。

//得到一个div的javascript对象
var div = $("div")[0];
//把键值存储到div上
jQuery.data(div, "test",{
  first: 16,
  last: 'pizza'
})
//根据键读出值
jQuery.data(div, "test").first
jQuey.data(div, "test").last

13.移除存储到某元素上的值

<div>value1 before creation: <span></span></div>
<div>value1 after creation: <span></span></div>
<div>value1 after removal: <span></span></div>
<div>value2 after removal: <span></span></div>
var div = $( "div" )[ 0 ];
//存储值
jQuery.data( div, "test1", "VALUE-1" );
//移除值
jQuery.removeData( div, "test1" );

14.绑定函数的上下文

jQuery.proxy( function, context)返回一个新的function函数,上下文是context。

$(document).ready(function(){
 var objPerson = {
  name: "John Doe",
  age: 32,
  test: function(){
   $("p").after("Name: " + this.name + "<br> Age: " + this.age);
  }
 };
 $("button").click($.proxy(objPerson,"test"));
});

以上,点击按钮,执行的是test方法,不过test方法的上下文做了设置。

15.解析JSON

jQuery.parseJSON( json )第一个参数json的类型是字符串。

var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );

16.表达式求值

有时候,希望一段代码在全局上下文中执行,可以使用jQuery.globalEval( code )。code的类型是字符串。

function test() {
 jQuery.globalEval( "var newVar = true;" )
}
test();

17.动态加载脚本

$(selector).getScript(url,success(response,status))用来动态加载js文件,第一个参数是js的文件路径,第二个参数可选,表示获取js文件成功的回调。

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
 console.log( data ); // Data returned
 console.log( textStatus ); // Success
 console.log( jqxhr.status ); // 200
 console.log( "Load was performed." );
});

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

Javascript 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
javascript编程起步(第七课)
Jan 10 Javascript
最简单的jQuery程序 入门者学习
Jul 09 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 #Javascript
原生javascript实现的分页插件pagenav
Aug 28 #Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 #Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 #Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 #Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 #Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 #Javascript
You might like
PHP出错界面
2006/10/09 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
javascript常用的方法整理
2015/08/20 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
在Python中调用ggplot的三种方法
2015/04/08 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
关于python中remove的一些坑小结
2021/01/04 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
《美丽的小路》教学反思
2014/02/26 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
检讨书怎么写
2015/05/07 职场文书
国博复兴之路观后感
2015/06/02 职场文书
鲁冰花观后感
2015/06/10 职场文书
清明节主题班会
2015/08/14 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript