成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jQTips · 動態(tài)添加元素的清爽寫法

nemo / 1399人閱讀

摘要：看到這里你可能會問，如果前邊用了單標(biāo)簽，那里邊這堆啊還有內(nèi)容啥的該咋辦答案就在第二個參數(shù)上。

在寫動態(tài)添加元素時，一般比較常見的寫法都是這個樣子的：

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

如果還需要事件呢，那么就在前邊加個事件委托：

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

但其實(shí)呢，這里可以還使用jQuery對象的包裝語法，通過查詢文檔呢我們知道它的語法是jQuery( html, attributes )，在html參數(shù)這里，我們可以使用一個（不含任何屬性的）單標(biāo)簽，就是類似于"

"、"
"以及"
"這幾種類型的標(biāo)簽，它和前邊一大長串字符串那種的區(qū)別在于：前者會用innerHTML實(shí)現(xiàn)；而后者則是調(diào)用.createElement()實(shí)現(xiàn)的。

看到這里你可能會問，如果前邊用了單標(biāo)簽，那里邊這堆class啊還有內(nèi)容啥的該咋辦？答案就在第二個參數(shù)attributes上。attributes參數(shù)是一個對象，里邊放的是第一個參數(shù)、也就是單標(biāo)簽里的屬性，簡單來說你可以將它等同于.attr(attributes)來用，并且，它還能綜合.val()、.css()、.html()、.text()、.data()、.width()、.height()、.offset()之類的功能，比如第一段代碼就可以改寫成：

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

而綁定事件也可以一并寫進(jìn)去，比如帶有簡寫（即.click()）調(diào)用的click就可以這樣寫：

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

當(dāng)然也可以寫成：

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

如果為一堆變量名命名發(fā)愁，也可以完全不用變量，變成：

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

看起來有沒有比苦逼的字符串拼接清爽許多呢？

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84614.html

相關(guān)文章

  • 2017-08-03 前端日報

    摘要：前端日報精選專題之通用遍歷方法的實(shí)現(xiàn)深入了解的子組件上最流行的項(xiàng)目再聊移動端頁面的適配譯盒子模型實(shí)踐教程中文全棧第天數(shù)據(jù)驅(qū)動龍?jiān)迫珬Ｗg年開發(fā)趨勢瘋狂的技術(shù)宅在翻譯譯閉包并不神秘前端心得拼多多前端筆試個人文章容器技術(shù)方 2017-08-03 前端日報 精選 JavaScript專題之jQuery通用遍歷方法each的實(shí)現(xiàn)深入了解React的子組件GitHub上最流行的Top 10 Jav...

    gecko23 評論0 收藏0

  • 【永久開源】layuimini，最簡潔、清爽、易用的layui后臺框架模板。保證一用就會愛上它。

    摘要：后臺模板項(xiàng)目介紹最簡潔清爽易用的后臺框架模板。項(xiàng)目會不定時進(jìn)行更新，建議和一份，另外有問題請加群。地址定位，可以清楚看到當(dāng)前的地址信息。刷新頁面會保留當(dāng)前的窗口，并且會定位當(dāng)前窗口對應(yīng)左側(cè)菜單欄。移動端的友好支持。 layuimini后臺模板 項(xiàng)目介紹 最簡潔、清爽、易用的layui后臺框架模板。 項(xiàng)目會不定時進(jìn)行更新，建議star和fork一份，另外有問題請加QQ群：76382252...

    Karrdy 評論0 收藏0

  • 【永久開源】layuimini，最簡潔、清爽、易用的layui后臺框架模板。保證一用就會愛上它。

    摘要：后臺模板項(xiàng)目介紹最簡潔清爽易用的后臺框架模板。項(xiàng)目會不定時進(jìn)行更新，建議和一份，另外有問題請加群。地址定位，可以清楚看到當(dāng)前的地址信息。刷新頁面會保留當(dāng)前的窗口，并且會定位當(dāng)前窗口對應(yīng)左側(cè)菜單欄。移動端的友好支持。 layuimini后臺模板 項(xiàng)目介紹 最簡潔、清爽、易用的layui后臺框架模板。 項(xiàng)目會不定時進(jìn)行更新，建議star和fork一份，另外有問題請加QQ群：76382252...

    bingchen 評論0 收藏0

  • 用原生js寫一個"多動癥"的簡歷

    摘要：用原生寫一個多動癥的簡歷預(yù)覽地址源碼地址最近在知乎上看到方應(yīng)杭用寫了一個會動的簡歷，覺得挺好玩的，研究一下其實(shí)現(xiàn)思路，決定試試用原生來實(shí)現(xiàn)。 用原生js寫一個多動癥的簡歷 預(yù)覽地址源碼地址 最近在知乎上看到@方應(yīng)杭用vue寫了一個會動的簡歷，覺得挺好玩的，研究一下其實(shí)現(xiàn)思路，決定試試用原生js來實(shí)現(xiàn)。 showImg(https://segmentfault.com/img/remot...

    Y3G 評論0 收藏0

發(fā)表評論

0條評論

nemo

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<