jQuery中的DOM操作

三、jQuery中的DOM操作：
3.2.1 查找节点
1. 查找元素节点
var $li=$("ul li:eq(1)");   //获取<ul>里第2个<li>节点
var li_text=$li.text();    // 获取第二个<li>元素节点的文本内容
2. 查找属性节点
var $para=$("p");    //获取<p>节点
var p_text=$para.attr("title"); // 获取<p>元素节点属性title的值
3.2.2 创建节点
1. 创建元素节点
var $create=$("<li></li>");  //创建一个<li>元素
$("ul").append($create);   // 添加到<ul>节点中，使之能在网页中显示
//创建多个节点，可以采用链式写法： $("ul").append($create).append($create1); //同时创建两个节点
2. 创建文本节点
var $ls=$("<li>香蕉</li>");  // 创建一个<li>元素，包括元素节点和文本节点
$("ul").append($ls);    //  添加到<ul>节点中，使之能在网页中显示
// 其实创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法添加到文档中就可以了。
3.  创建属性节点
var $ls=$("<li title='as'>香蕉</li>");  // title='as'就是创建的属性节点
$("ul").append($ls);
3.2.3 插入节点
插入节点的方法：
append() //向每个匹配的元素内部追加内容
appendTo() // 与append()相反，$(A).append(B)的操作，是将B追加到A中，$(A).appendTo(B)是将A追加到B中
prepend() // 向每个匹配的元素内部前置内容 $(A).prepend(B)操作是将B内置到A的前部
prependTo() // 与prepend()相反
after() // 在每个匹配的元素之后插入内容 $(A).after(B)的操作是将B插入到A的后面
insertAfter() // 与after()相反
before() //在每个匹配的元素之前插入内容
insertBefore() // 与before()相反
3.2.4 删除节点
删除节点的方法：
remove()
var $li=$("ul li:eq(1)").remove();// 获取第2个<li>元素节点后，将它从网页中删除
$li.appendTo("ul"); //把刚才删除的节点又重新添加到<ul>元素里
// 以上两句可由此句简化：   $("ul li:eq(1)").appendTo("ul");
$("ul li").remove("li[title!=aa]");  // 将<li>元素中属性title不等于aa的<li>元素删除
detach()
var $li=$("ul li:eq(1)").detach();// 删除元素
$li.appendTo("ul"); // 重新追加元素，发现它之前绑定的事件还在，如果使用remove()方法删除的话，那么它之前绑定的事件将失效
empty()
$("ul li:eq(1)").empty();//获取第二个<li>元素节点后，清空此元素里的内容，注意是元素里
3.2.5 属性操作
1. 获取属性和设置属性
$("p").attr("title"); //获取<p>元素节点属性title的值
$("p").attr("title","dsf"); //设置单个的属性值
$("p").attr({"title":"dsf","name":"test"});//设置多个属性
2. 删除属性
$("p").removeAttr("title");  // 删除<p>元素的属性title
3.2.6 样式操作
$('p').attr("class"); //获取<p>元素的class
$('p').attr("class","high"); //设置<p>元素的class为"high"
$('p').addClass("sddf"); //给元素追加'sddf'类
$('p').removeClass("high"); // 移除<p>元素中值为high的class
$('p').removeClass("high").removeClass("gh"); //删除<p>元素的两个class
$('p').removeClass("high gh");// 删除<p>元素的两个class
$('p').removeClass(); //移除<p>元素的所有class

$('p').toggleClass("df"); // 重复切换类名‘df’
$('p').hasClass("as");  // 判断<p>元素中是否含有'as'的class,等价于$("p").is(".as");
3.2.7 获取文本：
方法：
1. html()
2. text() 对应innerText文本内容
$("p").text();  // 获取值
$("p").text("sfsdfsd"); // 设置值
3. val() 对应value的内容
3.2.8  遍历节点：
1. children（）方法：  用于取得匹配元素的子元素集合，只考虑子元素，不考虑其他后代元素。
$('p').children（）.length //p的所有子元素的个数
2. next()方法：用于取得匹配元素后面紧邻的同辈元素
3. prev()方法： 用于取得匹配元素前面紧邻的同辈元素
4. siblings()方法： 用于取得匹配元素前后所有的同辈元素