Your location:Tech News>News>Script>14 useful tips to share Jquery

Latest News

14 useful tips to share Jquery



  1.It returns the object instance by a method Jquery

  With var someDiv = $ ( ''# someDiv'').hide (); place var someDiv = $ ( ''# someDiv''); someDiv.hide ();

  2.Use find to locate

  With $ ( ''# someDiv'').find ( ''p.someClass'').hide (); instead of $ ( ''# someDiv p.someClass'').hide (); because you can does not have to trigger Jquery of Sizzle engine, while writing selectors when you try to make a simple optimization selectors selectors while the rightmost

  3.Do not abuse $ (this)

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

  4.ready shorthand

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

  5.Make your code security

  Method 1 (using noConflict)

  Copy the code 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 (incoming parameters Jquery)

  Copy the code code is as follows:

  (Function ($) {

  // Within this function, $ will always refer to jQuery

  }) (JQuery);

  Method 3 (by ready Method)

  Copy the code code is as follows:

  jQuery (document).ready (function ($) {

  // $ refers to jQuery


  6.Simplify the code

  Instead of using for each, using the array holds temporary variables, use the document fragment, this fact and write native Javascript should be noted that the same.

  7.Use Ajax way

  Jquery get getJSON post ajax provides these useful ajax method

  8.Native access properties and methods

  Id elements such as access methods are

  Copy the code 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 - Do not pass an index to get

  anchorsArray = $ ( ''.someAnchors'').get ();

  var thirdId = anchorsArray [2].id;

  9.Use PHP to check the Ajax request

  By using xhr.setRequestHeader ( "X-Requested-With", "XMLHttpRequest"); The PHP server may by

  Copy the code code is as follows:

  function isXhr () {

  return $ _SERVER [ ''HTTP_X_REQUESTED_WITH''] === ''XMLHttpRequest'';


  Ajax is not a request to check, may be useful in the case of some of Javascript disabled

  10.And $ Jquery relationship of

  In the lowermost Jquery code, the code can be seen below

  window.jQuery = window.$ = JQuery; $ is actually a shortcut Jquery

  11.Jquery load conditions

  Copy the code code is as follows:




  If not downloaded to CDN Jquery, read from the local

  12.Jquery Filters

  Copy the code code is as follows:


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

  13.hover method

  Copy the code code is as follows:

  $ ( ''# SomeElement'').hover (function () {

  // Here you can use the toggle methods to achieve the effect of slip in and out


  14.Incoming properties of the object

  When creating an element of time, Jquery1.4 can pass a property of an object

  Copy the code code is as follows:

  $('''', {

  id: ''someId'',

  className: ''someClass'',

  href: ''somePath.html ''


  Even Jquery specified property or event, such as text, click

  You may also be interested in the article: jQuery techniques Daquan (Primer for beginners) jQuery write some tips widget jquery common share tips and a list of commonly used methods to understand jQuery collection of tips to improve your code (jquery personally feel that the manual is very good) jquery div centering technique application introduction jQuery common development techniques detailed finishing 12 small tips on new jQuery event binding mechanism on () the use of techniques jquery operation check box (checkbox) of jQuery operating table (table) summarizes the common methods, techniques summary 15 jquery common method of recycling techniques jQuery 4 principles to write efficient code jQuery and jQuery source code analysis techniques 5 of the Detailed, share tips daily collection of jquery skills

Recommend article

Relate article