JQuery中的DOM操作

最新推荐文章于 2021-07-29 15:52:13 发布

濮阳梦雪

最新推荐文章于 2021-07-29 15:52:13 发布

阅读量691

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.csdn.net/zlj_blog/article/details/22743051

JQuery 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了在JavaScript中利用jQuery库进行DOM操作的方法，包括动态创建节点、删除节点、替换节点、包裹节点以及样式操作。通过示例代码演示了如何在网页中灵活运用这些功能，以提高网页交互性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

和在Java Script中操作DOM对象一样，在JQuery中，可以以更方便快捷的方式对DOM对象进行操作，包括动态创建节点、删除节点、替换节点、包裹节点等。
1.动态创建节点。
格式为：$("html字符串")，将会返回一个JQuery对象，然后可以通过调用append、prepend、after、before等方法将新建的节点添加到DOM中。
其中append方法和prepend方法是将新建元素加为元素的子节点，append方法是将该新建元素加入到元素的末尾，prepend方法是将新建元素加入到元素的开始位置；after方法和before方法是将新建元素加为元素的兄弟节点，after方法是将新建元素加入到元素之后，before方法是将新建元素加入到元素之后。
如var link=("<a href=' '>测试</a>"); $("#div1").append(link);
2.删除节点。
使用remove（）方法，该方法的返回值是被删除的节点对象，还可以继续使用。
如 var list=$("#ullist1 li").remove(); $("#ullist2").append(list);
3.替换节点。
使用replaceWith（）方法。
如$("br").replaceWith("<hr/>");用<hr/>元素替换<br>.
4.包裹节点。
使用wrap()方法。
如$("p").wrap("<font color=' red'></font>");
5.样式操作。
1）获取dom对象的样式，格式为attr("class")，如$("#div1").attr("class");
2）设置样式，格式为attr("class"，”value")，如$("p").attr("class","class1");
3）追加样式，格式为addClass("class1")，如$("#div1").addClass("class2");
4）切换样式，格式为toggle(“class1”)，若该样式存在，则去掉，不存在，则加上；
5）判断是否拥有某个样式，格式为hasClass(“class1”)。
示例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DOM操作</title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //创建节点
            var link1 = ("<a href='http://www.csdn.net/'>CSDN首页</a>");
            $("#div1").append(link1);
            var link2 = ("<a href='http://www.baidu.com/'>百度</a>");
            $("#div1").prepend(link2);
            var p1 = ("<p>div1之后...");
            $("#div1").after(p1);
            var p2 = ("<p>div1之前...");
            $("#div1").before(p2);
            
            //包裹节点
            $("span").wrap("<font color='blue'></font>");
            //删除节点 可以实现诸如项目用户角色分配的功能
            $("#add").click(function () {
                var delList = $("#allClasses option:checked").remove();
                $("#selectedClasses").append(delList);
            });
        });
    </script>
</head>
<body>
<div id="div1">
<p>DOM操作</p>
</div>
<table border='1'>
<tr>
<td colspan="3" align="center"><span>删除节点</span></td></tr>
<tr>
<td>所有课程<br />
    <select multiple="multiple" id="allClasses" size="7">
    <option>JAVA程序设计</option>
    <option>C程序设计</option>
    <option>数据库基础及原理</option>
    <option>数据结构</option>
    <option>操作系统</option>
    <option>IT项目管理</option>
    <option>软件工程</option>
    </select>
</td>
<td><button id="add">添加选中项</button></td>
<td>
已选课程<br />
<select multiple="multiple" id="selectedClasses" size="7">
<option>    </option>
    </select></td></tr>
</table>
</body>
</html>