最新文章:

您的位置: 富录-前端开发|web技术博客 > JavaScript > JQ与JS等价代码

JQ与JS等价代码

发布时间:2017年05月21日 评论数:抢沙发阅读数: 41015

    选择器

    //jquery
    var els = $(".el");
    //原生方法
    var els = document.querySelectorAll(".el");
    
    // 函数法  
    var $ = function (el) {  
      return document.querySelectorAll(el);  
    }  
    var els = $('.el');

    创建元素

    // jQuery  
    var newEl = $('&ltdiv/>');  
    
    // 原生方法  
    var newEl = document.createElement('div'); 

    添加事件监听器

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

    设置/获取属性

    // jQuery  
    $('.el').filter(':first').attr('key', 'value');  
    $('.el').filter(':first').attr('key');  
      
    // 原生方法  
    document.querySelector('.el').setAttribute('key', 'value');  
    document.querySelector('.el').getAttribute('key');

    添加/移除/切换类

    // jQuery  
    $('.el').addClass('class');  
    $('.el').removeClass('class');  
    $('.el').toggleClass('class');  
      
    // 原生方法  
    document.querySelector('.el').classList.add('class');  
    document.querySelector('.el').classList.remove('class');  
    document.querySelector('.el').classList.toggle('class');

    插入节点

    // jQuery  
    $('.el').append($('&ltdiv/>'));  
      
    // 原生方法  
    document.querySelector('.el').appendChild(document.createElement('div'));

    克隆节点

    // jQuery  
    var clonedEl = $('.el').clone();  
      
    // 原生方法  
    var clonedEl = document.querySelector('.el').cloneNode(true); 

    移除节点

    // jQuery  
    $('.el').remove();  
      
    // 原生方法  
    remove('.el');  
      
    function remove(el) {  
        var toRemove = document.querySelector(el);  
          
        toRemove.parentNode.removeChild(toRemove);  
    }

    获取父元素

    // jQuery  
    $('.el').parent();  
      
    // 原生方法  
    document.querySelector('.el').parentNode;

    上一个/下一个元素

    // jQuery  
    $('.el').prev();  
    $('.el').next();  
      
    // 原生方法  
    document.querySelector('.el').previousElementSibling;  
    document.querySelector('.el').nextElementSibling;

    XHR或AJAX

    // jQuery  
    $.get('url', function (data) {  
      
    });  
    $.post('url', {data: data}, function (data) {  
      
    });  
      
    // 原生方法  
    // 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});


二维码加载中...
本文作者:DGF      文章标题: JQ与JS等价代码
本文地址: https://www.arbays.com/post-12.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论