首页 > 代码库 > 很实用的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代码片段(转)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。