原生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继承 笔记
Jul 13 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
vue组件开发之slider组件使用详解
Aug 21 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
PHP数据类型的总结分析
2013/06/13 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
详解python分布式进程
2018/10/08 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
对python中list的五种查找方法说明
2020/07/13 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
护士实习自我鉴定
2013/10/22 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
爱与责任演讲稿
2014/05/20 职场文书
档案工作汇报材料
2014/08/21 职场文书
迁户口计划生育证明
2014/10/19 职场文书
新教师个人总结
2015/02/06 职场文书
毕业设计致谢语
2015/05/14 职场文书
中国合伙人观后感
2015/06/02 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers