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#jq var url = document.URL; //值:http: var protocol = location.protocol; //值:42du.cn var host = location.host; //值:jq var 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);