jQueryが持参したいくつかの一般的な方法のまとめ
29059 ワード
jQuery自带的一些常用方法总结
jQuery , $.trim 、$.contains、$.each、$.map、$.inArray、$.extend ,
（$.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);
}
);