jq基礎(chǔ)入門

這是學(xué)習(xí)jq基礎(chǔ)的一些內(nèi)容整理

創(chuàng)建元素
$("<div></div>");

這種方法創(chuàng)建的元素,是不存在頁面中的,需要另外添加到頁面中

節(jié)點的移動
  1. 在子節(jié)點最后插入
$("#box").append($box2);
//插入已經(jīng)存在的盒子
$("#box").append("<div></div>");
//在插入的過程中創(chuàng)建
  1. 在子節(jié)點最前插入
$("#box").prepend($box2);
//把box2放到box內(nèi)部最前邊
  1. 在同級元素的前面插入節(jié)點
$("#box").before($box2);
//把節(jié)點$box2放在$box的同級元素中的最前
  1. 在所有同級元素的最后插入節(jié)點
$("#box").after($box2);
  1. 由于jq具有隱式迭代特性,可以同時將一個節(jié)點添加到多個節(jié)點,此時注意不要寫id
<p id="p"><p>
<div></div>
<div></div>
<div></div>
<div></div>
$("div").append($("#p"));
  1. appendTo和prependTo

  2. appendTo剛好和append相反

//將text放到box中最后
$("#box").append($("text"));
$("text").append($("#box"));
  1. prependTo()和prepend()完全相反
//把text節(jié)點放在box中的最前
$("#text").prependTo($("#box"));
  1. html方法

和js中的innerHTML一樣

$("#box").html("<div></div>");
  1. 節(jié)點的刪除方式
  2. empty(); 可以完全清除內(nèi)部所有東西
$("#box").empty();
  1. remove();自殺
$("#box").remove();
  1. 設(shè)置html內(nèi)容是空
$("#box").html("")
  1. 克隆節(jié)點
//clone()用于克隆節(jié)點
//如果傳入的值是false 是淺復(fù)制,只能復(fù)制標簽內(nèi)容 ,不能復(fù)制事件
$("#box").clone(false)
//如果傳入的值是true 表示是深復(fù)制 不僅復(fù)制標簽內(nèi)容,還能復(fù)制事件
$("#box").clone(true);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 dom也就是文檔對象模型,是針對HTML和XML的一個api,描繪了一個層次化的節(jié)點樹。雖然瀏覽器原生給我們...
    謙龍閱讀 2,460評論 0 1
  • 第1章 簡介 第2章 DOM節(jié)點的創(chuàng)建 2-1 DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲...
    mo默22閱讀 932評論 0 8
  • DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲取DOM節(jié)點,從而進行一系列的DOM操作。但實際上...
    阿r阿r閱讀 1,076評論 0 9
  • 似乎有這么一個普遍的現(xiàn)象,就是做家長的總喜歡為子女設(shè)計未來。你長大了該做什么,該成為什么樣的人,不要...
    慕敖閱讀 1,051評論 0 1
  • 出門不空手 2011-05-13 16:24 閱讀(26)評論(5) 這幾天每天上午出去活動一次,我已養(yǎng)成了出門不...
    零星往事閱讀 274評論 0 0

友情鏈接更多精彩內(nèi)容