18個(gè)非常棒的jQuery代碼片段
1、jQuery實(shí)現(xiàn)的內(nèi)鏈接平滑滾動(dòng)
不需要使用太復(fù)雜的插件,只要使用下載這段代碼即可實(shí)現(xiàn)基于內(nèi)部鏈接的平滑滾動(dòng)
$('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、使用jQuery獲取所有節(jié)點(diǎn)
var $element = $('#gbtags'); var $nodes = $element.contents(); $nodes.each(function() { if(this.nodeType === 3 && $.trim($(this).text())) { $(this).wrap(''); } });
3、限制選擇框選擇個(gè)數(shù)
$("#categories option").click(function(e){ if ($(this).parent().val().length < 2) { $(this).removeAttr("selected"); } });
4、jQuery使用通配符來刪除class
var _c = 'your-icon-class' $('.currency').removeClass (function (index, css) { return (css.match (/\bicon-\S+/g) || []).join(' '); }).addClass('icon-'+_c);
5、切換啟用和禁用
/* HTML | | <input type="text" value="歡迎訪問www.admin10000.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:button').click(function () { $('input:text').toggleDisabled(); }); });
6、平滑滾動(dòng)返回頂端
<h1 id="anchor">admin10000.com</h1> <a class="topLink" href="#anchor">返回頂端</a> $(document).ready(function () { $("a.topLink").click(function () { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top + "px" }, { duration: 500, easing: "swing" }); return false; }); });
7、使用jQuery和Google Analytics來跟蹤表單
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、超簡(jiǎn)單的密碼強(qiáng)度提示
$('#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生成一個(gè)自動(dòng)停靠頁尾效果
// 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"; /* DEBUGGING console.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、預(yù)防對(duì)表單進(jìn)行多次提交
$(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、圖像等比例縮放
$(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、鼠標(biāo)滑動(dòng)時(shí)的漸入和漸出
$(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、制作等高的列
var max_height = 0; $("div.col").each(function(){ if ($(this).height() > max_height) { max_height = $(this).height(); } }); $("div.col").height(max_height);
14、圖片預(yù)加載
(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、獲取 URL 中傳遞的參數(shù)
$.urlParam = function(name){ var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); if (!results) { return 0; } return results[1] || 0; }
16、禁用表單的回車鍵提交
$("#form").keypress(function(e) { if (e.which == 13) { return false; } });
17、讓整個(gè)DIV可以被點(diǎn)擊
<div class = "myBox" > < a href = "http://www.dbjr.com.cn" > www.dbjr.com.cn < /a> </div > $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
18、在新窗口打開鏈接 (target=”blank”)
$('a[@rel$='external']').click(function(){ this.target = "_blank"; });
大家可以結(jié)合之前小編整理的文章進(jìn)行學(xué)習(xí),把實(shí)用的jQuery代碼片段進(jìn)行匯總,以便日后學(xué)習(xí)使用。
相關(guān)文章
JQuery動(dòng)態(tài)生成的按鈕無法觸發(fā)問題及完美解決方法
利用JQuery動(dòng)態(tài)添加的按鈕無法通過$(selector).click方法觸發(fā)點(diǎn)擊事件,下面小編給大家?guī)砹薐Query動(dòng)態(tài)生成的按鈕無法觸發(fā)問題與解決方法,需要的朋友可以參考下2023-02-02jQuery實(shí)現(xiàn)點(diǎn)擊文本框彈出熱門標(biāo)簽的提示效果
點(diǎn)擊文本框彈出熱門標(biāo)簽的效果實(shí)現(xiàn)方法有很多,在本文為大家詳細(xì)介紹下使用jQuery是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過2013-11-11jQuery獲得document和window對(duì)象寬度和高度的方法
這篇文章主要介紹了jQuery獲得document和window對(duì)象寬度和高度的方法,涉及jQuery獲取document和window對(duì)象屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery 防止相同的事件快速重復(fù)觸發(fā)方法
下面小編就為大家分享一篇jQuery 防止相同的事件快速重復(fù)觸發(fā)方法。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02jQuery 追加元素的方法如append、prepend、before
jQuery - 追加元素的方法有很多如append、prepend、before等等,下面為大家詳細(xì)介紹下2014-01-01Eclipse引入jquery報(bào)錯(cuò)如何解決
有朋友問我,在是使用eclipse的過程中遇到了這么一個(gè)問題--eclipse導(dǎo)入jquery包后報(bào)錯(cuò)——究竟是什么原因?qū)е逻@一問題發(fā)生的呢?該如何解決此問題呢?下面小編給大家?guī)砹私鉀Q辦法,不妨一起看看吧2015-12-1240個(gè)新鮮出爐的jQuery 插件和免費(fèi)教程[上]
作為最流行的 JavaScript 庫,jQuery 擁有豐富的插件,能夠幫助開發(fā)者簡(jiǎn)單快速的實(shí)現(xiàn)各種功能2012-07-07