jQuery中的DOM操作
创建节点
$("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操作
随便举点例子