jQuery DOM操作

博前“废话”

由于这两天太忙了，所以这篇总结搁置了两天，现在把它补上。之所以要补上，是因为DOM操作太重要了，不会DOM操作怎敢说自己是java程序员。OK，现在总结一下DOM操作。

什么是DOM？

DOM：document object model ，即文档对象模型。它是一种与浏览器、平台、语言无关的接口。使用DOM可以访问页面上所有的标准组件。

DOM操作分为哪几类？

DOM操作虽与语言无关，但分为如下几类：

1. 标准DOM：可以处理任何一种用标记语言编写出来的文档，而不仅限于网页的处理，所以它并非JavaScript专属。
2. HTML DOM：当使用JavaScript和DOM为HTML文件编写脚本时，提供了许多专属于HTML-DOM的属性。
3. CSS DOM：对于CSS操作，在JavaScript中，CSS DOM主要用于获取和设置style对象的各种属性。

由于现在使用的jQuery，所以这里是使用jQuery的操作，它能对所以组件进行操作。主要的操作有：设置元素内容、元素属性操作、元素样式操作以及DOM节点操作。

设置元素内容

在常规的DOM元素中，

元素类型	获取内容	设置内容	说明
常规元素	$(‘#myId’).html()	$(‘#myId’).html(‘<p>添加的html</p>‘)	获取id为myId的组件的html内容、设置id为myId的组件的html内容
常规元素	$(‘#myId’).text()	$(‘#myId’).text(‘添加的text’)	获取id为myId的组件的文本内容、设置id为myId的组件的文本内容
表单元素	$("input").val()|$("input").val(["check1","check2", "radio1" ]); 或$(‘input’).val(‘www.baidu.com’);	获取表单内容、设置表单内容

注：追加内容时：$("#myId").text($("#myId").text()+"追加的内容"); $("input").val($("input").val()+"追加的内容");

元素属性操作

对元素属性来说，可以进行增删改查。下面就总结了元素属性的四种操作。

操作方式	规则	说明
查询	$(‘div’).attr(‘title’)	获取属性名为title的div标签的内容
修改	$(‘div’).attr(‘title’,’修改的内容’)	修改属性名为title的div标签的内容
添加	$(‘div’).attr(‘title’, $(‘div’).attr(‘title’)+’添加的内容’)	添加属性名为title的div标签的内容
删除	$(‘div’).removeAttr(‘title’)	删除属性名为title的div标签的内容

元素样式操作

对于样式操作，也存在增删改查四种操作，

获取CSS样式

获取单个元素行内CSS样式	$(‘div’).css(‘color’); 获取div标签样式颜色
获取多个元素行内CSS样式	$(‘div’).css(‘color’,’height’,’width’); 获取div标签样式颜色、高度、宽度

设置样式

设置单个元素行内CSS样式	$(‘div’).css(‘color’:’red’); 设置div标签样式颜色为红色
设置多个元素行内CSS样式	$(‘div’).css({‘color’:’red’,’height’:’20px’,’width’:’20px’}); 设置div标签样式颜色、高度、宽度

添加样式

给标签元素添加一个CSS样式	$(‘div’).addClass(‘red’); div标签添加一个CSS样式类
给标签元素添加多个CSS样式	$(‘div’).addClass(‘red bg’); div标签添加多个CSS样式类

删除样式

将标签元素删除一个CSS样式	$(‘div’).removeClass(‘red’); div标签删除一个CSS样式类
将标签元素删除多个CSS样式	$(‘div’).removeClass(‘red bg’); div标签删除多个CSS样式类

样式切换

$("div").click(function(){//当点击后触发
$(this).toggleClass("red size");//一个或多个样式均可
})

特殊样式

jQuery不只是提供了CSS的核心操作，还封装了一些特殊功能的CSS操作方法

方式	说明	返回类型
$(‘div’).width()	获取元素的宽度,不包含内外边距以及边框	number
$(‘div’).width(200)	设置元素的宽度，直接传数值，它会默认添加单位：px	无
$(‘div’).height()	获取元素的高度	number
$(‘div’).width(300)	设置元素的高度，直接传数值，它会默认添加单位：px	无
$(‘div’).innerWidth();	获取宽度，包含内边距padding	number
$(‘div’).outerWidth();	获取宽度，包含内边距padding+边框border	numer
$(‘div’).innerWidth();	获取宽度，包含内边距padding+边框border+外边距margin	number

DOM节点操作

对于DOM操作来说，节点的操作是至关重要的。当然我们还是可以对它进行增删改查处理。

创建节点

创建节点的目的主要是为了使页面更加的智能化，之所以这样说，因为我们可以动态的为页面添加一个元素标签。添加之前我们需要做的是：创建节点。
var myNode = $("<div id="myNodeId">我的节点</div>") 创建一个id为myNodeId的div节点

插入节点

节点的插入分为内部插入和外部插入，即在指定的标签类插入或标签之后插入。

内部插入

插入节点方法	描述	示例
append(content)	向指定元素的内部插入节点content	$("div").append("<em>节点</em>‘)
append(function(index,html){})	使用匿名函数向指定元素的内部插入节点content	$(‘div’).append(function (index, html) { return "<em>节点</em>";});
appendTo(content)	将指定元素向指定元素的内部插入节点content	$("em").appendTo("div");
prepend(content)	向指定元素content 内部的前面插入节点content	$("div").prepend("<em>节点</em>");
prepend(function(index,html){})	使用匿名函数向指定元素内部的前面插入节点	$(‘div’).prependTo(function (index, html) { return "<em>节点</em>";});
prependTo(content)	将指定元素移入到指定元素content 内部前面	$("em").prependTo("div");

外部插入

插入节点方法	描述	示例
after(content)	向指定元素的外部后面插入节点content	$("div").after("<em>节点</em>‘)
after(function(index,html){})	使用匿名函数向指定元素的外部后面插入节点	$(‘div’).after(function (index, html) { return "<em>节点</em>";});
before(content)	向指定元素的外部前面插入节点content	$("em").before("div");
before(function(index,html){})	使用匿名函数向指定元素的外部前面插入节点	$(‘div’).before(function (index, html) { return "<em>节点</em>";});
insertAfter(content)	将指定节点移到指定元素content 外部的后面	$("div").insertAfter("<em>节点</em>");
insertBefore(content)	将指定节点移到指定元素content 外部的前面	$("div").insertBefore("<em>节点</em>");

删除节点

删除节点：

删除方法	说明
$("div").remove();	直接将所以div元素删除，不保留事件的行为
$("div").remove("#myId");	只将id为myId的div元素删除。
$("div").detach();	直接将所以div元素删除，但保留事件的行为

其他节点操作

方法	说明
$(‘div’).empty()	清空节点，删除节点里的内容
$(‘div’).replaceWith(‘其他节点’)	替换节点，删除节点里的内容
(′div′).append($("div").append($(‘其他节点’).clone(true))	复制节点，将其他节点复制到div中，其中true:将节点的事件处理也一同复制，反之则不复制
$(‘div’).wrap(html)	向div元素包裹一层html代码
$(‘div’).unwrap()	移除一层指定元素包裹的内容

总结

这边总结拖了好几天了，今天终于搞完了。其实使用jQuery进行DOM操作其实并不难，无非就是增删改查。