JQuery中DOM操作

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

tlysys

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

阅读量85

点赞数 1

文章标签： js css html java

本文链接：https://blog.csdn.net/s990420/article/details/114293281

版权

JQuery中的DOM操作：

DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件

DOM 操作的分类:

DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,　有许多专属于 HTML-DOM 的属性
CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性

jQuery中的DOM操作可分为：

样式操作
内容以及value属性值操作
节点操作
节点属性操作
节点遍历
CSS-DOM操作

一、样式操作：

使用css动态添加边框以及透明度效果

在这里插入图片描述

<!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>设置边框以及透明度</title>
    <script src="../jquery/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            $("img").css({"border":"5px solid red","opacity":"0.2"});
        });
    </script>
</head>
<body>
    <img src="./img/img.jpg" alt="">
</body>
</html>

二、切换样式：

toggleClass()模拟了addClass()与removeClass()实现样式切换的过程

<!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">
    <script src="../jquery/jquery-3.4.1.js"></script>
    <title>切换样式</title>
    <style>
        li{
            list-style: none;
        }
        .show{
            color: aqua;
            background-color: blueviolet;
        }
    </style>
    <script>
        $(function(){
            $("li").hover(function(){
                $(this).toggleClass("show");
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>远赴人间惊鸿宴</li>
        <li>一睹人间盛世颜</li>
        <li>最是人间留不住</li>
        <li>朱颜辞镜花辞树</li>
    </ul>
</body>
</html>

在这里插入图片描述

三、代码操作和文本操作：

1、代码操作

在这里插入图片描述

<!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">
    <script src="../jquery/jquery-3.4.1.js"></script>
    <title>html代码操作</title>
    <script>
        $(function () {
            var content = $("#content").html();
            alert(content)
            $("[type=button]").click(function(){
                $("#content").html("<div id='content'><img src='./img/img01.jpg'></div>");
            });
        });
    </script>
</head>

<body>
    <div id="content">
        <img src="./img/img.jpg" alt="">
        <p>这是一个美女图片</p>
    </div>
    <input type="button" value="点击">
</body>

</html>

在这里插入图片描述

2、文本操作

在这里插入图片描述

<!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">
    <script src="../jquery/jquery-3.4.1.js"></script>
    <title>text文本操作</title>
    <script>
        $(function () {
            var content = $("#content").text();
            alert(content)
            $("[type=button]").click(function(){
                $("#content").text("<div id='content'><img src='./img/img01.jpg'></div>");
            });
        });
    </script>
</head>

<body>
    <div id="content">
        <img src="./img/img.jpg" alt="">
        <p>这是一个美女图片</p>
    </div>
    <input type="button" value="点击">
</body>

</html>

在这里插入图片描述

html()和text() 的区别如下：

在这里插入图片描述

四、value值操作：

val()可以获取或设置元素的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">
    <script src="../jquery/jquery-3.4.1.js"></script>
    <title>value值操作</title>
    <script>
        $(function () {
            var contents = $("#content").val();
            alert(contents)
        });
    </script>
</head>
<body>
    <input type="text" value="java天下无敌" id="content">
</body>
</html>