原生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 图片轮播(5张图片)
Dec 30 Javascript
JavaScript网页定位详解
Jan 13 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
JavaScript小技巧整理
Dec 30 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
jQuery实现滚动效果
Nov 17 jQuery
Vue 拦截器对token过期处理方法
Jan 23 Javascript
小程序hover-class点击态效果实现
Feb 26 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截取后台登陆密码的代码
2012/05/05 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
应届毕业生个人求职自荐信
2014/01/06 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
稽核岗位职责范本
2015/04/13 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
python实现商品进销存管理系统
2022/05/30 Python