juery学习笔记一

一．             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操作DOM的函数时，注意事项1.理解目标和源各是什么2.不同类型选择器的使用

 

四．            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已经处理好了兼容性问题