JQuery-03-笔记

Posted 寻7

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery-03-笔记相关的知识，希望对你有一定的参考价值。

JQuery-03-笔记

JQuery DOM

1、操作文本

  • 常用方法
    在这里插入图片描述

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操作文本</title>
    </head>
    <body>
        <div id="div">我是div</div>
        <input type="button" id="btn1" value="获取div的文本">
        <input type="button" id="btn2" value="设置div的文本">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
         //1. html()   获取标签的文本内容
         $("#btn1").click(function(){
             //获取div标签的文本内容
             let value = $("#div").html();
             alert(value);
         });
    
         //2. html(value)   设置标签的文本内容，解析标签
         $("#btn2").click(function(){
             //设置div标签的文本内容
             //$("#div").html("我真的是div");
             $("#div").html("<b>我真的是div</b>");
         });
    </script>
</html>

2、操作对象

  • 常用方法
    在这里插入图片描述

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操作对象</title>
    </head>
    <body>
        <div id="div"></div>
        <input type="button" id="btn1" value="添加一个span到div"> <br><br><br>
    
        <input type="button" id="btn2" value="将加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;
        <input type="button" id="btn3" value="将加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;
        <input type="button" id="btn4" value="将雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;
        <input type="button" id="btn5" value="将雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;
        <ul id="city">
            <li id="bj">北京</li>
            <li id="sh">上海</li>
            <li id="gz">广州</li>
            <li id="sz">深圳</li>
        </ul>
        <ul id="desc">
            <li id="jy">加油</li>
            <li id="xq">雄起</li>
        </ul>  <br><br><br>
        <input type="button" id="btn6" value="将雄起删除"> &nbsp;&nbsp;&nbsp;
        <input type="button" id="btn7" value="将描述列表全部删除"> &nbsp;&nbsp;&nbsp;
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        /*
            1. $("元素")   创建指定元素
            2. append(element)   添加成最后一个子元素，由添加者对象调用
            3. appendTo(element) 添加成最后一个子元素，由被添加者对象调用
            4. prepend(element)  添加成第一个子元素，由添加者对象调用
            5. prependTo(element) 添加成第一个子元素，由被添加者对象调用
            6. before(element)    添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
            7. after(element)     添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
            8. remove()           删除指定元素(自己移除自己)
            9. empty()            清空指定元素的所有子元素
        */
        
        // 按钮一：添加一个span到div
        $("#btn1").click(function(){
            let span = $("<span>span</span>");
            $("#div").append(span);
        });
        
    
        //按钮二：将加油添加到城市列表最下方
        $("#btn2").click(function(){
            //$("#city").append($("#jy"));
            $("#jy").appendTo($("#city"));
        });
    
        //按钮三：将加油添加到城市列表最上方
        $("#btn3").click(function(){
            //$("#city").prepend($("#jy"));
            $("#jy").prependTo($("#city"));
        });
        
    
        //按钮四：将雄起添加到上海下方
        $("#btn4").click(function(){
            $("#sh").after($("#xq"));
        });
        
    
        //按钮五：将雄起添加到上海上方
        $("#btn5").click(function(){
            $("#sh").before($("#xq"));
        });
    
        //按钮六：将雄起删除
        $("#btn6").click(function(){
            $("#xq").remove();
        });
        
    
        //按钮七：将描述列表全部删除
        $("#btn7").click(function(){
            $("#desc").empty();
        });
        
    </script>
</html>

3、操作样式

  • 常用方法
    在这里插入图片描述

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操作样式</title>
        <style>
            .cls1{
                background: pink;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <div style="border: 1px solid red;" id="div">我是div</div>
        <input type="button" id="btn1" value="获取div的样式"> &nbsp;&nbsp;
        <input type="button" id="btn2" value="设置div的背景色为蓝色">&nbsp;&nbsp;
        <br><br><br>
        <input type="button" id="btn3" value="给div设置cls1样式"> &nbsp;&nbsp;
        <input type="button" id="btn4" value="给div删除cls1样式"> &nbsp;&nbsp;
        <input type="button" id="btn5" value="给div设置或删除cls1样式"> &nbsp;&nbsp;
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 1.css(name)   获取css样式
        $("#btn1").click(function(){
            alert($("#div").css("border"));
        });
    
        // 2.css(name,value)   设置CSS样式
        $("#btn2").click(function(){
            $("#div").css("background","blue");
        });
    
        // 3.addClass(value)   给指定的对象添加样式类名
        $("#btn3").click(function(){
            $("#div").addClass("cls1");
        });
    
        // 4.removeClass(value)  给指定的对象删除样式类名
        $("#btn4").click(function(){
            $("#div").removeClass("cls1");
        });
    
        // 5.toggleClass(value)  如果没有样式类名，则添加。如果有，则删除
        $("#btn5").click(function(){
            $("#div").toggleClass("cls1");
        });
        
    </script>
</html>

4、操作属性