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

nemo 发布于2019-08-20 18:30 / 1391人阅读

摘要：看到这里你可能会问，如果前边用了单标签，那里边这堆啊还有内容啥的该咋办答案就在第二个参数上。

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

var newClass = "newDiv";
var newText = "Demo!";
var newBody = $("" + newText + "");
$("body").append(newBody);

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

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

但其实呢，这里可以还使用jQuery对象的包装语法，通过查询文档呢我们知道它的语法是jQuery( html, attributes )，在html参数这里，我们可以使用一个（不含任何属性的）单标签，就是类似于"

"、"

"以及"
"这几种类型的标签，它和前边一大长串字符串那种的区别在于：前者会用innerHTML实现；而后者则是调用.createElement()实现的。

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

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

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

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

当然也可以写成：

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

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

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84614.html

2017-08-03 前端日报

摘要：前端日报精选专题之通用遍历方法的实现深入了解的子组件上最流行的项目再聊移动端页面的适配译盒子模型实践教程中文全栈第天数据驱动龙云全栈译年开发趋势疯狂的技术宅在翻译译闭包并不神秘前端心得拼多多前端笔试个人文章容器技术方 2017-08-03 前端日报精选 JavaScript专题之jQuery通用遍历方法each的实现深入了解React的子组件GitHub上最流行的Top 10 Jav...

gecko23 2019-08-20 18:31 评论0 收藏0
【永久开源】layuimini，最简洁、清爽、易用的layui后台框架模板。保证一用就会爱上它。

摘要：后台模板项目介绍最简洁清爽易用的后台框架模板。项目会不定时进行更新，建议和一份，另外有问题请加群。地址定位，可以清楚看到当前的地址信息。刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。移动端的友好支持。 layuimini后台模板项目介绍最简洁、清爽、易用的layui后台框架模板。项目会不定时进行更新，建议star和fork一份，另外有问题请加QQ群：76382252...

Karrdy 2019-08-02 15:21 评论0 收藏0
【永久开源】layuimini，最简洁、清爽、易用的layui后台框架模板。保证一用就会爱上它。

摘要：后台模板项目介绍最简洁清爽易用的后台框架模板。项目会不定时进行更新，建议和一份，另外有问题请加群。地址定位，可以清楚看到当前的地址信息。刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。移动端的友好支持。 layuimini后台模板项目介绍最简洁、清爽、易用的layui后台框架模板。项目会不定时进行更新，建议star和fork一份，另外有问题请加QQ群：76382252...

bingchen 2019-08-30 11:13 评论0 收藏0
用原生js写一个"多动症"的简历

摘要：用原生写一个多动症的简历预览地址源码地址最近在知乎上看到方应杭用写了一个会动的简历，觉得挺好玩的，研究一下其实现思路，决定试试用原生来实现。用原生js写一个多动症的简历预览地址源码地址最近在知乎上看到@方应杭用vue写了一个会动的简历，觉得挺好玩的，研究一下其实现思路，决定试试用原生js来实现。 showImg(https://segmentfault.com/img/remot...

Y3G 2019-08-20 16:15 评论0 收藏0