IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    原生JavaScript替代jQuery的Dom简单操作实例

    Tokin发表于 2016-05-17 16:58:01
    love 0

    jQuery的Dom操作十分简单,在开发iDevs主题的时候,其中“菜单”和“搜索”部分使用到了一些很基本的Dom操作,图方便,我使用了jQuery,闲来无事,尝试着使用原生的js完成这一操作,发现其代码量一样,且原生js效率更高,啰嗦多了,先贴代码。

    HTML结构如下:

    <input type="button" id="Test" class="menu_click" value="按钮" />
    

    jQuery的Dom实例:

    jQuery_btn_click("Test", "menu_click", "menu_close", true);
    function jQuery_btn_click(btn, on, off, flag) {
        $('#' + menu).click(function () {
            $('#' + menu).prop('class', (flag = !flag) ? on : off);
        });
    }
    

    为了方便,我封装了函数并传了几个有趣的参数,代码量很少,具体传的什么一看便知。

    原生Javascript实例:

    cover_click("Test", "menu_click", "menu_close", true);
    function cover_click(btn, on, off, flag) {
        (btn = document.getElementById(btn)).onclick = function () {
            btn.setAttribute("class", (flag = !flag) ? on : off);
        }
    }
    

    就是这样子,原生的方法操作起来与jQuery的代码量几乎一致。

    兼容性

    兼容性方面,jQuery视版本而定,2.0版本之后已经不再支持IE8-,原生的,我本地测试是支持IE7+,欢迎大家测试一下。

    上面只是一个实例,在此记录一下,修修改改还可以完成其他的一些简单的Dom操作,如果有更方便且简单的方法欢迎指出。



沪ICP备19023445号-2号
友情链接