jquery当中如何Set和Get文本

本文通过示例介绍了如何使用jQuery获取和设置HTML元素的内容。利用提供的按钮,用户可以动态地读取或更改页面上特定div标签内的文本。这为理解jQuery如何简化DOM操作提供了实践指导。

例 1.3(SetGetinnerHtml.html)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> </TITLE>
<script src="jquery.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
function getHTML()
{  
/*
$("#info").html();
代码1是返回指定元素的innerHTML值;

$("#info").html("mark");
代码2则是将mark这串字符设置到指定元素中
 
*/
    var message = $("#info").html();
    alert(message)
}
function setHTML()
{  
    $("#info").html("马克");
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<div id="info">mark</div>
<INPUT TYPE="BUTTON" ONCLICK="getHTML()" value="获取">
<INPUT TYPE="BUTTON" ONCLICK="setHTML()" value="设置">
</BODY>
</HTML>

更多请见:https://blog.youkuaiyun.com/qq_44594371/article/details/103061862

### 安装配置富文本编辑器 对于希望在jQuery项目中集成并配置支持XMLJSON数据处理的富文本编辑器的情况,可以考虑使用兼容性良好的库如Froala Editor或Quill。这些工具不仅提供丰富的API接口用于自定义功能扩展,还具备强大的插件生态系统来满足特定需求。 #### Froala Editor 集成实例 为了实现这一目标,首先需要引入必要的资源文件到HTML页面: ```html <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet'> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script> ``` 接着初始化编辑器,并设置其选项以适应应用环境的要求: ```javascript $(function() { $('.editor').froalaEditor({ heightMin: 200, placeholderText: 'Edit Your Content Here!', events: { initialized: function () { console.log('Initialized'); } }, pluginsEnabled: ['align', 'charCounter', 'codeBeautifier', 'codeView'], toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat'] }) }); ``` 针对XMLJSON的数据交互操作,可以通过AJAX请求完成。例如,在保存内容至服务器端前将其转换为指定格式: ```javascript // 将富文本内容转为JSON对象以便于传输 var jsonData = { content: $('#edit').froalaEditor('html.get') }; $.ajax({ type: "POST", url: "/saveContent", // 假设这是后端接收路径 contentType: "application/json; charset=utf-8", data: JSON.stringify(jsonData), success: function(response){ alert("Save successful!"); } }); // 如果要获取来自服务端返回的内容,则可能先解析JSON再填充回编辑区 $.getJSON('/getContent', function(data) { var xmlString = new XMLSerializer().serializeToString(new DOMParser().parseFromString(data.content, "text/html")); $('#edit').froalaEditor('html.set', xmlString); }); ``` 通过上述方法可以在基于jQuery的应用程序里轻松嵌入一个强大而灵活的富文本编辑组件,并有效管理不同类型的结构化文档信息[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mark_to_win

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值