原生js取代一些jquery方法的简单实现

     2022-02-09     543

关键词:

原生JS取代一些JQuery方法的简单实现

下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

 

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);

源:http://www.jb51.net/article/93038.htm

js怎样用原生js实现jquery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的。总的来说,window.onload()方法是必须等到页面内包含图片的全部元素载入完成后才干运行。$(document).ready()是DOM结构绘制完成... 查看详情

基于原生js的jsonp方法的实现

基于原生JS的jsonp方法的实现jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了。在Jquery库中,jQuery直接封装有jsonp的方法,很简便,只需在ajax请求... 查看详情

简单的原生js模拟jquery方法

仓促的模拟敲一下就上传来保存了。Object.prototype.fadeIn=function(speed){ varthat=this; setTimeout(function(){ that.style.display="block" },speed) returnthat; } //原生模拟jq中fadeOut()方法; Object.proto 查看详情

原生js实现ajax

...来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢?  JQuery提供的Ajax方法:1$.ajax({2url:,3type:‘‘,4dataType:‘‘,5data:{67},8success:function(){910},11error:function(){1213}14})  原生js实现 查看详情

原生js正则实现trim()

Jquery中封装有trim()原生需要自己实现,我们可以用原型的方式自己封装trim()方法,实现去掉前后空格、前空格、后空格...所以不必抱怨,简单又灵活,这才是强大的JS的特色  String.prototype.trim=function(){  returnthis.replace(/(^s*)|(s... 查看详情

原生js实现addclass,removeclass,toggleclass

...由于项目统一性的原因无法使用jquery.在此写了一个利用原生js来实现对dom元素class的操作方法1.addClass:为指定的dom元素添加样式2.removeClass:删除指定dom元素的样式3.toggleClass:如果存在(不存在),就删除(添加)一个样式4.hasClass:判断样... 查看详情

原生js实现简单jsonp

...跨域请求外链的JS文件,利用这一特性实现数据传输。用原生JS实现JSONP非常简单,无非几点:1)定义一个函数,用于处理接收到的跨域数据。2)生成一个dom节点(script节点),然后src属性上面记入发送的目的URL以及参数。3)在跨... 查看详情

jquery函数的等价原生函数代码示例

参考技术A我们针对常用的jQuery方法以及其等价原生方法的性能做了一些测试(1,2,3)。我知道你在想什么。原生方法明显要比jQuery方法快,因为jQuery方法要处理浏览器兼容以及其他一些事情。是的,我完全赞成。写这篇文章并不是... 查看详情

原生js实现ajax

...大的js插件,只需要实现ajax即可。所以我们就需要自己用原生JS实现ajaxajax:一种请求数据的方式,不需要刷新整个页面;ajax的技术核心是XMLHttpRequest对象;ajax请求过程:创建XMLHttpRequest对象、连接服务器、发送请求、接收响应 查看详情

javascript实现原生ajax

...到ajax这种功能该如何办呢?下面和大家分享javascript实现原生ajax的方法。 实现ajax之前必须要创建一个XMLHttpRequest对象。如果不支持创建该对象的浏览器,则需要创建ActiveXObj 查看详情

你可能不需要jquery!使用原生javascript进行开发

jquery转原生js的一些方法/jq转js/jquery与js。   很多的JavaScript开发人员,包括我在内,都很喜欢jQuery。因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery让我们开发人员能够更轻松的开发网站... 查看详情

js定时器的4种写法及介绍

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。一、什么是定时器JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTimeout:设... 查看详情

reactnative桥接原生模块(代码片段)

原生模块简介有时候一个RN应用需要访问一个原生平台的API比如相机,但是,默认情况下JavaScript是无法访问原生API的。原生模块系统暴露了一些Java类的实例对象给JavaScript,这样就可以允许开发者在JS代码中执行一些特定的原生... 查看详情

原生js实现ajax及ajax的跨域请求

...苏算是JQuery的Ajax了。但是,今天,影子向大家介绍的是原生js的Ajax,及跨域请求。 查看详情

django为啥不能实现ajax

实现ajax有两种方法,一种是用原生的javascript发送,这种方法比较麻烦,可以参考《其他相关文章[1]》。另一种使用jquery封装好了ajax的一些方法,使用起来更简单,本文主要介绍如何用jquery的ajax方法与django后台通讯。参考技术A... 查看详情

原生js和jquery代码编写窗口捕捉函数和页面视觉差效果(scroll()offsettop滚动监听的妙用)

  想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法,想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者... 查看详情

标签页(tab)切换的原生js,jquery和bootstrap实现

...课程Tab选项卡切换效果时做的总结和练手。原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的。本节内容标签页(tab)切换的原生js实现标签页(tab)切换的jquery实现标签页(tab)切换的bootstrap实现标签页(tab)切换... 查看详情

原生js实现form表单序列化

大家都知道在jquery中有相应的表单序列化的方法:1.serialize()方法  格式:vardata=$("form").serialize();  功能:将表单内容序列化成一个字符串。  这样在ajax提交表单数据时,就不用一一列举出每一个参数。只需将data参数设置... 查看详情