JQuery——JQuery 操作 DOM

最新推荐文章于 2024-08-27 13:38:21 发布

时光·漫步zth

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： JQuery DOM

本文链接：https://blog.youkuaiyun.com/qq_41573234/article/details/89304583

JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解了DOM操作的基础知识，包括查找、创建、删除节点，操作属性和样式，获取和设置HTML、文本及值，以及遍历节点的方法。通过实例演示了如何使用jQuery进行DOM操作。

操作 DOM 节点

查找节点
创建节点 append()
删除节点 remove()

操作 DOM 节点属性

查找属性
设置属性
删除属性

操作 DOM 节点样式

获取样式
设置样式
追加样式
移除样式

设置和获取 HTML，文本和值

获取 html，设置 html
获取文本，设置文本
获取值，设置值

遍历节点操作

获取所有子节点 children()
获取邻近的下一个兄弟节点 next()
获取邻近的上一个兄弟节点 prev()

操作 DOM 节点 CSS

获取 DOM 节点 CSS 样式
设置 DOM 节点 CSS 样式

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>

    <script type="text/javascript">

        $(function () {

            <%-- 操作DOM节点--%>
            // 1. 查找节点
            /* var docu = $("ul li:eq(1)");
            var con = docu.text();
            alert(con); */

            //2. 创建节点
            /* var elem1 = $("<li title='乔布斯'>乔布斯</li>");
            var elem2 = $("<li title='扎克伯格'>扎克伯格</li>");

            var docEle = $("ul li:eq(1)");
            $("ul").append(elem1);
            elem2.insertAfter(docEle); */

            //3. 删除节点
            //$("ul li:eq(1)").remove();

            <%--操作DOM属性--%>

            // 获取属性
            /* var elem = $("ul li:eq(1)");
            var attr = elem.attr("title");
            alert(attr); */


            // 设置属性
            //$("ul li:eq(1)").attr("title","猜猜我是谁");


            // 删除属性
            //$("ul li:eq(1)").removeAttr("title");

            <%-- 操作 DOM 节点样式--%>
            //获取样式
            //var elem = $("ul li:eq(1)");
            //alert(elem.attr("class"));

            // 设置样式
            //elem.attr("class","lc2");

            // 追加样式
            //elem.addClass("lc3");

            // 移除样式
            //elem.removeClass("lc");

            /*设置和获取HTML，文本和值 */
            //var elem = $("ul li:eq(0)");
            // 获取 html
            //alert(elem.html());

            // 设置html
            //elem.html("<font color='red'>哈哈</font>")

            // 获取文本
            //alert(elem.text());

            // 设置文本
            //elem.text("啦啦");

            // 遍历节点
            /*var elems = $("body").children();
            alert(elems.length);

            var lis = $("ul").children();
            for (var i = 0; i < lis.length; i++) {
                //alert(lis[i].innerHTML);
                alert($(lis[i]).html());
            }*/

            // next()、prev()
            /*var elem = $("ul li:eq(1)");
            alert(elem.next().html());
            alert(elem.prev().html());*/

           /* css-DOM 操作*/
            // 获取 css 样式
           /* var  c = $("#li").css("color");
            alert(c)*/

           // 设置 css 样式
            //$("#li").css("background-color","green")

        });

        function getUserName() {
            var  userName = $("#userName").val();
            alert(userName);
        }

        function setUserName() {
            $("#userName").val("你好啊！");
        }

    </script>
    <style type="text/css">
        .lc{
            background-color: red;
        }

        .lc2{
            background-color: blue;
        }

        .lc3{
            font-weight: bold;
        }
    </style>
</head>
<body>
<p>你最喜欢的名人是？</p>
<ul>
    <li title="马云"><font color="green">马云</font></li>
    <li title="马化腾" class="lc" >马化腾</li>
    <li title="李彦宏" style="color: red; " id="li">李彦宏</li>
</ul>

<input type="text" id="userName"/>
<input type="button" value="获取数据" onclick="getUserName()"/>
<input type="button" value="设置数据" onclick="setUserName()"/>

</body>
</html>

添加DOM节点

方法	描述	示例
append()	向每个匹配元素内部追加节点或是内容	HTML代码：<p>你好吗?</p> jQuery代码：$("p").append(“<b>还不错哦.</b>”); 结果：<p>你好吗？<b>还不错哦.</b></p>
appendTo()	$(A).append(B):是将B追加到A上 $(A).appendTo(B):是将A追加到B上	HTML代码：<p>你好吗?</p> jQuery代码：$("<b>还不错哦.</b>").appendTo(“p”); 结果：<p>你好吗？<b>还不错哦.</b></p>
prepend()	向每个匹配的元素内部追加内容	HTML代码：<p>你好吗?</p> jQuery代码：$("p").prepend(“<b>还不错哦.</b>”); 结果：<p><b>还不错哦.</b>你好吗？</p>
prependTo()	$(A).prepend(B):是将B追加到A上 $(A).prependTo(B):是将A追加到B上	HTML代码：<p>你好吗?</p> jQuery代码：$("<b>还不错哦.</b>").aprependTo(“p”); 结果：<p><b>还不错哦.</b>你好吗？</p>
after()	在每个匹配的元素之后添加内容	HTML代码：<p>你好吗?</p> jQuery代码：$("p").after(“<b>还不错哦.</b>”); 结果：<p>你好吗？</p><b>还不错哦.</b>
insertAfter	$(A).after(B):将B插入到A后 $(A).insertAfter(B):将A插入到B后	HTML代码：<p>你好吗?</p> jQuery代码：$(“<b>还不错哦.</b>”).insertAfter(“p”); 结果：<p>你好吗？</p><b>还不错哦.</b>
before()	在每个匹配元素之前插入内容	HTML代码：<p>你好吗?</p> jQuery代码：$(“p”).before(“<b>还不错哦.</b>”); 结果：<b>还不错哦.</b><p>你好吗？</p>
insertBefore()	$(A).before(B):将B插入到A前 $(A).insertBefore(B):A插入到B前	HTML代码：<p>你好吗?</p> jQuery代码：$(“<b>还不错哦.</b>”).insertBefore(“p”); 结果：<b>还不错哦.</b><p>你好吗？</p>

更多详细内容---> 传送门