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});  
  • 相关阅读:
    Android性能优化典范
    通过命令行连接oracle数据库/进入sql plus
    eclispe 出现超内存错误
    eclipse 重装了tomcat后配置路径
    dorado listener属性
    dorado问题查询&快捷键重命名
    dorado spring知识补充
    Eclipse导入包的快捷键
    dorado抽取js
    dorado中的creationType选择类型
  • 原文地址:https://www.cnblogs.com/fanshaokun/p/6429499.html
Copyright © 2011-2022 走看看