原生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实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
详解React中的组件通信问题
Jul 31 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
angular的输入和输出的使用方法
Sep 22 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 switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
BootStrap 导航条实例代码
2017/05/18 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
Python中的迭代器漫谈
2015/02/03 Python
Python中django学习心得
2017/12/06 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
绘画设计学生的个人自我评价
2013/09/20 职场文书
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
小区停车场管理制度
2014/01/27 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
财务会计专业求职信
2014/06/09 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
信仰纪录片观后感
2015/06/08 职场文书
课改心得体会范文
2016/01/25 职场文书
中学音乐课教学反思
2016/02/18 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers