brizer的博客

brizer写字的地方

jquery使用代码段

jQuery代码段


前言

在开发过程中,有很多代码片段是可以进行复用的,以后在此对jQuery的有用代码段进行整理,方便日后的使用。


DOM操作相关

嵌套的过滤器

//允许你减少集合中的匹配元素的过滤器,
//只剩下那些与给定的选择器匹配的部分。在这种情况下,
//查询删除了任何没(:not)有(:has)
//包含class为“selected”(.selected)的子节点。
.filter(":not(:has(.selected))")

找到节点索引号

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

检测是否存在

if ($('#someDiv').length) {
//万岁!!!它存在……
}

动效相关

滑动到页面顶部

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;});

滚动到某位置

jQuery.fn.autoscroll = function(selector) {
    $('html,body').animate(
        {scrollTop: $(selector).offset().top},
        500
    };
}
//然后像这样来滚动到你希望去到的class/area上。
$('.area_name').autoscroll();

固定到顶部

允许一个元素固定到顶部

$(function(){
    var $win = $(window)
    var $nav = $('.mytoolbar');
    var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;
    var isFixed=0;

    processScroll()
    $win.on('scroll', processScroll)

    function processScroll() {
    var i, scrollTop = $win.scrollTop()

    if (scrollTop >= navTop && !isFixed) { 
        isFixed = 1
        $nav.addClass('subnav-fixed')
    } else if (scrollTop <= navTop && isFixed) {
        isFixed = 0
        $nav.removeClass('subnav-fixed')
    }}

出现在屏幕中心

jQuery.fn.center = function () {
    this.css('position','absolute');
    this.css('top', ( $(window).height() - this.height() ) / 2 +$(window).scrollTop() + 'px');
    this.css('left', ( $(window).width() - this.width() ) / 2 +$(window).scrollLeft() + 'px');
    return this;
}
//这样来使用上面的函数:
$(element).center();

鼠标位置

$(document).ready(function() {
    $(document).mousemove(function(e){
        $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
    });
});

性能优化与工程处理相关

预加载图片

jQuery.preloadImages = function() {
    for(var i = 0; i < arguments.length; i++) {
        $("<img />").attr('src', arguments[i]);
    }
};
//用法
$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

自动定位并修复图片

$('img').error(function(){
    $(this).attr('src', 'img/broken.png');});

禁用右键单击上下文菜单

$(document).bind('contextmenu',function(e){
    return false;
});

鼠标右键和左键

$("#someelement").on('click', function(e) {
    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
        alert("Left Mouse Button Clicked");
    } else if(e.button == 2) {
        alert("Right Mouse Button Clicked");
    }
});

限制textarea字符个数

jQuery.fn.maxLength = function(max){
    this.each(function(){
        var type = this.tagName.toLowerCase();
        var inputType = this.type? this.type.toLowerCase() : null;
        if(type == "input" && inputType == "text" || inputType == "password"){

//Apply the standard maxLength
            this.maxLength = max;
        }
        else if(type == "textarea"){
            this.onkeypress = function(e){
                var ob = e || event;
                var keyCode = ob.keyCode;
                var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
                return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
            };
            this.onkeyup = function(){
                if(this.value.length > max){
                    this.value = this.value.substring(0,max);
                }
            };
        }
    });
};
//用法
$('#mytextarea').maxLength(500);

文本输入禁止使用空格

$('input.nospace').keydown(function(e) {
    if (e.keyCode == 32) {
        return false;
    }});
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mevicky/article/details/80122906
想对作者说点什么? 我来说一句

jQuery使用技巧

2010年06月11日 10KB 下载

JQuery使用JS文件

2011年05月04日 76KB 下载

jQuery使用经典案例

2010年04月21日 769KB 下载

验证数字的正则表达式集

2018年05月14日 2KB 下载

jquery程序代码包

2012年09月22日 17.84MB 下载

jquery使用

2013年09月13日 18.63MB 下载

ASP.NET学习积累的代码段

2009年08月18日 160KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