jQuery是如何工作的？(关键词： jquery, JQuery)

阅读更多

How jQuery Works


1. jQuery: The Basics

This is a basic tutorial, designed to help you get started using jQuery.
If you don't have a test page setup yet, start by creating the following HTML page:

    
    


    jQuery
    
    

The src attribute in the


http://api.jquery.com/ready/

jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:

// fn is a type of function.

// 1.
$(fn);

// 2.
$(document).ready(fn);

// 3.
$("document").ready(fn);

// 4.
$("img").ready(fn);

// 5.
$().ready(fn);

// an implemention of onReady function.

// onReady function 
var onReady = function(fn){
    var old = window.onload;
    if(typeof old != 'function'){
        window.onload = fn;
    }else{
        window.onload = function(){
            old();
            fn();
        }
    }
}

// An usage of example:
onReady(function(){
    console.log(1);
});
onReady(function(){
    console.log(2);
});
onReady(function(){
    console.log(3);
});

3. Adding and Removing an HTML Class

Important: You must place the remaining jQuery examples inside the ready event
so that your code executes when the document is ready to be worked on.


Another common task is adding or removing a class.


First, add some style information into the of the document, like this:

Next, add the .addClass() call to the script:

$( "a" ).addClass( "test" );

All elements are now bold.

To remove an existing class, use .removeClass():

$( "a" ).removeClass( "test" );

Special Effects

jQuery also provides some handy effects to help you make your web sites stand out. For example, if you create a click handler of:

$( "a" ).click(function( event ) {
 
    event.preventDefault();
 
    $( this ).hide( "slow" );
 
});

Then the link slowly disappears when clicked.


4. Callbacks and Functions


Unlike many other programming languages,
JavaScript enables you to freely pass functions around to be executed at a later time.
A callback is a function that is passed as an argument to another function and is
executed after its parent function has completed.

Callbacks are special because they patiently wait to execute until their parent finishes.
Meanwhile, the browser can be executing other functions or doing all sorts of other work.

To use callbacks, it is important to know how to pass them into their parent function.

4.1 Callback without Arguments

If a callback has no arguments, you can pass it in like this:

$.get( "myhtmlpage.html", myCallBack );

When $.get() finishes getting the page myhtmlpage.html, it executes the myCallBack() function.

Note: The second parameter here is simply the function name
(but not as a string, and without parentheses).


4.2 Callback with Arguments

Executing callbacks with arguments can be tricky.

4.2.1 Wrong

This code example will not work:

// call myCallback() function immediately.
$.get( "myhtmlpage.html", myCallBack( param1, param2 ) );

The reason this fails is that the code executes myCallBack( param1, param2 ) immediately
and then passes myCallBack()'s return value as the second parameter to $.get().
We actually want to pass the function myCallBack(), not myCallBack( param1, param2 )'s return
value (which might or might not be a function).
So, how to pass in myCallBack() and include its arguments?

4.2.2 Right

To defer executing myCallBack() with its parameters, you can use an anonymous function as a wrapper.
Note the use of function() {}. The anonymous function does exactly one thing: calls myCallBack(),
with the values of param1 and param2.

// define an anonymous function, 
// which invoke myCallback() inside its function body.
$.get( "myhtmlpage.html", function() {
 
    myCallBack( param1, param2 );
 
});

When $.get() finishes getting the page myhtmlpage.html,
it executes the anonymous function, which executes myCallBack( param1, param2 ).

---

What is the difference between these jQuery ready functions?

// what is difference between

$(function(){

});

// and
$(document).ready(function() { 

});

Answer:

Link 1.

Link 2.


The two ways are equivalent, I personally prefer the second, $(function() {}); it's just a shortcut for document ready.

About the new jQuery(document)... construct, you don't really need to use the new operator, jQuery will use it internally if you don't.

The argument that the ready handler function receives, is the jQuery object itself.

That's quite useful where you have to run jQuery in compatibility mode with other libraries, for example:

jQuery(function ($) {
  // use $ here
});

The $ argument inside the callback will refer to the jQuery object, outside that function it might refer to another library like PrototypeJS.








-