原生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 相关文章推荐
关于JS管理作用域的问题
Apr 10 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
php函数式编程简单示例
2019/08/08 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
js命名空间写法示例
2015/12/18 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
element-ui多文件上传的实现示例
2019/04/10 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Python字符串中查找子串小技巧
2015/04/10 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
python中@contextmanager实例用法
2021/02/07 Python
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
协议书模板
2014/04/23 职场文书
师范毕业生求职信
2014/07/11 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android