हर दिन के लिए 10+ उपयोगी jQuery स्निपेट्स

वर्षों से, jQuery लाइब्रेरी हर वेब डेवलपर के काम का एक अभिन्न अंग बन गया है। आखिरकार, इसका उपयोग करना आसान है, तेज है और इसकी बहुत व्यापक क्षमताएं हैं। इस लेख में, मैंने दस से अधिक स्निपेट की एक सूची तैयार की है जिसे आप स्वतंत्र रूप से उपयोग के लिए ले सकते हैं। वे अपनी खुद की परियोजनाओं की जरूरतों के अनुकूल होना बहुत आसान है।

पृष्ठ के शीर्ष पर चिकनी स्क्रॉल करें

आइए इस सूची को एक बहुत लोकप्रिय और उपयोगी स्निपेट के साथ शुरू करें: कोड की ये 4 लाइनें आपके आगंतुकों को पृष्ठ के निचले भाग में स्थित लिंक (आईडी #टॉप के साथ) पर क्लिक करके आसानी से शीर्ष पर स्क्रॉल करने की अनुमति देंगी।

$("a[href='#top']").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; }); 

स्रोत

Html तालिका के बहुत नीचे तक डुप्लिकेट थ्रेड

तालिकाओं की बेहतर पठनीयता के लिए, तालिका शीर्षलेख को तालिका के निचले भाग में कॉपी करना अच्छा होगा। दरअसल, यह वही है जो अगला स्निपेट करता है।

 var $tfoot = $('<tfoot></tfoot>'); $($('thead').clone(true, true).children().get().reverse()).each(function() { $tfoot.append($(this)); }); $tfoot.insertAfter('table thead'); 

स्रोत

बाहरी सामग्री डाउनलोड करें

