当前位置: 首页 > 工具软件 > Lungo.JS > 使用案例 >

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");
});
 类似资料: