jQuery DOM操作

DOM操作的分类：

DOM CORE（核心）、HTML-DOM和CSS-DOM 
1. DOM Core 
DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。 
它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML. 
Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法，都是dom core的组成部分。 
2. HTML_DOM 
使用HTML_DOM来获取表单对象的方法 
Document.forms 
使用HTML_DOM来获取某元素的src属性的方法 
Element.src 
3. CSS_DOM 
CSS_DOM是针对CSS的操作。在javascript中，CSS-DOM技术的主要作用是获取和设置style对象的各个属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。
Element.style.color = “red”;  

jQuery作为javascript库，继承并发扬了javascript对DOM对象的操作的特性，使开发人员能方便的操作DOM对象。

元素的操作可以按下列来分类：查找、创建、插入、删除、复制、包裹、属性操作、

查找：利用上面的jQuery选择器

创建：主要包括创建元素节点和创建文本节点、创建属性节点。

（1）创建元素节点 $(html)

Var aa=$("

（2）创建文本节点 Var aa=$("

（3）创建属性节点  Var aa=$("你好");

插入：光动态的创建节点没上面用处，还要能够将创建的动态插入。

删除：

（1）empty()：删除匹配的元素集合中所有的子节点。

（2）remove([expr])：从DOM中删除所有匹配的元素。

（3）detach([expr])：从DOM中删除所有匹配的元素。

复制：

（1）clone()：克隆匹配的DOM元素并且选中这些克隆的副本。

（2）clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本

替换：

（1）replaceWith(content):将所有匹配的元素替换成指定的HTML或DOM元素。

（2）replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素。

包裹：

属性操作：

样式操作：

判断是否有某个样式：hasClass("className")；；内部实际上调用的是is方法

设置和获取HTML、文本和值

CSS-DOM操作：读取和设置style对象的各种属性。

案例：超链接提示效果和网页提示效果

1.超链接：自带了提示，加入title属性，不过这个提示太慢，为了良好的人机交互，应该在一上去的一瞬间就出现提示

①　当鼠标滑入超链接

②　创建一个div元素

③　将创建的元素追加到文档中

④　为它设置x和y坐标，使得它显示在鼠标位置旁边

⑤　当鼠标划出时，移除div

$(function(){

$("a.tooltip").mouseover(function(e){

    var tooltip = ""+ this.title +"<\/div>"; //创建 div 元素

$("body").append(tooltip); //把它追加到文档中

$("#tooltip")

.css({

"top": e.pageY + "px",

"left": e.pageX  + "px"

}).show("fast");   //设置x坐标和y坐标，并且显示

    }).mouseout(function(){

$("#tooltip").remove();   //移除 

    });

});

问题1：title属性提示也会出现；x、y坐标设置问题，距离太近

⑥　当鼠标滑入时，给对象一个新属性，比如myTitle，并它title传给它，然后清除title属性

⑦　当鼠标划出时，再把对象的myTitle属性的值又赋给属性title

this.myTitle = this.title;

this.title = "";

    var tooltip = ""+ this.myTitle +"<\/div>"; //创建 div 元素

⑧　重新设置x和y，为top加10，为left加20

var x = 10;  

var y = 20;

$("#tooltip")

.css({

"top": (e.pageY+y) + "px",

"left": (e.pageX+x)  + "px"

}).show("fast");   //设置x坐标和y坐标，并且显示

⑨　鼠标移动时，提示不会跟着鼠标移动。需要加上一个mouseover事件

.mousemove(function(e){

$("#tooltip")

.css({

"top": (e.pageY+y) + "px",

"left": (e.pageX+x)  + "px"

});

});

2.图片提示效果

参考上面，就可以出现图片提示：

$(function(){

var x = 10;

var y = 20;

$("a.tooltip").mouseover(function(e){

this.myTitle = this.title;

this.title = "";

var tooltip = "产品预览图'/><\/div>"; //创建 div 元素

$("body").append(tooltip); //把它追加到文档中  

$("#tooltip")

.css({

"top": (e.pageY+y) + "px",

"left":  (e.pageX+x)  + "px"

}).show("fast");   //设置x坐标和y坐标，并且显示

    }).mouseout(function(){

this.title = this.myTitle;

$("#tooltip").remove();  //移除 

    }).mousemove(function(e){

$("#tooltip")

.css({

"top": (e.pageY+y) + "px",

"left":  (e.pageX+x)  + "px"

});

});

})

为了更加人性化，显示图片的时候，还要根据title属性来获取图片相应的介绍文字：，然后将它追加到div元素中，