查找节点
获取页面中的某个指定节点
//获取ul中的第一个li并输出
var $li = $("ul li:eq(0)");
var li_txt = $li.text();
alert(li_txt);
attr方法
attr方法是用来获取节点的某个属性的,类似于js的getAttribute()。
//获取ul中的第一个li的title属性,并输出
var $li = $("ul li:eq(0)");
var li_txt = $li.attr("title");
alert(li_txt);
创建元素节点
例如创建两个li元素节点,并把这两个节点放置在ul元素下只需要两个步骤。
1、创建两个li新元素
2、将两个元素插入到文档中的指定位置
//1、创建两个li新元素:下面是创建元素的两个形式
//第一种是直接将标签写完整,包括前半部分和后半部分
var $li_1 = $("<li></li>");
//第二种是简写,注意标签的大小写
var $li_2 = $("<li/>");
//2、利用append()方法将这两个元素加入到指定的元素下
$("ul").append($li_1);
$("ul").append($li_2);
创建文本节点
很多时候元素节点和文本节点可以同时创建,然后加入到指定的元素下:
//1、创建两个li新元素:下面是创建元素的两个形式
//第一种是直接将标签写完整,包括前半部分和后半部分
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);
其他插入节点的方法
除append()外,还有很多种插入的方法:
使用这些方法,可以比较灵活的对页面的元素进行顺序的调整:
删除节点
remove()方法
remove()可以删除选中的元素:
var $il = $("ul li:gt(5)")remove();
empty()方法
empty()并不是删除节点,而是清空节点,能清空元素中的所有后代节点:可以用做清空文本内容
var $li = $("ul li:gt(1)").empty();
复制节点
<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是复制出来的节点继承这个click事件,false则不继承
$(this).clone(false).appendTo("body");
})
</script>
替换节点
<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>
出来的结果如下:
可见,这个方法会把指定节点的格式一起替换掉,所以如果不是替换单纯的文本内容,请把html标签页加上!