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

資訊專欄INFORMATION COLUMN

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

nemo / 1401人閱讀

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

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

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

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

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

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

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

看到這里你可能會(huì)問，如果前邊用了單標(biāo)簽，那里邊這堆class啊還有內(nèi)容啥的該咋辦？答案就在第二個(gè)參數(shù)attributes上。attributes參數(shù)是一個(gè)對(duì)象，里邊放的是第一個(gè)參數(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)制加引號(hào)
    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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84614.html

相關(guān)文章

  • 2017-08-03 前端日?qǐng)?bào)

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

    gecko23 評(píng)論0 收藏0

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

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

    Karrdy 評(píng)論0 收藏0

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

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

    bingchen 評(píng)論0 收藏0

  • 用原生js寫一個(gè)"多動(dòng)癥"的簡歷

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

    Y3G 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

nemo

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<