DOM

最新推荐文章于 2024-04-03 16:49:23 发布
最新推荐文章于 2024-04-03 16:49:23 发布
阅读量200 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41375318/article/details/103269615
版权

17-DOM-操作文本

  • 常用方法

  • 代码实现

    <!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>

18-DOM-操作对象

  • 常用方法

  • 代码实现

    <!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>

19-DOM-操作样式

  • 常用方法

  • 代码实现

    <!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>

20-DOM-操作属性

  • 常用方法

  • 代码实现

    <!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="js/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>

21-DOM-DOM操作的小结

  • 操作文本
    • html() html(…)：获取或设置标签的文本，解析标签。
  • 操作对象
    • $(“元素”)：创建指定元素。
    • append(element)：添加成最后一个子元素，由添加者对象调用。
    • prepend(element)：添加成第一个子元素，由添加者对象调用。
    • before(element)：添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用。
    • after(element)：添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用。
    • remove()：删除指定元素(自己移除自己)。
  • 操作样式
    • addClass(value)：给指定的对象添加样式类名。
    • removeClass(value)：给指定的对象删除样式类名。
  • 操作属性
    • attr(name,[value])：获得/设置属性的值。
    • prop(name,[value])：获得/设置属性的值(checked，selected)。
*Major*
关注
JQuery(下) DOM操作&习题
LP_5371的博客
06-28 1777
jQuery DOM 操作文本 常用方法 <!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>
jQuery使用（超详细）
热门推荐
Eliauk_Doubling的博客
08-12 2万+
会把这个dom对象转换成jQuery对象,即 [object HTMLSpanElement] ======> [object Object]* 4.传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回。* 2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象。* 3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象。*1. 传入参数为[函数]是，在文档加载完成以后执行这个函数。jQuery对象的本质时dom对象的数组+jQuery提供的一系列的功能函数。
jquery的使用
weixin_53748496的博客
12-08 8025
JS和jquery在添加内容和样式时的区别：jquery的一些方法。jquery实现内容的显示和隐藏。对标签坐标信息或尺寸信息的获取。给button按钮添加点击事件:延迟动画。fadeIn():淡入。fadeOut()：淡出。实现留言板。实现点击返回到顶部
jquery使用
早日成为鹏总
04-14 1418
入口函数 // 第一种: 简单易用。 $(function () { ... // 此处是页面 DOM 加载完成的入口 }) ; // 第二种: 繁琐，但是也可以实现 $(document).ready(function(){ ... // 此处是页面DOM加载完成的入口 }); jQuery 对象和 DOM 对象 1. 用原生 JS 获取来的对象就是 DOM 对象 2. jQuery 方法获取的元素就是 jQuery 对象。 3.只有 jQuery 对象才...
jQuery 的使用
qq_35112578的博客
08-14 658
jQuery的使用方法
Dom
03-09
**DOM（Document Object Model）详解** DOM，全称为文档对象模型（Document Object Model），是W3C组织制定的一种标准，它提供了一种结构化的表示XML或HTML文档的方式，并且允许程序和脚本动态地访问和更新文档的...
dom
02-24
DOM，全称为“Document Object Model”，中文译为“文档对象模型”，是Web开发中的一个核心概念，尤其是在JavaScript中。它是一种标准，定义了如何表示HTML或XML文档，并提供了与这些文档交互的API（应用程序编程...
jquery的运用
hao_dream_xi的博客
06-08 334
jquery的运用 jquery的导入 <script type="text/javascript" src="${pageContext.request.contextPath }js/jquery-3.3.1.js"></script> jquery的程序入口： $(function(){ alert("hello jquery1"); }) $(do...
JQ操作DOM
dingxue3465的博客
03-16 217
回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦，而且有的浏览器只有innerHTML，有的浏览器支持innerText，有了jQuery对象，不需要考虑浏览器差异了，全部统一操作！ 修改Text和HTML jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结构： <!-- HTML结构 --> <...
jQuery的基本使用
韩旭不会敲代码吧的博客
07-17 613
一、jQuery概述 1、版本信息 分为压缩版的和未压缩版的，为压缩的有利于阅读，大部分主流网站用的版本是1.x 2、优点 (1)轻量级。核心文件才几十kb，不会影响页面的加载速度 (2)跨浏览器兼容，基本兼容了现在主流的浏览器 (3)链式编程、隐式迭代 (4)对事件、样式、动画支持，大大简化了DOM操作 (5)支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。 (6)免费、开源 二、jQuery基础 1、jQuery和js加载模式区别 1、原生JS会等到DOM元素加载完毕
JQuery的基本使用
pipizhen_的博客
08-13 1028
JQuery的基本使用： 使用JQuery完成页面定时弹出广告 使用JQuery完成表格的隔行换色 使用JQuery完成复选框的全选效果 使用JQuery完成省市联动效果 使用JQuery完成下列列表左右选择 使用JQuery完成表单的校验(扩展) 定时器： setInterval clearInterval setTimeout clearTimeout 显示： img.style.display = “block” 隐藏： img.style.display = “none”
jQuery的基本使用方法
最新发布
m0_58310590的博客
04-03 1165
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。​ jQuery是一个功能强大且易于使用的JavaScript库，它简化了JavaScript在网页开发中的操作和交互。它提供了一系列易于使用的功能和方法，使得开发者可以更松弛地处理HTML文档的操作、事件处理、动画效果、Ajax请求等。
jQuery 的基本使用
Lotus_fragrance的博客
06-05 158
1、jQuery 的入口函数2、jQuery 对象和 DOM 对象
JQuery使用方法及详解
Mr_li13的博客
12-28 792
问题？JQuery使用方法及详解 1.定义： JQuery是继prototype之后又一个优秀的Javascript库(说白了它还是基于JavaScript的)。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地
jquery的简单用法 一
鲨鱼儿的博客
12-27 2302
1、js 中 字符串 可以 与数字 进行加减 预算（原理：将数字转化为字符串进行拼接操作）   一、javascript的基本知识：      1、js 与 jquery的关系：                  jquery 只是 js 方便操作 html节点的 库。      2、DOM对象、DOM节点、jquery对象概念：       （1）DOM对象：            ...
JQuery的基本用法
weixin_42528089的博客
12-17 380
 常用的形式,$代表jquery $(document).ready(function(){ }); Jquery的基本语法 $(选择器).操作（） eg: $("p").hide(); 1 标记选择器： $("p") 2 id选择器（#） id=test的属性 $("#test") 3 class 选择器 通过组件class 属...
jQuery的常见使用
一名菜鸟qaq
12-14 1093
一、JQuery的介绍 JQuery的全程为：JavaScript和查询（Query），即是辅助JavaScript开发的库，它是JavaScript很多人使用的一种库. 听到全称是查询，所以顾名思义jQuery的核心是选择器,用于获取页面元素,同时jQuery提供了大量的高效方法。提高了开发的速度 在使用jQuery之前，我们需要先进行下载jQuery的js，以便于我们直接导入。网址为以下 jQueryjQuery: The Write Less, Do More, JavaScript ...
JavaScript DOM 高级编程指南
"JavaScript DOM 高级程序设计（加）桑贝斯" JavaScript DOM（Document Object Model）高级程序设计是Web开发中的重要主题，它涉及到如何使用JavaScript与网页的结构进行交互，包括创建、修改和操作HTML和XML文档的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值