function wxParse(bindName = 'wxParseData', type='html', data='<div class="color:red;">数据不能为空</div>', target,imagePadding) { var that = target; var transData = {};//存放转化后的数据 if (type == 'html') { transData = HtmlToJson.html2json(data, bindName); console.log(JSON.stringify(transData, ' ', ' ')); } else if (type == 'md' || type == 'markdown') { var converter = new showdown.Converter(); var html = converter.makeHtml(data); transData = HtmlToJson.html2json(html, bindName); console.log(JSON.stringify(transData, ' ', ' ')); } transData.view = {}; transData.view.imagePadding = 0; if(typeof(imagePadding) != 'undefined'){ transData.view.imagePadding = imagePadding } var bindData = {}; bindData[bindName] = transData; that.setData(bindData) that.wxParseImgLoad = wxParseImgLoad; that.wxParseImgTap = wxParseImgTap; }代码解释

时间: 2023-06-26 08:05:57 浏览: 165

jQuery实现动态添加和删除一个div

本文主要给大家简单介绍一下如何动态的在一个元素添加和删除一个div,希望能够得到举一反三之效。代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #father { width:150px; height:150px; background-color:red; } #father div { width:50px; height:50px; background-color:green; font-size:12px; } </style> <script 在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括动态添加和删除元素。本文将深入探讨如何使用jQuery实现动态添加和删除`div`元素，以及涉及的相关知识点。我们来看一个简单的例子，演示如何在页面加载完成后向一个ID为`father`的`div`元素中添加一个新的`div`。这个例子中，`jQuery`的`$(document).ready()`函数确保在页面DOM加载完成后再执行内部的代码。如下所示： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #father { width: 150px; height: 150px; background-color: red; } #father div { width: 50px; height: 50px; background-color: green; font-size: 12px; } </style> <script type="text/javascript" src="/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#father").prepend("<div>软件开发网欢迎您</div>"); }); </script> </head> <body> <div id="father"></div> </body> </html> ``` 在这个例子中，`$("#father").prepend("<div>软件开发网欢迎您</div>");` 使用了`prepend()`函数，将一个包含文本“软件开发网欢迎您”的`div`插入到`#father`元素的开头。接下来，我们探讨如何删除已存在的`div`。删除操作可以通过`remove()`函数来实现，如下所示： ```javascript $(document).ready(function() { $("#father").prepend("<div>软件开发网欢迎您</div>"); $("div").remove("#father div"); }); ``` 这段代码首先添加了一个`div`，然后立即删除了所有ID为`father`的子`div`。然而，这并不是一个理想的删除单个特定`div`的例子，因为它会删除所有`father`下的子`div`。通常，我们需要通过某种方式选择特定的`div`进行删除。在第二个示例中，我们展示了如何动态添加和删除多个`div`，并且每个`div`都有一个“X”链接用于删除自身。这个例子中，添加新的`div`是通过`addimg()`函数实现的，删除则是通过点击`a`标签触发的： ```html <script type="text/javascript"> $(document).ready(function() { bindListener(); }); function addimg() { $("#mdiv").append('<div class="iptdiv"><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></div>'); bindListener(); } function bindListener() { $("a[name=rmlink]").unbind().click(function() { $(this).parent().remove(); }); } </script> <form action="" method="post" enctype="multipart/form-data"> <label>请选择上传的图片</label> <a href="javascript:addimg()" id="addImg">增加图片</a> <div class="mdiv" id="mdiv"> <div class="iptdiv"><input type="file" name="img[]" class="ipt" /><a href="#" name="rmlink">X</a></div> </div> <input type="submit" name="submit" value="上传图片" /> </form> ``` 这里的关键是`bindListener()`函数，它负责为所有的“X”链接绑定删除事件。每次添加新的`div`后，都会重新调用`bindListener()`以确保新添加的元素也有删除功能。这个示例中的`unbind()`函数用于取消之前绑定的事件处理函数，以防止重复绑定导致的多次触发。然后使用`.click(function() { ... })`来重新绑定点击事件，当用户点击“X”时，删除该`div`的父元素。总结起来，jQuery提供了强大的DOM操作能力，如`prepend()`和`remove()`，使开发者能够轻松地在网页上动态添加和删除元素。理解并熟练掌握这些方法对于构建交互性强、用户体验优良的网页至关重要。同时，要注意在处理事件绑定时避免重复绑定，以保持代码的整洁和功能的正确性。如果需要了解更多关于`prepend()`和`remove()`的详细信息，可以查阅jQuery的官方文档。

这是一个用于将HTML或Markdown转换为JSON格式数据的函数，用于在小程序中显示富文本内容。该函数接受五个参数：bindName（绑定的数据名称，默认为'wxParseData'），type（数据类型，可选html或md/markdown），data（要转换的数据），target（当前页面的对象），以及imagePadding（图片间距）。其中，通过调用HtmlToJson.html2json函数将HTML或Markdown数据转换为JSON格式数据，然后将转换后的数据绑定到页面中。此外，该函数还定义了wxParseImgLoad和wxParseImgTap两个函数，用于处理图片加载和点击事件。

阅读全文

相关推荐

HTML网页设计制作——初音动漫(6页) dreamweaver作业静态HTML网页设计模板

vue绑定class与行间样式style详解

DOM扩展：使用自定义数据属性

6. 深入探索HTML的div和span标签

C# MVC数据绑定技巧：高效数据流处理秘籍

专家级Bokeh图表：高级数据可视化技巧大揭秘

Axure9: 如何实现动态数据的实时展示

页面创建width为100pxheight为 100px的 div，通过点击事件，异步抛送 width 为300height为300，背景色为红色的对象，并异步获取到该对象，通过创建 class 类进行封装并改变 div 为返回对象的属性

:class 与 :style 绑定

Spring Cloud 全面学习案例集，含多种功能示例与教程.zip

AudioStream 1.5.unitypackage

驾驭未来：Simulink中PMSM永磁同步电机控制深度解析

最新推荐

vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作

Spring Cloud 全面学习案例集，含多种功能示例与教程.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

"互动学习：行动中的多样性与论文攻读经历"

【数据传输高速公路】：总线系统的深度解析

如何结合PID算法调整PWM信号来优化电机速度控制？请提供实现这一过程的步骤和代码示例。