需要收藏备用的JQuery代码片段
2017-05-12 00:00
375 查看
摘要: 本文整理了几段常用的JQuery代码片段,包括元素居中、获取路径参数、删除内联样式、冲突测试、CDN的down机处理,固顶,禁用右键等。所有代码均经过验证测试,亲们别忘记收藏点赞哈
提升性能的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#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);
12 延伸阅读
处理表单的JQuery代码提升性能的JQuery代码
相关文章推荐
- 【实用】需要收藏备用的JQuery代码片段
- [收藏]7个有用的jQuery代码片段分享
- 金波--精心收藏的14个开发人员方便的jQuery代码片段
- 精心收藏的14个开发人员方便的jQuery代码片段
- JQuery代码片段 收藏
- 【收藏】8段JQuery处理表单的代码片段,很实用
- 【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
- 10个超棒jQuery表单操作代码片段(留着备用)
- 15个jQuery代码片段
- 值得收藏的多个CSS 实用小技巧(附代码片段)
- jQuery选择器大全(48个代码片段+21幅图演示)
- 12个用得着的JQuery代码片段
- jquery设为首页,加入收藏代码
- 12个用得着的JQuery代码片段
- 12个超实用的JQuery代码片段
- 常用的jQuery代码片段
- 高效Web开发的10个jQuery代码片段
- 实用jquery代码片段集合
- 10个值得收藏的实用HTML5代码片段分享
- 实用jquery代码片段集合