jQuery中的DOM操作
Posted TaylorApril
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中的DOM操作相关的知识，希望对你有一定的参考价值。
一、DOM的概念
DOM ( Document Object Model ) 文档对象模型。根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松的访问页面中所有标准组件。
二、DOM操作的分类
1.DOM Core (核心)
定义了一套标准的针对任何结构化文档的对象，包括html、XHTML和XML
例如javascript中的getELementById()、getElementByTagName()、getAttribute()、setAttribute()
2.HTML-DOＭ
定义了一套标准的针对XML文档的对象
例如.src()等
3.CSS-DOM
定义了一套标准的针对XHTML文档的对象
例如.style.color()等
三、jQuery中的DOM操作
01.查找节点
元素节点：构成了DOM的基础。文档结构中，<html>是根元素，代表整个文档，其他的还有<head>,<body><ul>,<li>等等。元素节点之间可以相互包含(当然遵循一定的规则)
属性节点：元素都可以包含一些属性，属性的作用是对元素做出更具体的描述，比如id,name之类的。
查找元素节点
查找属性节点
02.创建节点
创建元素节点
var $li = $("<li></li>"); //创建一个<li>元素；注意事项一
$("ul").append($li); //添加到<ul>节点中去；注意事项二
注意事项一：创建单个元素时，要注意闭合回路和使用标准的XHTML格式。
注意事项二：动态创建的新元素节点不会自动添加到文档中去，而是需要使用其他方式将其插入到文档中，如append
创建文本节点
var $li = $("<li>雪梨</li>"); //创建一个<li>元素和“雪梨”文本节点；
$("ul").append($li); //添加到<ul>节点中去；
创建属性节点
var $li = $("<li title="雪梨">雪梨</li>"); //创建一个<li>元素、“雪梨”文本节点和“title”属性节点；注意事项三
$("ul").append($li); //添加到<ul>节点中去；
注意事项三：是否创建属性节点的区别在于虽然网页显示一致，但是查看源码创建了属性节点的代码会有title这个属性节点
03.插入节点
append
<p>我想说:</P> //HTML代码
$("p").append("<b>你好</b>"); //jquery代码
<p>我想说：</b>你好<b></p> //结果
appendTo
<p>我想说:</P> //HTML代码
$("<b>你好</b>").appendTo("p"); //jquery代码
<p>我想说：</b>你好<b></p> //结果
<p></p>与<b></b>结果<p><b></b></p>
append()与appendTo():想匹配的元素后置内容
prepend()与prependTo():向匹配的元素前置内容
<p></p>与<b></b>结果<p></p><b></b>
after()与insertAfter()：向匹配的元素之后插入内容内容
before()与insertBefore()：在匹配的元素之前插入内容
04.删除节点
|
|
remove() |
detach() |
empty() |
|
作用原理 |
节点包含的所有后代节点将同时被删除 |
同remove(),但不会把匹配的元素从jQuery对象删除 |
并非删除节点而是清空元素中所有后代节点 |
|
删后事件及数据 |
不能 |
能 |
- |
|
删后元素本身恢复 |
能 |
能 |
能 |
05.复制节点
clone():
$("ul li").click(function(){
$(this).clone().appendTo("ul"); //复制当前单击的节点，并将它追加到<ul>元素中，但新元素布局有原来的事件
})
clone(ture):
$("ul li").click(function(){
$(this).clone(ture).appendTo("ul"); //复制当前单击的节点，并将它追加到<ul>元素中,同时新元素具有以前的事件
})
06.替换节点
replaceWith()与replaceAll()
$("p").replaceWith("<strong>不喜欢的水果</strong>"); //replaceAith()
$("<strong>不喜欢的水果</strong>").replaceAll("p"); //replaceAll()
//替换前元素已经绑定了时间，替换后元素失去绑定的事件
07.包裹节点
08.属性操作
(1) 获取和设置属性
单个属性
$("p").attr("title","your title"); //将title换成your title
多个属性
$("p").attr("title":"your title", "name":"test"); //将title换成your title，name 换成test
既能设置属性的值，又能获取元素的值：attr(),html(),text(),heigth(),width(),val(),css()
(2) 删除属性
removeAttr()
jQuery1.6以后 新增了prop(),removeProp()
09.样式操作
(1) 获取样式和设置样式
(2) 追加样式
|
方法 |
aadClass() |
attr() |
|
用途 |
追加样式 |
设置样式 |
|
对同一个网页元素操作 |
<p>test</p> |
<p>test</p> |
|
第一次使用方法 |
$(“p”).aadClass(“high”); |
$(“p”).attr(“class”,”high”); |
|
第一次结果 |
<p class=”high”>test</p> |
<p class=”high”>test</p> |
|
再次使用方法 |
$(“p”).aadClass(“another”); |
$(“p”).attr(“class”,” another”); |
|
最终结果 |
<p class=”high another”>test</p> |
<p class=”another”>test</p> |
(3) 移除样式
$("p").removeClass("high"); //移除class中的high
$("p").removeClass("high another"); //移除class中的high another
$("p").removeClass(); //移除class中的全部值
(4) 切换样式
$Btn.toggle(function(){ //点击切换隐藏显示
//显示的元素
},function(){
//隐藏的元素
})
$("p").toggle("another") //点击切换class有无another
(5) 判断是否含有某个样式
$("p").hasClass("another"); //判断p元素是否含有为another的class
10.设置和获取HTML、文本和值
html() :只能用于XHTML文档
val() ：还可以使select、checkbox、radio相应的选项被选中
<select id="sel">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="checbox" value="v1"/>1
<input type="checbox" value="v2"/>2
<input type="checbox" value="v3"/>3
<input type="checbox" value="v4"/>4
<input type="checbox" value="v5"/>5
<input type="radio" value="r1"/>1
<input type="radio" value="r2"/>2
$("#sel").val("2"); //改变默认选项
$("#sel").val(["2","3"]); //使2,3被选中
$(":checkbox").val(["v2","v4"]); //2,4被选中
$(":radio").val(["r2"]); //2被选中
text()：HTML、XML有效
11.遍历节点
children()：只找自己下一层的元素
closest()：向上找一个
parent()：向上找一个，不包含自身
parents()：向上找到找不到为止
12.CSS-DOM操作
以上是关于jQuery中的DOM操作的主要内容，如果未能解决你的问题，请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段