原生JS取代一些JQuery方法的简单实现


Posted in Javascript onSeptember 20, 2016

1.选取元素

// jQuery
var els = $('.el');

// Native
var els = document.querySelectorAll('.el');

// Shorthand
var $ = function (el) {
 return document.querySelectorAll(el);
}

querySelectorAll方法返回的是NodeList对象,需要转换为数组。

myList = Array.prototype.slice.call(myNodeList)

2.创建元素

// jQuery
var newEl = $('<div/>');

// Native
var newEl = document.createElement('div');

3.添加事件

// jQuery
$('.el').on('event', function() {

});

// Native
[].forEach.call(document.querySelectorAll('.el'), function (el) {
 el.addEventListener('event', function() {

 }, false);
});

4.get/set属性

// jQuery
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');

// Native
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');

5.添加和移除样式Class

DOM元素本身有一个可读写的className属性,可以用来操作class。

HTML 5还提供一个classList对象,功能更强大(IE 9不支持)。

// jQuery
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class');

// Native
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');

6.追加元素

尾部追加元素:

// jQuery
$('.el').append($('<div/>'));

// Native
document.querySelector('.el').appendChild(document.createElement('div'));

头部追加元素:

//jQuery
$(‘.el').prepend('<div></div>')

//Native
var parent = document.querySelector('.el');
parent.insertBefore("<div></div>",parent.childNodes[0])

7.克隆元素

// jQuery
var clonedEl = $('.el').clone();

// Native
var clonedEl = document.querySelector('.el').cloneNode(true);

8.移除元素

Remove
// jQuery
$('.el').remove();

// Native
remove('.el');

function remove(el) {
 var toRemove = document.querySelector(el);

 toRemove.parentNode.removeChild(toRemove);
}

9.获取父级元素

// jQuery
$('.el').parent();

// Native
document.querySelector('.el').parentNode;

10.获取上一个/下一个元素(Prev/next element)

// jQuery
$('.el').prev();
$('.el').next();

// Native
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;

11.XHR and AJAX

// jQuery
$.get('url', function (data) {

});
$.post('url', {data: data}, function (data) {

});

// Native

// 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});

12.清空子元素

//jQuery
$("#elementID").empty()

//Native
var element = document.getElementById("elementID")
while(element.firstChild) element.removeChild(element.firstChild);

13.检查是否有子元素

//jQuery
if (!$("#elementID").is(":empty")){}

//Native
if (document.getElementById("elementID").hasChildNodes()){}

14.$(document).ready

DOM加载完成,会触发DOMContentLoaded事件,等同于jQuery的$(document).ready方法。

document.addEventListener("DOMContentLoaded", function() {
  // ...
});

15.数据储存

jQuery对象可以储存数据。

$("body").data("foo", 52);

HTML 5有一个dataset对象,也有类似的功能(IE 10不支持),不过只能保存字符串。

element.dataset.user = JSON.stringify(user);
element.dataset.score = score;

16.动画

jQuery的animate方法,用于生成动画效果。

$foo.animate('slow', { x: '+=10px' }

jQuery的动画效果,很大部分基于DOM。但是目前,CSS 3的动画远比DOM强大,所以可以把动画效果写进CSS,然后通过操作DOM元素的class,来展示动画。

foo.classList.add('animate')

如果需要对动画使用回调函数,CSS 3也定义了相应的事件。

el.addEventListener("webkitTransitionEnd", transitionEnded);
el.addEventListener("transitionend", transitionEnded);

以上就是小编为大家带来的原生JS取代一些JQuery方法的简单实现的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
Vue实现跑马灯效果
May 25 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
原生js实现ajax方法(超简单)
Sep 20 #Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 #Javascript
原生js封装的一些jquery方法(详解)
Sep 20 #Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 #Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 #Javascript
jQuery简单倒计时效果完整示例
Sep 20 #Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 #Javascript
You might like
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
回顾Javascript React基础
2019/06/15 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
Python的mysql数据库的更新如何实现
2017/07/31 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Python实现基于POS算法的区块链
2018/08/07 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python 两种方法删除空文件夹
2020/09/29 Python
Javascript如何发送一个Ajax请求
2015/01/26 面试题
五型班组建设方案
2014/02/10 职场文书
装修公司管理制度
2015/08/05 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python