DOM操作的分类: DOM CORE(核心)、HTML-DOM和CSS-DOM jQuery作为javascript库,继承并发扬了javascript对DOM对象的操作的特性,使开发人员能方便的操作DOM对象。 元素的操作可以按下列来分类:查找、创建、插入、删除、复制、包裹、属性操作、 查找:利用上面的jQuery选择器 创建:主要包括创建元素节点和创建文本节点、创建属性节点。 (1)创建元素节点 $(html) Var aa=$("<li></li>"); (2)创建文本节点 Var aa=$("<li>你好</li>"); (3)创建属性节点 Var aa=$("<li title='bbb'>你好</li>"); 插入:光动态的创建节点没上面用处,还要能够将创建的动态插入。 删除: (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 = "<div id='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 = "<div id='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 id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/><\/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元素中, |
|