jQuery 学习之路（3）：DOM操作

一、在元素内部插入

　　　　.append(content[,content]) 　　　　　　　　在指定元素的内部末尾插入字符串，或在指定元素的内部末尾移入指定元素，如 $(".container").append($("p"));
　　　　.appendTo(target)　　　　　　　　　　　　　将指定元素移动到某元素内部的末尾，如 $("p").appendTo( $( ".container"));
　　　　.prepend(content[,content])　　　　　　　　类似 .append 方法，只是插入位置变成内部开头。
　　　　.prependTo(target)　　　　　　　　　　　　 类似 .appendTo 方法，只是插入位置变成内部开头。
　　　　.html(htmlString)　　　　　　　　　　　　　 替换元素内部所有内容，包括标签　
　　　　.text(text)　　　　　　　　　　　　　　　　  类似于 .html(htmlString)，不包括标签　

 

二、在元素外部插入

　　　　　　.after(content[,content])　　　　　　　　在指定元素后面（同辈）增加字符串，若参数是元素，则将该元素移到指定元素后面
　　　　　　.insertAfter(target)　　　　　　　　　     将指定元素移动到某元素后面（同辈）
　　　　　　.before(content[,content])　　　　　　　类似 .after 方法，只是位置变成前面
　　　　　　.inertBefore(target)　　　　　　　　　　 类似 inertAfter 方法，只是位置变成前面

 

三、包裹元素插入

　　　　　　.wrap(wrappingElement)　　　　　　　　　　用参数里的元素分别包在所有匹配元素的外围，如 $('p').wrap('<b></b>');
　　　　　　.unwrap()　　　　　　　　　　　　　　　　　 分别删除所有匹配元素的外围元素
　　　　　　.wrapAll(wrappingElement)　　　　　　　　类似于 wrap 方法，只是把所有匹配的元素做为一个整体，在外层包上指定元素
　　　　　　.wrapInner(wrappingElement)　　　　　　　在指定元素内部，使用参数里的元素包裹其内部所有元素。　

 

四、元素移除

　　　　　　　　.remove()　　　　　　　　　　连同元素一起删除
　　　　　　　　.empty()　　　　　　　　　　 删除元素内部所有数据
　　　　　　　　.detach()　　　　　　　　　　类似于 .remove() 但是保留删除的元素的对象，在需要的时候仍可恢复

 　 

五、元素替换

　　　　　　　　　　.clone()　　　　　　　　　　　　　　　　　　　　  将指定元素复制
　　　　　　　　　　.replaceWith(newContent)　　　　　　　　　　　　将指定元素用参数里的元素替换
　　　　　　　　　　.replaceAll(target)　　　　　　　　　　　　　　　基本同 replaceWith ，只是源和目标被逆转

  

六、元素属性操作

　　　　　　　　.arrt(attributeName[,value])　　　　　　　　获得或设置属性的值
　　　　　　　　.prop(propertyName[,value])　　　　　　　 获得或设置属性的值
　　　　　　　　.removeAttr(attributeName)　　　　　　　  删除指定的属性
　　　　　　　　.removeProp(propertyName)　　　　　　　 删除指定的属性
　　　　　　　　.val([value])　　　　　　　　　　　　　　　  获得或设置元素的value值　

 关于 attr(...) 和 prop(...) 的区别，参见：

http://www.javascript100.com/?p=877

 

七、样式操作

　　　　　　　　.addClass(className)　　　　　　　　　　为元素增加指定样式
　　　　　　　　.removeClass(className)　　　　　　　　为元素删除指定样式
　　　　　　　　.hasClass(className)　　　　　　　　　  判断元素是否包括指定样式
　　　　　　　　.toggleClass(className)　　　　　　　　 为元素切换指定样式，一般配合事件使用，如在单击事件中调用，每单击一次切换一下样式。该方法可以由上面三个方法配合实现同样效果。

  

八、样式属性

　　　　　　　　　　.css(cssName[,cssValue])　　　　　　　　获取或设置某个样式的值，也可以同时设置多个css样式，如 $( this ).css(["width", "height", "color", "background-color"]);
　　　　　　　　　　.height([value])　　　　　　　　　　　　　获取或设置样式 height 的值，是 css 方法的一种情况
　　　　　　　　　　.width([value])　　　　　　　　　　　　　 获取或设置样式 width 的值，是 css 方法的一种情况
　　　　　　　　　　.innerHeight()　　　　　　　　　　　　　  获取 height + padding 的值
　　　　　　　　　　.innerWidth()　　　　　　　　　　　　　　类似上
　　　　　　　　　　.outHeight()　　　　　　　　　　　　　　 获取 height + padding + border 的值，或 .outHeight(true)，则为 height + padding + border + margin 的值
　　　　　　　　　　.outWidth()　　　　　　　　　　　　　　 类似上
　　　　　　　　　　.position()　　　　　　　　　　　　　　　获取某一元素相对其父元素的偏移，返回的变量有两个属性 left 和 top ，可分别获取横坐标和纵坐标
　　　　　　　　　　.offset()　　　　　　　　　　　　　　　   获取某一元素相对当前视口的偏移，返回的变量有两个属性 left 和 top ，可分别获取横坐标和纵坐标　
　　　　　　　　　　.scrollLeft([value])　　　　　　　　　　　与获取和设置滚动条的偏移有关　　　　　　
　　　　　　　　　　.scrollTop([value])　　　　　　　　　　　与获取和设置滚动条的偏移有关