原生js跟jquery 的对比
来源:互联网 发布:社交数据包括什么 编辑:程序博客网 时间:2024/06/05 20:37
选择器
便捷的找到我们想要的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);
0 1
- 原生js跟jquery 的对比
- 原生JS与jQuery操作DOM对比
- 原生JS与jQuery操作DOM对比
- 常用原生js与jQuery对比总结
- 原生JS与jQuery操作DOM对比
- 原生ajax 与jquery ajax 的对比
- 用jQuery跟原生js实现选项卡效果
- 【转】 原生JS与jQuery操作DOM对比
- JS原生方法实现jQuery的ready()
- 原生js实现jQuery的ready方法
- JS原生方法实现jQuery的ready()
- Js原生Ajax和Jquery的Ajax
- 原生js和jQuery的AJAX实现
- jQuery的原生js实现---on方法
- 关于原生js和JQuery的小记
- jQuery与原生js的转换
- js原生ajax与jQuery的ajax
- 原生JS中有着类似功能的方法性能对比
- (java)Implement Queue using Stacks
- zabbix安装
- MTStatusBarOverlay —— 在状态栏上显示自定义的View
- 用Excel生成Ansys *VREAD函数所需的具有固定字符长度和小数位数的数据
- Service生命周期和启动方法以及IntentService
- 原生js跟jquery 的对比
- Using C++ With Objective-C
- QT QString 很全的使用
- Android OnLowMemory和OnTrimMemory
- android:imeOptions属性
- 正则表达式范围及重复
- MATLAB r2012 B
- CYC-UIViewController的生命周期及iOS程序执行顺序
- 解决zabbix图中出现中文乱码问题