jQuery实现的内链接平滑滚动
不需要使用太复杂的插件，只要使用下载这段代码即可实现基于内部链接的平滑滚动
$(‘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;});});使用jQuery获取所有节点
var
$element = $(‘#gbtags‘);
var
$nodes = $element.contents();
$nodes.each(function()
{
if(this.nodeType === 3
&& $.trim($(this).text()))
{
$(this).wrap(‘‘);
}
});限制选择框选择个数
$("#categories option").click(function(e){
if
($(this).parent().val().length < 2) {
$(this).removeAttr("selected");
}
});jQuery使用通配符来删除class
var
_c = ‘your-icon-class‘
$(‘.currency‘).removeClass (function (index, css)
{
return
(css.match (/\bicon-\S+/g) || []).join(‘ ‘);
}).addClass(‘icon-‘+_c);切换启用和禁用
/*
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();
});
});
平滑滚动返回顶端
<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;
});
});
使用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 + ‘"‘]);
});
});
超简单的密码强度提示
$(‘#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;
});
jQuery生成一个自动停靠页尾效果
// 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);
});
预防对表单进行多次提交
$(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;
}
});
});
图像等比例缩放
$(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});
鼠标滑动时的渐入和渐出
$(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
});
});
让整个DIV可以被点击
<div class = "myBox" >
</div >
$(".myBox").click(function(){ window.location=$(this).find("a").attr("href");
return
false;
});
图片预加载
(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");
获取 URL 中传递的参数
$.urlParam =
function(name){
var
results = new RegExp(‘[\\?&]‘ + name +
‘=([^&#]*)‘).exec(window.location.href);
if
(!results) { return 0;
}
return
results[1] || 0;
}禁用表单的回车键提交
$("#form").keypress(function(e)
{
if (e.which == 13)
{
return
false;
}
});