jQuery（二）文档阅读(待续)

Note：This article is my study note, without copyright，most of the content comes from jQuery官网，if there is any infringement, please contact E-mail:YAMA

ABout jQuery

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(括号).

Callback with Arguments

Executing callbacks with arguments can be tricky(棘手).
This code example will not work:
Wrong:$.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?

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.

$.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 ).

Additional jQuery Support

Official Forums(论坛)http://forum.jquery.com/
There are many subforums(子论坛) where you can discuss jQuery, ask questions, talk about JavaScript, or announce your plugins.

Using jQuery Core

$ vs $()

$( "h1" ).remove();
Most jQuery methods are called on jQuery objects as shown above; these methods are said to be part of the $.fn namespace(命名空间), or the “jQuery prototype(原型),” and are best thought of as jQuery object methods.

However, there are several methods that do not act on a selection; these methods are said to be part of the jQuery namespace, and are best thought of as core jQuery methods.

This distinction(区别) can be incredibly(令人难以置信的) confusing(令人困惑) to new jQuery users. Here’s what you need to remember:

• Methods called on jQuery selections are in the $.fn namespace, and automatically receive and return the selection as this.

翻译：jQuery选择上调用的方法位于$ .fn命名空间中，并以此方式自动接收并返回选择。

• Methods in the $ namespace are generally(通常) utility-type(实用型) methods, and do not work with selections; they are not automatically passed any arguments, and their return value will vary(变化).

翻译：$名称空间中的方法通常是实用程序类型的方法，不能与选择一起使用。它们不会自动传递任何参数，并且它们的返回值会有所不同

There are a few cases where object methods and core methods have the same names, such as $.each() and .each(). In these cases, be extremely careful when reading the documentation that you are exploring the correct method.

In this guide, if a method can be called on a jQuery selection, we’ll refer to it(引用他) just by its name: .each(). If it is a utility(实用的) method – that is, a method that isn’t called on a selection – we’ll refer to it explicitly(明确的、显示地) as a method in the jQuery namespace: $.each().

**$(document).ready()\ast \ast Codeincludedinside‘$( document ).ready()will only run once the page **Document Object Model (DOM)** is ready for JavaScript code to execute. Code included inside$( window ).on( “load”, function() { … })` will run once the entire page (images or iframes), not just the DOM, is ready.

All in all, $( window ).on( "load" ) is loaded after the DOM

Avoiding Conflicts

1. Thus, if you are using another JavaScript library that uses the $ variable(变量), you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.
   When you put jQuery into no-conflict mode, you have the option of assigning a new variable name to replace the $ alias(别名).

var hh = jQuery.noConflict();
hh(document).ready(function () {
    console.log("document loaded");
});

hh is now an alias to the jQuery function; creating the new alias is optional.and in the code above, the $ will revert back to(恢复) its meaning in original(原始的) library.

2. Including jQuery Before Other Libraries
   The code snippets(片段) above rely on jQuery being loaded after prototype.js is loaded. If you include jQuery before other libraries, you may use jQuery when you do some work with jQuery, but the $ will have the meaning defined in the other library. There is no need to relinquish(放弃) the $ alias by calling jQuery.noConflict().

3. Use an Immediately Invoked Function Expression

<script>
    jQuery.noConflict();
    (function( $ ) {
        // Your jQuery code here, using the $
    })( jQuery );
</script>

Note that if you use this technique, you will not be able to use prototype.js methods inside the immediately invoked function. $ will be a reference(引用) to jQuery, not prototype.js.

4. Use the Argument That’s Passed to the jQuery( document ).ready() Function

<script>
jQuery(document).ready(function( $ ) {
    // Your jQuery code here, using $ to refer to jQuery.
});
</script>

Or using the more concise(简洁) syntax for the DOM ready function:

<script>
jQuery(function($){
    // Your jQuery code here, using the $
});
</script>

Attributes

An element’s attributes is useful for your application,so it’s important to be get and set them.

Selecting Elements

Working with Selections

Manipulating Elements

The jQuery Object

Traversing

CSS, Styling, & Dimensions

Data Methods

Utility Methods

Iterating over jQuery and non-jQuery Objects

Using jQuery’s .index() Function

Frequently Asked Questions

• How do I select an item using class or ID?
• How do I select elements when I already have a DOM element?
• How do I test whether an element has a particular class?
• How do I test whether an element exists?
• How do I determine the state of a toggled element?
• How do I select an element by an ID that has characters used in CSS notation?
• How do I disable/enable a form element?
• How do I check/uncheck a checkbox input or radio button?
• How do I get the text value of a selected option?
• How do I replace text from the 3rd element of a list of 10 items?
• How do I pull a native DOM element from a jQuery object?