jQuery中的DOM操作

2017-12-26  本文已影响0人  梨啊梨

创建节点

$("xxxx").append($("<yyyy>zzzzzz</yyyy>"))

还可以在里面添加一些节点的属性,比如title这种。

插入节点

append():向每个匹配的元素内部追加内容,$(“p”).append(“哇”),向每个p元素后面追加“哇”字符串

appendTo():将所有匹配的元素追加到指定元素中

prepend():向每个匹配的元素内部前置内容

prepend():将所有匹配的元素前置到指定元素中

after():在每个匹配的元素之后插入内容

insertAfter():将所有匹配的元素插入到指定元素的后面

before():在每个匹配的元素之前插入内容

insertBefore():将所有匹配的元素插入到指定的元素前面

删除节点

① remove():从DOM中删除所有匹配的元素,他的后代节点也会被删除后。他的返回值是一个指向已被删除的节点的引用,所有以后还可以用他。

他还可以删除指定元素属性,比如

$(“p”).remove(“p[title=ppp]”);

② detach():和remove不同的是,他不会把匹配元素从JQ对象中删除

③ empty():清空指定元素的所有内容(后代节点)

复制节点

clone():复制节点,如果在里面传入true,则复制的元素同样拥有所绑定的事件

替换节点

replaceWith()和replaceAll,一样使用,唯一的区别就是,语法是颠倒的


属性操作

1. 获取属性和设置属性      attr()

2. 删除属性     removeAttr()


样式操作

1. 获取样式和设置样式

其实就是用attr()来获取设置class属性

2. 追加样式

addClass()

3. 移除样式

removeClass()

4. 切换样式

toogle():主要是控制行为上的重复切换,比如原本隐身的变成显示,显示的再隐身,来回交替

$(“xxxx”).toogle(“xxxxxx”)

5. 判断是否含有某个样式

hasClass():用来判断元素中是否存在某个class类,与is(“class”)等价


设置和获取HTML、文本和值

1. html()

和Js中innerHTML方法一样,获取设置某个元素的内容

2. text()

和Js中innerText方法一样,用来获取或设置某个元素中的文本内容

3. val()

和Js中value属性一样,用来获取或设置value属性值


遍历节点

1. children()

该方法用于获取匹配元素的子元素集合,只考虑子元素不考虑其他后代元素

2. next()

该方法用于获取匹配元素后面紧邻的同辈元素

3. prev()

该方法用于获取匹配元素前面紧邻的同辈元素

4. siblings()

该方法用于获取匹配元素前后所有的同辈元素

5. closest()

该方法用于获取最近的匹配元素,如果没有找到,则向上父元素再找


CSS-DOM操作

随便举点例子

上一篇下一篇

猜你喜欢

热点阅读