Educoder jQuery DOM操作

最新推荐文章于 2024-04-24 10:00:20 发布
最新推荐文章于 2024-04-24 10:00:20 发布
阅读量1.8k 收藏 28
点赞数 2
分类专栏： （jQuery+Bootstrap) of Educoder 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65391975/article/details/128190974
版权

目录

 Educoder jQuery DOM操作

第1关：jQuery获取内容和属性

第2关：jQuery设置内容和属性

 第3关：jQuery添加元素

第4关：jQuery删除元素

 Educoder jQuery DOM操作

第1关：jQuery获取内容和属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <style>
    .container{
        width: 300px;
        margin: 30px auto;
    }
    .box{
        border: 2px solid #000;
        background: #eee;
        padding: 10px;
    }
    p{
        font-size: 18px;
    }
    input{
        height: 30px;
    }
    button{
       margin-bottom: 30px;
    }
    </style>
</head>
<body>
    <div class="container">
       <button class="btn1">获取文本内容</button>
        <button class="btn2">获取内容</button>
        <button class="btn3">获取表单value值</button>
       <div class="box">
           <p>我是第一行</p>
           <p>我是第二行</p>
           输入框:<input class="getVal" type="text" value="Hello Educoder"/>
       </div>

    </div>
     
   <script>

    $(function(){        
        //------------ Begin -----------
        $(".btn1").click(function() {
            alert($(".box").text());
        });
        $(".btn2").click(function() {
            alert($(".box").html());
        });
        $(".btn3").click(function(){
            var getValue = $(".getVal").val() + "---" + $(".getVal").attr("type");
            alert(getValue);
        });
        
        
        
        //------------ End --------------
    })

   </script>
</body>
</html>

第2关：jQuery设置内容和属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <style>
    .container{
        width: 300px;
        margin: 30px auto;
    }
    .box{
        border: 2px solid #000;
        background: #eee;
        padding: 10px;
    }
    p{
        font-size: 18px;
    }
    input{
        height: 30px;
    }
    button{
       margin-bottom: 30px;
    }
    </style>
</head>
<body>
    <div class="container">
       <button class="btn1">填充文本内容</button>
        <button class="btn2">填充内容</button>
        <button class="btn3">填充value值</button>
       <div class="box">
           <p class="first"></p>
           <p class="second"></p>
           输入框:<input class="getVal" type="text" value="Hello Educoder"/>
       </div>

    </div>
     
   <script>

    $(function(){        
        //------------ Begin -----------
         $(".btn1").click(function() {
            $(".first").text("我是第一行");
        });
        $(".btn2").click(function() {
            $(".second").html("<span>我是第二行</span>");
        });      
        $(".btn3").click(function() {
            var typeAttr = $(".getVal").attr("type","password");
            $(".getVal").val(typeAttr);
        });   
        
        
        
        //------------ End --------------
    })

   </script>
</body>
</html>

 第3关：jQuery添加元素

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

  <style>
   button{
    margin-top:20px;
   }
  </style>
</head>
<body>
   <table class="tab" border="1" width="100%" cellspacing="0"  cellpadding="10" align="center">
  <tr id="tb-head">
    <th>序号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>住址</th>
  </tr>
  <tr>
    <td>1</td>
    <td>张三</td>
    <td>男</td>
    <td>20</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>2</td>
    <td>李四</td>
    <td>男</td>
    <td>30</td>
    <td>洛杉矶</td>
  </tr>
  <tr>
    <td>3</td>
    <td>丽丽</td>
    <td>女</td>
    <td>24</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>4</td>
    <td>王五</td>
    <td>男</td>
    <td>26</td>
    <td>河南</td>
  </tr>
</table>
    <script>    
    $(function(){
      var count = 4;        
      //---------表格下面添加【添加内容】按钮-------------
	  //------------------- Begin ---------------
	    var addBtn ='<button class="btn">添加内容</button>';
        $(".tab").after(addBtn);
        
      //------------------- End -----------------
       function loadData(){
          for(var i =0; i<2; i++){
            count ++;
             var tr = '<tr>' +
                  '<td>' + count + '</td>'+
                  '<td>王五</td>'+
                  '<td>男</td>'+
                  '<td>26</td>'+
                  '<td>河南</td>'+
                '</tr>';

         //---------表格底部添加内容------------
		 //------------------- Begin ---------------
          $(".tab").append(tr); 
           
         //------------------- End -----------------

          }
       }
        //-------------点击事件-----------------
		//------------------- Begin ---------------
		$(".btn").click(function() {
            loadData();
        });
        
       //------------------- End -----------------
    })
    </script>

</body>
</html>

第4关：jQuery删除元素

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

  <style>
   button{
    margin-top:20px;
   }
  </style>
</head>
<body>
   <table class="tab" border="1" width="100%" cellspacing="0"  cellpadding="10" align="center">
  <tr class="line">
    <th>序号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th class="final">住址</th>
  </tr>
  <tr class="line">
    <td>1</td>
    <td>张三</td>
    <td>男</td>
    <td>20</td>
    <td class="final">北京</td>
  </tr>
  <tr class="line">
    <td>2</td>
    <td>李四</td>
    <td>男</td>
    <td>30</td>
    <td class="final">洛杉矶</td>
  </tr>
  <tr class="line">
    <td>3</td>
    <td>丽丽</td>
    <td>女</td>
    <td>24</td>
    <td class="final">上海</td> 
  </tr>
  <tr class="line">
    <td>4</td>
    <td>王五</td>
    <td>男</td>
    <td>26</td>
    <td class="final">河南</td>
  </tr>
</table>
<button class="btn1">删除最后一行</button>
<button class="btn2">删除最后一个住址</button>
    <script>
    //-----------begin-----------
    $(".btn1").click(function() {
        $(".line").last().remove();
      });
    $(".btn2").click(function() {
        $(".final").last().empty();
    });


    
    
    //------------end------------  
    </script>
    
</body>
</html>

