【实用】需要收藏备用的JQuery代码片段

本文将讲解一些JQuery代码片段，看完这篇文章会让你对有更加清晰的理解和运用。

1 元素屏幕居中

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;

}

$("#myDiv").center();

2 获取页面路径相关参数

//值：//42du.cn/list#jqvar url = document.URL;//值：http:var protocol = location.protocol;//值：42du.cnvar host = location.host;//值：jqvar hashP = document.URL.split('#')[1];

3 删除内联样式

$("*[style]").attr("style", "");

4 长度限制并截取

var $elem = $("#title");if($elem.text().length > 30) {

    $elem.text($elem.text().substr(0, 27)+"...");

}

5 外链新窗口打开

$("a[@href^='http']").attr('target','_blank');

6 测试JQuery与其它库冲突情况

//测试冲突代码

$("#jqtest").click( function() {

   alert("jQuery is working!");

});//避免冲突var $jq = jQuery.noConflict();

$jq("#jqtest").click( function() {

   alert("jQuery is working!");

});

7 加载JQuery即使CDN掉线

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script>window.jQuery || document.write('<script src="/media/js/jquery.js"><\/script>')</script>

8 加载遮罩层，点击移除

$('<div id="overlay"></div>')

.css({

    position    : 'fixed',

    top         : 0,

    left        : 0,

    right       : 0,

    bottom      : 0,

    opacity     : 0.6,

    background  : 'black',

    display     : 'none'

})

.appendTo('body')

.fadeIn('normal')

.click(function () {

    $(this).fadeOut('normal', function () {

        $(this).remove();

    })

});

9 元素固顶

//注意调整边界值

$(window).scroll(function() {

    if ($(window).scrollTop() > 100) {

        $('#navbar').css({'position' : 'fixed', 'top' : 0});

    } else {

        $('#navbar').css({'position' : 'relative', 'top' : 'none'});

    }

});

10 禁止右键菜单

$(document).bind('contextmenu', function () {

    return false;

})

11 对象插件模版代码

(function($){

   var MyPlugin = function(element, options) {

       var elem = $(element);

       var obj = this;

       var settings = $.extend({param: 'defaultValue'}, options || {});

       // 公有方法

       this.publicMethod = function(){

           console.log('public method called!');

       };

       // 私有方法

       var privateMethod = function() {

           console.log('private method called!');

       };

   };

   $.fn.myplugin = function(options) {

       return this.each(function(){

           var element = $(this);

           // Return early if this element already has a plugin instance

           if (element.data('myplugin')) return;

           // pass options to plugin constructor

           var myplugin = new MyPlugin(this, options);

           // Store plugin object in this element's data

           element.data('myplugin', myplugin);

       });

   };

})(jQuery);

12 延伸阅读

处理表单的JQuery代码

希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标IT频道都能找到！