AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

jQuery 操作 DOM 及 CSS

2024-09-27 38
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改，包括如何获取和设置元素的文本内容、属性值、添加和删除元素，以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码，展示了jQuery在实际开发中的便捷性。

1. jQuery 修改|获取页面元素文本及属性值

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标签）

val() - 设置或返回表单字段的值

attr() - 方法用于获取属性值。

1.1 举例：利用jQuery获取页面元素的文本内容以及输入框的值和属性值。

<!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>jquery学习</title>
</head>

<body>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>

  <div id="demo1">
    <p>hi ~~~~ </p>
    <p>2023-05-18</p>
  </div>
  <form action="" >
     <input type="text" name="username" value="admin" id="uname"><br>
     <input type="password" name="password" value="00000" id="upwd"><br>
     <input type="submit" value="提交">
  </form>
  <script>
      // 获取id为demo1下的所有p标签的文本值
      console.log($("#demo1>p").text());
      console.log($("#demo1").html());
      // 获取表单form中的字段值
      console.log($("#uname").val());
      console.log($("#upwd").val());
      // 获取输入框的属性值
      console.log($("#uname").attr("value"));
      console.log($("#uname").attr("name"));
  </script>
</body>

</html>

在这里插入图片描述

1.2 举例：利用jQuery修改页面元素的文本内容，输入框的值和属性值

<!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>jquery学习</title>
</head>

<body>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>

  <div id="demo1">
    <p>hi ~~~~ </p>
    <p>2023-05-18</p>
  </div>
  <form action="" >
     <input type="text" name="username" value="admin" id="uname"><br>
     <input type="password" name="password" value="00000" id="upwd"><br>
     <input type="submit" value="提交">
  </form>
  <script>
      // 修改id为demo1内的元素内容
      $("#demo1").html("<h3>新增h3标题</h3><p></p><p></p>");
      // 修改id为demo1下的所有p标签的文本值
      $("#demo1>p").text("嗯呢,哈哈哈");
      //修改表单form中的字段值
      $("#uname").val("张三");
      $("#upwd").val("123");

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

在这里插入图片描述

2. jQuery 添加元素和删除元素

通过 jQuery，可以很容易地添加和删除新元素/内容。

jQuery为我们提供了四个添加元素的方法:

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

两个删除方法：

  • remove() - 删除被选元素（及其子元素）
  • empty() - 从被选元素中删除子元素

2.1 举例: 添加元素

append() - 在被选元素的结尾插入内容；prepend() - 在被选元素的开头插入内容；after() - 在被选元素之后插入内容；before() - 在被选元素之前插入内容。

<!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>jquery学习</title>
</head>

<body>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>

      <div id="demo1">
        <h2>原有内容</h2>
      </div>
  <script>
      // 获取demo1，开始添加元素
      var demo1 = $("#demo1");
      // prepend 
      demo1.prepend("<h3>prepend 新增h3标题</h3>") ;
      // append 
      demo1.append("<h3>append 新增h3标题</h3>");
      // before
      demo1.before("<h3>before 新增h3标题</h3>");
      // after
      demo1.after("<h3>after 新增h3标题</h3>");
  </script>
</body>

</html>

在这里插入图片描述

观察一下，perpend 和 append 是将元素插入到了选择的元素的内部，然后prepend是在原有的之前插入，append是在原有的之后插入。

before 和 after 是在元素的外侧插入，before 是之前，after是之后。

2.2 举例: 删除元素

remove() - 删除被选元素（及其子元素），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>jquery学习</title>
  <style>
    /* 为了方便观察结果，给ul加个样式 */
    .List{
    
      border: 1px solid darkorange;
      width: 200px;
      height: 200px;
      background-color: #eee;
    }
  </style>
</head>

<body>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>
     <ul class="List">
      <li>Java</li>
      <li>c</li>
      <li>c++</li>
      <li>c#</li>
      <li>golang</li>
      <li>rust</li>
      <li>php</li>
      <li>python</li>
     </ul>
     <button id="btnDelAllLi">清空所有li</button>
     <button id="btnDelAll">删除ul列表</button>
  <script>
     var ulList = $(".List");
     var btnDelAll = $("#btnDelAllLi");
     btnDelAll.click(function(){
    
      ulList.empty();
     });
     var btnDelAll = $("#btnDelAll");
     btnDelAll.click(function(){
    
      ulList.remove();
     });
  </script>
</body>

</html>

empty 测试

在这里插入图片描述
在这里插入图片描述

remove 测试
在这里插入图片描述

在这里插入图片描述

3. jQuery 操作css

jQuery 提供了若干进行 CSS 操作的方法，常用的如下：

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • hasClass() - 对被选元素查看是否含有指定的类属性，若有则返回true,无则返回true
  • css() - 设置或返回内联样式属性 (设置返回的是style:"")

