LungoJS框架学习笔记——DOM

最新推荐文章于 2020-09-13 09:35:23 发布

fengzi9731

最新推荐文章于 2020-09-13 09:35:23 发布

阅读量731

点赞数

CC 4.0 BY-SA版权

分类专栏： LungoJS 文章标签： LungoJS html5 javascript quojs 移动设备

本文链接：https://blog.youkuaiyun.com/fengzi9731/article/details/39692691

LungoJS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何利用LungoJS结合QuoJS框架进行DOM操作及事件处理，实现快速移动Web应用开发。文章详细展示了如何通过简单的代码行实现元素样式的切换，并通过触发器机制管理页面间的加载和卸载事件。

LungoJS 使用 QuoJS 来处理应用中的 DOM，QuoJS 是一个微型，模块化，面向对象和简洁的JavaScript框架。它通过简化HTML文档遍历，事件处理,和Ajax交互，来实现移动Web应用的快速开发。它能够帮助开发人员编写出强大，灵活，和跨浏览器的代码。

3.1）Manipulation 操作

通过 QuoJS 可以在同一代码行里执行多个函数：

<section id="main">
<header data-title="Dom Manipulation"></header>
<article id="main-article" class="active list">
<ul>
<li class="dark">
Tap here to change the color
</li>
</ul>
</article>
</section>

以下为绑定一个回调点击事件：

Lungo.dom('#main-article li').tap(function(event) {
Lungo.dom(this).toggleClass('light').toggleClass('dark');
});

3.2) Triggers 触发器

当 sections 或 articles 发生切换时会触发执行一个事件，目标 section 或 article 将启动一个 load 事件，当前的 section 或 article 也将执行 unload，这种触发可以通过 QuoJS 来绑定。

<section id="section1">
<article id="article1">
<button data-view-section="section2" data-label="2nd Section"></button>
</article>
</section>
<section id="section2">
<article id="article2">section2 CONTENT</article>
</section>

Lungo.dom('#section1').on('unload', function(event) {
alert("Unloaded section 1");
});

Lungo.dom('#section2').on('load', function(event){
alert("Loaded section 2");
});