广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery操作HTML代码方法介绍
  • 518
分享到

jQuery操作HTML代码方法介绍

2024-04-02 19:04:59 518人浏览 独家记忆
摘要

html()可以对HTML代码进行操作,类似于元素javascript中的innerHTML。 例如: 示例: <!DOCTYPE html> <html lan

html()可以对HTML代码进行操作,类似于元素javascript中的innerHTML。

例如:

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta Http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html()操作</title>
    <style>
       *{
           margin: 0px;
           padding: 0px;
       }
       input{
           display: block;
           float: left;
       }
    </style>
    <!--引入Jquery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
       $(function(){
            $("#btnGet").click(function(){
                var html=$("div.left").html();
                alert(html);
             });
             $("#btnSet").click(function(){
                var html=$("div.left").html("<div style='border:1px solid red;'><p>这是一个段落</p></div>");
             });
       });
    </script>
</head>
<body>
    <div id="mainbox">
         <h1>飘飞雨絮</h1>
         <div class="left">
             <img src="../qq.jpg" width="150" height="150"/>
             <br />
         </div>
    </div>
    <input type="button" id="btnGet" value="获取html()内容" style="margin-right:10px;" />
    <input type="button" id="btnSet" value="单击改变内容" />
</body>
</html>

效果:

到此这篇关于jQuery操作HTML代码的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: jQuery操作HTML代码方法介绍

本文链接: https://www.lsjlt.com/news/142114.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery操作HTML代码方法介绍
    html()可以对HTML代码进行操作,类似于元素JavaScript中的innerHTML。 例如: 示例: <!DOCTYPE html> <html lan...
    99+
    2022-11-13
  • jQuery操作文本方法介绍
    text()可以获取或设置元素的文本内容。例如: 示例: <!DOCTYPE html> <html lang="en"> <head> ...
    99+
    2022-11-13
  • jQuery操作value值方法介绍
    val()可以获取或设置元素的value属性值。语法如下: 示例: <!DOCTYPE html> <html lang="en"> <head>...
    99+
    2022-11-13
  • jQuery操作属性值方法介绍
    一、获取或设置元素的属性值 attr()获取或设置匹配元素的属性值,语法如下: 获取元素属性值示例: <!DOCTYPE html> <html lang="en...
    99+
    2022-11-13
  • jQuery样式操作方法整理介绍
    目录1.操作css方法2.设置样式类方法2.1添加类2.2移除类2.3切换类3.tab栏切换案例实现效果案例分析核心代码html结构4.jQuery类操作与className区别1....
    99+
    2022-11-13
    jQuery样式操作方法 jQuery样式操作函数 jQuery样式操作
  • C#操作进程的方法介绍
    进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础。在早期面向进程设计的计算机结构中,进程是程序的基本执行...
    99+
    2022-11-13
  • NodeJs操作MYSQL方法详细介绍
    目录在项目中操作数据库的步骤安装与配置 mysql 模块1. 安装 mysql 模块2. 配置 mysql 模块3. 测试 mysql 模块能否正常工作使用 mysql 模块操作 M...
    99+
    2022-11-13
  • Mysql表的操作方法详细介绍
    目录创建表查看表结构修改表删除表创建表 语法: CREATE TABLE table_name ( field1 datatype, field2 datatype, field3 ...
    99+
    2022-11-13
  • Bash Shell字符串操作方法介绍
    这篇文章主要介绍“Bash Shell字符串操作方法介绍”,在日常操作中,相信很多人在Bash Shell字符串操作方法介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Bash Shell字符串操作方法介绍...
    99+
    2023-06-09
  • React代码分割的实现方法介绍
    目录代码分割React.lazy&Suspense异常捕获边界(Error boundaries)基于路由的代码分割命名导出(Named Exports)代码分割 打包是个很...
    99+
    2022-12-03
    React代码分割 React代码分割实现方式
  • python操作mysql数据库的方法介绍
    下面讲讲关于python操作mysql数据库的方法,文字的奥妙在于贴近主题相关。所以,闲话就不谈了,我们直接看下文吧,相信看完python操作mysql数据库的方法这篇文章你一定会有所受益。 &n...
    99+
    2022-10-18
  • jquery通过索引值操作html元素的代码
    eq() :返回带有被选元素的指定索引号的元素。注意:索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)。 remove(): 移除被选元素,包括所有文本和子节点。 htm...
    99+
    2023-05-18
    索引值 html元素
  • nodejs URL模块操作URL相关方法介绍
    url模块 处理HTTP请求时url模块使用率超高,因为该模块允许解析URL、生成URL,以及拼接URL。首先我们来看看一个完整的URL的各组成部分。 href -------------------...
    99+
    2022-06-04
    模块 操作 方法
  • win10电脑自带录屏操作方法介绍
    win10电脑自带录屏怎么使用针对有些用户来说是个难题,因为没有玩游戏的原因所以大部分这种用户不知道如何应用自带的录屏工具,其实对于win10的娱乐功能,微软就加入了录屏也有直播推流等功能的xbox部件,这儿就给这些不知道如何应用自带录屏功...
    99+
    2023-07-10
  • Vue编译器实现代码生成方法介绍
    这里将讨论如何根据JavaScript AST生成渲染函数的代码,即代码生成。代码生成本质上是字符串拼接的艺术。需要访问JavaScript AST中的节点,为每一种类型的节点生成相...
    99+
    2023-01-05
    Vue代码生成 Vue代码生成方案
  • python字符串常见使用操作方法介绍
    目录1.字符串的驻留机制2.什么叫字符串的驻留机制3.字符串驻留机制的优缺点4.字符串的查询操作的方法4.1字符串的大小写转换操作的方法4.2字符串内容对其操作和方法4.3判断字符串...
    99+
    2022-11-13
  • Ajax中GET与POST请求操作方法梳理介绍
    目录Ajax简介Ajax特点Ajax GET请求的基本操作Ajax GET请求的缓存问题Ajax POST请求的基本操作Ajax 设置请求头信息nodemon工具安装基于JSON的数...
    99+
    2022-11-13
    Ajax GET请求 Ajax POST请求
  • Vista操作系统文件共享方法图文介绍
      我们要把D盘中的名为Vista的文件夹共享的话,首先在该文件夹上点鼠标右键选择“共享”。系统将出现“文件共享”设置向导,首先是“选择要与其共享的用户&rdq...
    99+
    2023-06-02
    Vista 操作系统 文件共享 方法 图文
  • java判断是否存在文件的方法介绍(附代码)
    使用 File 类的 file.exists() 方法来检测文件是否存在:(推荐:java视频教程)import java.io.File; public class Main { public static void main...
    99+
    2018-06-18
    java
  • C#操作串口通信协议Modbus的常用方法介绍
    一、读线圈状态 /// <summary> /// 读线圈状态测试 /// </summary> ...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作