What do 14 useful jQuery techniques refer to?
What do 14 useful jQuery techniques refer to? in response to this question, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.
Collect and organize 14 useful jQuery skills to share with you.
1. Returns an instance of the Jquery object through the method. Use var someDiv = $('# someDiv'). Hide (); instead of var someDiv = $('# someDiv'); someDiv.hide ()
1. Return the Jquery object instance through the method
Use var someDiv = $('# someDiv'). Hide (); instead of var someDiv = $('# someDiv'); someDiv.hide ()
two。 Use find to find
Use $('# someDiv'). Find ('p.someClass'). Hide (); instead of $(' # someDiv p. SomeClass'). Hide (); because you don't have to trigger the Sizzle engine of Jquery, while trying to keep your selector simple and optimize the rightmost selector when writing selectors
3. Don't abuse $(this)
Use $('# someAnchor') .click (function () {alert (this.id);}); instead of $('# someAnchor') .click (function () {alert ($(this) .attr ('id'));})
The abbreviated form of 4.ready
Replace $(document) .ready (function () {}) with $(function () {})
5. Keep your code safe
Method 1 (using noConflict)
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)
(function ($) {/ / Within this function, $will always refer to jQuery}) (jQuery)
Method 3 (through ready method)
JQuery (document) .ready (function ($) {/ / $refers to jQuery})
6. Simplify the code
Using each instead of for, using arrays to hold temporary variables, and using document fragment are actually the same things you need to pay attention to when writing native Javascript.
7. The method of using Ajax
Jquery provides useful ajax methods such as get getJSON post ajax.
8. Access native properties and methods
For example, the methods to get the element id are
/ / 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 the
Function isXhr () {return $_ SERVER ['HTTP_X_REQUESTED_WITH'] = =' XMLHttpRequest';}
To check if it is an Ajax request, which may be used in some cases where Javascript is disabled.
The relationship between 10.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
! window.jQuery & & [xss_clean] ('')
If CDN is not downloaded to Jquery, it is read locally.
12.Jquery Filters
Data ('info',' value'); / / populates $'s data object to have something to work with $.extend (jQuery.expr [":"], {block: function (elem) {return $(elem) .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"
Note: $.expr [":"] is equivalent to $.expr.expenses.
13.hover method
$('# someElement') .hover (function () {/ / here you can use the toggle method to achieve the effect of sliding over and out})
14. Incoming attribute object
When creating an element, Jquery1.4 can pass in an attribute object
$(', {id: 'someId', className:' someClass', href: 'somePath.html'})
Even properties or events specified by Jquery, such as text, click.
What do the 14 useful jQuery techniques mean? the answers to the questions are shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.
