• home > webfront > ECMAS > javascript >

    min项目可以放弃jquery了:常用jQuery函数的原生JS写法

    Author:[email protected] Date:

    很多前端工程师都是外行(非计算机行业)转入的,学点html+css,其中关键的js,只知道个大概,然后看下jquery文档,然后就干活了!搞了几年

    很多前端工程师都是外行(非计算机行业)转入的,学点html+css,

    其中关键的js,只知道个大概,然后看下jquery文档,然后就干活了!

    搞了几年的前端,js还是,low……

    一旦开始使用纯JavaScript来完成所有工作的时候你确实会变得对他们很熟悉。

    下面,是汇总一些常用的的方法,

    Document Ready 事件

    在jQuery中,你们中的许多人可能过去常常像这样使用 document.ready :

    $(document).ready(function() {
      // Code
    });

    但是你知道,你可以将所有的JavaScript放在页面的底端,但他们确实是一回事吗?JavaScript同样拥有一个DOM内容加载事件的侦听器,而不是使用jQuery的document.ready:

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

    添加事件

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

    添加和移除样式Class


    DOM元素本身有一个可读写的className属性,可以用来操作class。

    HTML 5还提供一个classList对象,功能更强大(IE 9不支持)。

    // 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');

    尾部追加元素:

    // 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])

    移除元素

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

    数据储存

    jQuery对象可以储存数据。

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


    HTML 5有一个dataset对象,也有类似的功能(IE 10不支持),不过只能保存字符串。

    element.dataset.user = JSON.stringify(user);
    element.dataset.score = score;

    判断一个元素是否在视图窗口中

    通过使用getBoundingClientRect方法,你可以获取页面中任何元素的位置。以下是一个简单的函数来表明它有多简单和多强大。这个函数有一个参数,那就是你想要检查的元素。当元素为可见时,函数将返回true:

    // Determine if an element is in the visible viewport
    function isInViewport(element) {
      var rect = element.getBoundingClientRect();
      var html = document.documentElement;
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || html.clientHeight) &&
        rect.right <= (window.innerWidth || html.clientWidth)
      );
    }

    清空子元素

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


    参考文章:

    http://ourjs.com/detail/535556a1ed9add0e26000002

    http://www.cnblogs.com/xiaopen/p/5540884.html





    转载本站文章《min项目可以放弃jquery了:常用jQuery函数的原生JS写法》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2017_0110_7937.html