• 以下是jQuery和JavaScript实现相同操作的等价代码。


    选择元素
     Javascript代码

    1.// jQuery   
    2.var els = $('.el');   
    3.  
    4.// 原生方法   
    5.var els = document.querySelectorAll('.el');   
    6.  
    7.// 函数法   
    8.var $ = function (el) {   
    9.  return document.querySelectorAll(el);   
    10.}   
    11.  
    12.var els = $('.el');   
    13.  
    14.// 或者使用regex-based micro-selector库,地址:http://jsperf.com/micro-selector-libraries  
    //
     jQuery
    var els = $('.el');

    // 原生方法
    var els = document.querySelectorAll('.el');

    // 函数法
    var $ = function (el) {
      return document.querySelectorAll(el);
    }

    var els = $('.el');

    // 或者使用regex-based micro-selector库,地址:http://jsperf.com/micro-selector-libraries

    创建元素

    Javascript代码

    1.// jQuery   
    2.var newEl = $('<div/>');   
    3.  
    4.// 原生方法   
    5.var newEl = document.createElement('div');  
    // jQuery
    var newEl = $('<div/>');

    // 原生方法
    var newEl = document.createElement('div');

    添加事件监听器

    Javascript代码

    1.// jQuery   
    2.$('.el').on('event', function() {   
    3.  
    4.});   
    5.  
    6.// 原生方法   
    7.[].forEach.call(document.querySelectorAll('.el'), function (el) {   
    8.  el.addEventListener('event', function() {   
    9.  
    10.  }, false);   
    11.});  

    设置/获取属性

    Javascript代码

    1.// jQuery   
    2.$('.el').filter(':first').attr('key', 'value');   
    3.$('.el').filter(':first').attr('key');   
    4.  
    5.// 原生方法   
    6.document.querySelector('.el').setAttribute('key', 'value');   
    7.document.querySelector('.el').getAttribute('key');  

    添加/移除/切换类

    Javascript代码

    1.// jQuery   
    2.$('.el').addClass('class');   
    3.$('.el').removeClass('class');   
    4.$('.el').toggleClass('class');   
    5.  
    6.// 原生方法   
    7.document.querySelector('.el').classList.add('class');   
    8.document.querySelector('.el').classList.remove('class');   
    9.document.querySelector('.el').classList.toggle('class');  

    附加内容(Append)

    1.// jQuery   
    2.$('.el').append($('<div/>'));   
    3.  
    4.// 原生方法   
    5.document.querySelector('.el').appendChild(document.createElement('div'));  


    克隆元素

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


    移除元素

     

    1.// jQuery   
    2.$('.el').remove();   
    3.  
    4.// 原生方法   
    5.remove('.el');   
    6.  
    7.function remove(el) {   
    8.  var toRemove = document.querySelector(el);   
    9.  
    10.  toRemove.parentNode.removeChild(toRemove);   
    11.}  

    获取父元素

    1.// jQuery   
    2.$('.el').parent();   
    3.  
    4.// 原生方法   
    5.document.querySelector('.el').parentNode;  

    上一个/下一个元素

    // jQuery   
    2.$('.el').prev();   
    3.$('.el').next();   
    4.  
    5.// 原生方法   
    6.document.querySelector('.el').previousElementSibling;   
    7.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);   
    23.xhr.onreadystatechange = function (data) {   
      
    }   
    xhr.send({data: data});  
    // 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});
  • 相关阅读:
    第一次博客作业
    个人总结
    第三次个人作业——用例图设计
    第二次个人编程
    第一次个人编程
    第一次随笔
    个人总结
    第三次个人作业——用例图设计
    第二次结对作业
    第一次结对作业
  • 原文地址:https://www.cnblogs.com/sunkunqi/p/3463990.html
Copyright © 2020-2023  润新知