15 jQuery code snippets used directly _ jquery

Using jQuery Code not only brings various animations and special effects to the website, but also improves the user experience of the website. This article summarizes 15 jQuery code snippets that developers often use. Have you published 10 extremely useful PHP code snippets to favorites? In this article, I will continue to provide you with 15 extremely useful jQuery code snippets.

JQuery provides many ways to create interactive websites. When developing Web projects, developers should make good use of jQuery code, which not only brings various animations and special effects to websites, it also improves the user experience of the website.

Let's take a look at the charm of jQuery code.

1. Pre-load images

(function($) {  var cache = [];  // Arguments are image paths relative to the current page.  $.preLoadImages = function() {   var args_len = arguments.length;   for (var i = args_len; i--;) {    var cacheImage = document.createElement('img');    cacheImage.src = arguments[i];    cache.push(cacheImage);   }  } jQuery.preLoadImages("image1.gif", "/path/to/image2.png"); 

2. Make every element on the page suitable for display on mobile devices

var scr = document.createElement('script'); scr.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'); document.body.appendChild(scr); scr.onload = function(){   $('p').attr('class', '').attr('id', '').css({     'margin' : 0,     'padding' : 0,     'width': '100%',     'clear':'both'   }); }; 

3. Proportional scaling of images

$(window).bind("load", function() {   // IMAGE RESIZE   $('#product_cat_list img').each(function() {     var maxWidth = 120;     var maxHeight = 120;     var ratio = 0;     var width = $(this).width();     var height = $(this).height();     if(width > maxWidth){       ratio = maxWidth / width;       $(this).css("width", maxWidth);       $(this).css("height", height * ratio);       height = height * ratio;     }     var width = $(this).width();     var height = $(this).height();     if(height > maxHeight){       ratio = maxHeight / height;       $(this).css("height", maxHeight);       $(this).css("width", width * ratio);       width = width * ratio;     }   });   //$("#contentpage img").show();   // IMAGE RESIZE }); 

4. Return to the top of the page

// Back To Top $(document).ready(function(){   $('.top').click(function() {     $(document).scrollTo(0,500);   }); });  //Create a link defined with the class .top Back To Top 

5. Use jQuery to create an accordion folding Effect

var accordion = {    init: function(){       var $container = $('#accordion');       $container.find('li:not(:first) .details').hide();       $container.find('li:first').addClass('active');       $container.on('click','li a',function(e){          e.preventDefault();          var $this = $(this).parents('li');          if($this.hasClass('active')){              if($('.details').is(':visible')) {                 $this.find('.details').slideUp();              } else {                 $this.find('.details').slideDown();              }          } else {              $container.find('li.active .details').slideUp();              $container.find('li').removeClass('active');              $this.addClass('active');              $this.find('.details').slideDown();          }       });    } }; 

6. Simulate Facebook's image display by Preloading the next image in the image gallery

var nextimage = "/images/some-image.jpg"; $(document).ready(function(){ window.setTimeout(function(){ var img = $("").attr("src", nextimage).load(function(){ //all done }); }, 100); }); 

7. Use jQuery and Ajax to automatically fill the selection box

$(function(){ $("select#ctlJob").change(function(){ $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += ' ' + j[i].optionDisplay + ' '; } $("select#ctlPerson").html(options); }) }) }) 

8. automatically replace the lost image

// Safe Snippet $("img").error(function () {   $(this).unbind("error").attr("src", "missing_image.gif"); }); // Persistent Snipper $("img").error(function () {   $(this).attr("src", "missing_image.gif"); }); 

9. Show fade-in/fade-out effects when hovering over the mouse

$(document).ready(function(){   $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads   $(".thumbs img").hover(function(){     $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover   },function(){     $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout   }); }); 

10. Clear form data

function clearForm(form) {  // iterate over all of the inputs for the form  // element that was passed in  $(':input', form).each(function() {   var type = this.type;   var tag = this.tagName.toLowerCase(); // normalize case   // it's ok to reset the value attr of text inputs,   // password inputs, and textareas   if (type == 'text' || type == 'password' || tag == 'textarea')    this.value = "";   // checkboxes and radios need to have their checked state cleared   // but should *not* have their 'value' changed   else if (type == 'checkbox' || type == 'radio')    this.checked = false;   // select elements need to have their 'selectedIndex' property set to -1   // (this works for both single and multiple select elements)   else if (tag == 'select')    this.selectedIndex = -1;  }); }; 

11. prevent multiple forms from being submitted

$(document).ready(function() {  $('form').submit(function() {   if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {    jQuery.data(this, "disabledOnSubmit", { submited: true });    $('input[type=submit], input[type=button]', this).each(function() {     $(this).attr("disabled", "disabled");    });    return true;   }   else   {    return false;   }  }); }); 

12. dynamically add form elements

//change event on password1 field to prompt new input $('#password1').change(function() {     //dynamically create new input and insert after password1     $("#password1").append(""); });

13. Make the entire Div clickable

blah blah blah. link The following lines of jQuery will make the entire p clickable: $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });  

14. Balance the height or Div Element

var maxHeight = 0; $("p").each(function(){   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } }); $("p").height(maxHeight); 

15. automatically load content during window scrolling

var loading = false; $(window).scroll(function(){   if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){     if(loading == false){       loading = true;       $('#loadingbar').css("display","block");       $.get("load.php?start="+$('#loaded_max').val(), function(loaded){         $('body').append(loaded);         $('#loaded_max').val(parseInt($('#loaded_max').val())+50);         $('#loadingbar').css("display","none");         loading = false;       });     }   } }); $(document).ready(function() {   $('#loaded_max').val(50); }); 

The 15 useful jQuery code snippets collected in this article can be directly copied and pasted into the code, but please note that you need to understand the code before using it.