原生js跟jquery 的对比
2015-11-16 09:20
549 查看
选择器
便捷的找到我们想要的DOM元素是JQuery的核心功能,JQuery选择器的强大无需赘言。通过传递一个查询字符串给CSS选择器,它将会在DOM元素中检索所有的匹配。
然而在大多数的情况下,我们可以使用相同的代码量用原生JS轻易实现。
1.获取页面所有的div
2.获取某类名相同的一群元素
3.更复杂的一些选择器
DOM操作
JQuery另一大频繁被使用到的功能就是操作DOM元素,诸如插入或删除一个元素。当然,如果使用原生JS实现这些功能,代码量肯定是会有所增加的,不过我们也可以将这些功能封装成函数,下面是一些常用的DOM操作的原生JS实现。
1.插入HTML元素
CSS操作
在JQuery中可以轻松实现对css的操作,增加属性、删除属性或是检测是否存在某个类。那么你是否觉得使用原生JS实现会很麻烦呢?其实不然,因为有classList。下面是一些关于JQuery css操作的JS原生实现。
当我们简单地逐个设置Css的属性,而并非将它们全部传递给JQuery的Css函数时,性能明显会快很多。而且,真的不会添加什么额外的代码。
show与hide
show()与hide()应该也是JQuery中十分常用的方法,原生JS实现同样轻松。
事件绑定
便捷的找到我们想要的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 element var 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 element var 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 element var 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 element var 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);
相关文章推荐
- JQuery FancyBox
- jQuery选择器
- JQuery Color: Do Color Animations with jQuery
- jquery的强大
- 使用JQuery FancyBox插件实现图片展示特效
- jquery验证邮箱格式是否正确实例讲解
- jQuery实现标题有打字效果的焦点图代码
- 实例代码详解jquery.slides.js
- 基于jQuery实现的仿百度首页滑动选项卡效果代码
- jQuery链式操作实例分析
- jquery 根据网站url给导航nav添加active效果
- jquery attr
- 50个jQuery代码段帮你成为更出色的JS开发者
- 5个实用的jQuery代码片段(摘)
- EasyUI+JQuery轻松实现步骤条效果
- 17款jQuery在线QQ客服代码分享
- 17款jQuery在线QQ客服代码分享
- jQuery解决IE6图片不透明的问题
- 分享一个自己做的图片轮播的插件
- JQuery 实现简单的复选框树形结构图