jQuery自带的一些常用方法总结


Posted in Javascript onSeptember 03, 2014

本身方法($.each,$.map,$.contains,$ajax)

常用工具方法

(1)$.trim

$.trim方法用于移除字符串头部和尾部多余的空格。

$.trim('   Hello   ') // Hello

(2)$.contains

$.contains方法返回一个布尔值,表示某个DOM元素(第二个参数)是否为另一个DOM元素(第一个参数)的下级元素。

$.contains(document.documentElement, document.body); 

// true

$.contains(document.body, document.documentElement); 

// false

(3)$.each,$.map

$.each方法用于遍历数组和对象,然后返回原始对象。它接受两个参数,分别是数据集合和回调函数。

$.each([ 52, 97 ], function( index, value ) {

  console.log( index + ": " + value );

});

// 0: 52 

// 1: 97 

var obj = {

  p1: "hello",

  p2: "world"

};

$.each( obj, function( key, value ) {

  console.log( key + ": " + value );

});

// p1: hello

// p2: world

需要注意的,jQuery对象实例也有一个each方法($.fn.each),两者的作用差不多。

$.map方法也是用来遍历数组和对象,但是会返回一个新对象。

var a = ["a", "b", "c", "d", "e"];

a = $.map(a, function (n, i){

  return (n.toUpperCase() + i);

});

// ["A0", "B1", "C2", "D3", "E4"]

(4)$.inArray

$.inArray方法返回一个值在数组中的位置(从0开始)。如果该值不在数组中,则返回-1。

var a = [1,2,3,4];

$.inArray(4,a) // 3

(5)$.extend

$.extend方法用于将多个对象合并进第一个对象。

var o1 = {p1:'a',p2:'b'};

var o2 = {p1:'c'};

$.extend(o1,o2);

o1.p1 // "c"

$.extend的另一种用法是生成一个新对象,用来继承原有对象。这时,它的第一个参数应该是一个空对象。
var o1 = {p1:'a',p2:'b'};

var o2 = {p1:'c'};

var o = $.extend({},o1,o2);

o

// Object {p1: "c", p2: "b"}

默认情况下,extend方法生成的对象是“浅拷贝”,也就是说,如果某个属性是对象或数组,那么只会生成指向这个对象或数组的指针,而不会复制值。如果想要“深拷贝”,可以在extend方法的第一个参数传入布尔值true。
var o1 = {p1:['a','b']};

var o2 = $.extend({},o1);

var o3 = $.extend(true,{},o1);

o1.p1[0]='c';

o2.p1 // ["c", "b"]

o3.p1 // ["a", "b"]

上面代码中,o2是浅拷贝,o3是深拷贝。结果,改变原始数组的属性,o2会跟着一起变,而o3不会。

(6)$.proxy

$.proxy方法类似于ECMAScript 5的bind方法,可以绑定函数的上下文(也就是this对象)和参数,返回一个新函数。

jQuery.proxy()的主要用处是为回调函数绑定上下文对象。

var o = {

    type: "object",

    test: function(event) {

        console.log(this.type);

    }

};

$("#button")

  .on("click", o.test) // 无输出

  .on("click", $.proxy(o.test, o)) // object

上面的代码中,第一个回调函数没有绑定上下文,所以结果为空,没有任何输出;第二个回调函数将上下文绑定为对象o,结果就为object。

这个例子的另一种等价的写法是:

$("#button").on( "click", $.proxy(o, test))

上面代码的$.proxy(o, test)的意思是,将o的方法test与o绑定。

这个例子表明,proxy方法的写法主要有两种。

jQuery.proxy(function, context)

// or

jQuery.proxy(context, name)

第一种写法是为函数(function)指定上下文对象(context),第二种写法是指定上下文对象(context)和它的某个方法名(name)。

再看一个例子。正常情况下,下面代码中的this对象指向发生click事件的DOM对象。

$('#myElement').click(function() {

    $(this).addClass('aNewClass');

});

如果我们想让回调函数延迟运行,使用setTimeout方法,代码就会出错,因为setTimeout使得回调函数在全局环境运行,this将指向全局对象。
$('#myElement').click(function() {

    setTimeout(function() {

        $(this).addClass('aNewClass');

    }, 1000);

});

上面代码中的this,将指向全局对象window,导致出错。

这时,就可以用proxy方法,将this对象绑定到myElement对象。

$('#myElement').click(function() {

    setTimeout($.proxy(function() {

        $(this).addClass('aNewClass'); 

    }, this), 1000);

});

(7)$.data,$.removeData

$.data方法可以用来在DOM节点上储存数据。

// 存入数据

$.data(document.body, "foo", 52 );

// 读取数据

$.data(document.body, "foo");

// 读取所有数据

$.data(document.body);

上面代码在网页元素body上储存了一个键值对,键名为“foo”,键值为52。

$.removeData方法用于移除$.data方法所储存的数据。

$.data(div, "test1", "VALUE-1");

$.removeData(div, "test1");

(8)$.parseHTML,$.parseJSON,$.parseXML

