jQTips · 动态添加元素的清爽写法

某熊猫桑

在写动态添加元素时,一般比较常见的写法都是这个样子的:

var newClass = 'newDiv';
var newText = 'Demo!';
var newBody = $('<div class="' + newClass + '">' + newText + '</div>');
$('body').append(newBody);

如果还需要事件呢,那么就在前边加个事件委托:

$(document).on('click', '.newDiv', function(){
    console.info('Click Me!');
});

但其实呢,这里可以还使用jQuery对象的包装语法,通过查询文档呢我们知道它的语法是jQuery( html, attributes ),在html参数这里,我们可以使用一个(不含任何属性的)单标签,就是类似于"<div />""<div>"以及"<div></div>"这几种类型的标签,它和前边一大长串字符串那种的区别在于:前者会用innerHTML实现;而后者则是调用.createElement()实现的。

看到这里你可能会问,如果前边用了单标签,那里边这堆class啊还有内容啥的该咋办?答案就在第二个参数attributes上。attributes参数是一个对象,里边放的是第一个参数、也就是单标签里的属性,简单来说你可以将它等同于.attr(attributes)来用,并且,它还能综合.val().css().html().text().data().width().height().offset()之类的功能,比如第一段代码就可以改写成:

var newClass = 'newDiv';
var newText = 'Demo!';
$('<div>', {
    'class': newClass, //和.attr()一样,由于class是保留字所以要强制加引号
    text: newText
}).appendTo('body');

而绑定事件也可以一并写进去,比如带有简写(即.click())调用的click就可以这样写:

var newClass = 'newDiv';
var newText = 'Demo!';
$('<div>', {
    'class': newClass,
    text: newText,
    click: function(){
        console.info('Click Me!');
    }
}).appendTo('body');

当然也可以写成:

var newClass = 'newDiv';
var newText = 'Demo!';
$('<div>', {
    'class': newClass,
    text: newText,
    on: {
        click: function() {
            console.info('Click Me!');
        }
    }
}).appendTo('body');

如果为一堆变量名命名发愁,也可以完全不用变量,变成:

$('<div>', {
    'class': 'newDiv',
    text: 'Demo!',
    click: function(){
        console.info('Click Me!');
    }
}).appendTo('body');

看起来有没有比苦逼的字符串拼接清爽许多呢?

阅读 3k

承认自己做不到,坦诚自己不够好。

16.1k 声望
19.7k 粉丝
0 条评论
你知道吗?

承认自己做不到,坦诚自己不够好。

16.1k 声望
19.7k 粉丝
文章目录
宣传栏