国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

jQTips · 動態添加元素的清爽寫法

nemo / 1392人閱讀

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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84614.html

相關文章

  • 2017-08-03 前端日報

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

    gecko23 評論0 收藏0

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

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

    Karrdy 評論0 收藏0

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

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

    bingchen 評論0 收藏0

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

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

    Y3G 評論0 收藏0

發表評論

0條評論

nemo

男|高級講師

TA的文章

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