现代浏览器中内置的几个功能可以等效地替代jQuery
时间：2023-03-18 22:34:46
科技观察
jQuery的数量在不断增加。不断添加新功能，这是不可避免的结果。虽然从1.8.3版本开始瘦身效果明显，但不可否认的是，对于手机端的web开发来说，仍然是难以接受的。当然，jQuery并不是铁板一块，你可以自定义它，只打包你想要的组件，但是一些为了兼容老浏览器的代码是不能去掉的。就我个人的习惯而言，无论我开发什么项目，哪怕是一个很简单的demo，我都会首先引入jQuery，主要是使用它提供的DOM选择器功能。对于像IE6/IE7这样的一些旧浏览器，这种做法是显而易见的，但是现在现代浏览器已经内置了完整的DOM选择器功能，允许你使用浏览器的原生方法来实现jQuery功能。document.queryselector中这里所说的现代浏览器是指新一代浏览器，如Firefox、Google、Opera、Safari等，如果是IE，至少需要IE8以上。您可以简单地将document.querySelector()函数映射到$，它返回在DOM中找到的第一个与选择条件匹配的元素。任何CSS选择器都可以用作它的参数。注意：IE8只支持CSS2.1标准选择器
需要使用原生的“style”方法，这里不能使用jQuery中的链式调用。console.log()输出将是backgroundColor方法返回的“鲑鱼”。原始DOM节点有时比包装的jQuery对象更好。例如，如果要修改图像的src属性，请比较以下使用jQuery和直接使用DOM节点的方法。//jQuery方法$("#picture").attr("src","http://placekitten.com/200/200");//使用js原生方法将querySelector映射到$$("#picture").src="http://placekitten.com/200/200";DOM对象允许您直接访问图像的src属性。相反，所有的jQuery对象都需要你通过attr函数来操作。document.querySelector方法只返回一个元素。如果您的选择目标是一堆元素，它只会返回符合条件的第一个节点。要返回所有节点，您需要使用document.querySelectorAll方法。document.queryselectorall一个非常巧妙的做法是将querySelector映射到$，将querySelectorAll函数映射到$$。但是它返回的是一个节点列表，不如jQuery返回的Array格式好用。我们可以使用Array.prototype.slice.call(nodeList)方法对其进行处理，以方便使用。
注意，IE8不支持使用jQuery将nodeList转为ArrayclassList，对于CSS类的操作非常方便。幸运的是，现代浏览器也内置了方便操作它们的方法，主要是使用classList对象。下面是一些基本操作的两种方法的比较。window.$=function(selector){returndocument.querySelector(selector);};//---添加CSS类-------/*jQuery*/$(".main-content").addClass("someClass");/*等效的内置方法*/$(".main-content").classList.add("someClass");//---删除一个CSS类-----/*jQuery*/$(".main-content").removeClass("someClass");/*等效的内置方法*/$(".main-content").classList.remove("someClass");//----判断是否存在CSS类---/*jQuery*/if($(".main-content").hasClass("someClass"))/*等价的内置方法*/if($(".main-content").classList.contains("someClass"))相比jQuery提供了大量丰富的方法。上面提到的现代浏览器中的内置功能非常简单，但是如果在项目中要求不高，这些Alternative方法可以大大减少你的应用依赖。***需要提醒的是，这些内置方法在不同的浏览器和不同的版本中支持程度不同。以下是他们支持水平的参考表。附图1：各种浏览器对querySelector/querySelectorAll的兼容支持附图1：各种浏览器对classlist的兼容支持参考：5ThingsYouShouldStopDoWithjQueryNativeequivalentsofjQueryfunctionshttp://caniuse.com原文链接：http://www.aqee.net/native-methods-jquery/
