zoukankan      html  css  js  c++  java
  • JQ和JS的等价代码

    JQ与JS等价代码

     

    选择器

    复制代码
    //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});  
  • 相关阅读:
    分块
    BZOJ 2957 楼房重建-线段树
    [NOI2016]区间-线段树
    [ZJOI2007]矩阵游戏-二分图匹配
    BZOJ3714 [PA2014]Kuglarz -最小生成树
    HNOI2005狡猾的商人-差分约束系统
    Android开发之带你轻松集成友盟统计
    Android6.0动态申请权限
    Android6.0动态权限申请
    极光推送JPush的快速集成
  • 原文地址:https://www.cnblogs.com/fanshaokun/p/6429499.html
Copyright © 2011-2022 走看看