第二章 jquery的dom操作

三个方面    dom核心，html-dom和css-dom

一。

1.dom core核心

document.getElementsByTagName("form")  获取表单对象

element.getAttribute("src")

2.html_dom

document.forms

emement.src

但是只能用来处理web文档

3.css_dom

针对css的操作。

element.style.color="red"

二。jquery中的dom操作

（1）查找节点

1.元素节点

var $li=$("ul li:eq(1)");//获取ul里第2个li节点

var li_txt=$li.text();//获取文本内容

alert(li_txt);//打印文本内容

2.属性节点   attr（）函数

$("p").attr("title");//p元素节点属性title

（2）创建节点

1.创建元素节点   经常需要动态创建html内容，使文档在浏览器里的呈现效果发生变化

步骤：第一步创建两个li新元素，第二步将这两个新元素插入文档中

$(html)   根据传入的html标记字符串，创建一个dom对象，并将这个dom对象包装秤一个jquery对象后返回。例子：var $li_1=$("<li></li>")     添加的方法使用jquery中的append()方法。

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

注意创建单个元素时，注意闭合标签可以使用$("<p/>")替代$("<p></p>")  

2.创建文本节点

例子：var $li_1=$("<li>香蕉</li>") 

无论代码多复杂都要使用相同的方式来创建

3.创建属性节点

例子：var $li_1=$("<li title='香蕉'>香蕉</li>")；

（3）插入节点

append()

appendTo()追加到指定的元素中  和append相反

prepend()前置内容

prependTo()前置内容到指定的元素中

after()元素之后插入内容

insertAfter()插入到指定元素的后面

before()元素之前插入内容

insertBefore()插入指定元素的前面

以上不仅能将创建的元素插入到文档中，也能对原有的dom元素进行移动

（4）删除节点

1.remove()方法

$("ul li:eq(1)").remove();获取第2个li元素节点后，将它从网页中删除

当某个节点用remove（）方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个纸箱已经被删除的节点的引用，因此可以再以后再使用这些元素。

例子：

var $li=$("ul li:eq(1)").remove();

$li.appendTo("ul");删除后再添加

appendTo()方法可以用来移动元素

例子：$("ul li:eq(1)").appendTo("ul")

先从文档衫删除此元素，然后再将该元素插入得到文档中的指定节点。

例子2：选择性的删除元素

$("ul li").remove("li[title!=菠萝]")；

将li元素中属性title不等于菠萝的li元素删除

2.empty（）方法

并非是删除节点，而是清空节点，他能清空元素中的所有后代节点

$("p").empty()获取p元素节点后，清空此元素里的内容.

 

（5）复制节点

常用的dom操作之一，例如购物车中添加商品就是复制dom节点。

clone（）方法来完成复制节点

例子

$("p").click(function()){

$(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到ul元素中

}

 

clone（true）   复制元素的同时复制元素中所绑定的事件。

（6）替换节点

replaceWith()和replaceAll()

前者是将元素替换成指定的html或者dom元素

$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");

replaceAll（）方法

$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");

（7）包裹节点 

将某个节点用其他标记包裹起来，wrap（）方法

   $("strong").wrap("<b></b>");用b标签把strong元素包裹起来

得到的结果如下

<b><strong title="选择你最喜欢的水果">阿打算发斯蒂芬</strong></b>

1.wrapAll()方法

将所有匹配的元素用一个元素来包裹，不同于wrap（）方法，后者是将所有的元素进行单独的包裹

$("strong").wrapAll("<b></b>")

   <b>

<strong></strong>

<strong></strong>

   </b>

2.wrapinner()方法

将每个匹配元素的子内容包括文本节点用其他结构化的标记包裹起来

$("strong").wrapInner("<b></b>");

代码如下

<strong title="选择你最喜欢的水果"><b>阿打算发斯蒂芬</b></strong>

（8）属性操作

1.获取属性和设置属性

$("p").attr("title")   获取p元素节点属性title

$("p").attr("title","your title");设置单个的属性值

$("p").attr({"title":"your title","name":"test"});设置多个属性。

2.删除属性

removeAttr()方法

$("p").removeAttr("title")

运行后p元素的title属性将删除

（9）样式操作

1.获取和设置样式

$("p").attr("class","high");

设置p元素的class为high   替换原有样式

2.追加样式

addClass（）方法

$("p").addClass("another")

3.移除样式

removeClass（）；

4.切换样式

toggleClass（）方法控制样式上的重复切换。

$("p").toggleClass("another");

5.判断是否会有某个样式

hasClass（）用来判断元素中是否含有某个class，如果有则返回true，否则返回false

$("p").hasClass("another");等价于$("p").is(".another");

（10）设置和获取html，文本和值

1.html（）方法

设置和获取某个元素中的html内容

2.text（）方法

设置和获取某个元素中的文本内容

3.val（）方法

设置和获取元素的值

<input type="text" id="address" value="请输入邮箱地址">

val（）获得的是表单中的value的值

$(this).val()

focus()相当于javascript中的onfocus（）方法

blur（）相当于javascript中的onblur（）方法

 

（11）遍历节点

1.children（）方法

匹配元素的子元素集合   只考虑子元素  不考虑任何后代元素

2.next（）方法

匹配元素后面紧邻的同辈元素

3.prev（）方法

匹配元素前面紧邻的同辈元素

4.siblings（）方法

匹配元素前后所有的同辈元素

5.closest（）方法

最近的匹配元素    ，首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查 找父元素。逐级向上直到找到匹配选择器的元素。

除此之外还有很多遍历节点的方法：如find（）    filter（）    nextAll（）   prevAll（）

parent（）    parents（）

（12）css-dom操作

读取和设置style对象的各种属性。

例子：$("p").css("color");

与attr（）方法一样，css（）方法也可以同时设置多个样式属性

$("p").css({"fontSize":"30px","backgroundColor":"#888888"});

如果属性不带引号 需要驼峰式的写法

$("p").height(100);直接用height计算元素的高度 不带单位

width（）

 

1.offset（）方法 获取元素在当前视窗的相对偏移 只对可见元素有效

包含两个属性即top和left

$("p").offset().left;p元素的左偏移量

2.position（）方法

获取相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移

，与offset（）一样，返回top和left

3.scrollTop（）方法和scrollLeft（）方法

获取元素的滚动条距顶端和左侧的距离