DOM 是一种与浏览器、平台、语言无关的接口,使用该接口可以访问到网页容器中的标准组件。
解决 Netspace 的 JavaScript 和 Miscrosoft 的 JScript
3.1 DOM 操作的分类
DOM 操作分为 DOM Core(核心)、HTML-DOM 和 CSS-DOM
1. DOM Core
任一支持 DOM 的程序设计语言都可以使用 DOM Core。
2. HTML-DOM
3. CSS-DOM
3.2 jQuery 中的 DOM 操作
3.2.1 查找节点
1. 查找元素节点
2. 查找属性节点
attr(param1 [, param2]): 只有一个参数时获得对应属性值,有两个参数时为设置对应属性值。
3.2.2 创建节点
1. 创建元素节点
$(html)
2. 创建文本节点
3. 创建属性节点
3.2.3 插入节点
方法 | 简述 | 实例 |
---|---|---|
append() | s | s |
appendTo() | 追加到指定元素中 | |
prepend() | s | |
prependTo() | s | |
after() | s | |
insertAfter() | s | |
before() | s | |
insertBefore() | s |
3.2.4 删除节点
1. remove()方法
作用:从 DOM 删除是所有匹配的元素,传入的参数用于根据 jQuery 表达式来筛选元素。
返回:指向删除节点的引用。
2. detach()方法
作用:不会将匹配的元素从 jQuery 对象删除。 所有绑定的事件、附加的数据等都会保存下来。
3. empty()方法
作用:清空元素中的所有后代节点。
3.2.5 复制节点
clone()方法
clone(true) : 复制元素的同时复制元素绑定的事件。
商品拖动功能(将商品加入购物车)用的就是复制节点。
3.2.6 替换节点
1. replaceWith()
2. replaceAll()
替换后需要重新绑定事件
3.2.7 包裹节点
1. wrap()方法
作用:将所有元素进行单独的包裹。
2. wrapAll()方法
作用:将所有匹配的元素用一个元素来包裹。
3. wrapInner()方法
将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。
3.2.8 属性操作
1. 获取属性与设置属性
attr(param) : 获取属性值
arrr(param1, param2): 设置单个属性
attr(jsonData):设置多个属性
2. 删除属性
removeAttr(param)
3.2.9 样式操作
1. 获取样式与设置样式
attr(“class”):获取样式
attr(“class”, param):设置样式, 替换之前的样式
2. 追加样式
addClass(param)
3. 移除样式
removeClass(param)
4. 切换样式
toggleClass(param): 若类名存在则删除它, 不存在则添加它。
附加:toggle(function1, function2): 元素原来显示的,则隐藏他;隐藏的则显示它。
5. 判断是否含有某个样式
hasClass(param) 等价于 is()方法
$("p"),hasClass("my") 等价于 $("p").is(".my")
3.2.10 设置和获取 HTML、文本和值
1. html()
2. text()
JavaScript的 innerText 不能在 Firefox 中运行。
3. val()
3.2.11 遍历节点
1. childdren()
作用:取得匹配元素的子元素集合。
2. next()
作用:取得匹配元素后面紧邻的同辈元素。
3. prev()
作用:取得匹配元素前面紧邻的同辈元素。
4. siblings()
作用:取得匹配元素前后所有的同辈元素。
5. closest(param)
作用:取得最近的匹配元素。
6. parent() 和 parents()的区别
parent() : 返回父级元素。
parents() : 返回祖先元素。
3.2.12 CSS-DOM 操作
css(param) : 获取对应属性值。
css(param1, param2) : 设置单个属性。
css(jsonData) : 设置多个属性。若设置属性的值时不带引号,则需要采用驼峰式写法。如
$("p").css({fontSize : "20px", backgroundColor : "#fff"});
css()获取的高度值与样式的设置有关, 而 height()获取的高度值是样式在页面的实际高度, 与样式设置无关, 并且不带单位。
1. offset()
作用:获取元素在当前视窗的相对偏移, 返回对象包括两个属性 top 和 left, 它只对可见元素有效。
2. position()
作用:获取元素相对于最近的一个 position 样式属性设置为 relative 或 absolute 的祖父节点的相对位移, 返回对象包括两个属性 top 和 left。
3. scrollTop()方法和scrollLeft()方法
作用:获取元素的滚动条距顶端的距离和距左侧的距离。
附加:这两个方法可以指定一个参数, 控制元素的滚动条滚动到指定的位置。