当前位置:首页 > 开发 > Web前端 > Jquery > 正文

Jquery 总结

发表于: 2015-07-07   作者:cuishikuan   来源:转载   浏览:
摘要: 1.$.trim方法用于移除字符串头部和尾部多余的空格。如:$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值,表示某个DOM元素(第二个参数)是否为另一个DOM元素(第一个参数)的下级元素。如:$.contains(document.documentElement, document.body); 3.$

1.$.trim方法用于移除字符串头部和尾部多余的空格。
如:$.trim('   Hello   ') // Hello
2.$.contains方法返回一个布尔值,表示某个DOM元素(第二个参数)是否为另一个DOM元素(第一个参数)的下级元素。
如:$.contains(document.documentElement, document.body);
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
4.$.map方法也是用来遍历数组和对象,但是会返回一个新对象。
var a = ["a", "b", "c", "d", "e"];
a = $.map(a, function (n, i){
  return (n.toUpperCase() + i);
});
// ["A0", "B1", "C2", "D3", "E4"]
5.$.inArray方法返回一个值在数组中的位置(从0开始)。如果该值不在数组中,则返回-1。
var a = [1,2,3,4];
$.inArray(4,a) // 3
6.$.extend方法用于将多个对象合并进第一个对象。
var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};
$.extend(o1,o2);
o1.p1 // "c"
7.$.proxy方法类似于ECMAScript 5的bind方法,可以绑定函数的上下文(也就是this对象)和参数,返回一个新函数。

var o = {
    type: "object",
    test: function(event) {
        console.log(this.type);
    }
};
$("#button")
  .on("click", o.test) // 无输出
  .on("click", $.proxy(o.test, o)) // object
上面代码的$.proxy(o, test)的意思是,将o的方法test与o绑定。
8.$.data方法可以用来在DOM节点上储存数据。
// 存入数据
$.data(document.body, "foo", 52 );
// 读取数据
$.data(document.body, "foo");
// 读取所有数据
$.data(document.body);
上面代码在网页元素body上储存了一个键值对,键名为“foo”,键值为52。

9.$.removeData方法用于移除$.data方法所储存的数据。
$.data(div, "test1", "VALUE-1");
$.removeData(div, "test1");
10.$.parseHTML方法用于将字符串解析为DOM对象。

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);

11.$.parseJSON方法用于将JSON字符串解析为JavaScript对象

12.$.makeArray方法将一个类似数组的对象,转化为真正的数组。
var a = $.makeArray(document.getElementsByTagName("div"));
13.$.merge方法用于将一个数组(第二个参数)合并到另一个数组(第一个参数)之中。
var a1 = [0,1,2];
var a2 = [2,3,4];
$.merge(a1, a2);
a1
// [0, 1, 2, 2, 3, 4]
14.$.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文档之中。
除了上面这些方法以外,还有一个$.type方法,可以返回一个变量的数据类型。

$.type(/test/) // "regexp"

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

$.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文件,并将其放入当前元素之中。
$.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));
});
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);
  }
});
$.getScript方法用于从服务器端加载一个脚本文件。
$.getScript('/static/js/myScript.js', function() {
    functionFromMyScript();
});

$.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方法返回的是一个deferred对象,可以用then方法为该对象指定回调函数

$.ajax({
  url: '/data/people.json',
  dataType: 'json'
}).then(function (resp){
  console.log(resp.people);
})


 

Jquery 总结

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
Jquery的概念 Jquery是prototype之后的,又一个优秀的javascript框架. Jquery的优势 Jquery最核心的
1.JQuery是什么?与Js的关系? JQuery是继prototype之后又一个优秀的JS框架,是JS代码库。JS库的出
最近学习计算机的热情空前高涨,感觉整个B/S项目的学习就像在一片茂密的森林里穿梭,不经意的一个转
什么是Jquery框架 所谓框架,就是指一套包含工具、函数库、约定、以及尝试从常用任务中抽象出可以复
Jquery中的选择器完全继承了CSS的风格,利用Jquery选择器,可以非常便捷和快速的找出特定的Dom元素
<!-- [if !mso]> <mce:style><!-- v/:* {behavior:url(#default#VML);} o/:* {behav
jQuery 1.8在线中文API 总结的不容易,大家转载的话麻烦留个链接!O(∩_∩)O~ javascript:new Opti
JQuery中主要AJax方法: 一、load: $(selector).load(url,[data],[callback]);从服务器中加载数据并
jQuery 1.8在线中文API 总结的不容易,大家转载的话麻烦留个链接!O(∩_∩)O~ javascript:new Opti
看完JQuery视频之后,有一个感觉,长时间的吃萝卜青菜,突然来了一顿大餐的感觉。真心觉得爽! 视频
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号