Your location:Tech News>News>Script>15 commonly used jquery snippet

Latest News

15 commonly used jquery snippet



  This article 15 share a common code snippets jquery everyone to share for your reference, as follows

  1, back to top button

  By using jQuery''s animate and scrollTop method, you do not need to create a plug-in can simply return to the top of the animation:

  // Back to top

  $ ( '' '').click (function (e) {

  e.preventDefault ();

  $ (Document.body).animate ({scrollTop: 0}, 800);



  Back to top

  ScrollTop change the value of the place you want to stop scrollbar.Then you have to do is set back to the top within 800 milliseconds.

  2, pre-loaded images

  If you use a large number of pages can not initially visible in the picture (for example bound to hover), pre-loading them is useful:

  $.preloadImages = function () {

  for (var i = 0; i < arguments.length; i++) {

  $ ( '''').attr ( ''src'', arguments [i]);



  $.preloadImages ( ''img / hover-on.png '','' img / hover-off.png '');

  3, check whether the image is loaded

  Sometimes you may want to check whether the image is fully loaded, in order to follow-up operation in the script:

  $ ( ''Img'').load (function () {

  console.log ( ''image load successful'');


  You can also replace the img tag to ID or class, to check whether a particular picture loaded.

  4, moving to repair a damaged picture

  If you find that picture links to your site hung up, one by one, to replace a lot of trouble.This simple code can be a big help:

  $ ( ''Img'').on ( ''error'', function () {

  $ (This).prop ( ''src'', ''img / broken.png '');


  Even if you do not have any broken links, increasing this code will not have any effect.

  5, Class switching on Hover

  If the user''s mouse hovers over a clickable elements on the page, you want to change the visual representation of this element.You can use the following code, when the user hovers, for increasing a class element; when the mouse leaves the user to remove this class:

  $ ( ''.btn '').hover (function () {

  $ (This).addClass ( ''hover'');

  }, Function () {

  $ (This).removeClass ( ''hover'');


  You just have to increase the CSS.If you need a more simple way, you can also use toggleClass method:

  $ ( ''.btn '').hover (function () {

  $ (This).toggleClass ( ''hover'');


  Note: CSS Perhaps this is an example of a more rapid solution, but we know it is still worth.

  6 ,? disable input field

  Sometimes you may want to submit the form of buttons or text entry box becomes unavailable until the user performs a particular action (such as confirmation, "I have read the Terms" check box).Increase disabled attribute to your input, they can achieve their desired effect:

  Copy the code code is as follows: $ ( ''input [type = "submit"]'').prop ( ''disabled'', true);

  When you want to disabled the value to false, just run it again prop method on the input.

  Copy the code code is as follows: $ ( ''input [type = "submit"]'').prop ( ''disabled'', false);

  7, link load stop

  Sometimes you do not want to link to jump to a page or reload the page, and hope to do some other things, such as to trigger other scripts.The following code is a little trick prevent the default behavior:

  $ ( '' '').click (function (e) {

  e.preventDefault ();


  8, the fade / slide switch

  Fade and slide are made jQuery animations We often use.Maybe you just want to show an element when a user clicks something, use fadeIn are great and slideDown.But if you want that element appears at the first click, disappeared when the second click, the following code can very well do the job:

  // Fade

  $ ( ''.btn '').click (function () {

  $ ( ''.element '').fadeToggle ( ''slow'');


  // Toggle

  $ ( ''.btn '').click (function () {

  $ ( ''.element '').slideToggle ( ''slow'');


  9, simple accordion effect

  This is a quick and simple method accordion effect achieved?:

  // Close all panels

  $ ( ''# Accordion'').find ( ''.content '').hide ();

  // Accordion

  $ ( ''# Accordion'').find ( ''.accordion-header '').click (function () {

  var next = $ (this).next ();

  next.slideToggle ( ''fast'');

  $ ( ''.content '').not (next).slideUp ( ''fast'');

  return false;


  After the increase in this script, all the things you need to do is see if the scripts must work in the normal HTML.

  10, the same as the height of the two Div

  Sometimes you might want the two div have the same height, regardless of what they are there:

  Copy the code follows the code :( ''.div '').css ( ''min-height'', $ ( ''.main-div '').height ());

  This example sets the min-height, meaning that it can be larger than the main div, but never less.But there is a more flexible approach is through a set of set of elements, and then set the height of the highest value elements?:

  var $ columns = $ ( ''.column '');

  var height = 0;

  $ Columns.each (function () {

  if ($ (this).height ()> height) {

  height = $ (this).height ();



  $ Columns.height (height);

  If you want all columns have the same height:

  var $ rows = $ ( ''.same-height-columns'');

  $ Rows.each (function () {

  $ (This).find ( ''.column '').height ($ (this).height ());


  11, opens in a new tab / window? Inbound links

  External links open in a new tab or a new window, and make sure that the station link will open in the same tab or window:

  $ ( ''A [href ^ = "http"]'').attr ( ''target'', ''_blank'');

  $ ( ''A [href ^ = "http: //"]'').attr ( ''target'', ''_blank'');

  $ ( ''A [href ^ = "'' + window.location.origin + '' "]'').attr ( ''target'', ''_self'');

  Note: window.location.origin is not available in the IE 10, fix the issue of.

  12, via text to find elements

  By using the jQuery contains () selector, you can find the text of an element.If the text is not present, the element will be hidden:

  var search = $ ( ''# search'').val ();

  $ ( ''Div: not (: contains ( "'' + search + ''"))'').hide ();

  13, triggering a visual change

  When we focus on another label or back label, trigger JavaScript:

  $ (Document).on ( ''visibilitychange'', function (e) {

  if ( === "visible") {

  console.log ( ''Tab is now in view!'');

  } Else if ( === "hidden") {

  console.log ( ''Tab is now hidden!'');



  14, error handling Ajax call

  When a particular Ajax call returns 404 or 500 error, error processing will be executed.But if the process is not defined, other jQuery code might stop working.Ajax error can be processed by a global definition of this following code:

  $ (Document).ajaxError (function (e, xhr, settings, error) {

  console.log (error);


  15, plug-chained calls

  jQuery plug-ins to support chained calls to slow the repeated inquiries DOM, and create multiple jQuery object.See the following sample code:

  $ ( ''# Elem'').show ();

  $ ( ''# Elem'').html ( ''bla'');

  $ ( ''# Elem'').otherStuff ();

  The above code, the operation can be greatly improved by the chain:

  $ ( ''# Elem'')

  .show ()

  .html ( ''bla'')

  .otherStuff ();

  There is another way, the variable elements in the cache ($ prefix):

  var $ elem = $ ( ''# elem'');

  $ Elem.hide ();

  $ Elem.html ( ''bla'');

  $ Elem.otherStuff ();

  Chain operations and caching method in jQuery, have greatly streamline and speed code.

  That''s all for this article, I want to help learning.

  You may also be interested in the article: share 12 useful jQuery code snippet programmer must know 35 18 jQuery code snippet great jQuery code snippet very useful 12 jquery snippet 12 super useful JQuery snippet 10 great jQuery code fragment 7 useful to share clips 10 jQuery code snippet jQuery some practical utility jquery jQuery code snippet fraction was collected and efficient collection of Web development

Recommend article

Relate article