jQuery 获取内容和属性与 DOM 常用操作 - PHP第11期作业

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > jQuery 获取内容和属性与 DOM 常用操作

博主信息

博文 43

粉丝 1

访问量 43187

专题推荐

更多>

在线预览变色方块

一、jQuery常用的 getter/setter 操作

jQuery 可以通过以下方法获取内容和属性，并进行参数设置。

attr():对html属性进行操作
css():针对html元素的style属性进行操作
val():获取设置表单元素的值
html()/text():元素内容操作

代码演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="lib/jquery-3.5.1.js"></script>
    <title>基本的getter/setter-1(设置和获取)</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #666;
      }
      form {
        width: 400px;
        /* height: 150px; */
        padding: 20px 10px;
        border: 1px solid #aaa;
        box-shadow: 0 0 5px #888;
        box-sizing: border-box;
        background-color: #eee;
        display: grid;
        grid-template-columns: 80px 200px;
        gap: 10px;
        place-content: center center;
      }
      button {
        grid-column: 2 / 3;
        height: 26px;
      }
      button:hover {
        color: white;
        background-color: #888;
        border: none;
        cursor: pointer;
      }
      .red {
        color: red;
      }
    </style>
  </head>
  <body>
    <h2 class="red">用户登录</h2>
    <form action="handle.php" method="POST">
      <label for="email">Email:</label>
      <input
        type="email"
        name="email"
        id="email"
        autofocus
        value="lulu@php.cn"
      />
      <label for="password">Password:</label>
      <input type="password" name="password" id="password" value="不少于6位" />
      <label for="confirm">记住我:</label>
      <div>
        <input type="radio" name="save" id="confirm" value="1" checked /><label
          for="confirm"
          >保存</label
        >
        <input type="radio" name="save" id="cancel" value="0" /><label
          for="cancel"
          >放弃</label
        >
      </div>
      <button>登录</button>
    </form>
    <script>
      var form = $("form");
      console.log(form);
      // 1.attr():对html属性进行操作
      // attr(name):　getter 获取某个参数的属性
      // attr(name, value):　setter 设置某个参数的属性
      console.log(form.attr("action"));
      form.attr("action", "admin/check.php");
      console.log(form.attr("action"));
      form.attr({
        action: "select.php?id=4", //换成对象自变量格式
        method: "post",
      });
      //attr(属性, function()):第二个参数支持回调函数
      form.attr("action", function () {
        // 动态设置处理脚本, 如果是get, 则返回脚本query.php?id=1,如果非get, 则返回脚本register.php
        var method = $(this).attr("method").toLowerCase();
        return method === "get" ? "query.php?id=1" : "register.php";
      });
      // 2.css():针对html元素的style属性进行操作
      //不仅可以获取到style属性的值，还可以获取到该元素所有样式
      //原生方法获取属性
      console.log(
        window.getComputedStyle(document.querySelector("form")).width
      );
      //jQuery方式获取属性更简单
      console.log(form.css("width"));
      form.css("border", "1px solid skyblue");
      form.css({
        backgroundColor: "lightgreen",
        border: "2px dashed blue",
      });
      form.css("background-color", function () {
        //这是一个有四个颜色值的数组，目标是从这个数组中随机返回一个值
        var bgcolor = ["plum", "lightblue", "tan", "lime", "cyan", "pink"];
        // 返回哪个值，由一个随机索引决定，索引必须在0 -3之间
        var randomIndex = Math.floor(Math.random() * bgcolor.length);
        return bgcolor[randomIndex]; //每刷新一次页面,对话框的背景就会发生变化
      });
      // 3. val():获取设置表单元素的值
      console.log($("#email").val());
      $("#email").val("Anna@php.cn");
      console.log($("#email").val());
      // 获取选中的按钮的值
      console.log($("input:radio[name=save]:checked").val()); //这种获取方式较麻烦
      //用回调函数设置回默认值
      $("#email").val(function () {
        return this.defaultValue;
      });
      // 4.html()/text():获取和设置元素内容
      //innerText ===> text();
      //原生方式
      document.querySelector("h2").innterHMTL = "请登录";
      //jQuery方式
      $("h2").text("赶紧登录");
      //innerHTML===>html()
      document.querySelector("h2").innterHMTL =
        '<span style="color:blue">请登录</span>';
      $("h2").html('<span style="color:blue">请登录</span>');
      $("h2").html("请登录");
      //html()可以替换text()方法，但是text()不能替换html()方法
    </script>
  </body>
</html>

输出效果：

二、jQuery常用的DOM操作方法

通过 jQuery，可以很容易地添加新元素或者内容。
添加新内容的四个 jQuery 方法：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <title>常用的DOM操作</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body></body>
</html>
<script>
  // 1.元素的添加与替换,父级.append(元素)
  $("body").append("<ol>");
  // 将子元素.appendTo添加到父级元素中
  $("<li>").text("apples").appendTo("ol");
  $("<li>").addClass("active").text("oranges").appendTo("ol");
  //添加元素时同时创建元素的属性
  $("<li>", {
    id: "fruits",
    style: "background-color:skyblue",
  })
    .html("<a href=''>peaches</a>")
    .appendTo("ol");
  //使用回调函数append(callback)添加元素
  $("ol").append(function () {
    var res = "";
    for (var i = 0; i < 5; i++) {
      res += "<li><a href=''>new goods" + (i + 1) + "</a></li>";
    }
    return res;
  });
  //2.从第3个元素前面添加<li> before(),在某个元素之前添加
  $("ol>li:nth-of-type(3)").before("<li>pears</li>");
  //3.insertAfter()
  $("<li>lemons</li>").insertAfter("ol>li:nth-of-type(4)");
  //4. prepend(),prependTo(),将新元素添加到头部
  $("<li>最新产品</li>").prependTo("ol");
  //5.元素的替换 : replaceWith()
  $("ol>li:last-of-type").replaceWith("<h3>Hello JuJu</h3>");
  $("<p>Hello Mockey...</p>").replaceAll("ol>li:nth-of-type(2)");
</script>

输出效果：

三、jQuery 过滤器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <title>jQuery常用过滤器</title>
  </head>
  <body>
    <ul id="first">
      <li>item1</li>
      <li>item2</li>
      <ul>
        <li>item1</li>
        <li class="red">item2</li>
        <li>item3</li>
      </ul>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
    <ul id="second">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ul>
  </body>
</html>
<script>
  //children
  var ul2 = $("ul").filter("#second");
  console.log(ul2.children()); //查看ul2里面有多少个子元素
  var children = ul2.children();
  //first():第一个
  children.first().css("background", "lightblue");
  //last():最后一个
  children.last().css("background", "lightblue");
  //eq(n):返回任何一个
  children.eq(2).css("background", "lightblue");
  // children()只限子元素
  ul2.children("red").css("color", "red");
  //find():对所有层级查询 效率比较低，但是直观
  ul2.find("red").css("color", "red");
  console.log($("ul").find("red"));
  //仅获取第2个和第3个子元素
  $("ul").filter("#second").children().slice(1, 3).css("color", "red");
  console.log($("ul").filter("#second"));
  //原生方法
  var ul1 = document.querySelectorAll("#first > li:first-of-type");
  ul1.forEach(function (item) {
    item.style.color = "red";
  });
  var ul1 = document.querySelectorAll("#first > li:last-of-type");
  ul1.forEach(function (item) {
    item.style.color = "skyblue";
  });
  var ul1 = document.querySelectorAll("#first > li:nth-of-type(-n+3)");
  ul1.forEach(function (item) {
    item.style.color = "orangered";
  });
</script>