在写动态增加元素时,平常比较罕见的写法都是这个模样的:
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');
看起来有无比苦逼的字符串拼接清新很多呢?