利用原生js提升jquery选择器的性能

最新推荐文章于 2024-05-24 00:34:26 发布
最新推荐文章于 2024-05-24 00:34:26 发布
阅读量360 收藏
点赞数 1
文章标签： js jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_34116814/article/details/50772535
版权

实例代码:

<!DOCTYPE html>
<!--STATUS OK-->
<html>
	<head>
	<title>js</title>
	</head>
	<body>
	<div id="div"></div>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	</body>
	<script>
		$(function(){
		console.time("jquery");
			var $div = $("#div");
		console.timeEnd("jquery");
		var $div2 = $("#div");
		console.time("getElementById");
			var $div1 = $(document.getElementById("div"));
		console.timeEnd("getElementById");	

		console.log($div[0] == $div1[0]);
		console.log($div[0] == $div2[0]);
		console.log($div);
		console.log($div1);
		})
	</script>
</html>

jquery的ID选择器所消耗的时间比使用原生js的getElementById方法所用时间更长,所以可以使用getElementById方法得到该dom对象之后再用jquery封装成jquery对象.

例: 

var $div1 = $(document.getElementById("div"))

使用此方法获取对象耗时是使用jquery选择器直接获取对象耗时的五分之一到三分之一(基于以上代码运行于FF/chrome/IE: 其中IE大概只有二分之一).

