原生javascript取代jquery的一些方法

时间 2019-11-17

标签原生 javascript 取代 jquery 一些方法栏目 JavaScript 繁體版

原文原文链接

1.选取元素jquery

 
        // jQuery 
       
        var 
        els = $( 
        '.el' 
        ); 
       
        // Native 
       
        var 
        els = document.querySelectorAll( 
        '.el' 
        ); 
       
        // Shorthand 
       
        var 
        $ =  
        function 
        (el) { 
       
        return 
        document.querySelectorAll(el); 
       
        }

querySelectorAll方法返回的是NodeList对象，须要转换为数组。git

1	`myList = Array.prototype.slice.call(myNodeList)`

2.建立元素github

 
        // jQuery 
       
        var 
        newEl = $( 
        '<div/>' 
        ); 
       
        // Native 
       
        var 
        newEl = document.createElement( 
        'div' 
        );

3.添加事件web

 
        // jQuery 
       
        $( 
        '.el' 
        ).on( 
        'event' 
        ,  
        function 
        () { 
       
        }); 
       
        // Native 
       
        [].forEach.call(document.querySelectorAll( 
        '.el' 
        ),  
        function 
        (el) { 
       
        el.addEventListener( 
        'event' 
        ,  
        function 
        () { 
       
        },  
        false 
        ); 
       
        });

4.get/set属性数组

 
        // jQuery 
       
 
        $( 
        '.el' 
        ).filter( 
        ':first' 
        ).attr( 
        'key' 
        ,  
        'value' 
        ); 
       
 
        $( 
        '.el' 
        ).filter( 
        ':first' 
        ).attr( 
        'key' 
        ); 
       

           
       
 
        // Native 
       
 
        document.querySelector( 
        '.el' 
        ).setAttribute( 
        'key' 
        ,  
        'value' 
        ); 
       
 
        document.querySelector( 
        '.el' 
        ).getAttribute( 
        'key' 
        ); 
       

5.添加和移除样式Classapp

DOM元素自己有一个可读写的className属性，能够用来操做class。函数

HTML 5还提供一个classList对象，功能更强大（IE 9不支持）。post

 
        // jQuery 
       
 
        $( 
        '.el' 
        ).addClass( 
        'class' 
        ); 
       
 
        $( 
        '.el' 
        ).removeClass( 
        'class' 
        ); 
       
 
        $( 
        '.el' 
        ).toggleClass( 
        'class' 
        ); 
       

           
       
 
        // Native 
       
 
        document.querySelector( 
        '.el' 
        ).classList.add( 
        'class' 
        ); 
       
 
        document.querySelector( 
        '.el' 
        ).classList.remove( 
        'class' 
        ); 
       
 
        document.querySelector( 
        '.el' 
        ).classList.toggle( 
        'class' 
        ); 
       

6.追加元素优化

尾部追加元素：动画

 
        // jQuery 
       
        $( 
        '.el' 
        ).append($( 
        '<div/>' 
        )); 
       
        // Native 
       
        document.querySelector( 
        '.el' 
        ).appendChild(document.createElement( 
        'div' 
        ));

