您现在的位置是:首页 > .NET

.NET

现代浏览器中内置的几个可以等效替代jQuery的功能

2020-11-12 09:09:29 .NET admin
jQuery的体积在不断的增大。新功能要不断增加,这是必然结果。虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网页开发,它仍然是不可接受的。当然,jQuery不是铁板一块,你可以对它进行定制,只打包进你想要的组件,


jQuery的体积在不断的增大。新功能要不断增加,这是必然结果。虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网页开发,它仍然是不可接受的。当然,jQuery不是铁板一块,你可以对它进行定制,只打包进你想要的组件,但其中的一些用来兼容老式浏览器的代码你无法去除。

就我的个人习惯来说,不管开发什么项目,即使是一个很简单的demo,我做的第一件事就是引入jQuery,这样做主要是想使用它提供的DOM选择器功能。对于一些像IE6/IE7这样的老式浏览器,这种做法是显而易见的,但是,如今现代浏览器里已经内置了完整的DOM选择器功能,能让你使用原生的浏览器提供的方法来实现jQuery的功能。

document.queryselector
这里说的现代浏览器是指火狐、谷歌、Opera、Safri等新生代浏览器,如果是IE,你需要至少是IE8或以上。你可以简单的将document.querySelector()函数映射为$,它能返回在DOM中找到的第一个匹配选择条件的元素。任何的CSS选择符都可以作为它的参数。

注意:IE8只支持CSS2.1标准的选择器
<spanclass="container">
<ul>
<liid="pink">Pink</li>
<liid="salmon">Salmon</li>

<liid="blue">Blue</li>
<liid="green">Green</li>
<liid="red">Red</li>
</ul>

</span>

<script>

//创建全局的'$'变量
window.$=function(selector){
returndocument.querySelector(selector);
};

(function(){
//通过id查找item1,将它的背景颜色修改为浅红
varitem=$("#salmon").style.backgroundColor="salmon";
console.log(item);
}());