原生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 新手24条实用建议[TUTS+]
Jun 21 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
vue 检测用户上传图片宽高的方法
Feb 06 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封装一个异常的处理类
2017/06/08 PHP
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
Python生成随机MAC地址
2015/03/10 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python使用PyQt5的简单方法
2019/02/27 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
印尼旅游网站:via
2017/11/12 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
三好学生演讲稿范文
2014/04/26 职场文书
开展读书活动总结
2014/06/30 职场文书
绿色小区申报材料
2014/08/22 职场文书
2014年销售部工作总结
2014/12/01 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
小爸爸观后感
2015/06/15 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server