jQuery筆記2 常用DOM方法記錄

查找節(jié)點

獲取頁面中的某個指定節(jié)點

//獲取ul中的第一個li并輸出
var $li = $("ul li:eq(0)");
var li_txt = $li.text();
alert(li_txt);

attr方法

attr方法是用來獲取節(jié)點的某個屬性的,類似于js的getAttribute()。

//獲取ul中的第一個li的title屬性善涨,并輸出
var $li = $("ul li:eq(0)");
var li_txt = $li.attr("title");
alert(li_txt);

創(chuàng)建元素節(jié)點

例如創(chuàng)建兩個li元素節(jié)點,并把這兩個節(jié)點放置在ul元素下只需要兩個步驟。
1让禀、創(chuàng)建兩個li新元素
2、將兩個元素插入到文檔中的指定位置

//1陨界、創(chuàng)建兩個li新元素:下面是創(chuàng)建元素的兩個形式

//第一種是直接將標簽寫完整巡揍,包括前半部分和后半部分
var $li_1 = $("<li></li>");

//第二種是簡寫,注意標簽的大小寫
var $li_2 = $("<li/>");

//2菌瘪、利用append()方法將這兩個元素加入到指定的元素下

$("ul").append($li_1);
$("ul").append($li_2);

創(chuàng)建文本節(jié)點

很多時候元素節(jié)點和文本節(jié)點可以同時創(chuàng)建腮敌,然后加入到指定的元素下:

//1阱当、創(chuàng)建兩個li新元素:下面是創(chuàng)建元素的兩個形式

//第一種是直接將標簽寫完整,包括前半部分和后半部分
var $li_1 = $("<li>ABCDE</li>");

//這個同時支持html標簽糜工,類似js的innerHTML方法
var $li_2 = $("<li><p title='我是一個段落'>我是一個段落</p></li>");

//2弊添、利用append()方法將這兩個元素加入到指定的元素下

$("ul").append($li_1);
$("ul").append($li_2);

其他插入節(jié)點的方法

除append()外,還有很多種插入的方法:



使用這些方法捌木,可以比較靈活的對頁面的元素進行順序的調(diào)整:




刪除節(jié)點

remove()方法
remove()可以刪除選中的元素:

var $il = $("ul li:gt(5)")remove();

empty()方法
empty()并不是刪除節(jié)點油坝,而是清空節(jié)點,能清空元素中的所有后代節(jié)點:可以用做清空文本內(nèi)容

var $li = $("ul li:gt(1)").empty();

復制節(jié)點

    <ul>
        <li>AAA</li>
        <li>BBB</li>
        <li>CCC</li>
        <li>DDD</li>
        <li>EEE</li>
    </ul>
    
    <script type="text/javascript">
        $("ul li").click(function(){
            //clone()有兩個值true和false刨裆,true是復制出來的節(jié)點繼承這個click事件澈圈,false則不繼承
            $(this).clone(false).appendTo("body");
        })
    </script>

替換節(jié)點

    <ul>
        <li>AAA</li>
        <li>BBB</li>
        <li>CCC</li>
        <li>DDD</li>
        <li>EEE</li>
    </ul>
    
    <script type="text/javascript">
        $("ul li:gt(2)").replaceWith("111");
        $("ul li:lt(2)").replaceWith("<p>XXXXX</p>");
    </script>

出來的結(jié)果如下:


可見,這個方法會把指定節(jié)點的格式一起替換掉帆啃,所以如果不是替換單純的文本內(nèi)容瞬女,請把html標簽頁加上!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末链瓦,一起剝皮案震驚了整個濱河市拆魏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌慈俯,老刑警劉巖渤刃,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異贴膘,居然都是意外死亡卖子,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門刑峡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來洋闽,“玉大人,你說我怎么就攤上這事突梦〗刖耍” “怎么了?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵宫患,是天一觀的道長刊懈。 經(jīng)常有香客問我,道長娃闲,這世上最難降的妖魔是什么虚汛? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮皇帮,結(jié)果婚禮上卷哩,老公的妹妹穿的比我還像新娘。我一直安慰自己属拾,他們只是感情好将谊,可當我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布冷溶。 她就那樣靜靜地躺著,像睡著了一般瓢娜。 火紅的嫁衣襯著肌膚如雪挂洛。 梳的紋絲不亂的頭發(fā)上礼预,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天眠砾,我揣著相機與錄音,去河邊找鬼托酸。 笑死褒颈,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的励堡。 我是一名探鬼主播谷丸,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼应结!你這毒婦竟也來了刨疼?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤鹅龄,失蹤者是張志新(化名)和其女友劉穎揩慕,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扮休,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡迎卤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了玷坠。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蜗搔。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖八堡,靈堂內(nèi)的尸體忽然破棺而出樟凄,到底是詐尸還是另有隱情,我是刑警寧澤兄渺,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布缝龄,位于F島的核電站,受9級特大地震影響溶耘,放射性物質(zhì)發(fā)生泄漏二拐。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一凳兵、第九天 我趴在偏房一處隱蔽的房頂上張望百新。 院中可真熱鬧,春花似錦庐扫、人聲如沸饭望。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽铅辞。三九已至厌漂,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間斟珊,已是汗流浹背苇倡。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留囤踩,地道東北人旨椒。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像堵漱,于是被迫代替她去往敵國和親综慎。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 一勤庐、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,354評論 0 44
  • DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲取DOM節(jié)點示惊,從而進行一系列的DOM操作。但實際上...
    阿r阿r閱讀 1,003評論 0 9
  • 第1章 簡介 第2章 DOM節(jié)點的創(chuàng)建 2-1 DOM創(chuàng)建節(jié)點及節(jié)點屬性 通過JavaScript可以很方便的獲...
    mo默22閱讀 800評論 0 8
  • 舊時光記錄: 同事大多到了周五就感覺好輕松愉镰,周末可以好好休息米罚。我是每到周五就感概怎么這么快就周五了,想要時間慢一點...
    蝦蝦說閱讀 325評論 0 0
  • 與說_閱讀 168評論 4 0