转载自：[http://www.cnblogs.com/coco1s/p/4484238.html]

选择器

便捷的找到我们想要的DOM元素是JQuery的核心功能，JQuery选择器的强大无需赘言。通过传递一个查询字符串给CSS选择器，它将会在DOM元素中检索所有的匹配。

然而在大多数的情况下，我们可以使用相同的代码量用原生JS轻易实现。

1.获取页面所有的div

/* jQuery */$("div")/* native equivalent */
document.getElementsByTagName("div")

2.获取某类名相同的一群元素

  /* jQuery */ $(".my-class")/* native equivalent */document.querySelectorAll(".my-class")/* FASTER native equivalent */document.getElementsByClassName("my-class")

3.更复杂的一些选择器

  /* jQuery */$(".my-class li:first-child")/* native equivalent */document.querySelectorAll(".my-class li:first-child") /* jQuery */$(".my-class").get(0)/* native equivalent */document.querySelector(".my-class")

DOM操作

JQuery另一大频繁被使用到的功能就是操作DOM元素，诸如插入或删除一个元素。当然，如果使用原生JS实现这些功能，代码量肯定是会有所增加的，不过我们也可以将这些功能封装成函数，下面是一些常用的DOM操作的原生JS实现。

1.插入HTML元素

  /* jQuery */$(document.body).append("<div id='myDiv'><img src='im.gif'/></div>");/* CRAPPY native equivalent */document.body.innerHTML += "<div id='myDiv'><img src='im.gif'/></div>";/* MUCH BETTER native equivalent */var frag = document.createDocumentFragment();var myDiv = document.createElement("div");myDiv.id = "myDiv";var im = document.createElement("img");im.src = "im.gif";myDiv.appendChild(im);frag.appendChild(myDiv);document.body.appendChild(frag);

CSS操作

在JQuery中可以轻松实现对css的操作，增加属性、删除属性或是检测是否存在某个类。那么你是否觉得使用原生JS实现会很麻烦呢？其实不然，因为有classList。下面是一些关于JQuery css操作的JS原生实现。

  // get reference to DOM elementvar el = document.querySelector(".main-content");//----Adding a class------/* jQuery */$(el).addClass("someClass");/* native equivalent */el.classList.add("someClass");//----Removing a class-----/* jQuery */$(el).removeClass("someClass");/* native equivalent */el.classList.remove("someClass");//----Does it have class---/* jQuery */if($(el).hasClass("someClass"))/* native equivalent */if(el.classList.contains("someClass"))

当我们简单地逐个设置Css的属性，而并非将它们全部传递给JQuery的Css函数时，性能明显会快很多。而且，真的不会添加什么额外的代码。

  // get reference to a DOM elementvar el = document.querySelector(".main-content");//----Setting multiple CSS properties----/* jQuery */$(el).css({background: "#FF0000","box-shadow": "1px 1px 5px 5px red",width: "100px",height: "100px",display: "block"});/* native equivalent */el.style.background = "#FF0000";el.style.width = "100px";el.style.height = "100px";el.style.display = "block";el.style.boxShadow = "1px 1px 5px 5px red";

show与hide

show()与hide()应该也是JQuery中十分常用的方法，原生JS实现同样轻松。

  // get reference to a DOM elementvar el = document.querySelector(".main-content");//----show() or hide()----/* jQuery */$(el).show();$(el).hide();/* native equivalent */el.style.display = '';el.style.display = 'none';

事件绑定

  // get reference to a DOM elementvar el = document.querySelector(".main-content");//----Event Listener off----/* jQuery */$(el).off(eventName, eventHandler);/* native equivalent */el.removeEventListener(eventName, eventHandler);//----Event Listener  on----/* jQuery */$(el).on(eventName, eventHandler);/* native equivalent */el.addEventListener(eventName, eventHandler);

【前端性能】必须要掌握的原生JS实现JQuery相关推荐

原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡话不多说,先给各位看一下功能图: 好了,下边 ...
原生js与jQuery显示隐藏div的几种方法
原生Js与jQuery显示隐藏div的几种方法简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一首先是进行js演示和讲解. 首先是display的方法 ...
span的取值与赋值（原生js与jquery） - 对比篇
文章目录关于span的取值与赋值 - 原生js与jquery代码一. span的`取值`: 1. `javascript` 2. `jquery` 二. span的`赋值`: 1. `javasc ...
原生js和jquery常用的DOM操作
前言将原生JS和jquery里面的DOM操作进行了一下整理,方便以后温习. 创建元素节点 1.原生: document.createElement("div") 2.jquery ...
html——原生js与jquery创建元素节点区别
学习完静态样式之后开始学习动态创建添加html元素,总结了下原生js与jquery生成元素区别. 1.javascript创建元素创建select var select = document.cre ...
原生js与jquery的区别
原生js与jquery的区别 1.选择器: js: $('.car_img_con img')[0]; var jsObj = document.getElementsByClassName('sel ...
jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
原生js和jquery 遍历数组区别（forEach和each区别）
原生js和jquery 遍历数组区别(forEach和each区别) <script>var arr=[1,3,6,8,4];var obj={0:1,1:3,2:6,3:8,4:4};a ...
html 对勾单选框,利用原生js和jQuery实现单选框的勾选和取消操作的方法
根据以下的Demo,大概就可以看的明白 Demo: window.onload = function(){ var dom_a = document.getElementById('a1'); var ...
前端那些事之原生js实现jquery常用方法
2019独角兽企业重金招聘Python工程师标准>>> 原生js封装,实现jquery中常用方法 //定义一个对象 - 名字是$ var $$ = function() {this ...

【前端性能】必须要掌握的原生JS实现JQuery

选择器

DOM操作

CSS操作

show与hide

事件绑定

【前端性能】必须要掌握的原生JS实现JQuery相关推荐

最新文章

热门文章