频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
前端的小玩意(12)替代jQuery的原生API(大部分需IE9及以上版本)
2016-10-03 09:54:44         来源:qq20004604的博客  
收藏   我要投稿

(46)替代jQuery常用功能的原生JS代码

①addEventListener

命令

addEventListener

效果

添加响应事件

兼容性

IE9及以上

https://caniuse.com/#search=addEventListener

注:

同一个回调函数,多次添加不会重复触发

 

范例:



<p id="test">  
    abc  
</p>  
<script>  
    var node = document.getElementById("test");  
    console.log(node);  
    node.addEventListener("click", function () {  
        alert("click!");  
    })  
</script>  

 

②DOMContentLoaded

命令

DOMContentLoaded

效果

页面加载完成后触发本事件

兼容性

IE9及以上

https://caniuse.com/#search=DOMContentLoaded

 

范例:

<script>  
    document.addEventListener("DOMContentLoaded", function () {  
        var node = document.getElementById("test");  
        console.log(node);  
    })  
</script>  
<p id="test">  
    abcd  
</p> 

注:

假如不加这个事件,那么输出结果是null

 

 

③querySelector、querySelectorAll 选择器

命令

querySelector(单个,遇见的第一个);

querySelectorAll(全部符合的)

效果

DOM元素选择器,类似jQuery的选择器

兼容性

IE9及以上,IE8只有部分支持

https://caniuse.com/#search=DOMContentLoaded

关于IE8

IE8的支持,被限制在CSS2.1和CSS3的一小部分。另外,在IOS8.x里会有bug(id然后加元素会失效)。

具体可以参见上面url里的说明

 

范例:


<script>
    document.addEventListener("DOMContentLoaded", function () {
        var node = document.querySelector('.container').querySelector('.test');
        console.log(node);
        var node = document.querySelector('body').querySelectorAll('.test');
        console.log(node);
    })
</script>

<body>  
<script>  
    document.addEventListener("DOMContentLoaded", function () {  
        var node = document.querySelector('.container').querySelector('.test');  
        console.log(node);  
        var node = document.querySelector('body').querySelectorAll('.test');  
        console.log(node);  
    })  
</script>  
<p class="test">  
    abcd  
</p>  
<p class="container">  
    <p class="test">  
        defg  
    </p>  
</p>  
</body>

 

注:

【1】可以选择某一个DOM元素下的子元素(如第二个);

【2】不加All的是选择第一个,返回结果是单个DOM元素;加了All返回的是一个数组(即使只有一个);

 

 

 

④removeEventListener 移除事件

命令

removeEventListener

效果

移除响应事件

兼容性

没有查到,但推测和addEventListener相同

注:

同一个回调函数,多次添加不会重复触发;

删除已删除事件也不会报错。

 

<script>  
    document.addEventListener("DOMContentLoaded", function () {  
        var event = function () {  
            alert("event happened!");  
        }  
        var node = document.querySelector('.test');  
        var add = document.querySelector('.add');  
        var remove = document.querySelector('.remove');  
        add.addEventListener("click", function () {  
            node.addEventListener("click", event);  
        })  
        remove.addEventListener("click", function () {  
            node.removeEventListener("click", event);  
        })  
    })  
</script>  
<p class="test">  
    事件触发器(点击触发)  
</p>  
<button class="add">添加事件</button>  
<button class="remove">移除事件</button>  

 

⑤classList 类列表

命令

DOM.classList

效果

类列表

兼容性

IE10及以上

https://caniuse.com/#search=classList

注:

结果是一个对象,但可以像数组那样获取第N个类名;

常用方法

单独获取所有类名(以字符串形式)是classList.value

添加类名是classList.add(类名)

移除类名是classList.remove(类名)

查看是否存在某个类classList.contains(类名)

切换是否显示某个类classList.toggle(类名)

 

范例:

<script>  
    document.addEventListener("DOMContentLoaded", function () {  
        var node = document.querySelector('.test');  
        var list = node.classList;  
        console.log(list);  
        var add = document.querySelector('.add');  
        var remove = document.querySelector('.remove');  
        add.addEventListener("click", function () {  
            list.add("anotherClass")  
        })  
        remove.addEventListener("click", function () {  
            list.remove("anotherClass")  
        })  
    })  
</script>  
<p class="test">  
    事件触发器(点击触发)  
</p>  
<button class="add">添加</button>  
<button class="remove">移除</button>  

 

⑥textContent和innerHTML

命令

textContent、innerHTML

效果

前者查看文本内容;

后者查看html内容

兼容性

前者IE9及以上;

后者IE8及以上

https://caniuse.com/#search=textContent

https://caniuse.com/#search=innerHTML

 

范例:

<script>  
    document.addEventListener("DOMContentLoaded", function () {  
        var node = document.querySelector('.test');  
        var add = document.querySelector('.add');  
        var remove = document.querySelector('.remove');  
        add.addEventListener("click", function () {  
            console.log(node.textContent);  
        })  
        remove.addEventListener("click", function () {  
            console.log(node.innerHTML);  
        })  
    })  
</script>  
<p class="test">  
    <span>事件触发器(点击触发)</span>  
</p>  
<button class="add">查看textContent内容</button>  
<button class="remove">查看innerHTML内容</button>  

 

注:

可以直接对其属性进行修改;但修改textContent属性,如果内容有html标签,不会被解释为html标签;

但通过innerHTML修改的html标签会被解释。


点击复制链接 与好友分享!回本站首页
相关TAG标签 前端 玩意 大部分
上一篇:HTML5+Canvas贪吃蛇
下一篇:AngularJS2.0入门指南
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站