Jquery操作DOM对象

文章目录

  • 目录

    文章目录

    本章目标

    一.DOM操作分类

    二.JQuery中的DOM操作

     内容操作

     属性值操作

     节点操作

    节点属性操作

     节点遍历

    总结


本章目标

  • 使用Jquery操作网页元素
  • 使用JQuery操作文本与属性值内容
  • 使用JQuery操作DOM节点
  • 使用Jquery遍历DOM节点
  • 使用JQuery操作CSS-DOM

一.DOM操作分类

二.JQuery中的DOM操作

 内容操作

HTML代码操作

语法: 

#获取当前JQ对象内的所有代码并保存在变量str中
var str = JQ.html();
#将变量str的内容(包含代码)注入到当前JQ对象中并转译代码
JQ.html(str);
#将变量str的内容(包含代码)注入到当前JQ对象中但不转译代码
JQ.text(str);

 演示案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input id="button" type="button" value="点击此处条用html()函数"/><div class="div"></div><script src="jq/jquery-3.7.1.js"></script><script type="text/javascript">$(function(){$("#button").click(function(){var str= $("ul").html();$(".div").html(str);});});</script></body>
</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="searchInput" placeholder="输入搜索内容" value="">  <button id="searchButton">搜索</button>  <script src="jq/jquery-3.7.1.js"></script><script type="text/javascript">  $(document).ready(function() {  //当按钮被点击时  $("#searchButton").click(function() {  //获取搜索框value的值  var searchValue = $("#searchInput").val();          window.alert(searchValue);});  });</script>  
</body>  
</html>

 节点操作

  • 插入节点

 演示案例

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>jQuery Append, After, Before 示例</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
</head>  
<body>  <div id="container">  <p id="para1">段落1</p>  <p id="para2">段落2</p>  <p id="para3">段落3</p>  
</div>  
<script src="jq/jquery-3.7.1.js"></script>
<script type="text/javascript">  $(document).ready(function() {  // 使用 append() 在容器末尾添加新元素  $('#container').append('<p>使用append()添加的新段落</p>');       // 使用 after() 在指定元素后面添加新元素  $('#para2').after('<p>使用after()在段落2后面添加的新段落</p>');  // 使用 before() 在指定元素前面添加新元素  $('#para3').before('<p>使用before()在段落3前面添加的新段落</p>');  });
</script>  </body>  
</html>

  •  删除节点
#删除节点
JQ.rmove();
#清空节点
JQ.empty();
  •  复制节点

演示案例: 

 $(function(){$("#para1").click(function(){var NewNode = $(this).clone(true);$('#container').append(NewNode);});});	});

在插入节点案例的代码中添加上述代码可实现点击段落1即可复制段落1

节点属性操作

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>jQuery操作节点属性案例</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
</head>  
<body>  <img id="myImage" src="images/book.gif" alt="" width="300" height="200">  <button id="readButton">读取属性</button>  
<button id="updateButton">更新属性</button>  
<button id="removeButton">删除属性</button>  
<script src="jq/jquery-3.7.1.js"></script>  
<script type="text/javascript">  $(document).ready(function() {  // 读取属性  $('#readButton').click(function() {  var src = $('#myImage').attr('src');  var alt = $('#myImage').attr('alt');  alert('图片源(src): ' + src + '\n替代文本(alt): ' + alt);  });  // 更新属性  $('#updateButton').click(function() {  $('#myImage').attr({  //点击更新属性后图片将切换src:"images/html.png"});  });  // 删除属性  $('#removeButton').click(function() {  $('#myImage').removeAttr('width');  $('#myImage').removeAttr('height');  });  });
</script>  </body>  
</html>

 点击”读取属性“将会弹出图片属性,点击"更新属性"将会更新图片

 节点遍历

 演示案例

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>jQuery遍历节点元素案例</title>   
</head>  
<body>  <ul id="myList">  <li>列表项 1</li>  <li>列表项 2</li>  <li>列表项 3</li>  <li>列表项 4</li>  <li>列表项 5</li>  
</ul>  
<script src="jq/jquery-3.7.1.js"></script>  
<script type="text/javascript">$(function(){var nodes = $("#myList").children();window.alert(nodes.length);}); 
</script>  
</body>  
</html>


总结

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/709974.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WebServer -- 日志系统(下)

目录 &#x1f33c;整体思路 &#x1f382;基础API fputs 可变参数宏 __VA_ARGS__ fflush &#x1f6a9;流程图与日志类定义 流程图 日志类定义 &#x1f33c;功能实现 生成日志文件 && 判断写入方式 日志分级与分文件 &#x1f33c;整体思路 日志系统分两部…

无法调试MFC源码

VS无法调试MFC源码 起初 有时候就是这么无奈&#xff0c;MFC源码各种问题没有办法调试&#xff0c;可是又想看下代码如何调用&#xff0c;里面做了些什么&#xff0c;从哪儿调出&#xff0c;学习一下大神的思路什么的。整理一下有可能的原因。 检查生成代码设置 需要设置正…

04 Opencv图像操作

文章目录 读写像素修改像素值Vec3b与Vec3F灰度图像增强获取图像通道bitwise_not 算子对图像非操作 读写像素 读一个GRAY像素点的像素值&#xff08;CV_8UC1&#xff09; Scalar intensity img.at(y, x); 或者 Scalar intensity img.at(Point(x, y)); 读一个RGB像素点的像素值…

虚拟机看不到共享文件夹

johnjohn-virtual-machine:/mnt/hgfs$ cat /etc/issue Ubuntu 20.04.6 LTS \n \l 看下是否挂载 johnjohn-virtual-machine:/mnt/hgfs$ vmware-hgfsclient FPGAs_AdaptiveSoCs_Unified_2023.2_1013_2256 xilinx 取消挂载 johnjohn-virtual-machine:/mnt/hgfs$ sudo umount /mn…

kvm虚拟机修改网络模式

kvm修改网络模式可以直接使用virsh命令进行修改 一、查看主机 virsh list --all 二、查看需要修改主机的网络模式 virsh domiflist mysql 三、vim进行修改 cd /etc/libvirt/qemu/ vim mysql.xml 四、找到要修改的网卡部分 五、重新定义虚拟机 virsh define mysql_install.xml…

java工具类之解析地址

输出 代码实现 import java.util.regex.Matcher; import java.util.regex.Pattern;public class AddressResolutionUtil {/*** 解析地址* author ys* param address* return*/public static String addressResolution(String address){String regex"(?<province>…

Java的编程之旅32——继承与多态的联合使用

模拟USB设备接入电脑 1.首先建立一个名为“USB”的抽象类 public abstract class USB {public abstract void On();public abstract void Off(); }这是一个抽象类USB&#xff0c;表示一个USB设备。 该类有两个抽象方法On()和Off()&#xff0c;分别表示打开和关闭USB设备。 由…

javaee教程郑阿奇,一线互联网架构师筑基必备技能之Java篇

一、什么情况下会发生栈内存溢出&#xff1f; 1、栈是线程私有的&#xff0c;栈的生命周期和线程一样&#xff0c;每个方法在执行的时候就会创建一个栈帧&#xff0c;它包含局部变量表、操作数栈、动态链接、方法出口等信息&#xff0c;局部变量表又包括基本数据类型和对象的引…

【GameFramework框架内置模块】6、实体(Entity)

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 【GameFramework框架】系列教程目录&#xff1a; https://blog.csdn.net/q7…

K 个一组翻转链表 力扣

【玩转校招算法面试】第三天&#xff1a;链表中的节点每k个一组翻转&#xff08;动画演示、手写 Java 代码、详细注释、LeetCode 高频算法题&#xff09;_哔哩哔哩_bilibili 初始状态&#xff1a;1 -> 2 -> 3&#xff0c;pre null, cur 1保存当前节点的下一个节点&…

并查集基础,死去的回忆突然攻击我

并查集普及【模板】并查集 - 洛谷 #include<iostream> #include<cstring> #include<queue> #include<vector> #include<algorithm> using namespace std; #define int long long typedef pair<int,int> PII; #define xx first #define y…

TypeScript 中类的理解及应用场景

&#x1f469; 个人主页&#xff1a;不爱吃糖的程序媛 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域新星创作者、CSDN内容合伙人&#xff0c;专注于前端各领域技术&#xff0c;成长的路上共同学习共同进步&#xff0c;一起加油呀&#xff01; ✨系列专栏&#xff1a;前端…

瑞_23种设计模式_组合模式

文章目录 1 组合模式&#xff08;Composite Pattern&#xff09;1.1 介绍1.2 概述1.3 组合模式的结构1.4 组合模式的分类1.5 组合模式的优点1.6 组合模式的使用场景 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 &#x1f64a; 前言&#xff1a;本文章为瑞_系列…

TP6上传图片到OSS(记录贴)

1&#xff0c;先安装&#xff0c;我使用composer安装 在项目的根目录运行composer require aliyuncs/oss-sdk-php 2,安装成功以后vendor目录下可以看到如图&#xff1a; 3&#xff0c;上传图片代码如下&#xff1a; <?php namespace app\controller;use app\BaseControll…

1、docker入门

文章目录 1、tocker简介2、tocker的安装&环境配置2、配置阿里云镜像3、基本命令1、镜像命令2、docker基本命令3、镜像基本命令4、Docker 容器常用命令 1、tocker简介 新一代的虚拟化技术 2、tocker的安装&环境配置 uname -r1、首先查看liunx的内核 yum update -y2、更…

生成voc格式数据集

数据集存放格式&#xff1a;&#xff08;Annotations文件夹放标注的xml文件&#xff0c;JPEGImages文件夹放标注的图片&#xff09; 运行代码&#xff1a; import os import random import xml.etree.ElementTree as ETimport numpy as npdef get_classes(classes_path):with …

USACO 2024 Feb Bronze铜组题解

闲话:今天是4年一度的奇观——2月29日!(地球人都知道) 所以为了纪念这个特殊的日子&#xff0c;我决定倒着讲。这是什么奇怪的规矩&#xff1f;(雾 Maximizing Productivity: 二分即可。 #include <bits/stdc.h> using namespace std; const int maxn200005; int c[ma…

深入理解Java中的优先级队列(堆)——PriorityQueue

引言&#xff1a; 在Java中&#xff0c;优先级队列&#xff08;PriorityQueue&#xff09;是一种基于堆结构实现的队列&#xff0c;其中每个元素都有一个优先级&#xff0c;优先级高的元素在队列中具有更高的优先级&#xff0c;排在前面。优先级队列常用于任务调度、事件处理等…

LeetCode——栈和队列(Java)

栈和队列 简介[简单] 232. 用栈实现队列[简单] 225. 用队列实现栈[简单] 20. 有效的括号[简单] 1047. 删除字符串中的所有相邻重复项[中等] 150. 逆波兰表达式求值[困难] 239. 滑动窗口最大值[中等] 347. 前 K 个高频元素 简介 记录一下自己刷题的历程以及代码。写题过程中参考…

网工内推 | 项目经理,软考证书优先,最高26K,加班补贴

01 龙盈智达 招聘岗位&#xff1a;项目经理 职责描述&#xff1a; 1 根据业务员需求&#xff0c;完成生态圈下账簿中心系统的开发管理工作。 2 负责账簿中心实施过程中的需求调研分析、方案设计、开发测试、系统上线等工作的计划、组织协调、沟通等方面管理工作。 3 完成系统核…