, . , , API .
Attribute：
$("p").addClass(css );
$("img").attr({src:"test.jpg",title:"test Image"}); / ， map
$("input").attr({"checked", "checked"});
$("img").attr("title", function() { return this.src }); /
$(" ").html(); （ ， ）
$(" ").html("<b>new stuff</b>");
$(" ").removeAttr(" ")
$(" ").removeClass("class")
$(" ").text();
$(" ").text(value); value
$(" ").toggleClass(class) ,
$("input ").val(); input
$("input ").val(value); input value
Manipulation：
$(" ").after(content);
$(" ").append(content); content
$(" ").appendTo(content); content
$(" ").before(content); after
$(" ").clone( ) ， （ ， true ）
$(" ").empty()
$(" ").insertAfter(content); content
$(" ").insertBefore(content); content
$(" ").prepend(content); content ，
$(" ").prependTo(content); content ， content
$(" ").remove();
$(" ").remove("exp"); exp
$(" ").wrap("html"); html
$(" ").wrap(element); element
Traversing：
add(expr) ‘expr’， ;
：
$(document).ready(function(){
$("div").css("border", "2px solid red")
.add("p")// P yellow CSS ；
.css("background", "yellow");
});
children(expr) ，
contains(str) str ，
end() find() parents() （ ） jQuery
$("#div1").find("p").hide().end().hide()
hide() p end() p #div1
hide() #div1
end() hide() p
filter(expression)
find(expr)
filter find ：
filter ;
find ;
<html >
<div class="css">
<p class="rain"> 1</p>
</div>
<div class="rain">
<p> 2</p>
</div>
</html>
find() ：
var $find = $("div").find(".rain");
alert( $find.html() ) ;
： 1
filter（） ：
var $filter = $("div").filter(".rain");
alert( $filter.html() );
： 2
：
find() div class rain 。
filter() div class rain 。
， 。
is(expr)// ‘expr’ 。 true， false
next(expr)// 。
not(el)//
：
$("div").not(".green, #blueone")
$("input:not(:checked) + span")
$('tr:not([th]):odd')
parent(expr)
parents(expr)//
prev(expr)
siblings(expr)
Core：
$(html).appendTo("body") body html
$(elems) DOM
$(function(){……..});
$("div > p").css("border", "1px solid gray"); div p，
$("input:radio", document.forms[0])
jQuery ， ：
jQuery.extend(object) jQuery . 。
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery：
$.min(3,4); //return 3
jQuery.fn.extend(object) jQuery , jQuery.prototype
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
jQuery：
$("#input1").alertWhileClick();
jQuery( expression, [context] ) ---$( expression, [context]); ，$() HTML DOM 。
each( callback )
：1
$("span").click(function){
$("li").each(function(){
$(this).toggleClass("example");
});
});
：2
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
jQuery Event:
ready(fn); $(document).ready() body onload ， 。 ， fn 。
：
$(document).ready(function(){alert("aa");}
bind( type, [data], fn ) （ click） 。 type ：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,keyup, error
1：
$('#myBtn').bind("click",function(){
alert('click');
});
2：
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
one( type, [data], fn ) （ click） 。 ， 。 bind() 。
type(String) : 。
data(Object) : ( ) event.data 。
fn(Function) : 。
trigger( type, [data] ) 。
$("p").click( function (event, a, b) {
// ，a b undefined
// ， a "foo", b "bar"
} ).trigger("click", ["foo", "bar"]); toggle( fn, fn ) ， ， ， 。
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this).removeClass("selected");
}
);
：
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
triggerHandler( type, [data] ) ( )，
unbind( [type], [data] ) ， 。
$("p").unbind()
$("p").unbind( "click" ) click
：
var foo = function () {
//
};
$("p").bind("click", foo); // ... foo
$("p").unbind("click", foo); // ... foo
hover( over, out ) over,out , ， 。 ， 。
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
}
);
： ， fn。jQuery form reset 。
，
focus( ) a, input, textarea, button, select, label, map, area
blur( ) a, input, textarea, button, select, label, map, area
$("#in").focus(function(){
if($("#in").val()==' '){
$("#in").val("")};
}).blur(function(){
if($("#in").val()==''){
$("#in").val(" ").css("color","#ccc")};
});
change( ) input, textarea, select
change ， 。
$("input[type='text']").change( function() {
//
});
click( )
dblclick( )
error( ) window, img
keydown( )
keypress( )
keyup( )
load( fn ) window, img
mousedown( fn )
mousemove( fn )
mouseout( fn )
mouseover( fn )
mouseup( fn )
resize( fn ) window, iframe, frame
scroll( fn ) window
select( ) document, input, textarea
submit( ) form
unload( fn ) window
JQuery Ajax :
load( url, [data], [callback] ) HTML DOM 。
$("#feeds").load("feeds.html"); feeds.html id feeds div
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
jQuery.get( url, [data], [callback] ) GET 。
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
});
jQuery.getJSON( url, [data], [callback] ) GET JSON 。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});
jQuery.getScript( url, [callback] ) GET JavaScript 。
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
jQuery.post( url, [data], [callback], [type] ) POST 。
ajaxComplete( callback ) AJAX ， 。 Ajax
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});
ajaxError( callback ) AJAX ， 。 Ajax
$("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
ajaxSend( callback ) AJAX ， 。 Ajax
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li<Starting request at " + settings.url
+ "</li<");
});
ajaxStart( callback ) AJAX ， 。 Ajax
AJAX ( ) loading
$("#loading").ajaxStart(function(){
$(this).show();
});
ajaxStop( callback ) AJAX ， 。 Ajax
AJAX ， loading 。
$("#loading").ajaxStop(function(){
$(this).hide();
});
ajaxSuccess( callback ) AJAX ， 。 Ajax
AJAX ， 。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>Successful Request!</li>");
});
jQuery.ajaxSetup( options ) AJAX 。 $.ajax 。
AJAX 。
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
serialize( ) input 。
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
serializeArray( ) ( .serialize() )， JSON 。
form ，
function showValues() {
var fields = $(":input").serializeArray();
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
JQuery Effects
show( ) 。
show( speed, [callback] ) ， 。
hide( ) 。
hide( speed, [callback] ) ，
toggle( ) 。 ， ； ，
。
slideDown( speed, [callback] ) （ ） ， 。 ，
" " 。
slideUp( speed, [callback] ) （ ） ， 。 ， " " 。
slideToggle( speed, [callback] ) ， 。 ， " " 。
fadeIn( speed, [callback] ) ， 。 ， 。
fadeOut( speed, [callback] ) ， 。 ， 。
fadeTo( speed, opacity, [callback] ) ， 。 ， 。
stop( ) 。 ， 。
queue( ) ( )
queue( callback ) ，
queue( queue )
dequeue( )
animate( params, [duration], [easing], [callback] ) 。
animate( params, options ) 。 。
JQuery Traversing
eq( index ) ，index 0
filter( expr ) ， "," expr， .
ilter( fn ) 。
is( expr ) ，
true。
map( callback ) jQuery callback ， jQuery 。
not( expr ) 。
slice( start, [end] ) ， slice 。
add( expr ) jQuery 。
children( [expr] ) 。 ( ， )。
contents( ) ( ， )， iframe，
find( expr ) 。
next( [expr] ) 。
nextAll( [expr] )
parent( [expr] ) 。
parents( [expr] ) （ ）。
prev( [expr] ) 。
prevAll( [expr] ) 。
siblings( [expr] ) 。
andSelf( ) div p ， border 。 div p ，
background
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
end( ) ，
p span ， p ， css
$("p").find("span").end().css("border", "2px red solid");
JQuery Selectors
$("#myDiv") id
$("div")
$(".myClass") class
$("*")
$("div,span,p.myClass")
$("form input") ， ancestor
$("#main > *") ， parent
$("label + input") ， label input ， label input input
$("#prev ~ div") ， id prev div
$("tr:first")
$("tr:last")
$("input:not(:checked) + span") selector （ ）
$("tr:even") ( 0 )
$("tr:odd") ( 0 )
$("td:eq(2)") ( 0 )
$("td:gt(4)") ( 0 )
$("td:gl(4)") ( 0 )
$(":header")
$("div:animated")
$("div:contains('John')")
$("td:empty") ( )
$("div:has(p)") selector
$("td:parent") ( )
$("div:hidden") ，
$("div:visible")
$("div[id]")
$("input[name='newsletter']")
$("input[name!='newsletter']")
$("input[name^='news']") value
$("input[name$='letter']") value
$("input[name*='man']") value
$("input[id][name$='man']")
$("ul li:nth-child(2)"),
$("ul li:nth-child(odd)"), n
$("ul li:nth-child(3n + 1)")
$("div span:first-child") 1
$("div span:last-child") 1
$("div button:only-child") 1
$(":input") ， input, textarea, select button
$(":text") text input
$(":password") password input
$(":radio") radio input
$(":checkbox") checkbox input
$(":submit") submit input
$(":image") image input
$(":reset") reset input
$(":button") button input
$(":file") file input
$(":hidden") hidden input
$(":enabled")
$(":disabled")
$(":checked")
$("select option:selected")
JQuery CSS
css( name ) 。
css( properties ) " / " 。
$("p").hover(function () {
$(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: "#ddd",
fontWeight: "",
color: "rgb(0,40,244)"
}
$(this).css(cssObj);
});
css( name, value ) ， 。
offset( ) 。 2 ，
top left， 。 。
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
width( ) ，
width( val ) 。
height( ) ，
height( val ) 。
JQuery Utilities
jQuery.browser
.msie ie
jQuery.browser.version
jQuery.boxModel W3C CSS
jQuery.isFunction( obj ) function
function stub() { }
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
"function"
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$("span:eq( " + i + ")").text(isFunc);
});
jQuery.trim( str ) ，
jQuery.each( object, callback ) ，
jQuery.extend( target, object1, [objectN] ) ， ，
， ， JavaScript
。
settings options ， settings
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
defaults options ，defaults 。options
defaults empty。
var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);
jQuery.grep( array, callback, [invert] )
$.grep( [0,1,2], function(n,i){
return n > 0;
});
jQuery.makeArray( obj )
div
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);
jQuery.map( array, callback ) ，
jQuery.inArray( value, array ) value ， ， -1
jQuery.unique( array ) ，