jQuery开发技巧

奋飛

发布于 2019-08-15 15:55:00

9090

发布于 2019-08-15 15:55:00

文章被收录于专栏：Super 前端

本文链接：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);

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2014年12月02日，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

jquery

编程算法

登录后参与评论

0 条评论

热度