博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery和JavaScript 简单切换
阅读量:5020 次
发布时间:2019-06-12

本文共 2282 字,大约阅读时间需要 7 分钟。

选择元素

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

创建元素 

// jQuery  var newEl = $('
'); // 原生方法 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');

附加内容(Append) 

// jQuery  $('.el').append($('
')); // 原生方法 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});

来源于网络: http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native

转载于:https://www.cnblogs.com/liuyuanhang/p/5497942.html

你可能感兴趣的文章
union和union all
查看>>
Github 开源:使用控制器操作 WinForm/WPF 控件( Sheng.Winform.Controls.Controller)
查看>>
PMD使用提醒
查看>>
Codeforces 887D Ratings and Reality Shows
查看>>
论文《A Generative Entity-Mention Model for Linking Entities with Knowledge Base》
查看>>
CentOS 6.7编译安装PHP 5.6
查看>>
Linux记录-salt分析
查看>>
Android Studio默认快捷键
查看>>
发布开源库到JCenter所遇到的一些问题记录
查看>>
第七周作业
查看>>
函数式编程与参数
查看>>
flush caches
查看>>
SSAS使用MDX生成脱机的多维数据集CUB文件
查看>>
ACM_hdu1102最小生成树练习
查看>>
MyBatis源码分析(一)--SqlSessionFactory的生成
查看>>
android中ListView点击和里边按钮或ImageView点击不能同时生效问题解决
查看>>
CTF常用工具之汇总
查看>>
java的面向对象 (2013-09-30-163写的日志迁移
查看>>
HDU 2191 【多重背包】
查看>>
51nod 1433 0和5【数论/九余定理】
查看>>