一. DOM(Document Object Modle 的缩写)意思是文档对象模型。根据W3CDOM规范,Dom是一种与浏览器,平台,语言无关的接口,使用该接口可以轻松访问访问页面中所有标准组件。简单说,DOM解决了Netscape的javaScript和Microsoft的Jscript之间的冲突,给予web设计师和开发工程师一套标准的方法,能够轻松获取和操作网页中的数据,脚本和表现分离。
二. DOM操作分类
1. DOM Core(核心)并不专属于JavaScript,任何一种支持DOM程序设计语言都可以使用,不仅限于出来网页,也可以处理任何一种标记语言编写的文档列如XML.
2. HTML-DOM 只能出来web文档
3. CSS-DOM 是针对css的操作,主要作用就是获取和设置style对象的各种属性
三. jQuery中DOM操作
1. 查找元素节点(通过选择来实现)
2. 查找属性节点($(“*”).attr(attributeName: String, value: String):)其中attr()后可以接1个参数属性名)移除某属性可以用removeAttr()函数;
3. 创建元素节点可以使用jQuery的工厂函数$(html)来完成
例如:创建一个li节点
var $li = $(“<li></li>”);//创建
$(“ul”).append($li);//添加到某个ul节点下(在ul下li最后面动态添加)
4. 创建文本节点
var $li = $(“<li>其他分类</li>”);//创建
$(“ul”).append($li); //添加到某个ul节点下(在ul下li最后面动态添加)
5. 创建属性节点(创建属性节点与创建文本节点一样,也是在创建元素节点时一起创建)
6. jQuery中插入节点的几种方法
a) 调用append(要插入的元素)方式实现向每个匹配元素内部追加内容;
b) appendTo() 解释:$(A).appendTo(B)将A追加到B中
c) prepend() 向每个匹配的元素内部前置内容
d) prependTo() 解释$(A).prependTo(B)将A前置到B 中
e) after()在匹配的元素之后插入内容
f) insertAfter() 解释$(A).insertAfter(B) 将A插在B后面
g) before()在匹配的元素之前插入内容
h) insertBefore() 解释$(A).insertBefore(B) 将A插在B前面
i) 注:这些方法除了可以新建节点,而且还可以对Dom中原有元素进行移动操作
7. jQuery删除节点的2中方法
a) remove()删除节点,节点不存在了。该函数返回已被删除节点的引用,还可以继续使用它们,而且可以通过remove(sector)传递参数来选择性删除
b) empty()实质是清空元素里的内容,但是节点还在
8. 复制节点通过clone()例如:实现动态复制一个商品的案例
clone(true)带一个true参数时,表示复制元素同时,复制元素中绑定的事件,因此该元素的副本也同样具有复制功能
9. 替换节点
jQuery提供了replaceWith()和replaceAll()2中函数来实现替换你想替换的节点
1.这两个函数区别,$(A).replaceWith(B)是用B来替换A,而$(A).replaceAll(B)是用A来替换B
注意:如果替换前为元素绑定了事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上从新绑定事件。
10. jQuery中包裹节点的操作:wrap()和wrapAll(),wrapInner()
四. jQuery样式操作
1. 追加样式函数 addClass(class名);
第一次追加 addClass(“one”)---结果<p class =”one”>段落1</p>
第二次追加 addClass(“two”)---结果<pclass =”one two”>段落1</p>
2. 获取和设置样式函数 attr();
3. 切换样式函数 toggle()控制行为上的重复切换
4. 控制样式上重复切换函数 toggleClass();
5. 判断是否含有某个样式函数 hasClass();放回一个boolean类型的值(也可以通过is()函数来实现此操作)
五. jQuery设置和获取html,文本和值操作
1. html()函数的使用此方法类似于JavaScript中innerHtml属性,可以用来读取或者设置某个元素中的Html内容
2. text()方法用来获取或者设置某元素中的文本内容
3. val()方法 类似于JavaScript中的value属性,用来设置和获取元素的值;如果元素为多选,则返回一个包含所有选择值得数组。(jquery中defaultValue属性的运用)
例子:<p title=”你选择的是”><span>我喜欢的水果是香蕉</span></p>
使用$(“p”).html() 得到的结果为:<span>我喜欢的水果是香蕉</span>
使用$(“p”).text() 得到的结果为:我喜欢的水果是香蕉
六. jQuery中遍历节点方法
1. children()方法用于取得匹配元素的子元素集合;
2. next()方法用于取得匹配元素后面紧邻的同辈元素;
3. prev()方法用于取得匹配元素前面紧邻的同辈元素;
4. siblings()方法用于取得匹配元素前后所有同辈元素集合;
5. closest()方法用来取得最近的匹配元素
七. jQuery中通过css()方法获取元素的样式属性和设置样式属性
对透明度的设置可以使opacity属性,jquery已经处理好了兼容性问题