jquery学习3：DOM操作

1、DOM操作分类

1）DOM Core

不属于Jquery，任何一种支持DOM的程序语言都可以使用

2）HTML-DOM

提供了一些更简明的记号来描述各种HTML元素属性

3）CSS-DOM

针对CSS操作，主要用来获取设置style对象的各种属性

2、jquery中的DOM操作

1）查找节点

1.查找元素节点
alert($(ul li:eq(1)).text())//获取元素节点，打印文本内容
2.查找属性节点
$("p").attr("title")

2）创建节点

1.创建元素节点
var $li1 = $("<li></li>");//创建1个<li>元素
$("ul").append($li1);//添加到<ul>节点中
2.创建文本节点
var $li1 = $("<li>香蕉</li>");//创建1个<li>元素，包括文本节点
$("ul").append($li1);//添加到<ul>节点中
3.创建属性节点
var $li1 = $("<li title='香蕉'>香蕉</li>");//创建1个<li>元素，包括文本节点和属性
$("ul").append($li1);//添加到<ul>节点中

3）插入节点

插入节点的方法：

方法	说明
append()	向每个匹配的元素内部追加内容
appendTo()	将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中
prepend()	向每个匹配的元素内部前置内容
prependTo()	将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作,即不是将B前置到A中，而是将A前置到B中
after()	在每个匹配的元素之后插入内容
insertAfter()	将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是将B插入到A后面，而是将A插入到B后面
before()	在每个匹配的元素之前插入内容。
insertBefore	将所有匹配的元素插入到指定的元素的前面。实际上，使用该方法是颠倒了常规的$(A).before(B)的操作，即不是将B插入到A前面,而是将A插入到B前面

$parent.append($li1);

4）删除节点

1.remove()方法
$("ul li:eq(1)").remove();//获取第2个li元素后，从网页中删除
$("rl li").remove("li[title!=菠萝]");//将Li元素中属性title不等于菠萝的元素删除
2.detach()方法
用他删除后，在添加回来绑定的事件还在，remove删除了就没了
3.empty()方法
$("ul li:eq(1)").empty();//获取第2个li元素节点后，清空元素里的内容

5）复制节点

$(this).clone().appendTo("ul");//复制当前节点，追加到ul元素中
$(this).clone(true).appendTo("ul");//复制当前节点，追加到ul元素中,同时复制绑定的事件

6）替换节点

$("p").replaceWith("<strong>你的水果</strong>");
$("<strong>你的水果</strong>").replaceAll("p");

7）包裹节点

$("strong").wrap("<b></b>");//用b标签报strong元素包裹起来，将选择的元素单个包装
$("strong").wrapAll("<b></b>");//用b标签报strong元素包裹起来，将选择的元素一起包装
$("strong").wrapInner("<b></b>");//用b标签报strong元素的子内容包裹起来，将选择的元素单个包装

8）属性操作

1.获取属性和设置属性
$para.attr("title");//获取节点属性
$("p").attr("title","your title");//设置单个属性值
$("p").attr("title":"your title","name":"your name");//设置多个属性值
2.删除属性
$("p").removeAttr("title");//删除p元素的属性title

9）样式操作

1.获取样式和设置样式
$("p").attr("class");//获取p元素的class
$("p").attr("class","hight");//设置class为high
2.追加样式
$("p").addClass("another");//p元素追加another类
3.移除样式
$("p").removeClass("high");//移除值为high的class
$("p").removeClass("high high2");//移除多个的class
$("p").removeClass();//移所有
4.切换样式
$("p").toggleClass("another");//重复添加去除这个类
5.判断是否含有某个样式
hasClass(),返回true就是有
$("p").hasClass("another");

10）设置和获取HTML,文本和值

<p title=""> <strong>hhaa</strong></p>

1.html()方法
$("p").html();//获取p元素的HTML代码，<strong>hhaa</strong>
$("p").html("<strong>hhaa</strong>");//设置p元素的HTML代码为<strong>hhaa</strong>
2.text()方法
$("p").text();//获取p的文本内容
3.val()方法
$(this).val("")//设置文本框的值为空

11）遍历节点

1.children()方法
用于取得匹配元素的子元素集合
$("ul").children();
for(var i=0,len=$ul.length;i<len;i++){
    alert($ul[i].innerHTML)
}
2.next()方法
用于取得匹配元素后面紧邻的同辈元素
3.prev()方法
获取前面元素
4.siblings()方法
取同辈全部元素
5.closest()
用于匹配最近的元素。向上匹配
$("e").closest("li");
6.parent(),parents()与closedt()的区别
parent(),获取集合中每个匹配元素的父级元素，parents获取每个匹配元素的祖先元素

12）CSS-DOM操作

$("p").css("color");//获取p元素的样式颜色
$("p").css("color","red");//设置p元素的样式颜色
$("p").css("color":"red","backgroundColor":"#888888");//设置p元素的多个样式颜色
$("p").height(100);//设置高度为100px
$("p").height("10em");//设置高度为100em
1.offset()方法
获取元素在当前视窗的相对偏移
var offset = $("p").offset();
offset.left;//获取左偏移
offset.top;
2.position()方法
获取元素相对于最近一个Position样式属性设置我relative或absolute的祖先节点相对偏移
var offset = $("p").position();
offset.left;//获取左偏移
offset.top;
3.scrollTop()方法和scrollLeft()方法
分别获取元素的滚动条距顶端的距离和距左侧的距离。
$p.srollTop();//获取
$p.srollTop(100);//设置