关于JQuery的html(data)方法与<script>脚本块

最新推荐文章于 2022-10-19 14:28:57 发布
最新推荐文章于 2022-10-19 14:28:57 发布
阅读量162 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/coloeme/archive/2010/03/09/1681212.html
版权

　　在使用Jquery的html(data)方法执行写数据到Dom元素时遇到一个问题：在data参数中包含script脚本块的时候，html(data)方法的执行结果与预期不符，Teddy's Knowledge Base2008-04-22也曾经在这里提到过类似的问题，原文如下：

“今天才注意到jQuery(...).html()方法返回的HTML会过滤掉所有的<script>块，但有时候，特别是在AJAX应用中，常常是需要保留HTML中的<script>块的,比如局部更新含脚本的内容，此时切忌不要用html()来读写HTML，还是要老老实实用elem.innerHTML。今天因为这个问题浪费了1个小时，特此给大家提个醒。”

　　经过测试发现，新版本（1.3.2之后的，之前版本未考证过）的jQuery(...).html()方法已经不存在该问题（html()方法是一个读Dom元素数据的操作），但是当用html(data)方法写数据到Dom元素并且data参数中包含script脚本时，又出现了异常现象：在Firefox（我用的3.6）浏览器下执行上述操作，data参数里面的script脚本会自动运行，引起页面破相、异常等错误，比如我遇到的问题就是：在script中存在document.write方法时，在执行完html(data)操作后整个页面的原有的dom元素都消失了，只剩下document.write()方法的执行结果，引起了页面破相；具体原因待讨论，最后还是用elem.innerHTML=data这种方式解决了这个问题，特此标记。

 

转载于:https://www.cnblogs.com/coloeme/archive/2010/03/09/1681212.html