头部追加元素：

 
        //jQuery 
       
        $(‘.el 
        ').prepend(' 
        <div></div> 
        ') 
       
        //Native 
       
        var parent = document.querySelector(' 
        .el'); 
       
        parent.insertBefore( 
        "<div></div>" 
        ,parent.childNodes[0])

7.克隆元素

 
        // jQuery 
       
        var 
        clonedEl = $( 
        '.el' 
        ).clone(); 
       
        // Native 
       
        var 
        clonedEl = document.querySelector( 
        '.el' 
        ).cloneNode( 
        true 
        );

8.移除元素

 
        Remove 
       
        // jQuery 
       
        $( 
        '.el' 
        ).remove(); 
       
        // Native 
       
        remove( 
        '.el' 
        ); 
       
        function 
        remove(el) { 
       
        var 
        toRemove = document.querySelector(el); 
       
        toRemove.parentNode.removeChild(toRemove); 
       
        }

9.获取父级元素

 
        // jQuery 
       
        $( 
        '.el' 
        ).parent(); 
       
        // Native 
       
        document.querySelector( 
        '.el' 
        ).parentNode;

10.获取上一个/下一个元素（Prev/next element）

 
        // jQuery 
       
        $( 
        '.el' 
        ).prev(); 
       
        $( 
        '.el' 
        ).next(); 
       
        // Native 
       
        document.querySelector( 
        '.el' 
        ).previousElementSibling; 
       
        document.querySelector( 
        '.el' 
        ).nextElementSibling;

11.XHR and AJAX

 
        // jQuery 
       
        $.get( 
        'url' 
        ,  
        function 
        (data) { 
       
        }); 
       
        $.post( 
        'url' 
        , {data: data},  
        function 
        (data) { 
       
        }); 
       
        // Native 
       
        // get 
       
        var 
        xhr =  
        new 
        XMLHttpRequest(); 
       
        xhr.open( 
        'GET' 
        , url); 
       
        xhr.onreadystatechange =  
        function 
        (data) { 
       
        } 
       
        xhr.send(); 
       
        // post 
       
        var 
        xhr =  
        new 
        XMLHttpRequest() 
       
        xhr.open( 
        'POST' 
        , url); 
       
        xhr.onreadystatechange =  
        function 
        (data) { 
       
        } 
       
        xhr.send({data: data});

12.清空子元素

 
        //jQuery 
       
        $( 
        "#elementID" 
        ).empty() 
       
        //Native 
       
        var 
        element = document.getElementById( 
        "elementID" 
        ) 
       
        while 
        (element.firstChild) element.removeChild(element.firstChild);

13.检查是否有子元素

 
        //jQuery 
       
        if 
        (!$( 
        "#elementID" 
        ).is( 
        ":empty" 
        )){} 
       
        //Native 
       
        if 
        (document.getElementById( 
        "elementID" 
        ).hasChildNodes()){}

14.$(document).ready

DOM加载完成，会触发DOMContentLoaded事件，等同于jQuery的$(document).ready方法。

 
        document.addEventListener( 
        "DOMContentLoaded" 
        ,  
        function 
        () { 
       
        // ... 
       
        });

15.数据储存

jQuery对象能够储存数据。

1	`$(` `"body"` `).data(` `"foo"` `, 52);`

HTML 5有一个dataset对象，也有相似的功能（IE 10不支持），不过只能保存字符串。

1 2	`element.dataset.user = JSON.stringify(user);` `element.dataset.score = score;`

16.动画

jQuery的animate方法，用于生成动画效果。

1	`$foo.animate(` `'slow'` `, { x:` `'+=10px'` `}`

jQuery的动画效果，很大部分基于DOM。可是目前，CSS 3的动画远比DOM强大，因此能够把动画效果写进CSS，而后经过操做DOM元素的class，来展现动画。

1	`foo.classList.add(` `'animate'` `)`

若是须要对动画使用回调函数，CSS 3也定义了相应的事件。

1 2	`el.addEventListener(` `"webkitTransitionEnd"` `, transitionEnded);` `el.addEventListener(` `"transitionend"` `, transitionEnded);`

替代方案

因为jQuery体积过大，替代方案层出不穷。

其中，最有名的是zepto.js。它的设计目标是以最小的体积，作到最大兼容jQuery的API。它的1.0版的原始大小是55KB，优化后是29KB，gzip压缩后为10KB。

若是不求最大兼容，只但愿模拟jQuery的基本功能。那么，min.js优化后只有200字节，而dolla优化后是1.7KB。

此外，jQuery自己也采用模块设计，能够只选择使用本身须要的模块。具体作法参见jQuery的github网站，或者使用专用的Web界面。