jQuery中的DOM操作
一、DOM的概念
DOM ( Document Object Model ) 文档对象模型。根据W3C DOM规范,DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松的访问页面中所有标准组件。
二、DOM操作的分类
1.DOM Core (核心)
定义了一套标准的针对任何结构化文档的对象,包括HTML、XHTML和XML
例如JavaScript中的getELementById()、getElementByTagName()、getAttribute()、setAttribute()
2.HTML-DOM
定义了一套标准的针对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操作