机智boy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js和jQuery优缺点对比
weixin_43796818的博客
04-06 1868
原生js缺点： 1、不能添加多个入口函数（window.onload），如果添加了多个入口函数，则会将前面的覆盖。 2、原生js的API名字都太长，太难记 例如：document.getElementById（）；style.border=‘’；textConten=‘’；等等。 3、原生js有时候代码会有些冗余。 例如：对两个按钮设置边框和文本，则需要遍历三次div 4、原生js有些属性或者方法，有些浏览器不兼容，如IE浏览器。 5、 原生js容错率比较低，前面的代码出错，后面的代码无...
原生js选择器
蒙蒙细雨的博客
05-06 925
//获取第一个dom let cell=document.getElementsByClassName('current-cell')[0]; //获取第一个子元素 let child= cell.firstChild let child= cell.children[0] //获取子元素的子元素的节点名称 let child= cell.firstChild.firstChild.nodeName; //SPAN 注:firstChild 获取的子元素包括换行和空格， firstElementChil
原生js深入理解系列（一）--- 对js原生选择器的认识
埃尔斯的博客
11-20 274
开发十年，就只剩下这套架构体系了！ >>> ...
jQuery原生选择器
恋恋玫瑰花
08-12 222
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery原生选择器&lt;/title&gt; &lt;script type="text/javascript" sr
前端 -＞ js原生选择器,jQuery选择器 基本选择器(ID选择器,元素选择器,类名选择器,复合选择器,通配符选择器)
热门推荐
rod0320的博客
11-29 1万+
文章目录jQuery基本选择器js选择器(原生选择器) jQuery基本选择器 1. ID选择器 ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素，并以iQuery包装集的形式返回给对象。 使用公式:$("#id") 示例：$("#box") //获取id属性值为box的元素 <input id='box'/> 2. 元素选择器 元素选择器是根据元
详解用原生JavaScript实现jQuery的某些简单功能
10-20
然而，理解如何用原生JavaScript实现jQuery的功能对于提升开发者的技术水平和优化代码性能非常有益。本文将深入探讨如何使用纯JavaScript实现jQuery的一些基础功能。 首先，我们需要创建一个类似于jQuery的对象，...
原生的html元素选择器类似jquery选择器
10-25
本文详细介绍了如何...通过阅读本文，我们可以学习到如何利用JavaScript的原生功能来模拟jQuery选择器，这不仅有助于深入理解DOM操作的原理，也有助于在特定情况下减少项目对外部库的依赖，从而优化性能和加载时间。
原生Javascript和jQuery做轮播图简单例子
10-21
使用jQuery实现轮播图的关键在于掌握jQuery的选择器、事件监听、动画方法等。在代码示例中，使用了$.show()和$.hide()方法来控制轮播项的显示和隐藏。 接着，文章展示了如何使用原生Javascript实现相同的轮播图功能...
原生js和jQuery写的网页选项卡特效对比
10-24
2. 使用jQuery选择器和方法： - 同样需要定义好HTML结构。 - 使用jQuery的`$(document).ready()`方法确保DOM完全加载后再执行脚本。 - 使用`.click()`方法为标题列表中的元素绑定点击事件。 - 在事件处理函数中...
原生js选择器或者选择元素或者选择方式
qq_42331499的博客
09-24 2310
第一种，已有元素，且元素id为01 var aa = document.getElementById("01"); 第二种，已有元素 var number01 = 3; var aa = document.getElementById(number01); 第三种，选择所有某一标签的所有元素，比如div var aa_array = document.querySelectorAll("div"); 第四种，选择带有某一类的所有元素元素比如类名为monster var aa_array =
《使用原生js实现jQuery的部分方法》
yk_ddm的博客
07-26 409
目录具体实现使用原生JavaScript 具体实现 使用原生JavaScript //author : yk-ddm //使用原生js封装jQuery /* object对象 selector选择器 prototype原型 constructor构造器 */ (function(object) { function jQuery(selector) { var Init = jQuery.prototype.init; return new Init(s
原生JS-常用选择器详解
最新发布
michaelli918的博客
05-24 1032
总之，常见的原生JS选择器一般由上面几种方式，在当前不考虑IE的情况下（IE已停更），所有选择器都可以使用。getElementsByName方法返回的是一个NodeList集合，兼容性：IE10以下只能获取表单中带name的属性，IE10以上和chrome和FF高版本都可以兼容。原生JavaScript提供了一些选择器，用于选择和操作HTML元素，下面展示下常见选择器方法和之间的区别。6）querySelectorAll, 通过CSS选择器来选择元素, 返回所有匹配选择器的元素的集合。
js原生选择器的兼容性
web_xyk的专栏
10-24 695
个人对一些常用的js原生选择器做了兼容性测试（主要针对ie5以上），而对于 更新到41.0.2版本的FF 、45.0.2版本的Google来说基本上不用考虑以下所述内容的兼容性。总结如下：1. document.getElementById("")无兼容性问题,在当下浏览器环境中可以放心使用。2.getElementsByTagName("")无兼容性问题,在当下浏览器环境中可以放心使用。3.do...
js原生后代选择器_HTML5的JavaScript选择器介绍
weixin_30540871的博客
12-30 1057
在HTML5出现之前使用JavaScript查找DOM元素，有以下三种原生的方法：getElementById：根据指定元素的id属性返回元素getElementsByName：返回所有指定name属性的元素getElementsByTagName：返回所有指定标签的元素HTML5新增的选择器，方法有两种：querySelector：根据选择器规则返回第一个符合要求的元素querySelector...
jQuery相较于原生js的优势
互关互粉，相互学习。
01-30 673
jQuery对原生js的优势
原生js极简文件选择器，文件数量大小类型限制，元素自动渲染，自动获取formData提交至后端
loveisbunny的博客
06-13 351
叠个甲，如果你说elementui或者layui也有文件选择器，那么你说得对，我用过，但是我觉得那个耦合太高了，所以我就想只写一个文件选择器，并且能把前端代码量降到最小，全封装到一起，这样方便应该是比自己手搓方便，耦合度也低，但是就是功能不够强大，在js里写前端样式也比较逆天，所以图个乐，小练习。以前对文件处理一直很抵触，因为练习成本较高，原生的文件选择器了解不多，所以最近补了补课，然后自己手搓了一个文件选择器，先看看效果。问题肯定很多，代码写法肯定问题也有，如果有兴趣可以自己优化一下，毕竟是第一版。
原生的js选择器
MY的博客
09-25 2297
document.getElementById document.getElementsByName document.getElementsByTagNamedocument.getElementsByClassName //html5的类选择器，不兼容IE8 document.querySelector //兼容IE8
javascript原生选择器的一些基本方法
相信一切皆有可能
03-27 1012
在这里仅仅只是个人最近对javascript学习过程当中的一段记录，如有不正确的位置敬请指导： 首先对一些简单的选择方法进行封装 一。首先是一个简单的html文件没有任何的样式添加 原生js选择元素 pm am HelloWorld Hello World HelloWorldGoodDay 1111111111111111111111
jQuery的选择器性能
u011751266的专栏
09-24 659
发现自己经常在涉及到jQuery选择器性能的时候犯迷糊，已。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值