jquery中的DOM操作第四天

最新推荐文章于 2024-04-10 10:06:32 发布

听风，等雨

最新推荐文章于 2024-04-10 10:06:32 发布

阅读量99

点赞数 1

本文链接：https://blog.csdn.net/qq_53692029/article/details/114269419

版权

jquery中的DOM操作年后第四天

一直接设置样式值

在这里插入图片描述

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>


    <script>
        $(function(){
            $("#pic1").css({"border":"3px solid #00ff00","opacity":"0.3"});
        });
    </script>
    <!-- 图片边框 3焦点宽 实线 颜色 透明度0.3 数字越小越透明-->
 
</head>
<body>
    <img id="pic1"  src="img/lift_product_1.jpg" alt="" >
    
</body>
</html>

注意：透明度设置数值越小越透明

二追加和移除样式

添加样式：
在这里插入图片描述
移除样式

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
        }
        /* 无无序列表前的点 */
        .show{
            color:azure;
            background: blue;
        }
        /* 设置样式show */
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script>
        $(function(){
            $("li").hover(function(){
                $(this).addClass("show");
            });
            // 添加show类样式
        
            // $(function(){
            // $("li").hover(function(){
            //     $(this).removeClass("show");
            // });
           //    移除show类样式
        });
    </script>

</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    
</body>
</html>

三切换样式

在这里插入图片描述

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
        }
        /* 无无序列表前的点 */
        .show{
            color:azure;
            background: blue;
        }
        /* 设置样式show */
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script>
        $(function(){
            $("li").hover(function(){
                $(this).toggleClass("show");
            })
           
        });
    </script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    
</body>
</html>

四 html代码操作与文本操作

1 html操作
html()可以对HTML代码进行操作，类似于JS中的innerHTML
在这里插入图片描述
第一行获取html代码
第三行设置html代码

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script>
        $(function(){
            var content=$("#left").html();
            alert(content);
            // 获取html内 内容


            $("[type=button]").click(function(){
                $("#left").html("<div id='content1'> <img src='img/headimg.jpg'/></div>");
            });
            // 点击按钮 设置div中内容变为 heading这个图

           
           
        });
           
    </script>
</head>
<body>
    <div id="left">
        <img src="img/lift_product_1.jpg" alt="">
        <p>这是一把小雨伞</p>
    </div>
    <input type="button" value="点我换内容">
    
</body>
</html>

2.文本操作
text()可以获取或设置元素的文本内容
在这里插入图片描述
代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script>
        $(function(){
            var content=$("#left").text();
            // 获取text类内容

            alert(content);
            $("[type=button]").click(function(){
                $("#left").text("<div id='content1'> <img src='img/headimg.jpg'/></div>");
             // 点击按钮 设置div中内容为 文本内容
            });  
                 
        });
           
    </script>
</head>
<body>
    <div id="left">
        <img src="img/lift_product_1.jpg" alt="">
        <p>这是一把小雨伞</p>

    </div>
    <input type="button" value="点我换内容">
    
</body>
</html>

两者区别：
在这里插入图片描述

五 value值操作

在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script>
        $(function(){

            $("#content1").focus(function(){
                var contents=$("#content1").val();
                if(contents=="冰箱"){
                    $("#content1").val("");
                }
            });
       
            $("#content1").blur(function(){
                var contents=$("#content1").val();
                if(contents==""){
                    $("#content1").val("冰箱");
                }
            });

        });
       
           
    </script>
</head>
<body>
    <input type="text" value="冰箱" id="content1"><input type="button" value="搜索" >

    
</body>
</html>

六插入同辈元素

元素外部插入同辈元素
在这里插入图片描述

七替换节点

replaceWith()和replaceAll()用于替换某个节点
在这里插入图片描述

八复制节点

clone()用于复制某个节点
在这里插入图片描述

九删除节点

jQuery提供了三种删除节点的方法

remove()：删除整个节点
detach()：删除整个节点，保留元素的绑定事件、附加的数据
empty()：清空节点内容

十获取与设置节点属性

在这里插入图片描述

从标题六到标题十的代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
        }
        /* 无无序列表前的点 */
       
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script>
        $(function(){
            $("h2").hide();
            $("li").css("background-color","red");  
            
        //    var $newNode1=$("<li>犬夜叉</li>");
        //    创建节点


        //    $("ul").append($newNode1);
        //    添加子节点 方法一
        // $newNode1.appendTo("ul");
        //    添加子节点 方法二


        // $("ul").prepend($newNode1);
        // 前置插入子节点 方法一
        // $newNode1.prependTo("ul");
        // 前置插入子节点 方法二

        // 元素之后插入同辈节点
        // 方法一
        // $("ul").after($newNode1);
        // 方法二
        // $newNode1.insertAfter("ul");


        // 元素之前插入同辈节点
        // $("ul").before($newNode1);
        // $newNode1.insertBefore("ul");

        // 删除清空节点

        // $("ul li:eq(1)").remove();
        // 删除下标节点为1的节点 即索引下标为1的节点
        // $("ul li:eq(1)").detach();
        // 删除下标节点为1的节点 detach 保留元素绑定事件，附加的数据
        // $("ul li:eq(1)").empty();
        // 清空节点内容


        // 替换节点
        // 方法一
        // $("ul li:eq(1)").replaceWith($newNode1);
        // 方法二
        // $newNode1.replaceAll("ul li:eq(1)");

        // 复制克隆节点
        // 方法一
        // $("ul li:eq(1)").clone(true).appendTo("ul");


        // 获取与设置节点属性
        // var $newNode2=$("<img src='img/headimg.jpg' alt='这是一个小可爱' />")
        // $newNode2.appendTo("ul");
        // alert($($newNode2).attr("alt"));
        // $("img").attr({"height":"100","width":"50"});
        // $("img").removeAttr("width");
        // // 恢复属性
        // });
           
    
    </script>
</head>
<body>
    <h2>我真帅</h2>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    
</body>
</html>