jQuery中DOM操作
1.查找元素节点: 通过 jQuery 选择器完成.(上一篇已经讲过https://my.oschina.net/u/3637385/blog/1503865)。 2.获取属性: 调用 jQuery 对象的 attr() 方法来获取它的各种属性值。如attr("id","d1")获得id属性为d1的名字。 3.创建节点: 使用 jQuery 的工厂函数 $(): $(html);如$("<p>我是p的内容</p>")创建一个p标签。之前我们在DOM中创建节点用的方法:document.createElement("p");也是创建一个p标签。 4.插入节点:append();appendTo();用法: 旧.append(新)表示向旧标签的结尾中追加新标签,==新.appendTo(旧)。prepend()和prependTo()向旧标签的开始位置追加新标签。(新旧元素之间的关系是子关系)。如newP.appendTo("body"); //P插入到body元素里面。 after()和insertAfter()向元素之后添加新元素,添加的新元素和旧元素是兄弟关系。 before()和insertBefore()向元素之前添加新元素,添加的新元素和旧元素是兄弟关系。 5.删除和清空节点 a.删除节点remove():从 DOM 中删除所有匹配的元素. b.清空节点empty():清空节点 – 清空元素中的所有后代节点(不包含属性节点). 6.复制节点clone() 需要注意的是不带参数的clone()是复制了一个新对象,而带参数true的clone(true)可以连事件一起复制。 7.替换节点 a.replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素.如:$("p").replaceWith("div");//把p标签换为div标签 b.replaceAll(): 颠倒了的 replaceWith() 方法. 二者最大的区别在 于替换字符的顺序,前者是用括号中的字符替换所选择的元素,后者是用字符串替换括号中 所选择的元素。同时,一旦完成替换,被替换元素中的全部事件都将消失。 8.包裹节点 a.wrap():如 $("p,span").wrap("<div></div>");//用div把p和span包裹起来。 b.wrapAll(): 将所有匹配的元素用一个元素来包裹. 如:$("span").wrapAll("<div></div>");//把所有span标签用一个div包裹起来。 c.wrapInner(): 如$("p,span").wrapInner("<div></div>");//用div把p和span中的孩子文本等内容包裹起来。 9.属性操作 attr(), html(), text(), val(), height(), width(), css() 等.removeAttr(): 删除指定元素的指定属性 10.样式操作 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成. 追加样式: addClass() 移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class 切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它. 判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
11.设置和获取 HTML, 文本和值 html():HTML中的内容。 text():某个标签中的内容。 val():表单中的值(文本框,下拉框,单项框,复选框)。 12.遍历节点方法 取得匹配元素后面紧邻的同辈元素的集合(但集合中只有一个元素): next() 取得匹配元素前面紧邻的同辈元素的集合(但集合中只有一个元素): prev() 取得匹配元素前后所有的同辈元素: siblings() 13.CSS-dom操作 获取和设置元素的样式属性: css() 获取和设置元素透明度: opacity 属性 获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”); 获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效