一般来说,DOM操作分为:DOM Core, HTML-DOM、CSS-DOM
jQuery中的dom操作。
一、查找
1.元素节点
2.属性节点 e.m. $para.attr("title")
二、创建
1. 元素节点 e.m. $("<li></li>") $("ul").append($li_1)
2.创建文本内容 e.m. $("<li>text</li>")
3.创建属性节点 e.m. $("<li title='ss'></li>")
三、插入节点
方法 | 描述 | 实例 |
append() | 向每个匹配的元素内部追加内容 | $("p").append("<b>hello</b>") |
appendTo() | 将所有匹配的元素追加到指定元素中 | HTML: <p></p> $("<b>hello</p>").appendTo("P") 结果是<p><b>hello</b></p> |
prepend() | 向每个匹配的元素内部前置内容 | HTML: <p>I want</p> $("p").prepend("<b>hello</b>") result:<p><b>hello</b>i want<p> |
prependTo() | 将所有匹配的元素前置到指定元素中 | |
after() | 在每个元素之后插入内容 | $("p").after("<b>hello</b>") result: <p></p><b>hello</b> |
insertAfter() | 将所有匹配的元素插入到指定元素后面 | |
before() | 在每个匹配的元素之前插入元素 | |
insertBefore() | 将所有匹配的元素插入到指定的元素前面 |
四、删除元素
1.remove: 从DOM中删除所有匹配的元素
2:detach():从DOM中删除所有匹配的元素.。 但注意的是,这个方法不会把匹配的元素从jQuery对象中删除
因而可以在将来使用这些元素。
3.empty: 并不是删除节点而是清空节点。
五、复制节点 clone()
六、替换节点
replaceWith(): 将所有匹配的元素替换成制定的HTML或DOM元素。
replaceAll():只是颠倒了replaceWith的操作。
七、包裹元素
wrap() e.m. $("p").wrap("<b></b>") result: <b><p><p></b>
wrapAll():将所有匹配的元素包裹起来,不同于wrap(), wrap只是单独包裹。
e.m. wrapAll: <b><p></p><p></p></b>
wrap():<b><p></p><b/><b><p></p></b>
wrapInner(): 将每一个匹配的元素的子内容用其他结构化标记包裹起来。
八、属性操作
获取属性: attr()
设置属性:e.m. attr("title","your title"), attr("title":"your title", name:"test")
删除属性:removeAttr
九、样式操作
获取样式:e.m. attr("class")
设置样式: e.m. attr("class","height")
追加样式:addClass 如果有不同class设定同一个样式属性,则后者覆盖前者
移除样式:removeClass e.m. removeClass("high" "another")
切换样式:toggle() 交替一组动作 。这里是:toggleClass(),即存在删除,不存在添加
判断是否含有某个样式:hasClass()
十、设置获取HTML、文本和值
- html() 该方法获取html元素的内容,如:var var1=$("p").html();//获取P元素内的内容
- text() 获取或设置某个html元素的内容
- val() 获取元素的Value值
- children() 获取html元素的所有子节点
- next() 获取html元素后紧邻的同辈节点
- prev() 获取html元素前紧邻的同辈节点
- siblings() 获取html元素前后紧邻的同辈节点
closest():用于取得最近的匹配的元素。首先检查当前元素是否匹配,不匹配,逐级向上匹配。找不到返回null
parent()
parents()
十一、CSS-DOM
css("属性",“值”) e.m. css("color","red")
offset:获取元素在当前视窗的相对偏移量
position():获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点相对位置
scrollTop():获取元素滚动条距顶端的距离
scrollLeft():获取元素滚动条距左边的距离