JQuery DOM

已于 2022-05-05 10:02:10 修改
阅读量2.3k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： JQuery DOM 操作文本 操作对象 操作样式 操作属性
于 2021-12-10 14:06:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45477086/article/details/121776483
版权
操作文本

常用方法
在这里插入图片描述
代码实现

<body>
<div id="div">我是div</div>
<input type="button" id="btn1" value="获取div的文本">
<input type="button" id="btn2" value="设置div的文本">
</body>
<script src="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");
        alert(value);
    });
</script>
操作对象

常用方法：在这里插入图片描述
代码实现：

<!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="jquery-3.3.1.min.js"></script>
<script>

    // 按钮一：添加一个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>
操作样式：

在这里插入图片描述

<!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="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>
操作属性：

在这里插入图片描述

<!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>
<input type="text" id="username">
<br>
<input type="button" id="btn1" value="获取输入框的id属性"> &nbsp;&nbsp;
<input type="button" id="btn2" value="给输入框设置value属性">
<br><br>

<input type="radio" id="gender1" name="gender">男
<input type="radio" id="gender2" name="gender">女
<br>
<input type="button" id="btn3" value="选中女">
<br><br>

<select>
    <option>---请选择---</option>
    <option id="bk">本科</option>
    <option id="zk">专科</option>
</select>
<br>
<input type="button" id="btn4" value="选中本科">
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 1.attr(name,[value])   获得/设置属性的值
    //按钮一：获取输入框的id属性
    $("#btn1").click(function () {
        alert($("#username").attr("id"));
    });

    //按钮二：给输入框设置value属性
    $("#btn2").click(function () {
        $("#username").attr("value", "hello...");
    });


    // 2.prop(name,[value])   获得/设置属性的值(checked，selected)
    //按钮三：选中女
    $("#btn3").click(function () {
        $("#gender2").prop("checked", true);
    });

    //按钮四：选中本科
    $("#btn4").click(function () {
        $("#bk").prop("selected", true);
    });
</script>
</html>
itzhuzhu.
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端基础--JavaScript
qq_50048558的博客
08-22 2594
HTML HTML介绍 & 规范 介绍 HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language). 专门制作网页的计算机语言. 超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。 记事本开发第一个网页 <html> <head> <title>第一个网页</title> </head> <body> Hello World! </body>
Mybatis的注解开发
一切如你的博客
10-31 1696
Mybatis的注解开发
三、jQuery 中的 DOM 操作（超详细）
最新发布
2301_76232361的博客
05-16 1175
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JavaScript 面向对象详解
qq_36081714的博客
08-09 4641
JavaScript面向对象
转：最详细的JavaScript 教程，入门级都能看懂
热门推荐
LlanyW的专栏
05-30 1万+
介绍 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript特点 JavaScript 是一门脚本语言。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。 JavaScript 已经由 ECMA（欧洲电脑..
JavaScript(引用方式，基础语法，常用对象）
lmj19929的博客
03-11 860
JavaScript
jQuery DOM操作小结与实例
10-29
jQuery 是一个广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作。DOM是HTML和XML文档的结构表示，允许我们通过编程方式访问和修改文档内容。在jQuery中，DOM操作包括创建新元素、复制现有...
jQuery DOM操作实例
10-26
本文用代码的方式详细讲解了jQuery的DOM操作,具体操作方法请详细参看代码中的注释部份
JQuery Dom XSS探测.html
05-15
可以直接测试网站里面的JQuery本地弹窗xss，属于渗透测试项一部分，此项目在xss中也属于高危，只需要替换里面的带测试链接即可。
jquery DOM操作 基于命令改变页面
10-29
jQuery（又名JQuery）是一种广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作。在网页开发中，DOM是HTML或XML文档的结构化表示，允许通过编程方式访问和修改页面内容。jQuery提供了丰富的...
JavaScript基础语法
chenchenchencl的博客
03-09 1448
JavaScript基础语法
JavaScriptDOM总结（有序整理）史上最全最详细（建议收藏）
编程教培一线讲师
04-09 1042
在学习JavaScript时,DOM和BOM都是重点内容 在学习加复习的情况下 理解了浅层内容 下面是展示 一：DOM简介 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。  文档：一个页面就是一个文档，DOM 中使用 document 表示  元素：页面中的所有标签都是元素，DOM 中使用 ele.
javascript基础
weixin_52159630的博客
04-11 715
JavaScript基础，适用于ES5
JavaScript内置对象
weixin_66298004的博客
10-22 293
内置对象在哪JavaScript中分为三种：自定义对象，内置对象，浏览器对象，前俩种是js基础内容，属于ECMA script，第三个是浏览器对象js独有的内置对象。js自带一些对象，提供了一些常用的基本必要功能，帮助我们快速开发，JavaScript提供多个内置对象：date，Array，string等。如何找到元素在新数组中存在不存在——利用数组.indexof（数组元素），如果返回值是-1，就说明新数组中没有该元素。遍历旧数组，然后拿着旧数组中的元素去查询新数组中有没有，如果有就不存，如果没有就存。
MyBatis注解开发
时光
06-21 1069
MyBatis注解开发
JQuery中的五大选择器——“全家桶”详解
fish_skyyyy的博客
02-01 1008
详解JQuery中的五大选择器 目录详解JQuery中的五大选择器一、基本选择器二、层级选择器1、后代选择器2、子选择器三、属性选择器1、属性名称选择器2、属性选择器3、复合属性选择器四、过滤选择器1、首元素选择器2、尾元素选择器3、非元素选择器4、偶数选择器5、奇数选择器6、等于索引选择器7、大于索引选择器8、小于索引选择器9、标题选择器五、表单过滤选择器1、可用元素选择器2、不可用元素选择器3、选中选择器4、选中选择器（下拉框） 选择器能够筛选具有相似特征的元素标签，允许对HTML元素组或单个元素进行操
JavaScript基础，面向对象编程（OOP)
蜡笔不新的博客
11-14 216
​ ①方法的封装：在类内部的私有方法，无法在类外部调用即为封装​ ②属性的封装：类中的属性私有化，不能“对象名.属性名”访问（设有get/set方法）
Mybatis_注解开发超详细讲解
康康要加油的博客
03-06 3836
文章目录一、Mybatis 注解的使用二、 使用注解完成查询1、查询所有用户1.1、 修改 UsersMapper 接口1.2、 创建测试类2、注解式开发时的参数传递2.1、 顺序传参法2.2、 POJO 传参法2.3、 Map 传参法三、使用注解完成DML操作1、实现添加用户操作1.1、修改UsersMapper接口1.2、创建测试类2、实现用户更新操作2.1、修改UsersMapper接口2.2、创建测试类3、实现删除用户操作3.1、修改UsersMapper接口3.2、创建测试类四、 注解开发中的动态
jquery dom
07-28
jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果等任务。DOM（文档对象模型）是网页的编程接口，它将HTML文档解析为一个树结构，使开发者可以通过脚本语言（如JavaScript）来访问和操作网页的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

itzhuzhu.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值