首页 >web前端 >js教程 >如何用js原生替换JQuery的16种方法的实例详解

如何用js原生替换JQuery的16种方法的实例详解

伊谢尔伦
伊谢尔伦原创
2017-06-17 11:46:351831浏览

为大家带来一篇原生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 = $(&#39;<p/>&#39;);

// Native
var newEl = document.createElement(&#39;p&#39;);

3.添加事件

// jQuery
$(&#39;.el&#39;).on(&#39;event&#39;, function() {

});

// Native
[].forEach.call(document.querySelectorAll(&#39;.el&#39;), function (el) {
 el.addEventListener(&#39;event&#39;, function() {

 }, false);
});

4.get/set属性

// jQuery
$(&#39;.el&#39;).filter(&#39;:first&#39;).attr(&#39;key&#39;, &#39;value&#39;);
$(&#39;.el&#39;).filter(&#39;:first&#39;).attr(&#39;key&#39;);

// Native
document.querySelector(&#39;.el&#39;).setAttribute(&#39;key&#39;, &#39;value&#39;);
document.querySelector(&#39;.el&#39;).getAttribute(&#39;key&#39;);

5.添加和移除样式Class

DOM元素本身有一个可读写的className属性,可以用来操作class。

HTML 5还提供一个classList对象,功能更强大(IE 9不支持)。

// jQuery
$(&#39;.el&#39;).addClass(&#39;class&#39;);
$(&#39;.el&#39;).removeClass(&#39;class&#39;);
$(&#39;.el&#39;).toggleClass(&#39;class&#39;);

// Native
document.querySelector(&#39;.el&#39;).classList.add(&#39;class&#39;);
document.querySelector(&#39;.el&#39;).classList.remove(&#39;class&#39;);
document.querySelector(&#39;.el&#39;).classList.toggle(&#39;class&#39;);

6.追加元素

尾部追加元素:

// jQuery
$(&#39;.el&#39;).append($(&#39;<p/>&#39;));

// Native
document.querySelector(&#39;.el&#39;).appendChild(document.createElement(&#39;p&#39;));

头部追加元素:

//jQuery
$(‘.el&#39;).prepend(&#39;<p></p>&#39;)

//Native
var parent = document.querySelector(&#39;.el&#39;);
parent.insertBefore("<p></p>",parent.childNodes[0])

7.克隆元素

// jQuery
var clonedEl = $(&#39;.el&#39;).clone();

// Native
var clonedEl = document.querySelector(&#39;.el&#39;).cloneNode(true);

8.移除元素

Remove
// jQuery
$(&#39;.el&#39;).remove();

// Native
remove(&#39;.el&#39;);

function remove(el) {
 var toRemove = document.querySelector(el);

 toRemove.parentNode.removeChild(toRemove);
}

9.获取父级元素

// jQuery
$(&#39;.el&#39;).parent();

// Native
document.querySelector(&#39;.el&#39;).parentNode;

10.获取上一个/下一个元素(Prev/next element)

// jQuery
$(&#39;.el&#39;).prev();
$(&#39;.el&#39;).next();

// Native
document.querySelector(&#39;.el&#39;).previousElementSibling;
document.querySelector(&#39;.el&#39;).nextElementSibling;

11.XHR and AJAX

// jQuery
$.get(&#39;url&#39;, function (data) {

});
$.post(&#39;url&#39;, {data: data}, function (data) {

});

// Native

// get
var xhr = new XMLHttpRequest();

xhr.open(&#39;GET&#39;, url);
xhr.onreadystatechange = function (data) {

}
xhr.send();

// post
var xhr = new XMLHttpRequest()

xhr.open(&#39;POST&#39;, 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(&#39;slow&#39;, { x: &#39;+=10px&#39; }

jQuery的动画效果,很大部分基于DOM。但是目前,CSS 3的动画远比DOM强大,所以可以把动画效果写进CSS,然后通过操作DOM元素的class,来展示动画。

foo.classList.add(&#39;animate&#39;)

如果需要对动画使用回调函数,CSS 3也定义了相应的事件。

el.addEventListener("webkitTransitionEnd", transitionEnded);
el.addEventListener("transitionend", transitionEnded);

以上是如何用js原生替换JQuery的16种方法的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn