14 useful Jquery tips shared_jquery

1. Return the Jquery object instance through the method

Use var someDiv = $(‘#someDiv’).hide(); instead of var someDiv = $(‘#someDiv’); someDiv.hide();

2. Use find to find

Use $('#someDiv').find('p.someClass').hide(); instead of $('#someDiv p.someClass').hide(); because you don’t have to trigger Jquery’s Sizzle engine. At the same time, when writing selectors, try to keep your selectors simple and optimize the rightmost selector

3. Don’t abuse $(this)

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

4. The abbreviation of ready

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

5. Make your code safe

Method 1 (using noConflict)

Copy code The 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 (pass in parameter Jquery)

Copy code The code is as follows:

(function($) {
// Within this function, $ will always refer to jQuery
})(jQuery);

Method 3 (via ready method)

Copy code The code is as follows:

jQuery(document).ready(function($) {
// $ refers to jQuery
});

6. Simplify the code

Use each instead of for, use arrays to save temporary variables, and use document fragments. This is actually the same thing you need to pay attention to when writing native Javascript.

7. How to use Ajax

Jquery provides useful ajax methods such as get getJSON post ajax

8. Access native properties and methods
For example, the method of obtaining element id is

Copy code The 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 side such as PHP can pass

Copy code The code is as follows:

function isXhr() {
return $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
}

To check if it is an Ajax request, it may be used in some situations where Javascript is disabled

10.The relationship between Jquery and $

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

11. Conditional loading Jquery

Copy code The code is as follows:

<script>!window.jQuery && document.write(‘<script src=”js/jquery-1.4.2.min.js”></script>')

If CDN does not download to Jquery, read from local

12.Jquery Filters

Copy code The code is as follows:

<script><br /> $('p:first').data('info', 'value'); // populates $'s data object to have something to work with<br /> $.extend(<br /> jQuery.expr[":"], {<br /> block: function(elem) {<br /> return $(elem).css(“display”) === “block”;<br /> },<br /> hasData : function(elem) {<br /> return !$.isEmptyObject( $(elem).data() );<br /> }<br /> }<br /> );<br /> $(“p:hasData”).text(“has data”); // grabs paras that have data attached<br /> $(“p:block”).text(“are block level”); // grabs only paragraphs that have a display of “block”<br /> </script>

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

13.hover method

Copy code The code is as follows:

$(‘#someElement’).hover(function() {
//You can use the toggle method here to achieve the effect of sliding over and sliding out
});

14. Pass in the attribute object

When creating an element, Jquery1.4 can pass in an attribute object

Copy code The code is as follows:

$('', {
id : ‘someId’,
className : ‘someClass’,
href : ‘somePath.html’
});

Even properties or events specified by Jquery such as text, click