jquery1.4 API
， jQuery ， ( Google Closure )， ( )。
jQuery (23kb Gzipped)
jQuery (154kb)
，Google jQuery 。 – Google 。
http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
URL， jQuery 。
jQuery1.4 ， – public 。 ， ， 。
( ) Features
jQuery1.4 。 jQuery 1.4 。
” ”
jQuery 1.4 。( : ， ) ， jQuery : ， ( : Complexity)
View the cropped chart.
1.4 jQuery 。
(Easy Setter Functions)
， .attr() ， HTML (attribute) 。 : .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), .toggleClass().
, ， 2 。.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), .toggleClass().
:
// A '&' ， span
$('a').html(function(i,html){
return html.replace(/&/gi,'&');
});
// title
$('a[target]').attr("title", function(i,title){
return title + " ( )";
});
Ajax
(jQuery.param() , Commit 1, Commit 2)
jQuery 1.4 jQuery.param ， PHP ， Ruby on Rails 。
，
{foo: ["bar", "baz"]} “foo[]=bar&foo[]=baz”.
jQuery 1.3 , {foo: ["bar", "baz"]} “foo=bar&foo=baz”. ， 。 ， Ajax 。( jQuery.ajaxSettings.traditional ， 。
3 :
// ( )
jQuery.ajaxSettings.traditional = true;
//
jQuery.param( stuff, true );
// Ajax
$.ajax({ data: stuff, traditional: true });
: jQuery.param() , jQuery.ajax() , Commit, Code
JSON ”content-type” 。 (jQuery.ajax , Commit 1, Commit 2)
Ajax JSON(application/json), dataType ”json”( dataType )。 ， Javascript(application/javascript), dataType ”script”( ， dataType ), ， 。
Etag (jQuery.ajax() , Commit)
, jQuery Ajax ”Last-Modified” 。 。 ifModified:true jQuery 。jQuery1.4 ”If-None-Match” ifModified 。
JSON ， JSON.parse (jQuery.ajax() , Commit 1, Commit 2, Commit 3)
jQuery 1.3 Javascript eval JSON 。1.4 JSON ， 。 JSON 。 jQuery.getJSON ， Ajax dataType ”json” ，jQuery JSON( {foo: "bar"})。
HTML5 (jQuery.param() , Commit)
HTML5 ( ’datetime’ ’range’) .serialize() 。
Ajax (jQuery.ajax() , Commit)
” ” Ajax ， ” ” ( ， , )。
jQuery.ajax({
url: "test.html",
context: document.body,
success: function(){
jQuery(this).addClass("done");
}
});
XHR (jQuery.ajax() , Commit)
Ajax XMLHttpRequest ， 。 XHR $.ajax 。
”Content-Type” (jQuery.ajax() , Commit)
1.3 ， ，jQuery.ajax contentType 。1.4 ，contentType 。 ”Content-Type” 。
JSONP (jQuery.ajax , Commit)
jQuery.ajax() jsonpCallback ， JSONP 。
XHR (Commit)
Ajax( ) ， ， XHR 。(TODO)
jQuery.ajax() ”onreadystatechange” (Commit)
”onreadystatechange” ，Ajax
(Attributes)
.css() .attr() 。
<
.attr() (.attr() )
.attr() ， 。
jQuery('<img src="enter.png" alt="enter your name" />')
.attr("alt", function(index, value) {
return "Please, " + value;
});
.val( Function ) (.val() )
<input class="food" type='text' data-index="0" />
<input class="food" type='text' data-index="1" />jQuery("input:text.food").hide();
jQuery("<ul class='sortable'><li>Peanut Butter</li><li>Jelly</li></ul>"
)
.sortable()
.bind("endsort", function() {
$(":text.food").val(function() {
return $("ul.sortable li:eq(" + $(this).attr("data-index") + ")").text();
});
});
text CDATAHTML .text() (.text() , Commit)
(Core)
(jQuery() , Commit)
jQuery ， :
jQuery("
", {
id: "foo",
css: {
height: "50px",
width: "50px",
color: "blue",
backgroundColor: "#ccc"
},
click: function() {
$(this).css("backgroundColor", "red");
}
}).appendTo("body");
jQuery ， jQuery 。
( : $("<a>link</a>", {css:{background:"#ccc"}}); $("<a>link</a>")).css("background", "#ccc");
.eq(-N), .get(-N) ( ) (.eq() , .get() , Commit)
.get() .eq() 。 ， 2 div ， 2 DOM :
$("div").eq(-2);
$("div").get(-2);
.first() .last() (.first() , .last() , Commit)
, .first() .last() .eq(0) .eq(-1).
.toArray() (.toArray() , Commit)
.get() jQuery 。 , .toArray() 。( : ， .toList() ， 。) ， .get() ，.toArray() 。
jQuery() (jQuery() , Commit)
jQuery 1.3 ,jQuery() document jQuery 。 ， 。 : jQuery().ready() 1.4 ， 。 jQuery(document).ready() jQuery(function(){})。
jQuery(“TAG”) (Element Selector , Commit)
jQuery 。
jQuery(“<div>”), jQuery(“<div/>”) jQuery(“<div></div>”) (jQuery() , Commit)
(document.createElement), jQuery("<div></div>") 。 ， ， ( innerHTML)。
(CSS)
.css() 2 。
.addClass(), .removeClass(), .hasClass() 3
.toggleClass() css (.toggleClass() , Commit)
.toggleClass() css 。
$("div").toggleClass("current active");
.data() , .data(Object) (.data() , Commit 1, Commit 2)
。 。 jQuery 1.4 , .data() ，.data 。( : - 。) .data(Object) 。 ， 。
, 。 (Commit 1, Commit 2, Commit 3)
jQuery 。 ， ，jQuery 。 ， DOM。
(Effects)
(Per-property Easing , Commit)
， 。James Padolsey blog 。
$("#clickme").click(function() {
$("div").animate({
width: ["+=200px", "swing"],
height: ["+=50px", "linear"],
}, 2000, function() {
$(this).after("<div>Animation complete.</div>");
});
});
(Events)
: jQuery.proxy() (jQuery.proxy() Documenation, Commit 1, Commit 2)
”this” , jQuery.proxy 。
var obj = {
name: "John",
test: function() {
alert( this.name );
$("#test").unbind("click", obj.test);
}
};
$("#test").click( jQuery.proxy( obj, "test" ) );
(.bind() )
。
$("div.test").bind({
click: function(){
$(this).addClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});
‘change’ ’submit’ (Change , Submit )
change submit 。 IE change submit, 。
: ‘focusin’ and ‘focusout’ (.focusin() , .focusout() , Commit)
focusin focusout focus blur, 。 (TODO), 。 focus blur live() ; DOM 。
$("form").focusout(function(event) {
var tgt = event.target;
if (tgt.nodeName == "INPUT" && !tgt.value) {
$(tgt).after("nothing here");
}
});
(.live() )
ready, focus ( focusin), blur ( focusout) , .bind() 。
live() ， 。 .live() , 1.4 change, submit, focusin, focusout, mouseenter, mouseleave 。
: focus ， focusin focusout, focus blur, , focus blur 。
, live() , bind() (Commit)
live/die (Commit)
。 , 。 , , 。
ready body (Commit)
jQuery body ， ， body 。
IE , 。 (Commit)
DOM (Manipulation)
jQuery 1.4 DOM 。
.append(), .prepend(), .before(), and .after() 。
.html() 3 。
.remove() .empty() 4 .
: .detach() (.detach() , Commit)
detach() DOM , 。 ， ， 。
var foo = $("#foo").click(function() {
//
});
foo.detach();
// foo
foo.appendTo("body");
unwrap() (documentation, commit)
unwrap() ， 。( : ” ” , unwrap)。 :
<body>
<div>
<p>annie</p> <p>davey</p> <p>stevie</p>
</div>
</body>$('div').unwrap();<body>
<p>annie</p> <p>davey</p> <p>stevie</p>
</body>
domManip (commit)
jQuery jQuery("<div>") .after("<div>") 。 , , DOM ， 。
before, after, replaceWith (commit)
DOM Tree before, after, replaceWith 。 , DOM 。 。
jQuery("<div>").before("<p>Hello</p>").appendTo("body")
.clone(true) (clone , commit)
1.3 , .clone(true) , 。1.4 ， , 。 jQuery.extend , , 。
(Offset)
.offset( coords | Function ) (.offset() , commit)
! , offset 。
(Queueing)
, fx 。
.delay() (.delay() , commit)
.delay() 。 ”fx” 。 delay 。( : 。)
$("div").fadeIn().delay(4000).fadeOut();
next (.queue() , commit)
jQuery 1.4 , ， 。 , , 。
jQuery("div").queue("ajax", function(next) {
var self = this;
jQuery.getJSON("/update", function(json) {
$(self).html(json.text);
next();
};
}).queue("ajax", function() {
$(this).fadeIn();
});
.clearQueue() (clearQueue , commit)
。 , 。 .clearQueue() ”fx” 。
(Selectors)
“#id p” (commit)
ID , 。 ID 。
(Traversing)
.index(), .index(String) (index , commit)
.index() , 。
:
// <li class="current"> :
$("li.current").index()
jQuery , DOM :
// <h3 id="more-info"> <h3> :
$("#more-info").index("h3")
.has() (has , commit)
:has() 。 jQuery , 。
.nextUntil(), .prevUntil(), .parentsUntil() (.nextUntil() , .prevUntil() , .parentsUntil() , commit)
”until” .nextAll(), .prevAll(), .parents()。 。
.add(String, Element) (.add() , commit)
.add() 。 ( Ajax )。
.closest(filter, DOMElement) (.closest() , commit)
closest 2 DOMElement 。 closest 。 live(), closest()。
(Utilities)
jQuery.isEmptyObject() (jQuery.isEmptyObject() , commit)
,em> , true。jQuery.isEmptyObject() , 。
jQuery.isPlainObject() (jQuery.isPlainObject(), commit )
( :{}),jQuery.isPlainObject() true; ( : new Object()) , false。
jQuery.contains() (jQuery.contains() , commit)
DOM ， , jQuery.contains() true。 false。
jQuery.noop (jQuery.noop() , commit)
, 。( : noop No Operation 。)
jQuery.unique() (jQuery.unique() )
jQuery 1.4 , jQuery.unique() 。 jQuery jQuery jQuery.unique() , jQuery 。
(Miscellaneous)
jQuery.browser (jQuery.browser , commit)
, jQuery.browser.webkit Webkit。
applets (commit 1, commit 2)
jQuery Java applets ( )。
arguments.callee (commit)
Caja , ECMAScript 5 , jQuery arguments.callee 。
Closure Compiler YUI Min (commit)
(Internal Reorganization)
1.4 , 。 。
:
’core.js’ ’attribute.js’, ‘css.js’, ‘data.js’, ‘manipulation.js’, ‘traversing.js’, and ‘queue.js’.
ready ’core.js’ ( jQuery )。
.
css , 。
(Testing)
jQuery 1.4 207 ( 1.3 97 )。
jQuery 1.4. , jQuery 1.3.2 1504 1.4 3060 。
。(Safari 3.2, Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7,
IE 8, Opera 10.10, and Chrome)
jQuery 1.4 – 。 , 。
.add() , , 。
.clone(true) , 。
jQuery.data(elem) id, 。
jQuery() ( ) jQuery(document) 。
.val(“…”) option checkbox ( value , text )。(Commit)
jQuery.browser.version .
JSON , JSON 。 JSON Javascript , , eval() 。
PHP/Rails 。 jQuery.ajaxSettings.traditional = true; 。 , jQuery.ajax {traditional: true}
jQuery.className 。
jQuery.extend(true, …) 。(TODO)
Ajax dataType, ”text/javascript”, 。 , dataType。
Ajax ”ifModified” ETags 。
1.4 。 1.4 , 1.4 。
:
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/jquery.compat-1.3.js"></script>
:
Attributes
Class
DOM Manipulation
Empty/Remove
Function Call Profiling: 1.3.2 1.4.
( 1.3.2 vs. 1.4):
547 3
760 3
500 200
896 399
23909 299
307 118
28955 100
28648 201
1662 593
DOM
558 317
1079 624
1079 516
1155 829
436 332
196 194
243 169
HTML
116 46
281 78
313 78
234 63
134 43
43 42
91 27
CSS/
703 370
1780 1250
1765 1250
1157 749
629 498
346 184
333 161
CSS
114 52
203 93
118 93
109 47
116 54
58 24
54 22
CSS
553 138
1578 546
1515 501
1033 327
769 298
229 80
173 41
/
3298 286
9030 2344
7921 1703
5282 1266
2898 303
1166 140
1034 122アドレスhttp://api.jquery.com/category/version/1.4/