jQuery之三（jQuery中的DOM操作）

（一）DOM操作分类

1)DOM Core:可处理任何使用标记语言编写的文档。如document.getElementsByTagName("form")获取表单对象, element.getAttribute("src")获取元素的src属性值。

2)HTML-DOM:只能处理web文档。如 document.forms , element.src

3)（与前一个颠倒CSS-DOM:主要用于获取和设置元素的style中的各种属性。如element.style.color="red"

（二）节点操作

1. 查找节点： 如 var $li = $("ul li:eq(1)");//获取对象    var fial = $li.attr("title");//获取其title属性的值

2. 创建节点：如 var $li = $("<li></li>");//创建一个li元素 $("ul").append($li);//插入到ul节点中

3. 插入节点

append()向每个匹配的元素内部追加, appendTo()把匹配的元素追加到指定元素（与前一个颠倒）[也可用来移动元素，先从原来位置删除，再追加到另一个上去], prepend()向每个匹配的元素内部前置内容, prependTo()（与前一个颠倒）, after()向每个匹配的元素后面追加, insertAfter()（与前一个颠倒）, before()在每个匹配的元素前面插入, insertBefore()（与前一个颠倒）

4. 删除节点　　

1)remove()、remove(带参数):如$(ul li:eq(1)).remove(); 、$(ul li).remove("li[title!="菠萝"]");

2)detach()与remove()用法一样，但是不会从jQuery对象中删除该元素，其所有绑定事件和附加数据会保留下来。

3)empty()清空元素里面的内容

5. 复制节点：如 $li.clone().appendTo("ul"); clone(true)复制元素的同时复制其所绑定事件。

6. 替换节点：replaceWith() , replaceAll()与前一个颠倒，所替换元素的绑定事件也消失了。

7. 包裹节点:对需要在文档中插入额外的结构化标记很有用。 wrap()

（三）属性操作

1. 获取属性和设置属性:atrr( )获取、attr( , )设置

注：类似即可获取又可设置的方法有html(),text(),height(),width(),val(),css()等。

2. 删除属性：removeAtrr()

（四）样式操作

1. 获取和设置

2. 追加: addClass()

注：若一个元素有多个class值，则合并其样式；若不同class设定了同一属性，则后者覆盖前者。

3. 移除：removeClass(),不带参数时将移除所有class值　

4. 切换样式：toggle(),toggleClass()//重复切换类名

5. 判断是否含有某个样式：hasClass()

（五）设置和获取html、文本和值

1. html()读取或设置某个元素中的html内容，可用于xhtml文档，不能用于xml文档。

2. text()读取或设置某个元素中的文本内容，对html和xml文档均有效。

3. val()读取或设置某个元素的值

1)若元素为多选，则返回一个包含所有选择值的数组。

2)可通过val()方法改变下拉列表、复选框、单选框的选中值。

$(":checkbox").val(["check2","check3"]);//以数组形式赋值  == $("[value=check2]:checkbox").attr("checked",true);$("[value=check3]:checkbox").attr("checked",true);

PS. focus()获取焦点 blur失去焦点  defaultValue属性能获取到该表单元素的初始值。

4. 遍历节点

children()子元素而不是后代元素、next()后面紧邻的那个同辈元素、prev()前面紧邻的那个同辈元素、siblings()前后所有同辈元素、closest("li")向自身开始向上级找最近的li元素。 注意区分panrent(),parents()与closest()。

注：这些遍历DOM的方法，都可使用jQuery表达式作为他们的参数来筛选元素。

5. CSS-DOM操作：

可同时设置多个样式：$("p").css("font-size":"30px", back-ground:"#888888"); (推荐用法)== $("p").css(fontSize:"30px", backGround:"#888888");

透明度设置：$("p").css("opacity","0.5");

关于宽高：$("p").css("height"); ~ $("p").height();

6. offset()、position()、scrollTop()、srollLeft()