weixin_34220623
关注
JQuery的html(data)方法与&lt;script&gt;脚本块的解决方法
10-29
在使用Jquery的html(data)方法执行写数据到Dom元素时遇到一个问题：在data参数中包含script脚本块的时候，html(data)方法的执行结果与预期不符
jquery 触发一段 html,jQuery之html()的实现
weixin_42524750的博客
06-03 495
一、有这样一段 html嘿嘿嘿哈哈哈二、jQuery 的 html() 方法(1)当直接调用 $().html()时，.html()的作用是只读取第一个目标元素的innerHTML简单实现：function customHtml(value) {//默认是选取第一个目标元素let elem = this[0] || {},i = 0,l = this.length;//如果是html()，即使读取...
如何使用 HTML data-属性
allway2的博客
10-19 3021
数据属性是为 HTML 元素提供额外信息的好方法，但是使用 JavaScript 从这些属性中获取和设置数据才是真正使此功能有用的原因。数据属性功能强大，在我看来未得到充分利用，但与任何其他技术一样，请记住，数据属性只是工具带上的一个工具，它们应该是构成功能齐全的解决方案的更大方法组合的一部分。数据属性是我们可以设置的钩子，为我们的HTML提供与CSS和JavaScript通信的新方式。当其他人（或我们未来的自己）进入阅读我们的CSS时，我们的意图会更加清晰。例如，让我们在段落元素后面显示数据属性的值。
JQuery html API支持解析执行Javascript脚本功能实现-代码分析
weixin_33739523的博客
09-27 125
JQuery html用法（功能类似innerHTML）       开发中需要使用Ajax技术来更新页面局部区域， 使用的方法是ajax获取html代码段（字符串），然后将这个html代码段作为参数，传入目标DOM（JQuery对象）的JQuery html接口，此语句执行后， 会将html代码段解释执行， 显示出html代码段描述的页面控件。 例如： &lt;html&gt; &lt...
HTML data 元素
lio-zero 的博客
02-09 822
data 元素表示其内容，以及值属性中这些内容的机器可读形式。Edge、Firefox 和 Safari 都支持 <data> 元素。 value 属性是必需的，其值必须以机器可读的格式表示元素的内容。HTML 标准建议如下： 元素可以与页面中的脚本一起使用，当脚本有一个文本值与一个人类可读的值一起存储时。(用法近似于 data-*) <p>New Products:&...
JQuery的html(data)方法与lt;scriptgt;脚本块的解决方法
12-09
“今天才注意到jQuery(…).html()方法返回的HTML会过滤掉所有的[removed]块，但有时候，特别是在AJAX应用中，常常是需要保留HTML中的[removed]块的,比如局部更新含脚本的内容，此时切忌不要用html()来读写HTML，还是...
不使用script导入js文件的几种方法
11-30
总的来说，不使用`<script>`标签导入JS文件的方法有多种，包括原生JavaScript动态创建`<script>`标签、使用jQuery的`$.getScript`以及利用模块管理器如RequireJS。每种方法都有其适用场景和优缺点，开发者应根据项目...
jQuery插件DataTable使用方法详解(.Net平台)
11-27
<script src="jquery.dataTables.min.js"></script> <!-- 其他样式和脚本引用 --> ... </head> <body> <div class="page-container"> ... <div class="table"> <table id="table1" class="table table-border...
Jquery AutoComplete自动完成 的使用方法实例
12-09
1. 引入jQuery库：`<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>` 2. 引入AutoComplete的JavaScript文件：`<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></...
【JS】【客户端】在HTML里嵌入JavaScript
王晓斌的专栏
11-30 6079
在HTML里嵌入JavaScript 在HTML文档里嵌入客户端JavaScript代码有4中方法： 内嵌，放置在和标签之间  （少） 放置在有标签的src属性指定的外部文件中  （多） 放置自HTML事件处理程序中，该事件处理程序由onclick或onmouseover这样的HTML属性值指定它  （很少） 放在一个URL里，这个URL使用特殊的协议”javas
Html自定义属性data-
Bright2017的博客
01-02 417
Html自定义属性data-
jQuery的 .data()方法和html标签的data-* 属性
hello PHP的博客
12-29 1591
html> html> head> style> div { color: blue; } span { color: red; } style> script src="jquery-3.2.1.js">script> head> body> div data
HTML5的data-*属性，以及$.data()和$.attr()存取值
yoohoo1234的博客
08-30 4595
1、 &lt;div id="test" data-id="26"&gt;&lt;div&gt; &lt;script type="text/javascript"&gt; //取值 var id = $("#test").data("id"); var id1 = $("#test").attr("d
jQuery 数据 - jQuery.data() 方法和HTML 5 的自定义 data-* 属性
houzhyan-博客
05-07 3418
更新 此时要取到对应的元素,可以使用 $(function(){ //找到所有的id属性以a-setting-update-开头的a元素,绑定事件 $('a[id^=a-setting-update-]').click(function(evt){ //找到对应的表单元素 var setting_id = $(this).data('setting_id');
html标签data,Jquery.Data()和HTML标签的data-*属性
weixin_42370743的博客
06-28 706
Jquery.Data()和HTML标签的data-*属性一、总结一句话总结：在页面中用到要用标签存数据还是用HTML标签的data-*属性，这样 不会破坏html本身的结构1、使用HTML标签的data-*属性的好处是(相比于直接给标签属性)？不会破坏html本身的结构2、jquery获取HTML标签的data-*属性实例？|||-beginSome awesome data|||-endvar...
HTML5中的data-*属性和jQuery中的.data()方法使用
热门推荐
fly_zxy的专栏
02-19 4万+
HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据，我们自定义的属性名字也千奇百怪，五花八门。我们可以通过原生的getAttribute()或jQuery中的.attr()来获取我们自定义的属性。但是HTML在向着规范化和标志前进。在HTML5标准规定，自定义的属性都已data—*开头，这样就区分开了固有属性和自定义属性。HMTL代码如下： 测试
.html()与.text()区别与辨析
小白博客
07-18 2万+
这两天看了一下html和jquery的选择器，并对w3chool上面的在线编辑产生了兴趣，但是在用textarea展示后台纯html的时候发生错误，查阅各种资料发现不行……心态炸了。废话不多说了，上干货。 首先，html属性中有两个方法，一个有参，一个无参。1. 无参html（）：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个Strin...
<!DOCTYPE html> <html> <head> <title>ESP8266 调光控制</title> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1>ESP8266 调光控制</h1> <p>使用下面的拖动条来调节 LED 灯的亮度：</p> <input type="range" min="0" max="100" value="0" id="brightness"> <script> $(function() { // 当拖动条的值发生变化时，发送 AJAX 请求到 ESP8266 板 $('#brightness').on('input', function() { var brightness = $(this).val(); $.ajax({ url: 'http://192.168.1.100/brightness', method: 'POST', data: { brightness: brightness }, dataType: 'json', success: function(response) { console.log(response); }, error: function(xhr, status, error) { console.log('Error:', error); } }); }); }); </script> </body> </html>给我解释一下这里面都是什么意思
最新发布
06-05
这是一个基于 ESP8266 微控制器的调光控制页面的 HTML 代码。其中： - `<!DOCTYPE html>` 和 `<html>` 标签定义了 HTML 文档的类型和根元素。 - `<head>` 标签包含了文档的元数据，如标题、字符编码和引用的外部资源。 - `<title>` 标签定义了文档的标题。 - `<meta>` 标签提供了关于文档的元信息，其中 `charset` 属性指定了字符编码。 - `<script>` 标签用于定义客户端脚本，这里引用了 jQuery 库。 - `<body>` 标签包含了可见的页面内容。 - `<h1>` 标签定义了页面的主标题。 - `<p>` 标签定义了一个段落。 - `<input>` 标签定义了一个拖动条，`type` 属性指定了类型为 range，`min`、`max` 和 `value` 属性分别指定了最小值、最大值和默认值。 - 在 JavaScript 代码中，`$(function() {...})` 表示在页面加载完成后执行函数中的代码。 - `$('#brightness').on('input', function() {...})` 表示当拖动条的值发生变化时执行函数中的代码。 - `var brightness = $(this).val()` 获取当前拖动条的值。 - `$.ajax({...})` 发送一个 AJAX 请求到指定的 URL，其中 `url` 属性指定了请求的地址，`method` 属性指定了请求的方法为 POST，`data` 属性指定了请求的数据，`dataType` 属性指定了响应的数据类型为 JSON。 - 当请求成功时，`success` 函数会被调用，`response` 参数包含了响应的数据。 - 当请求失败时，`error` 函数会被调用，`xhr`、`status` 和 `error` 参数分别包含了请求对象、请求状态和错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值