jQuery DOM操作

来源：互联网发布：内存价格暴涨知乎编辑：程序博客网时间：2024/05/30 04:31

博前“废话”

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

什么是DOM？

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

DOM操作分为哪几类？

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

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

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

设置元素内容

在常规的DOM元素中，

元素类型获取内容设置内容说明常规元素 $(‘#myId’).html() $(‘#myId’).html(‘添加的html‘) 获取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('节点‘) append(function(index,html){}) 使用匿名函数向指定元素的内部插入节点content $(‘div’).append(function (index, html) { return '节点';}); appendTo(content) 将指定元素向指定元素的内部插入节点content $('em').appendTo('div'); prepend(content) 向指定元素content 内部的前面插入节点content $('div').prepend('节点'); prepend(function(index,html){}) 使用匿名函数向指定元素内部的前面插入节点 $(‘div’).prependTo(function (index, html) { return '节点';}); prependTo(content) 将指定元素移入到指定元素content 内部前面 $('em').prependTo('div');

外部插入

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

删除节点

删除节点：

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

其他节点操作

方法说明 $(‘div’).empty() 清空节点，删除节点里的内容 $(‘div’).replaceWith(‘其他节点’) 替换节点，删除节点里的内容

(′div′).append((‘其他节点’).clone(true)) 复制节点，将其他节点复制到div中，其中true:将节点的事件处理也一同复制，反之则不复制 $(‘div’).wrap(html) 向div元素包裹一层html代码 $(‘div’).unwrap() 移除一层指定元素包裹的内容

总结

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

0 0