18個(gè)非常棒的jQuery代碼片段
更新時(shí)間：2015年11月02日 12:41:46 投稿：lijiao
jQuery是當(dāng)今最流行Web開發(fā)必備javascript庫(kù)。本文收集了18個(gè)很棒的jQuery代碼片段，希望這些代碼片段能對(duì)大家有幫助。
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使用通配符來(lái)刪除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="歡迎訪問(wèn)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來(lái)跟蹤表單
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)?？宽?yè)尾效果
// 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.fzitv.net" > www.fzitv.net < /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實(shí)現(xiàn)寬屏圖片輪播實(shí)例教程
這篇文章為大家分享了一個(gè)jQuery實(shí)現(xiàn)寬屏圖片輪播實(shí)例教程，外觀看上去非常大氣，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了jQuery中:image選擇器用法,實(shí)例分析了:image選擇器的功能、定義及匹配類型為image的<input>元素時(shí)的使用技巧,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)動(dòng)畫效果的實(shí)例代碼
jQuery實(shí)現(xiàn)動(dòng)畫效果的實(shí)例代碼，需要的朋友可以參考一下2013-05-05
jQuery實(shí)現(xiàn)仿路邊燈箱廣告圖片輪播效果
本文給大家介紹的是使用jQuery實(shí)現(xiàn)仿路邊燈箱廣告圖片輪播切換特效，效果非常棒，有需要的小伙伴可以參考下。2015-04-04
簡(jiǎn)單實(shí)現(xiàn)jQuery進(jìn)度條輪播實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了簡(jiǎn)單實(shí)現(xiàn)jQuery進(jìn)度條輪播實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
初學(xué)Jquery插件制作 在SageCRM的查詢屏幕隱藏部分行的功能
SageCRM的查詢條件屏幕的條件比較多，會(huì)占用界面，用戶希望首先顯示常用的查詢條件，然后點(diǎn)擊展開的按鈕，可以看到一些不常用的查詢條件2011-12-12
jQuery Validation Plugin驗(yàn)證插件手動(dòng)驗(yàn)證
jquery.validate是jquery旗下的一個(gè)驗(yàn)證框架，借助jquery的優(yōu)勢(shì)，我們可以迅速驗(yàn)證一些常見的輸入,并且可以自己擴(kuò)充自己的驗(yàn)證方法，并且對(duì)國(guó)際化也有很好的支持，接下來(lái)通過(guò)本文給大家介紹jQuery Validation Plugin驗(yàn)證插件手動(dòng)驗(yàn)證2016-01-01
firefox下jquery ajax返回object XMLDocument處理方法
使用jquery ajax處理struts2 返回json類型的時(shí)候，ajax執(zhí)行成功返回結(jié)果為object XMLDocument，解決方法如下2014-01-01
Jquery的each里用return true或false代替break或continue
Jquery的each里面用return false代替break；return ture 代替continue2014-05-05
利用jquery.qrcode在頁(yè)面上生成二維碼且支持中文
這篇文章主要介紹了利用jquery.qrcode在頁(yè)面上生成二維碼且支持中文。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02