3.1 举例：多种方法修改页面元素的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>jquery学习</title>
  <style>
    .blog {
    
      width: 400px;
      height: 200px;
      background-color: #eee;
      border: 1px solid darkcyan;
      border-radius: 10px;
    }

    .blog-title {
    
      text-align: center;
    }

    .at-block {
    
      text-align: center;
      border-bottom: 1px dotted black;
    }

    .article {
    
      background-color: #eee;
    }

    /* 字体加粗 */
    .weight{
    
      font-weight: bolder;
    }

    /* 字体缩小 */
    .less{
    
      font-weight:lighter;
    }
    /* 字体颜色 */
    .at-color{
    
      color: cornflowerblue;
    }
  </style>
</head>

<body>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>

  <div class="blog">
    <h3 class="blog-title">杀死一只知更鸟的博客</h3>
    <div class="article">
      <p class="at-block">文章名称：SpringMVC 学习笔记---2021/12/01</p>
      <p class="at-block">文章名称：SpringBoot 学习笔记---2022/02/04</p>
      <p class="at-block">文章名称：ThinkPHP6 学习笔记---2023/05/11</p>
    </div>
  </div>
  <button id="upd1">文章字体加粗</button>
  <button id="upd2">文章字体缩小</button>
  <button id="upd3">字体颜色切换</button>
  <button id="upd4">字体变大</button>
  <button id="upd5">字体样式复原</button>
  <script>
      var p = $(".at-block");
      var btn1 = $("#upd1");
      var btn2 = $("#upd2");
      var btn3 = $("#upd3");
      var btn4 = $("#upd4");
      var btn5 = $("#upd5");
      // 文章字体加粗
      btn1.click(function(){
    
        if(p.hasClass("less")){
    
          p.removeClass("less");
        }
        if(!p.hasClass("less")&&!p.hasClass("weight")){
    
          p.addClass("weight");
        }
      });
      // 文章字体缩小
      btn2.click(function(){
    
        if(p.hasClass("weight")){
    
          p.removeClass("weight");
        }
        if(!p.hasClass("weight")&&!p.hasClass("less")){
    
          p.addClass("less");
        }
      });
      // 字体颜色切换
      btn3.click(function(){
    
        p.toggleClass("at-color");
      });
      // 字体变大
      btn4.click(function(){
    
        p.css("font-size","18px");
      })
      // 字体样式复原
      btn5.click(function(){
    
        if(p.hasClass("weight")){
    
          p.removeClass("weight");
        }
        if(p.hasClass("less")){
    
          p.removeClass("less");
        }
        if(p.hasClass("at-color")){
    
          p.removeClass("at-color");
        }
        // 将style内联属性置为空字符串
        p.attr("style","")
        // p.css("font-size","16px") 与上面的方式效果等价
      });
  </script>
</body>

</html>

这个例子的话，可以自行测试。截图太多啦…

文章标签：
JavaScript
前端开发
关键词：
jQuery CSS
jQuery dom
jQuery DOM CSS
dom css
杀死一只知更鸟debug
目录
相关文章
Star时光
|
2月前
|
JavaScript 前端开发 开发者
深入了解jQuery：轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery：轻松实现高效的DOM操作
Star时光
66 0
哈你真皮
|
2天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后，子菜单以滑动的方式依次展开
哈你真皮
33 21
游客dng4gjyb342he
|
4天前
|
JavaScript
jQuery和CSS3精美翻页式电子时钟特效
jQuery和CSS3精美翻页式电子时钟特效
游客dng4gjyb342he
23 3
游客dng4gjyb342he
|
5天前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
游客dng4gjyb342he
20 1
疯狂的猿
|
21天前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
疯狂的猿
20 0
jQuery+css3制作精美的2024圣诞节倒计时页面
疯狂的猿
|
27天前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下，画面中的文本呈现过山车的轨迹动画上下滚动转圈，且伴随文本颜色渐变效果，非常有意思，欢迎对此特效感兴趣的朋友前来下载参考。
疯狂的猿
22 1
游客dng4gjyb342he
|
23天前
|
JavaScript 前端开发
jQuery和CSS3带变形特效的固定导航菜单
这是一款jQuery和CSS3带变形特效的固定导航菜单。该导航菜单开始时固定在页面左上角，当用户向下滚动时，导航菜单以水滴变形的方式转换为圆形菜单，然后固定在页面的左上角位置。
游客dng4gjyb342he
28 0
听白
|
3月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
听白
18 2
cqtianxin1
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
cqtianxin1
28 4
杀死一只知更鸟debug
|
3月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总，dom操作，ajax请求
本文汇总了jQuery的一些常用操作，包括DOM元素的选择、添加、移除，表单操作，以及如何使用jQuery发送Ajax请求，涵盖了GET、POST请求和文件上传等常见场景。
杀死一只知更鸟debug
27 2