查找節(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標簽頁加上!