05DOM操作.pptVIP

DOM操作 主讲：毛丽娟 常用的DOM操作方法 创建新元素的方法：$() 追加元素的方法： append() appendTo() prepend() prependTo() 插入元素的方法： after() insertAfter() before() insertBefore() 常用的DOM操作方法 在匹配元素的外部插入新元素： wrap() wrapAll() wrapInner() 用新元素或文本替换匹配元素： html() text() replaceAll() replaceWith() 移除匹配元素的所有子元素：empty() 移除匹配的元素及其后代元素：remove() $()工厂函数创建DOM元素 var newP=$(p新创建的段落！/p); 以上代码等同于javascript中的如下代码： var newP=document.creatElement(“p”); var newTxt=document.creatTextNode(“新创建的段落！”); newP.appendChild(newTxt); 操作属性 操作class属性：addClass() removeClass() toggleClass() 操作非class属性： attr() removeAttr() attr方法：获取或设置属性值。 attr(name)方法：获取元素集中第一项的属性值，如果没有匹配项则返回undefined。 举例：$(“em”).attr(“tilte”),获取第一个em元素的title属性值。 attr(name,value)方法：设置元素集中所有项的name属性值为value。 举例:$(“a[href^=http://]”).attr(“target”,”_blank”);表示将页面中所有的外部超链接都设置为在新窗口中打开。 removeAttr方法 removeAttr(name)方法：删除某个元素的属性值。 举例：$(“button”).removeAttr(“disabled”)表示将button元素的disabled值删除，使得所有的按钮都不被禁用。 find方法和each方法 find(selector)方法：通过匹配选择器来筛选元素。 举例：$(“p”).find(“span”),表示在所有p标记中寻找span标记。 each(callback)方法：遍历元素。 举例：$(“img”).each(function(index){ this.title=“这是第”+index+”幅图”； }); CSS方法：修改内联样式 语法1：$(selector).css(name,value) 功能：为匹配元素设置一个属性值。 举例：$(p).css(background-color,red); 语法2： $(selector).css({properties}) 功能：为匹配元素设置多个属性的值。 举例：$(p).css({background-color:red,font-size:200%}); 语法3： $(selector).css(name) 功能：访问第一个匹配元素的样式属性值。 举例：$(this).css(background-color); 实例05-01：改变样式。 $(p).mouseover(function(){ $(this).css(color,red); }); $(p).mouseout(function(){ $(this).css(color,black); }); 插入页面元素的方法 appendTo(target):将元素添加为指定目标的子元素。 prepend()和prependTo()：将元素添加到所有目标的所有子元素之前。 以下方法用来将元素直接添加到某节点之前或之后，而不是作为子元素插入： before()与insertBefore()等效 after()与insertAfter()等效 实例05-02：插入元素的方法 主要jquery代码 $(function(){ var newElement=$(span插入的span元素/span);//创建DOM元素 newElement.insertAfter(.s1);//将DOM元素插入到指定元素之后 }); remove方法：删除页面元素 remove()方法：删除元素。 举例：$(“p”).remove()表示将页面中的所有p标记删除。 empty方法：删除子元素 empty()方法：直接删除指