क्या आपको div में विशिष्ट बाहरी सामग्री जोड़ने की आवश्यकता है? तो यह jQuery के साथ करना बहुत आसान है, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है।

 $("#content").load("somefile.html", function(response, status, xhr) { // error handling if(status == "error") { $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText); } }); 

स्रोत

समान ऊंचाई के स्तंभ

यदि आप अपनी साइट की सामग्री को प्रदर्शित करने के लिए स्तंभों का उपयोग करते हैं, तो यह निश्चित रूप से बेहतर होगा यदि स्तंभों की ऊंचाई समान है। नीचे दिया गया कोड .col वर्ग के साथ सभी div तत्वों को ले जाएगा और उनकी ऊंचाई को उच्चतम तत्व पर सेट करेगा। सुपर सहायक!

 var maxheight = 0; $("div.col").each(function() { if($(this).height() > maxheight) { maxheight = $(this).height(); } }); $("div.col").height(maxheight); 

स्रोत

टेबल स्ट्राइप्स (ज़ेबरा)

जब डेटा सारणीबद्ध रूप में प्रदर्शित किया जाता है, तो प्रत्येक पंक्ति में अलग-अलग रंग पठनीयता को बढ़ाते हैं। यहां टेबल के प्रत्येक सेकंड (यहां तक ​​कि) पंक्ति में सीएसएस क्लास को स्वचालित रूप से जोड़ने के लिए एक स्निपेट है।

 $(document).ready(function(){ $("table tr:even").addClass('stripe'); }); 

स्रोत

आंशिक पृष्ठ ताज़ा करें

यदि आपको पृष्ठ के केवल भाग को ताज़ा करने की आवश्यकता है, तो कोड की ये 3 पंक्तियाँ निश्चित रूप से मदद करेंगी। उदाहरण में div #refresh के साथ div स्वचालित रूप से हर 10 सेकंड में अपडेट किया जाता है।

 setInterval(function() { $("#refresh").load(location.href+" #refresh>*",""); }, 10000); // milliseconds to wait 

स्रोत

छवि प्रीलोड

jQuery पृष्ठभूमि में छवियों को पहले से लोड करना आसान बनाता है, इसलिए आगंतुकों को उन छवियों के लिए हमेशा इंतजार नहीं करना पड़ता है जो वे चाहते हैं। कोड का उपयोग करने के लिए तैयार है, बस लाइन 8 पर छवियों की सूची को संपादित करें।

 $.preloadImages = function() { for(var i = 0; i<arguments.length; i++) { $("<img />").attr("src", arguments[i]); } } $(document).ready(function() { $.preloadImages("hoverimage1.jpg","hoverimage2.jpg"); }); 

स्रोत

एक नई विंडो या नए टैब में बाहरी लिंक खोलें

लक्ष्य = "_ रिक्त" विशेषता आपको नई विंडो में लिंक खोलने की अनुमति देती है। लेकिन यह बाहरी लिंक के उद्घाटन पर लागू होता है, इंट्रा-डोमेन लिंक एक ही विंडो में खुलने चाहिए।
यह कोड बाहरी लिंक को ढूंढता है और पाया तत्व में लक्ष्य = "_ blank" विशेषता जोड़ता है।

 $('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation(); window.open(this.href, '_blank'); }); } }); 

स्रोत

व्यूपोर्ट की Div चौड़ाई / ऊँचाई

कोड का यह सुविधाजनक टुकड़ा आपको व्यूपोर्ट की चौड़ाई / ऊंचाई में फैला हुआ एक डीवा बनाने की अनुमति देता है। कोड भी विंडो आकार बदलने का समर्थन करता है। मोडल संवाद और पॉपअप विंडो के लिए एक शानदार समाधान।

 // global vars var winWidth = $(window).width(); var winHeight = $(window).height(); // set initial div height / width $('div').css({ 'width': winWidth, 'height': winHeight, }); // make sure div stays full width/height on resize $(window).resize(function(){ $('div').css({ 'width': winWidth, 'height': winHeight, }); }); 

स्रोत

पासवर्ड जटिलता की जाँच करें

जब आप उपयोगकर्ताओं को एक स्वतंत्र पासवर्ड विकल्प प्रदान करते हैं, तो यह दिखाना अच्छा होगा कि उनका पासवर्ड कितना जटिल है। स्निपेट कोड बस यही करता है।

सबसे पहले, इनपुट फ़ील्ड बनाएं:

 <input type="password" name="pass" id="pass" /> <span id="passstrength"></span> 

और फिर थोड़ा jQuery कोड। दर्ज किए गए पासवर्ड को नियमित अभिव्यक्तियों का उपयोग करके जांचा जाएगा और इसके आधार पर, उपयोगकर्ता को एक संदेश के साथ संकेत दिया जाएगा कि उसका पासवर्ड कितना जटिल है।

 $('#pass').keyup(function(e) { var strongRegex = new RegExp("^(?=.{8,})(?=.*[AZ])(?=.*[az])(?=.*[0-9])(?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[AZ])(?=.*[az]))|((?=.*[AZ])(?=.*[0-9]))|((?=.*[az])(?=.*[0-9]))).*$", "g"); var enoughRegex = new RegExp("(?=.{6,}).*", "g"); if (false == enoughRegex.test($(this).val())) { $('#passstrength').html('More Characters'); } else if (strongRegex.test($(this).val())) { $('#passstrength').className = 'ok'; $('#passstrength').html('Strong!'); } else if (mediumRegex.test($(this).val())) { $('#passstrength').className = 'alert'; $('#passstrength').html('Medium!'); } else { $('#passstrength').className = 'error'; $('#passstrength').html('Weak!'); } return true; }); 

स्रोत

छवि का आकार बदलें

बेशक, आप सर्वर (ओर उदाहरण के लिए, PHP और GD लाइब्रेरी का उपयोग करके) अपनी छवियों का आकार बदल सकते हैं, लेकिन कभी-कभी यह jQuery का उपयोग करके क्लाइंट की तरफ से करना उपयोगी होता है। यहाँ इसके लिए एक स्निपेट दिया गया है।

 $(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 }); 

स्रोत

स्क्रॉलिंग सामग्री स्वचालित रूप से

कुछ साइटें, जैसे कि ट्विटर, स्क्रॉल करके सामग्री अपलोड करती हैं। इसका अर्थ है कि पृष्ठ पर स्क्रॉल करते ही सभी सामग्री गतिशील रूप से लोड हो जाती है।
यहाँ एक उदाहरण है कि आप अपनी साइट पर इस प्रभाव को कैसे बना सकते हैं।

 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); }); 

स्रोत

जाँच करें कि क्या छवि लोड है

यहां एक स्निपेट है जिसका उपयोग मैं अक्सर छवियों के साथ काम करते समय करता हूं, क्योंकि यह पता लगाने का सबसे अच्छा तरीका है कि कोई छवि लोड हुई है या नहीं।

 var imgsrc = 'img/image1.png'; $('<img/>').load(function () { alert('image loaded'); }).error(function () { alert('error loading image'); }).attr('src', imgsrc); 

स्रोत

सूची को वर्णानुक्रम में क्रमबद्ध करें

कुछ मामलों में, एक लंबी सूची को वर्णानुक्रम में क्रमबद्ध करना बहुत उपयोगी है। यह स्निपेट किसी भी सूची को स्वीकार करता है और उसे क्रमबद्ध करता है।

 $(function() { $.fn.sortList = function() { var mylist = $(this); var listitems = $('li', mylist).get(); listitems.sort(function(a, b) { var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA < compB) ? -1 : 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); }); 

स्रोत