川尚丘库
关注
  • 2
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
6-2、选择器
鸵鸟
09-06 890
选择器
jQuery DOM操作实例
10-26
本文用代码的方式详细讲解了jQuery的DOM操作,具体操作方法请详细参看代码中的注释部份
JQuery专题(三)-JQuery之DOM操作
weixin_43139024的博客
10-03 534
JQuery
jQuery 上部分--头歌（educoder)实训作业题目及答案
最新发布
qq_69173578的博客
04-24 2543
jquery基础
js,jQuery操作节点，获取、设置属性，操作class属性
yinge0508的博客
01-06 2264
1，创建元素节点： js: document.createElement("div") jQuery: $("<div></div>") 2,创建文本节点并添加到某个元素节点： js: var e1 = document.createTextNode("text content"); // 创建文本节点 var e2 = document....
jQuery中的DOM操作
qq_40867650的博客
05-25 215
1. 什么是DOM DOM(Document Object Model—文档对象模型)：一种与 浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地 访问页面中所有的标准组件 2. DOM 操作的分类 DOM Core：DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处 理网页, 也可以用来处理任何一种是用标记语言编写出来的文 档, 例如: XML HTML DOM：使用 JavaScript 和 DOM 为 HTML 文
jQuery - 获取内容和属性
m0_58492934的博客
07-27 1119
W3C文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。jQuery提供一系列与DOM相关的方法，这使访问和操作元素和属性变得很容易。html()-设置或返回所选元素的内容（包括HTML标记）jQuery中非常重要的部分，就是操作DOM的能力。jQueryattr()方法用于获取属性值。text()-设置或返回所选元素的文本内容。val()-设置或返回表单字段的值。...
jQuery DOM操作小结与实例
10-29
jQuery 是一个广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作。DOM是HTML和XML文档的结构表示，允许我们通过编程方式访问和修改文档内容。在jQuery中，DOM操作包括创建新元素、复制现有...
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
jquery DOM操作 基于命令改变页面
10-29
jQuery（又名JQuery）是一种广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作。在网页开发中，DOM是HTML或XML文档的结构化表示，允许通过编程方式访问和修改页面内容。jQuery提供了丰富的...
jQuery Dom元素操作技巧
10-18
DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了jquery dom元素操作方法，需要的朋友参考下
JQueryDOM之样式操作
10-17
主要介绍了JQueryDOM之样式操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
educoder平台操作
11-22
帮助使用educoder平台，面向过程程序设计，有关c语言，可以加入课程然后，加入课群，最后可以完成作业或考试。
jQuery 中DOM 操作详解
10-24
主要介绍了jQuery 中DOM 操作详解,需要的朋友可以参考下
jQuery DOM操作 基于命令改变页面
10-29
每天都在与DOM打交道而且晕头转向，不过，自打咱认识了jQuery：是操作属性也不烦了，插入新元素也不晕了，连移动元素及包装元素咱也不抽筋了。。
jQuery DOM插入节点操作指南
01-19
方法 描述 示例 append() 向每个匹配的元素内部...的$(A).append(B)的操作，是将A追加到B中。 HTML代码：我想说: jQuery代码： $(“你好”).appendTo(“p”) 结果： 我想说:你好</b></p> prepend() 向每个匹配
jQuery设置内容以及属性
weixin_46084096的博客
08-30 260
jQuery设置内容以及属性时一般采用text，HTML，val三种方法，text显示文本内容，HTML显示页面标签，val为显示表单字段的值。 orig与text，HTML，val等联合使用，如origtext代表显示原先的文本。其他情况同理。 attr方法也可用对值进行改变。也可支持多个属性的修改。 attr（）方法可以与回调函数一起使用，进行对于值的修改。回调函数需要使用两个值，一个为被选元素的下标，另一个为原始值。 ...
jquery dom操作educoder
06-28
### 回答1： jQuery是一种JavaScript库，它提供了一种简单的方式来操作DOM元素。通过使用jQuery，我们可以轻松地选择和操作HTML元素，添加或删除元素，以及更改元素的样式和属性。jQuery还提供了许多有用的功能，如事件处理程序和动画效果，使得开发Web应用程序变得更加容易和高效。 ### 回答2： jQuery是一个js库，它主要用于简化DOM操作和AJAX操作的代码编写。DOM操作是指通过JavaScript代码改变网页文档的结构、样式和内容，使其能够呈现出更加友好的效果。而jQuery正是针对这一方面做了大量的优化和封装。 在使用jQuery进行DOM操作时，我们可以使用它提供的一些方法来获取、创建或修改DOM元素。例如，通过选择器获取某一个元素，可以使用 $("#id")、$(".class")或者$("tag")等方法；通过调用attr()、css()、html()、val()等方法来修改元素的属性、样式、内容和值；通过append()、prepend()、before()、after()等方法来添加、移动或者复制元素等等。 使用jQuery进行DOM操作的好处之一在于它提供了非常简洁的代码，能够帮助我们快速完成复杂的DOM操作。在大型项目中，这是非常重要的，因为不用编写大量重复的代码能够提高生产效率，同时也可以提高代码的可维护性和可读性。 此外，jQuery还能够极大地简化AJAX操作。我们可以使用它提供的ajax()方法来进行与后台数据的交互，而不需要手动编写XMLHttpRequest对象。此外，jQuery库还提供了丰富的插件和扩展功能，如时间管理、表单验证等等，可以极大地方便开发者完成各种任务。 总之，jQuery的出现为前端开发带来了极大的便利。通过它提供的DOM操作和AJAX功能，我们能够更加简洁高效地实现前端开发，并提高项目的质量和效率。 ### 回答3： jQuery是一种流行的JavaScript库，用于DOM操作，图像效果，事件处理，AJAX等功能。它让开发人员能够轻松选择和操作页面上的元素，而不必编写大量的JavaScript代码。 DOM操作是jQuery的主要功能之一。通过jQuery，开发人员可以轻松地选择特定的HTML元素，然后对它们进行各种操作。例如，开发人员可以使用jQuery轻松地查找所有带有特定ID或类的元素，然后根据需要添加、删除或修改这些元素。 除了选择和操作元素之外，jQuery还为开发人员提供了一些有用的效果，例如动画效果，包括淡入淡出、滑动、展开和折叠等。这些效果可以用来制作动态和交互式控件，让页面更加生动有趣。 jQuery还可以用于处理事件。开发人员可以使用它来捕获鼠标、键盘和触摸等事件，并根据需要执行相应的操作。例如，在单击元素时，可以使用jQuery来显示或隐藏其他元素，或者发送一个AJAX请求以更新页面内容。 最后，jQuery还可以用于处理AJAX请求。它可以轻松地发送HTTP请求，并使用返回的数据更新页面内容，而无需使用传统的JavaScript技术。 总之，jQuery是一种强大而灵活的JavaScript库，可用于各种DOM操作、图像效果、事件处理和AJAX请求。无论是编写简单的动态网页还是复杂的Web应用程序，jQuery都是开发人员的理想选择。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值