欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-11 18:11:09
本身方法($.each,$.map,$.contains,$ajax) 常用工具方法 (1)$.trim $.trim方法用于移除字符串头部和尾部多余的空格。 复制代码 代...

本身方法($.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(p, "test1", "value-1");
$.removedata(p, "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("p"));
(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);
  }
);