jQuery自带的一些常用方法总结
来源:互联网 发布:仓库数据流程图 编辑:程序博客网 时间:2024/05/18 03:58
这篇文章主要介绍了jQuery自带的一些常用方法总结,包括$.trim 、$.contains、$.each、$.map、$.inArray、$.extend等,需要的朋友可以参考下
常用工具方法
(1)
代码如下:$.trim(' Hello ') // Hello
(2)
代码如下:$.contains(document.documentElement, document.body); // true$.contains(document.body, document.documentElement); // false
(3)
$.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方法(
代码如下:var a = ["a", "b", "c", "d", "e"];a = $.map(a, function (n, i){ return (n.toUpperCase() + i);});// ["A0", "B1", "C2", "D3", "E4"]
(4)
代码如下:var a = [1,2,3,4];$.inArray(4,a) // 3
(5)
代码如下: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)
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)// orjQuery.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方法可以用来在DOM节点上储存数据。
代码如下:// 存入数据$.data(document.body, "foo", 52 );// 读取数据$.data(document.body, "foo");// 读取所有数据$.data(document.body);
上面代码在网页元素body上储存了一个键值对,键名为“foo”,键值为52。
代码如下:$.data(div, "test1", "VALUE-1");$.removeData(div, "test1");
(8)
代码如下: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)
代码如下: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()的用法有多种,最常见的是提供一个对象参数。
代码如下:$.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方法还有一些简便写法。
$.fn.load():读取一个html文件,并将其放入当前元素之中。
一般来说,这些简便方法依次接受三个参数:url、数据、成功时的回调函数。
(1)
这两个方法分别对应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('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('/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)
代码如下:$('#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元素(\
代码如下:$.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); });
- jQuery自带的一些常用方法总结
- mybatis中一些自带常用的方法
- jquery 别人总结 的一些常用方法
- 常用的Jquery选择器/自带事件
- 开发中常用的Jquery的一些方法的总结
- 总结的一些jquery获取更改dom元素常用方法
- 总结的一些jquery获取更改dom元素常用方法
- hibernate自带的常用方法
- jquery的一些常用方法
- jQuery常用的一些方法
- jQuery常用的一些方法
- Jquery一些常用的方法
- jquery的一些常用方法
- oracle自带的一些基本的常用的函数
- JQuery 常用的方法总结
- jquery一些常用的代码总结
- jquery一些常用方法
- 如何调用android系统自带的一些方法
- RecyclerView使用完全指南
- next_permutation(排列问题)
- 数据仓库--数据建模(未完)
- JDBC总结
- IBM Ponder This November 2009【贪心】【哈夫曼树】
- jQuery自带的一些常用方法总结
- ZooKeeper 学习 (三) 客户端zkCli.sh以及相关操作命令
- 《编程之美》寻找发帖水王 质疑
- ORACLE学习之PL/SQL中异常
- 为解决的错误
- 总结JS中所有变量的类型和true/false
- C++单例模式
- 20170802
- mysql主从复制 及读写分离