14 useful Jquery skills and 14 Jquery skills

14 useful Jquery skills and 14 Jquery skills

1. Return the Jquery object instance through a method

Use var someDiv = $ ('# somediv'). hide (); instead of var someDiv = $ (' # somediv'); someDiv. hide ();

2. Use find to find

Use $ ('# somediv '). find ('p. someClass '). hide (); Replace $ ('# someDiv p. someClass '). hide (); because it does not need to trigger the Sizzle engine of Jquery, and tries to make your selection operator simple while optimizing the rightmost selection operator when writing the selector.

3. Do not abuse $ (this)

Use $ ('# someAnchor '). click (function () {alert (this. id) ;}); Replace $ ('# someAnchor '). click (function () {alert ($ (this ). attr ('id '));});

4. Short Form of ready

Use $ (function () {}); instead of $ (document). ready (function (){});

5. Secure your code

Method 1 (using noConflict)
Copy codeThe Code is as follows:
Var j = jQuery. noConflict ();
J ('# somediv'). hide ();
// The line below will reference some other library's $ function.
$ ('Somediv'). style. display = 'none ';

Method 2 (input parameter Jquery)
Copy codeThe Code is as follows:
(Function ($ ){
// Within this function, $ will always refer to jQuery
}) (JQuery );

Method 3 (using the ready method)
Copy codeThe Code is as follows:
JQuery (document). ready (function ($ ){
// $ Refers to jQuery
});

6. Simplified code

Replace for with each, save temporary variables using arrays, and use document fragment. This is the same as writing native Javascript.

7. Ajax Method

Jquery provides useful ajax methods such as get getJSON post ajax.

8. Access native attributes and Methods
For example, the methods to obtain element IDs include:
Copy codeThe Code is as follows:
// OPTION 1-Use jQuery
Var id = $ ('# someAnchor'). attr ('id ');
// OPTION 2-Access the DOM element
Var id = $ ('# someAnchor') [0]. id;
// OPTION 3-Use jQuery's get method
Var id = $ ('# someAnchor'). get (0). id;
// OPTION 3b-Don't pass an index to get
AnchorsArray = $ ('. someAnchors'). get ();
Var thirdId = anchorsArray [2]. id;

9. Use PHP to check Ajax requests

By using xhr. setRequestHeader ("X-Requested-With", "XMLHttpRequest"), the server can use
Copy codeThe Code is as follows:
Function isXhr (){
Return $ _ SERVER ['HTTP _ X_REQUESTED_WITH '] === 'xmlhttprequest ';
}

To check whether it is an Ajax request. It may be used when Javascript is disabled.

10. Relationship between Jquery and $

At the bottom of the Jquery code, you can see the following code
Window. jQuery = window. $ = jQuery; $ is actually a closed cut of Jquery.

11. Conditional loading of Jquery
Copy codeThe Code is as follows:
<! -Grab Google CDN jQuery. fall back to local if necessary->
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”> </script>
<Script>! Window. jQuery & document. write ('<script src = "js/jquery-1.4.2.min.js"> <\/script>') </script>

If the CDN has not been downloaded to Jquery, it will be read from the local

12. Jquery Filters
Copy codeThe Code is as follows:
<Script>
$ ('P: first '). data ('info', 'value'); // populates $'s data object to have something to work
$. Extend (
JQuery. expr [":"], {
Block: function (elem ){
Return parameters (elemate.css ("display") = "block ";
},
HasData: function (elem ){
Return! $. IsEmptyObject ($ (elem). data ());
}
}
);
$ ("P: hasData"). text ("has data"); // grabs paras that have data attached
$ ("P: block"). text ("are block level"); // grabs only paragraphs that have a display of "block"
</Script>

Note: $. expr [":"] is equivalent to $. expr. filters.

13. hover Method

Copy codeThe Code is as follows:
$ ('# SomeElement'). hover (function (){
// Here you can use the toggle method to achieve the effect of Slide and slide.
});

14. Pass in the property object

When creating an element, Jquery1.4 can pass in an attribute object
Copy codeThe Code is as follows:
$ ('</A> ',{
Id: 'someid ',
ClassName: 'someclass ',
Href: 'somePath.html'
});

Even attributes or events specified by Jquery, such as text and click