jQuery中的DOM操作

2013-09-13 10:53:00
admin
原创
2096

可以把DOM看成是一个页面文件的元素目录树,对DOM的各种操作都是围绕这棵树开展的。
对DOM的操作,其实就是对节点的操作。

查找节点:
查找元素节点:用JQ的选择器即可选定元素节点;     $(“p”)
查找属性节点:在查找到元素节点后,用JQ的attr()方法查找其属性节点;     $(“p”).attr(“title”)

创建节点:
创建元素节点的同时,可以将属性节点和文本节点一起创建,即添加一个完整的HTML标签。
分两步:
1,新建元素
2,插入到DOM中
新建用$( )创建
如在ul下添加一个li元素
var $li=$(“<li>内容</li>”);
插入DOM中用append()方法
$(“ul”).append($li);

注:新建元素时要遵守XHTML规范,区分大小写,须闭合标签。

插入节点:
JQ提供了不止append()一种插入节点的方法,归纳如下:
A.append(B)     向匹配的A元素内部追加元素B
A.appendTo(B)     将匹配的A元素追加到元素B中
A.prepend(B)     向匹配的A元素内部前置添加元素B
A.prependTo(B)     将匹配的A元素前置添加到元素B中
A.after(B)     在匹配的A元素后面添加元素B
A.insertAfter(B)     将匹配的A元素添加到元素B后面
A.before(B)     在匹配的A元素之前添加元素B
A.insertBefore(B)     将匹配的A元素添加到元素B前面

删除节点:
remove()
var $a=A.remove()     删除匹配的元素A,返回值是被删除的节点的匹配引用,即A,所以删掉后如果想恢复,可以用$a.appendTo(B)恢复
empty()
准确的说,empty()不是删除节点,而是清空所匹配的节点的所有内容和后代节点

复制节点:
clone()
A.clone().appendTo()     //即 匹配的元素.clone([true]).复制到哪去
clone()中的true参数是可选的,不带则表示只复制节点,不复制节点绑定的方法事件,不具备任何行为。如果带着true,则表示在复制了节点的同时也复制了节点中所绑定的事件。

替换节点:
replaceWith()     repalceAll()
二者作用相同,只是表现形式相反。
如将p元素节点替换为strong节点:
$(“P”).replaceWith(“<strong>…..</strong>”)
$(“<strong>…..</strong>”).replaceAll(“P”)
被替换的节点所绑定的事件也会随之消失。

包裹节点:
wrap()     wrapAll()     wraplnner()
把某个节点用其他标记包裹起来
例如把p节点用strong包裹起来:
$(“p”).wrap(“<strong></strong>”);     //即<strong><p>………</p></strong>

注:
wrap()是将匹配的元素分别单独包裹
warpAll()是将匹配的元素一起包裹,如果被包裹的元素中间有其他元素,则其他元素会放到包裹元素之后。
wraplnner()是将匹配元素的字内容用某标记包裹起来。

属性操作:
attr()     //获取,设置元素属性,语法类似与css()
$(“p”).attr(“title”)
$(“p”).attr(“title,titlevalue”)
$(“p”).attr({
属性名:值,
属性名:值,
………………….
})
removeAttr()     //删除元素属性
$(“p”).removeAttr(“title”)

样式操作:即对元素中的class属性进行操作,
addClass()     //是追加,不是替换,class=”a b c ”
removeClass()

切换样式:
toggleClass()     //控制样式上的重复切换,如果类名存在则删除它,如果类名不存在则添加它,即该样式有何无之间的切换
类似与toggle(),toggle()是控制行为上的重复切换。

判断是否有某个样式:
hasClass()      //有则返回true,否则返回false
用法同于is()

区分:html()     text()

html()     获取或替换匹配元素中的html源码
text()      获取或替换匹配元素中的文本内容

版权声明

版权声明:本站原创文章,转载请注明作者和出处。

本站点采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议  

发表评论
评论通过审核后显示。
关注【程序员专区】

扫一扫,分享更多技术干货

热门文章
近期留言

电脑没声音的求助者2019-11-12

这个回答得对,我也是通过你的方法操作,然后电脑就有声音了,高手高手啊

环氧地坪施工2019-10-23

了解了,哈哈哈,谢谢

安贝乐育婴网2019-10-12

讲得很清晰呢

repostone2019-10-10

博主怎么想到要关一个output呢。https://repostone.home.blog/

noOne2019-09-24

遇到同样的问题了……T.T 纠结了好久。。。