首页 > 代码库 > 很实用的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 获取页面路径相关参数

//值:http://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="http://www.mamicode.com/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);

 

 

很实用的JQuery代码片段(转)