专栏首页Super 前端jQuery开发技巧

jQuery开发技巧

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://ligang.blog.csdn.net/article/details/41687305

一. 居中显示元素

要使元素在屏幕中居中,先要该元素的“position”定位属性值设置为“absolute”,表示绝对定位;然后通过设置“top”、“left”属性值,使元素居中在屏幕中。

$(".frame").center().show(1000);

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;
}

但当屏幕大小发生变化时,弹出框并不能随之居中,因此,还需要在浏览器的“resize”事件中再次调用插件,即

$(window).resize(function(){
	$(".frame").center();
})

二. 使用预加载方法预览图片

预加载是指图片在显示之前,浏览器已经完成了图片的下载和缓存,因此,图片经过预加载后,再进行显示,其速度和UI体验都会得到很好的提升。

$("img").beforeload({"src":Images/001.jpg})

jQuery.fn.beforeload= function(options) {
    options = $.extend({
        src: ""
    }, options);
    var self = this;
    self.hide();
    var img = new Image();
    $(img).load(function() {
        self.attr("src", options.src);
        self.fadeIn("slow");
    }).attr("src", options.src);
    return self;
}

三. 判断元素是否为空

var $tip = $("#tip"); //1
$tip.html("hello"); //2

if($tip.html()){  //3
	alert($tip.html());
}

if($tip.length>0){  //4
	alert($tip.html());
}

使用html()方法不仅可以检测元素是否存在,还可以查看元素中是否包含内容; 而length属性仅是判断元素是否在页面中存在,而不检测其内容。 因此,将上述事例2代码注释后,3将返回false,而4返回true。

四. 替换内容

strObject.replace(regexp/substr,newstr):在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子字符串 $(selector).replaceAll(content):用指定的HTML内容或元素替换被选元素

五. 巧用jQuery中的事件

1. 禁止页面的右键菜单,只需要在页面的“contextmenu”事件中返回false即可。除此之外,由于在该事件中,还可以传递一个“e”对象,进行检测用户按键情况。 2. 限制文本输入框中字符数量

$("textArea").maxLength(140,"divMaxNum");
/*max:最大允许数据字符长度
 *ele:显示还可输入字符数元素ID
 *输入框的字符总数超出指定的长度后,则通过substring方法截取指定长度内的字符,从而实现限制文本输入框字符总数的功能
 */
jQuery.fn.maxLength = function(max,ele) {
    this.each(function() {
        var type = this.tagName.toLowerCase();
        var inputType = this.type ? this.type.toLowerCase() : null;
        if (type == "input" && inputType == "text" || inputType == "password") {
            this.maxLength = max;
        }
        else if (type == "textarea") {
            this.onkeypress = function(e) {
                var ev = e || event;
                var keyCode = ev.keyCode;
                return !(this.value.length >= max && (keyCode == 32 || keyCode == 13) && !ev.ctrlKey && !ev.altKey);
            };
            this.onkeyup = function() {
                if (this.value.length > max) {
                    this.value = this.value.substring(0, max);
                }
                $("#"+ele).html(max - this.value.length);
            };
            this.onchange = this.onkeyup;
        }
    });
};

3. jQuery集合处理

$("tr:not(:first)").each(function(i) {
    this.style.fontSize = ['13px', '14px', '15px'][i]
    this.style.backgroundColor = ['#eee', '#fff'][i % 2]
});

六. 自定义选择器

$("div:between(3-6)").css({ "background": "#555", "color": "#fff" });

/*$.expr[":"]:伪类选择器
 *e:遍历元素 
 *i:元素索引号
 *bt:过滤条件
 */
;
(function($) {
    $.extend($.expr[":"], {
        between: function(e, i, bt) {
            var arrSingle = bt[3].split("-");
            return arrSingle[0] <= i && i <= arrSingle[1];
        }
    })
})(jQuery);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript设计模式--模板方法模式

    模板方法是基于继承的设计模式,可以很好的提高系统的扩展性。 java中的抽象父类、子类 模板方法有两部分结构组成,第一部分是抽象父类,第二部分是具体的实现子...

    奋飛
  • JavaScript组件设计思想

    上个周,并肩作战的田老师离职了,尽管在一起愉快玩耍的时间不到一年,自己仍然还是从其身上学到、体会到了好多关于知识、理想的东西。对于大多数年轻人关于“晚上想想千条...

    奋飛
  • vue computed正确使用方式

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,所以,对于复杂逻辑,vue 提倡使用计算属性。需要特别...

    奋飛
  • 使用普拉特分析法解析极为复杂的算术表达式

    望月从良
  • 函数中的this

    p.setColor.call(obj, "black"); //this是谁?

    李才哥
  • 修炼内功之JavaScript设计模式(三)

    工作时间久了,自然对软件系统产生自己的思考,还会面临职业生涯的一个挑战。要不要成为一个技术负责人?

    童欧巴
  • 使用electron制作满屏心特效

    这样就会让窗口全屏 但是有一个问题 就是这样做界面不会正确响应 我们可以使用进程通信去解决

    李昊天
  • element表单校验问题

    新增时,校验为空未通过,点击取消按钮。重新打开编辑,明明有值,显示校验未通过。

    崔笑颜
  • RocketMQ 源码分析 —— Message 存储

    本文接《RocketMQ 源码分析 —— Message 发送与接收》。主要解析 CommitLog 存储消息部分。

    芋道源码
  • win10 uwp 验证输入 自定义用户控件 Nuget使用库判断输入字符长度是否要检查长度判断如何写检查用户控件

    TextBox是给用户输入,我们有时要用户只输入数字,而用户输入汉字,我们就有提示用户,那么这东西用到次数很多,我们需要做成一个控件。 我们可以用别人的库,我找...

    林德熙

扫码关注云+社区

领取腾讯云代金券