jQuery学习第三章-重要的DOM操作

所谓DOM,就是将HTML中的每一个节点看成一个DOM,多个DOM组成DOM树。

jQuery中的DOM操作主要包括:

  1. 创建元素节点:
    • a)         $(“html”) 比如:var $li = $(“<li>first DOM</li>”);
    • b)         创建文本节点 var $li = $(“<li>firstDOM</li>”); $(“ul”).append($li);
  2. 插入节点使用下面方法:
    • a)         append() 向每个匹配的元素增加内容;
    • b)         appendTo(),比如A appendTo (B),把A加到B,同上面相反;
    • c)         prepend() 向每个匹配的元素前置内容;
    • d)         prependTo() 同appendTo()用法;
    • e)         after() 在每个匹配的元素之后增加内容;
    • f)          insertAfter() 同appendTo();
    • g)         before() 在每个匹配的元素之前增加内容;
    • h)         insertBefore() 同appendTo();
  3. 删除节点
    • a)         remove() 删除选中的元素及其子元素;
    • b)         empty() 清空节点内容;
  4. 复制节点
    • a)         clone() 可添加参数true设置是否觉有原元素的属性;
  5. 替换节点
    • a)         replaceWith() 将匹配的元素设置为给定的HTML;
    • b)         replaceAll() 同appendTo();
  6. 包裹节点
    • a)         wrap() 将匹配的元素用给定的HTML包裹起来;
    • b)         wrapAll() 将匹配的元素用一个元素包裹;
    • c)         wrapInner() 将匹配的元素的子内容用给定的HTML包裹起来;
  7. 属性操作
    • a)         attr() 将匹配的元素设置属性;
    • b)         removeAttr() 将匹配的元素删除属性;
  8. 样式操作
    • a)         attr() 可以为匹配的元素设置class属性,但是这是替换,不是追加;
    • b)         addClass() 为匹配的元素增加样式;
    • c)         removeClass() 将匹配元素的给定样式移除;
    • d)         toggle() 切换样式;
    • e)         hasClass() 判断是否具备给定的样式,返回ture/false
  9. 设置获取HMTL,文本值
    • a)         html() 读取或设置匹配元素的HTML内容;
    • b)         text() 读取或者设置匹配元素的HTML文本;
    • c)         val() 读取或者设置元素的值,主要指下拉菜单,文本框,单选框等;
  10. 遍历节点
    • a)         children() 获得匹配元素子元素的集合;
    • b)         next() 获得匹配元素相邻的下一个同辈元素;
    • c)         prev() 获得匹配元素相邻的上一个同辈元素;
    • d)         siblings() 获得匹配元素所有的同辈元素;
    • e)         closet() 获得最近的匹配元素,子元素,父元素,这样的顺序寻找;
  11. CSS-DOM操作
    • a)         css() 为匹配元素设置CSS样式;
    • b)         height() 获得匹配元素的高;
    • c)         offset() 获得元素在当前视窗的偏移,返回两个属性:top,left;
    • d)         position() 获得元素相对于最近的一个position设置为relative或者absolute的元素的偏移量,返回两个属性:top,left
    • e)         scrollTop(),scrollLeft()方法 获取滚动条距顶端和左侧的距离
原文链接:,转发请注明来源!

发表评论

  • 5 Responses to “jQuery学习第三章-重要的DOM操作”