【知了堂学习笔记】_Jquery基础知识之DOM操作（二）

最新推荐文章于 2022-07-28 21:14:32 发布

原创最新推荐文章于 2022-07-28 21:14:32 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #dom #函数

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用 jQuery 进行 DOM 操作的方法，包括节点的查找、插入、删除及属性和样式的修改等内容。通过实际代码示例展示了如何高效地进行网页元素的操作。

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

1.对DOM操作

节点操作
- 查找节点
  - 通过选择器
  - 通过属性选择器
  - 通过parent（[expr]）函数方法查找父级元素节点
  - 通过parents([expr])函数方法来查找祖先元素
    示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../jquery-2.1.0.js"></script>
    </head>
    <body>
        <p>
            <button id="btn01">parents([expr])</button>
        </p>
        <div><p><span>Hello World</span></p></div>
    </body>
</html>
<script>
    $(function(){
        $("#btn01").click(function(){
            //通过parents函数来找祖先元素，返回元素的集合
//          console.log($("span").parents()[1  ]); 

//          通过each()函数遍历他的祖先元素
            $("span").parents().each(function(){
                //如何将js对象专长jQuery对象
                //js对象 不能用JQuery中的函数和方法
                //只有把js对象转成jQuery对象才能使用jQuery中的函数和方法
                console.log($(this).html());
            })
        });
    })
</script>

插入内容
- append():在元素的内部添加内容
- prepend()：在元素的内部追加内容
- after():在元素的后面追加内容
- before():在元素的前面追加内容

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script></script>
        <script src="../../jquery-2.1.0.js"></script>
    </head>
    <body>
        <p>

            <button id="btn04">prepend()</button>
            <button id="btn05">after()</button>
            <button id="btn06">before()</button>

        </p>
        <div><p><span>hello world</span></p></div>
        <div id="d01"></div>
        <p><button class="btn01">button</button></p>
    </body>
</html>
<script>
    $(function(){

        $("#btn04").click(function(){
            //prepend（），在元素内部添加节点，匹配元素内部的开始处插入内容
            $("#d01").prepend("<p>hello prepend</p>");
        });

        $("#btn05").click(function(){
            //在元素后面节点添加内容
            $("#d01").after("hello after");
        });
        $("#btn06").click(function(){
            //在元素前面添加内容
            $("#d01").before("<p>hello before</p>");
        });


    })
</script>

删除节点
- remove（[expr]）：把元素本身一起删除掉
- empty():清空元素内部的节点，但是元素本身不会删除掉

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script></script>
        <script src="../../jquery-2.1.0.js"></script>
    </head>
    <body>
        <p>

            <button id="btn04">prepend()</button>
            <button id="btn05">after()</button>
            <button id="btn06">before()</button>
            <button id="btn07">empty()</button>
            <button id="btn08">remov()</button>
            <button id="btn09">clone()</button>
        </p>
        <div><p><span>hello world</span></p></div>
        <div id="d01"></div>
        <p><button class="btn01">button</button></p>
    </body>
</html>
<script>
    $(function(){

        $("#btn04").click(function(){
            //prepend（），在元素内部添加节点，匹配元素内部的开始处插入内容
            $("#d01").prepend("<p>hello prepend</p>");
        });

        $("#btn05").click(function(){
            //在元素后面节点添加内容
            $("#d01").after("hello after");
        });
        $("#btn06").click(function(){
            //在元素前面添加内容
            $("#d01").before("<p>hello before</p>");
        });

        $("#btn07").click(function(){
            //删除
            $("#d01").empty();
        });
        $("#btn08").click(function(){
            //移除
            $("div").remove("#d01");
        });

        $("#btn09").click(function(){
            //复制
            $(".btn01").clone(true).appendTo("body");

        });

    })
</script>

赋值元素节点
- 调用clone（attr）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script></script>
        <script src="../../jquery-2.1.0.js"></script>
    </head>
    <body>
        <p>

            <button id="btn04">prepend()</button>
            <button id="btn05">after()</button>
            <button id="btn06">before()</button>
            <button id="btn07">empty()</button>
            <button id="btn08">remov()</button>
            <button id="btn09">clone()</button>
        </p>
        <div><p><span>hello world</span></p></div>
        <div id="d01"></div>
        <p><button class="btn01">button</button></p>
    </body>
</html>
<script>
    $(function(){

        $("#btn04").click(function(){
            //prepend（），在元素内部添加节点，匹配元素内部的开始处插入内容
            $("#d01").prepend("<p>hello prepend</p>");
        });

        $("#btn05").click(function(){
            //在元素后面节点添加内容
            $("#d01").after("hello after");
        });
        $("#btn06").click(function(){
            //在元素前面添加内容
            $("#d01").before("<p>hello before</p>");
        });

        $("#btn07").click(function(){
            //删除
            $("#d01").empty();
        });
        $("#btn08").click(function(){
            //移除
            $("div").remove("#d01");
        });

        $("#btn09").click(function(){
            //复制
            $(".btn01").clone(true).appendTo("body");

        });
        $(".btn01").click(function(){
            //复制
            window.alert("我是一个按钮");

        });
    })
</script>

属性操作
- $(“div”).attr(“title”):获取元素属性节点值
- $(“div”).attr(“title”,”helloworld”)
- $(“div”).removeAttr(“title”):删除元素节点的属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-2.1.0.js"></script>
    </head>
    <body>
        <p>
            <button id="btn01">attr("title")</button>
            <button id="btn02">attr("title","hello")</button>
            <button id="btn03">removeAttr("title")</button>
        </p>
        <div></div>
    </body>
</html>
<script>
    $(function(){
        $("#btn01").click(function(){
            //获取节点属性的值
            console.log($("div").attr("title"));
        });
        $("#btn02").click(function(){
            //给节点属性复制 或者改变
            $("div").attr("title","hello");
        });
        $("#btn03").click(function(){
            $("div").removeAttr("title");
        });
    })
</script>

样式操作
- css（name,value）:添加单个样式
- addClass(cssname):添加一个或多个样式，若果是多个样式请用空格隔开
- removeClass(cssname):移除样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-2.1.0.js"></script>
    </head>
    <style type="text/css">
        .div{
            width: 100px;
            height:100px;
            border: 1px solid black;
        }
    </style>
    <body>
        <p>
            <button id="btn1">css("background","#FFFFF")</button>
            <button id="btn2">addclass</button>
            <button id="btn3">removeclass</button>
            <button id="btn4">还原样式</button>
        </p>
        <div></div>
    </body>
</html>
<script>
    $(function(){
        $("#btn1").click(function(){
            //添加单个样式
            $("div").css("width","100px").css("border","1px solid red");
        });
        $("#btn2").click(function(){
            // 添加一个样式
            $("div").addClass("div");
        });
        $("#btn3").click(function(){
            // 删除一个样式
            $("div").removeClass("div");
        });
        $("#btn4").click(function(){
            // 还原样式
            $("div").removeAttr("style").removeAttr("class");
        });
    })
</script>