jQuery笔记2 常用DOM方法记录

查找节点

获取页面中的某个指定节点

//获取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 = $("
");

//第二种是简写，注意标签的大小写
var $li_2 = $("
");

//2、利用append()方法将这两个元素加入到指定的元素下

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

创建文本节点

很多时候元素节点和文本节点可以同时创建，然后加入到指定的元素下：

//1、创建两个li新元素：下面是创建元素的两个形式

//第一种是直接将标签写完整，包括前半部分和后半部分
var $li_1 = $("
ABCDE
");

//这个同时支持html标签，类似js的innerHTML方法
var $li_2 = $("
我是一个段落
");

//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();

复制节点

    

        
AAA
        
BBB
        
CCC
        
DDD
        
EEE
    
    
    

替换节点

    

        
AAA
        
BBB
        
CCC
        
DDD
        
EEE
    
    
    

出来的结果如下：

可见，这个方法会把指定节点的格式一起替换掉，所以如果不是替换单纯的文本内容，请把html标签页加上！