15 jQuery code snippets that can be used directly

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. This article collects 15 useful jQuery code snippets... syntaxHighlighter. all (); 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. This article collects 15 useful jQuery code snippets. You can directly copy and paste them into the code, but please note that you need to understand the code before using it. Let's take a look at the charm of jQuery code. 1. preload image 123456789101112 (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"); Source Code 2. make every element on the page suitable for displaying 1234567891011 var scr = document on mobile devices. 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 () {$ ('div '). attr ('class ',''). attr ('id', ''hangzhou.css ({'margin ': 0, 'padding': 0, 'width': '000000', 'clear ': 'Both '}) ;}; source code 3. image proportional scaling 1234567891011121314151617181920212223242526 $ (window ). bind ("load", function () {// image resize $ ('# product_cat_list img '). each (function () {var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $ (thi S ). width (); var height = $ (this ). height (); if (width> maxWidth) {ratio = maxWidth/width; then (this).css ("width", maxWidth); then (this).css ("height", height * ratio ); height = height * ratio;} var width = $ (this ). width (); var height = $ (this ). height (); if (height> maxHeight) {ratio = maxHeight/height; then (this).css ("height", maxHeight); then (this).css ("width", width * ratio ); width = width * ratio ;}}); // $ ("# Contentpage img "). show (); // image resize}); source code 4. 12345678 // Back To Top $ (document) at the Top of the page ). ready (function () {$ ('. top '). click (function () {$ (document ). scrollTo (0,500);}); // Create a link defined with the class. topBack To Top source code 5. using jQuery to create an accordion folding effect 1234567891011121314151617181920212223 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 ('lil'); 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 ('lil '). removeCla Ss ('active'); $ this. addClass ('active'); $ this. find ('. details '). slideDown () ;}}) ;}; 6. by preloading the image gallery with the next image to imitate Facebook's Image Display Method 12345678 var nextimage = "/images/some-image.jpg"; $ (document ). ready (function () {window. setTimeout (function () {var img = $ (""). attr ("src", nextimage ). load (function () {// all done}) ;}, 100) ;}); source code 7. use jQuery and Ajax to automatically fill the selection box 12345678910111213 $ (function () {$ ("select # ctlJob "). change (func Tion () {$. 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) ;})}) source code 8. automatically replace the lost image 12345678 // Safe Snippet $ ("img "). error (function () {$ (this ). unbind ("error "). attr ("src", "missing_image.gif") ;}); // Persistent Snipper $ ("img "). error (function () {$ (this). Attr ("src", "missing_image.gif") ;}); Source Code 9. show the fade-in/fade-out effect 12345678 $ (document) When hovering over the mouse ). 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 shocould set the opacity to 100% on hover}, function () {$ (this ). fadeTo ("slow", 0.6); // This shocould set the opacity ba Ck to 60% on mouseout}) ;}); source code 10. clear form data 1234567891011121314151617181920 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' | ty Pe = 'Password' | tag = 'textarea ') this. value = ""; // checkboxes and radios need to have their checked state cleared // but shoshould * 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') t His. selectedIndex =-1 ;}) ;}; source code 11. prevent multiple forms from being submitted. 123456789101112131415 $ (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 ;}}) ;}); Source Code 12. dynamically add form elements 12345 // change event on password1 field to prompt new input $ ('# password1 '). change (function () {// dynamically create new input and insert after password1 $ ("# password1 "). append ("") ;}); source code 13. click 12 blah for the entire Div. linkThe following lines of jQuery will make the entire div clickable: $ (". myBox "). click (function () {window. location = $ (this ). find (""). attr ("href"); return False ;}); Source Code 14. balance height or Div element 12345 var maxHeight = 0; $ ("div "). each (function () {if ($ (this ). height ()> maxHeight) {maxHeight = $ (this ). height () ;}}); $ ("div "). height (maxHeight); source code 15. automatically load content 123456789101112131415161718 var loading = false when the window is rolling; $ (window ). scroll (function () {if ($ (window ). scrollTop () + $ (window ). height () + 250) >=$ (document ). height () {if (loading = false) {loading = true; $ ('# loadingba R'hangzhou.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 );});