原生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 相关文章推荐
浅析javascript闭包 实例分析
Dec 25 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
让table变成exls的示例代码
Mar 24 Javascript
javascript 闭包详解
Feb 15 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
原生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
一些星际专用术语解释
2020/03/04 星际争霸
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
第六章 php目录与文件操作
2011/12/30 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
Vuex提升学习篇
2018/01/11 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
机械专业应届生求职信
2013/09/21 职场文书
初三政治教学反思
2014/01/30 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
鲜花方阵解说词
2014/02/13 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
航空学院求职信
2014/06/11 职场文书
佛光寺导游词
2015/02/10 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
诚信教育主题班会
2015/08/13 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python