Understand jQuery techniques to improve your code (I personally think the jquery manual is very good)_jquery

2. Test whether a jQuery wrapper set contains certain elements
If you want to test whether a jQuery wrapper set contains certain elements, you can first try to verify whether the first element exists:

Copy code The code is as follows:

if($(selector)[0]){... }
// Or like this
if($(selector).length){...}

Let’s look at this example:

Copy the code The code is as follows:

//Example. If your page has the following html code

• Item X

Item Y

• Item Z

... 
//This if condition will return true because we have two 
// input fields matching the selector, so the  code will execute 
if($( '#shopping_cart_items input.in_stock')[0]){} 

3. Read the latest version of jQuery from jquery.org
You can use this code to read jQuery The latest version of the code file.


You can use this method to call the latest version of the jQuery framework , of course, you can also use the following code to call the same latest version of jQuery from ajax.googleapis.com:


4. Store data
Use the data method to avoid storing data in the DOM. Some Front-end developers like to use HTML attributes to store data:

Copy code The code is as follows:

$('selector').attr('alt', 'data being stored');
//You can read the data like this later:
$('selector').attr('alt');

Using the "alt" attribute as a parameter name to store data is actually not semantic for HTML. We can use jQuery's data method to store data for an element in the page:

Copy code The code is as follows:

$('selector').data('parameter name', 'Data to be stored');
//Then get the data like this:
$('selector').data('parameter');

This data method allows you You can clearly define the data parameters yourself, which is more semantic and flexible. You can store data information in any element on the page. If you want to know more about the data() and removeData() methods, you can read the jQuery official explanation

The classic application of this method is to give the input field a default value, and then clear it when focusing:
HTML part:

Copy code The code is as follows:

JavaSript part:

Copy code The code is as follows:

$(function() {
//Take out the input field with clear class
//(Note: "clear once" is two classes clear and once)
$(' #testform input.clear').each(function(){
//Use data method to store data
$(this).data( "txt", $.trim($(this).val() ) );
}).focus(function(){
// When getting focus, determine whether the value in the field is the same as the default value. If it is the same, clear it
if ( $.trim($(this)) .val()) === $(this).data("txt") ) {
$(this).val("");
}
}).blur(function() {
// Add blur time to the field with class clear to restore the default value
// But if the class is once, ignore it
if ( $.trim($(this).val()) = == "" && !$(this).hasClass("once") ) {
//Restore saved data
$(this).val( $(this).data("txt") );
}
});
});

5. Keep the jQuery manual close at hand
Most people have a hard time remembering all the programming details, no matter how good they are Most programmers will also be careless about a certain programming language, so printing out the relevant manuals or putting them on the desktop for reference at any time can definitely improve programming efficiency.
oscarotero jquery 1.3 (Wallpaper version)

6. Record jQuery in FireBug console
FireBug is my favorite one. One of the browser extension tools, this tool allows you to quickly understand the HTML CSS JavaScript of the current page in the visual interface, and complete instant development under this tool. As a jQuery or JavaScript developer, FireFox is also supported for logging your JavaScript code.

The easiest way to write to the FireBug console is as follows:
console.log("hello world")

You can also write some parameters the way you want:

console.log(2,4,6,8,"foo",bar)
You also You can write a small extension to log jQuery objects to the console:

Copy the code The code is as follows:

jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
};

For this extension, you can directly use the .log() method to log the current object to the console.

Copy code The code is as follows:

$('#some_div').find('li .source > input:checkbox')
.log("sources to uncheck")
.removeAttr("checked");

7. Use ID selectors whenever possible
After using jQuery, you will find that it is quite simple to use the class attribute to select DOM elements. Despite this, it is recommended that you use class selectors as little as possible instead and use ID selectors that run faster as much as possible (using class selectors in IE browser will return a matching class packaging set after traversing the entire DOM tree). The ID selector is faster because the DOM itself has a "natural" getElementById method, but class does not. So if you use class selectors, the browser will traverse the entire DOM. If the DOM structure of your web page is complex enough, these class selectors are enough to make the page slower and slower. Let’s look at this simple HTML code:

Copy the code The code is as follows:

< ;div id="main">

Selectors in jQuery

...
...

// Using a class to call the submit button is much slower than using an absolute ID selector
var main_button = $('#main .button');
var main_button = $('#main_button');