LungoJS框架学习笔记——DOM
夏朝
2023-12-01
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");
});