锋利的jquery —— DOM学习

DOM (document object model)，即文档对象模型

 

DOM操作 一般分为 三 类。即：1、DOM Core(核心)；

                                           2、HTML-DOM；

                                           3、CSS-DOM；

1、DOM Core(核心)

2、添加节点 （append(),prepend()）

3、删除节点 (remove()和empty())

     remove()  删除节点和内容，不保留节点。

     empty()  删除节点的内容，保留节点。

4、复制节点

      clone(true)  true 表示在复制节点，同时也复制元素所绑定的事件。

5、替换节点

      replaceWith()   和  replaceAll()

6、包裹节点

       wrap()    将所有的匹配的元素进行单独地包裹。

       wrapAll()  将所有匹配的元素用一个元素来包裹。

       wrapInner() 将每一个匹配的子内容用一个元素来包裹。

 

属性的操作

1、用attr() 方法来获取和设置元素的属性值。removeAttr() 方法来删除元素的属性。

    类似方法有： html()、 text()、 height()、 width()、 val()、 css()、

 

样式的操作

1、attr()可以用来设置和获取class属性

2、追加样式 addclass()

3、删除样式 removeclass()   若没有括号中没有样式名，则表示把匹配元素的所有样式删除。若指定某个样式的话，则表示只删除指定的样式。

4、切换样式 toggle() {function(){显示},function(){隐藏}}

                  toggleClass()   如果存在样式，就删除；如果不存在就添加样式。

5、hasClass() 判断是否含有某个样式

6、show(speed,[callback])

     speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast" )

     或表示动画时长的毫秒数值 (如：1000)

     callback (Function) : (Optional) 在动画完成时执行的函数，每个元素执行一次。

 

 

 

 

CSS-DOM

 

 

1、offset() 获取元素在当前视窗的偏移量。得到 top 和 left 两个属性。(只对可见元素 有效 )

2、position() 获取元素相对于最近一个position样式属性设置为relative或者是absolute 的 祖父节点的偏移量；

                       得到 top 和 left 两个属性。

3、scrollTop() 元素的滚动条 距顶端的距离 。

4、scrollLeft() 元素的滚动条 距左侧的距离 。

 

 

DOM操作参考例子：图片提示效果图   《锋利的jQuery》 p95

 

 

 

 

 

jquery对象和DOM对象相互转换

 

1、jquery对象----->dom对象

 

var  $cr = $("#cr");    //jquery对象
var cr = $cr[0];          //DOM对象
//var cr = $cr.get(0);
alert(cr.checked);      //检查这个元素是否被选中

 

 

2、dom对象----->jquery对象

var cr = document.getElementById("cr"); //dom对象
var $cr = $(cr);           //jquery对象