Shulou(Shulou.com)06/02 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.