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

2json 发布于2019-08-20 16:55 / 2320人阅读

摘要：元素屏幕居中获取页面路径相关参数值值值值删除内联样式长度限制并截取外链新窗口打开测试与其它库冲突情况测试冲突代码避免冲突加载即使掉线加载遮罩层，点击移除元素固顶注意调整边界值禁止右键菜单对象插件模版代码公有方法私有方法延伸阅读处理表单的

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掉线

")

8 加载遮罩层，点击移除

$("")
.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代码

云服务器 GPU云服务器超实用的代码段 php实用的一些代码代码片段添加代码片段

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83260.html

【收藏】8段JQuery处理表单的代码片段，很实用

1 只接受数字输入 $(#uAge).keydown(function(event) { // 允许退格和删除键 if ( event.keyCode == 46 || event.keyCode == 8 ) { } else { // 保证输入的是数字键 if (event.keyCode < 48 || event.keyCod...

zxhaaa 2019-08-20 16:43 评论0 收藏0
vscode js 实用的代码片段

摘要：目的是为了减少工作量。入口在选择图示的文件，那么这里就是可以自定义的代码片断的地方。我举一个例子你们就明白了，看代码打印在这段代码中，是指你要提示的代码前缀，效果如图第二个就是我们自定义的代码片段选择之后的效果这个就是我们在代码中定义的。作为一名前端开发工程师，我们每天都想着代码怎么抽成组件，公共方法。目的是为了减少工作量。但是你有没有想过我们一直在写重复的代码，比如每天都会写 im...

wuyangchun 2019-08-23 17:13 评论0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：笔者作为一位，将工作以来用到的各种优秀资料神器及框架整理在此，毕竟好记性不如烂键盘，此前端知识点大百科全书前端掘金，，不定期更新技巧前端掘金技巧，偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案，还有一些是在css-tricks看到的。记录一下，以后会用到。会持续更新… 一、...

Jonathan Shieber 2019-08-29 12:33 评论0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：笔者作为一位，将工作以来用到的各种优秀资料神器及框架整理在此，毕竟好记性不如烂键盘，此前端知识点大百科全书前端掘金，，不定期更新技巧前端掘金技巧，偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案，还有一些是在css-tricks看到的。记录一下，以后会用到。会持续更新… 一、...

SHERlocked93 2019-08-22 11:04 评论0 收藏0