$.parseHTML方法用于将字符串解析为DOM对象。

$.parseJSON方法用于将JSON字符串解析为JavaScript对象,作用与原生的JSON.parse()类似。但是,jQuery没有提供类似JSON.stringify()的方法,即不提供将JavaScript对象转为JSON对象的方法。

$.parseXML方法用于将字符串解析为XML对象。

var html = $.parseHTML("hello, <b>my name is</b> jQuery.");

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

var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>";

var xmlDoc = $.parseXML(xml);

(9)$.makeArray

$.makeArray方法将一个类似数组的对象,转化为真正的数组。

var a = $.makeArray(document.getElementsByTagName("div"));

(10)$.merge

$.merge方法用于将一个数组(第二个参数)合并到另一个数组(第一个参数)之中。
var a1 = [0,1,2];

var a2 = [2,3,4];

$.merge(a1, a2);

a1

// [0, 1, 2, 2, 3, 4]

(11)$.now

$.now方法返回当前时间距离1970年1月1日00:00:00 UTC对应的毫秒数,等同于(new Date).getTime()。
$.now()

// 1388212221489

判断数据类型的方法

jQuery提供一系列工具方法,用来判断数据类型,以弥补JavaScript原生的typeof运算符的不足。以下方法对参数进行判断,返回一个布尔值。

jQuery.isArray():是否为数组。
jQuery.isEmptyObject():是否为空对象(不含可枚举的属性)。
jQuery.isFunction():是否为函数。
jQuery.isNumeric():是否为数组。
jQuery.isPlainObject():是否为使用“{}”或“new Object”生成的对象,而不是浏览器原生提供的对象。
jQuery.isWindow():是否为window对象。
jQuery.isXMLDoc():判断一个DOM节点是否处于XML文档之中。
下面是一些例子。

$.isEmptyObject({}) // true

$.isPlainObject(document.location) // false

$.isWindow(window) // true

$.isXMLDoc(document.body) // false

除了上面这些方法以外,还有一个$.type方法,可以返回一个变量的数据类型。它的实质是用Object.prototype.toString方法读取对象内部的[[Class]]属性(参见《标准库》的Object对象一节)。
$.type(/test/) // "regexp"

Ajax操作

$.ajax

jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作。调用该方法后,浏览器就会向服务器发出一个HTTP请求。

$.ajax()的用法有多种,最常见的是提供一个对象参数。

$.ajax({

  async: true,

  url: '/url/to/json',

  type: 'GET',

  data : { id : 123 },

  dataType: 'json',

  timeout: 30000,

  success: successCallback,

  error: errorCallback,

  complete: completeCallback

})

function successCallback(json) {

    $('<h1/>').text(json.title).appendTo('body');

}

function errorCallback(xhr, status){

    console.log('出问题了!');

}

function completeCallback(xhr, status){

    console.log('Ajax请求已结束。');

}

上面代码的对象参数有多个属性,含义如下:

async:该项默认为true,如果设为false,则表示发出的是同步请求。
cache: 该项默认为true,如果设为false,则浏览器不缓存返回服务器返回的数据。注意,浏览器本身就不会缓存POST请求返回的数据,所以即使设为false,也只对HEAD和GET请求有效。
url:服务器端网址。这是唯一必需的一个属性,其他属性都可以省略。
type:向服务器发送信息所使用的HTTP动词,默认为GET,其他动词有POST、PUT、DELETE。
dataType:向服务器请求的数据类型,可以设为text、html、script、json、jsonp和xml。
data:向服务器发送的数据,如果使用GET方法,此项将转为查询字符串,附在网址的最后。
success:请求成功时的回调函数,函数参数为服务器传回的数据、状态信息、发出请求的原始对象。
timeout: 等待的最长毫秒数。如果过了这个时间,请求还没有返回,则自动将请求状态改为失败。
error:请求失败时的回调函数,函数参数为发出请求的原始对象以及返回的状态信息。
complete:不管请求成功或失败,都会执行的回调函数,函数参数为发出请求的原始对象以及返回的状态信息。
这些参数之中,url可以独立出来,作为ajax方法的第一个参数。也就是说,上面代码还可以写成下面这样。

$.ajax('/url/to/json',{

  type: 'GET',

  dataType: 'json',

  success: successCallback,

  error: errorCallback

})

简便写法

ajax方法还有一些简便写法。

$.get():发出GET请求。
$.getScript():读取一个JavaScript脚本文件并执行。
$.getJSON():发出GET请求,读取一个JSON文件。
$.post():发出POST请求。
$.fn.load():读取一个html文件,并将其放入当前元素之中。
一般来说,这些简便方法依次接受三个参数:url、数据、成功时的回调函数。

(1)$.get(),$.post()

这两个方法分别对应HTTP的GET方法和POST方法。

$.get('/data/people.html', function(html){

  $('#target').html(html);

});

$.post('/data/save', {name: 'Rebecca'}, function (resp){

  console.log(JSON.parse(resp));

});

