本文共 1370 字，大约阅读时间需要 4 分钟。

1 选择节点

通过选择器进行选择$("#id")

2 创建节点

var $li_1 = $("
") 创建一个元素$("ul").append($li_1); 追加到ul中

3 插入节点

$("ul").append("
") 	
   
    
   
 向每个匹配的元素内部追加内容$("ul").appendTo("
") 	
    
$("ul").prepend("
")  	
   
    
Hello
   
 向每个匹配的元素前置内容$("ul").prependTo("
") 	
    
Hello
$("ul").after("
") 		
   
 在每个匹配的元素之后插入内容$("ul").insertAfter("
")
   
$("ul").before("
")		
   
 在每个匹配的元素之前插入内容$("ul").insertBefore("
")
   

4 操作节点

remove() 删除所有匹配的元素以及子元素,返回值是删除的元素的引用empty()  清空匹配元素中的内容clone()  复制匹配的元素replaceWith("") 替换匹配的元素(替换匹配元素的所有类容)wrap("") 用元素包裹指定的元素(每个元素单独一个元素)wrapAll() 包裹所有匹配的元素(所有元素都被一个元素包裹)wrapInner() 将匹配的元素的子元素以及内容,用指定的元素包裹

5 属性操作

attr(属性[,值]) 获取和设置元素属性 removeAttr(expr) 删除属性

6 样式操作

addClass(expr) 追加class{   在原来的基础上添加一个新的值}removeClass(expr) 删除指定的classtoggle(function(){   },function(){   }) 交替执行两个函数toggleClass(expr) 如果class名存在就删除,不存在就创建hasClass(expr) 判断元素中是否含有某个class

7 设置和获取HTML、文本和值

html() 获取或者设置指定元素的HTML代码text() 获取或者设置指定元素的文本内容val() 可以用来设置或者获取元素的值

8 遍历节点

children() 获取匹配元素的子元素集合next() 获取匹配元素后面相邻的同辈元素prev() 获取匹配元素的前面相邻的同辈元素siblings() 获取匹配元素前后的所有同辈元素closest() 获取最近的匹配元素find(selector) 方法获得当前元素集合中每个元素的后代

9 CSS-DOM操作

css() 获取或设置css样式css("color")css("color","red")css({   "":"","":""})height([expr]) 设置或获取元素的高width([expr]) 设置或获取元素的宽offset() 获取元素在当前视窗的相对偏移(left和top)position() 获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移scrollTop() 获取元素的滚动条距离顶端的距离scrollLeft()获取元素的滚动条距离左侧的距离