很棒的jQuery代码片段分享

时间：2014-04-11 00:19:29 阅读：656 评论：0 收藏：0 [点我收藏+]

　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 
&amp;&amp; $.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" > 
    < 
a href 
= "http://www.admin10000.com" 
> admin10000.com < /a>
</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;
  }
});

很棒的jQuery代码片段分享,布布扣,bubuko.com

很棒的jQuery代码片段分享

原文：http://www.cnblogs.com/wfpanskxin/p/basejquery.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)