jQTips · 动态增加元素的清新写法

2019年8月25日 117次阅读 来源: 某熊猫桑

在写动态增加元素时，平常比较罕见的写法都是这个模样的：

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');

看起来有无比苦逼的字符串拼接清新很多呢？

    原文作者：某熊猫桑
    原文地址: https://segmentfault.com/a/1190000010472801
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