18 great jQuery code snippets, great jquery snippets

18 great jQuery code snippets, great jquery snippets

1. jQuery implements smooth scrolling of internal links
No complicated plug-ins are required. You only need to download this code to implement smooth scrolling based on internal links.

$('a[href^="#"]').bind('click.smoothscroll',function (e) {e.preventDefault(); var anchor = this.hash,$target = $(target); $('html, body').stop().animate({'scrollTop': $target.offset().top}, 500, 'swing', function () {window.location.hash = anchor;}); });

2. Use jQuery to retrieve all nodes

var $element = $('#gbtags'); var $nodes = $element.contents(); $nodes.each(function() {  if(this.nodeType === 3 && $.trim($(this).text())) {  $(this).wrap(''); }});

3. Limit the number of selection boxes

$("#categories option").click(function(e){ if ($(this).parent().val().length < 2) {  $(this).removeAttr("selected"); }});

4. jQuery uses wildcards to delete classes.

var _c = 'your-icon-class' $('.currency').removeClass (function (index, css) { return (css.match (/\bicon-\S+/g) || []).join(' ');}).addClass('icon-'+_c);

5. Switch to enable and disable

/* HTML | <input type = "text" value = "Welcome to www.admin).com"/> <input type = "button" value = ""/> | */ // Plugin (function ($) {$. fn. toggleDisabled = function () {return this. each (function () {var $ this = $ (this); if ($ this. attr ('Disabled ') $ this. removeAttr ('Disabled '); else $ this. attr ('Disabled ', 'Disabled') ;};}) (jQuery); // TEST $ (function () {$ ('input: click '). click (function () {$ ('input: text '). toggleDisabled ();});});

6. Smooth scrolling back to the top

<H1 id = "anchor"> admin).com 
7. Use jQuery and Google Analytics to track forms

var array1 = [];$(document).ready(function () { $('input').change(function () {  var formbox = $(this).attr('id');  array1.push(formbox);  console.log("you filled out box " + array1); }); $('#submit').click(function () {  console.log('tracked ' + array1);  //alert('this is the order of boxes you filled out: ' + array1);  _gaq.push(['_trackEvent', 'Form', 'completed', '"' + array1 + '"']); });});
8. Simple Password strength prompt

$('#pass').keyup(function (e) { var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[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;});
9. jQuery generates an Automatic ending check.

// Window load event used just in case window height is dependant upon images$(window).bind("load", function () { var footerHeight = 0,  footerTop = 0,  $footer = $("#footer"); positionFooter();  function positionFooter() {  footerHeight = $footer.height();  footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";  /* DEBUGGINGconsole.log("Document height: ", $(document.body).height());console.log("Window height: ", $(window).height());console.log("Window scroll: ", $(window).scrollTop());console.log("Footer height: ", footerHeight);console.log("Footer top: ", footerTop);*/  if (($(document.body).height() + footerHeight) < $(window).height()) {   $footer.css({    position: "absolute"   }).stop().animate({    top: footerTop   });  } else {   $footer.css({    position: "static"   });  } }  $(window)  .scroll(positionFooter)  .resize(positionFooter);});
10. 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; } });});
11. 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});
12. Fade-in and fade-out when the mouse slides

$(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 });});
13. Create a high-level column

var max_height = 0;$("div.col").each(function(){ if ($(this).height() > max_height) { max_height = $(this).height(); }});$("div.col").height(max_height);
14. image pre-loading

(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");
15. Get the parameters passed in the URL

$.urlParam = function(name){ var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); if (!results) { return 0; } return results[1] || 0;}
16. Forbidden form enter submission

$("#form").keypress(function(e) { if (e.which == 13) { return false; }});
17. enable the entire DIV to be clicked

<div class = "myBox" >  < a href = "http://www.bkjia.com" > www.jb51.net < /a></div >  $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false;});
18. Open the link in a new window (target = "blank ")

$('a[@rel$='external']').click(function(){   this.target = "_blank";});
You can combine the articles compiled in the previous section to summarize the practical jQuery code snippets for future use.