get方法接受两个参数,分别为服务器端网址和请求成功后的回调函数。post方法在这两个参数中间,还有一个参数,表示发给服务器的数据。

上面的post方法对应的ajax写法如下。

$.ajax({

    type: 'POST',

    url: '/data/save',

    data: {name: 'Rebecca'},

    dataType: 'json',

    success: function (resp){

      console.log(JSON.parse(resp));

    }

});

(2)$.getJSON()

ajax方法的另一个简便写法是getJSON方法。当服务器端返回JSON格式的数据,可以用这个方法代替$.ajax方法。

$.getJSON('url/to/json', {'a': 1}, function(data){

    console.log(data);

});

上面的代码等同于下面的写法。
$.ajax({

  dataType: "json",

  url: '/url/to/data',

  data: {'a': 1},

  success: function(data){

    console.log(data);

  }

});

(3)$.getScript()

$.getScript方法用于从服务器端加载一个脚本文件。

$.getScript('/static/js/myScript.js', function() {

    functionFromMyScript();

});

上面代码先从服务器加载myScript.js脚本,然后在回调函数中执行该脚本提供的函数。

getScript的回调函数接受三个参数,分别是脚本文件的内容,HTTP响应的状态信息和ajax对象实例。

$.getScript( "ajax/test.js", function (data, textStatus, jqxhr){

  console.log( data ); // test.js的内容

  console.log( textStatus ); // Success

  console.log( jqxhr.status ); // 200

});

getScript是ajax方法的简便写法,因此返回的是一个deferred对象,可以使用deferred接口。
jQuery.getScript("/path/to/myscript.js")

    .done(function() {

        // ...

    })

    .fail(function() {

        // ...

});

(4)$.fn.load()

$.fn.load不是jQuery的工具方法,而是定义在jQuery对象实例上的方法,用于获取服务器端的HTML文件,将其放入当前元素。由于该方法也属于ajax操作,所以放在这里一起讲。

$('#newContent').load('/foo.html');

$.fn.load方法还可以指定一个选择器,将远程文件中匹配选择器的部分,放入当前元素,并指定操作完成时的回调函数。
$('#newContent').load('/foo.html #myDiv h1:first',

    function(html) {

        console.log('内容更新!');

});

上面代码只加载foo.html中匹配“#myDiv h1:first”的部分,加载完成后会运行指定的回调函数。

Ajax事件

jQuery提供以下一些方法,用于指定特定的AJAX事件的回调函数。

.ajaxComplete():ajax请求完成。
.ajaxError():ajax请求出错。
.ajaxSend():ajax请求发出之前。
.ajaxStart():第一个ajax请求开始发出,即没有还未完成ajax请求。
.ajaxStop():所有ajax请求完成之后。
.ajaxSuccess():ajax请求成功之后。
下面是示例。

$('#loading_indicator')

.ajaxStart(function (){$(this).show();})

.ajaxStop(function (){$(this).hide();});

返回值

ajax方法返回的是一个deferred对象,可以用then方法为该对象指定回调函数(详细解释参见《deferred对象》一节)。

$.ajax({

  url: '/data/people.json',

  dataType: 'json'

}).then(function (resp){

  console.log(resp.people);

})

JSONP

由于浏览器存在“同域限制”,ajax方法只能向当前网页所在的域名发出HTTP请求。但是,通过在当前网页中插入script元素(\<script>),可以向不同的域名发出GET请求,这种变通方法叫做JSONP(JSON with Padding)。

ajax方法可以发出JSONP请求,方法是在对象参数中指定dataType为JSONP。

$.ajax({

  url: '/data/search.jsonp',

  data: {q: 'a'},

  dataType: 'jsonp',

  success: function(resp) {

    $('#target').html('Results: ' + resp.results.length);

  }

});)

JSONP的通常做法是,在所要请求的URL后面加在回调函数的名称。ajax方法规定,如果所请求的网址以类似“callback=?”的形式结尾,则自动采用JSONP形式。所以,上面的代码还可以写成下面这样。
$.getJSON('/data/search.jsonp?q=a&callback=?',

  function(resp) {

    $('#target').html('Results: ' + resp.results.length);

  }

);
Javascript 相关文章推荐
jqgrid 表格数据导出实例
Nov 21 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
JS传参及动态修改页面布局
Apr 13 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 #Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 #Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 #Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 #Javascript
Egret引擎开发指南之视觉编程
Sep 03 #Javascript
Egret引擎开发指南之发布项目
Sep 03 #Javascript
Egret引擎开发指南之运行项目
Sep 03 #Javascript
You might like
php 模拟POST|GET操作实现代码
2010/07/20 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
非常漂亮的JS代码经典广告
2007/10/21 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
Python中列表元素转为数字的方法分析
2016/06/14 Python
Python编写打字训练小程序
2019/09/26 Python
Python 如何在字符串中插入变量
2020/08/01 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
什么时候需要进行强制类型转换
2016/09/03 面试题
上班迟到检讨书
2014/01/10 职场文书
给学校建议书范文
2014/05/13 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
学生安全责任协议书
2016/03/22 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle