一个网站没有jQuery怎么满足简单的需求？

JQuery是最流行的JavaScript工具库。据统计，目前全球有57.3%的网站使用它。也就是说，10个网站中有6个使用jQuery。如果我们只看使用工具库的网站，这个比例会上升到惊人的91.7%。

虽然jQuery如此受欢迎，但其臃肿的规模也令人头疼。jQuery 2.0的原始大小为235KB，优化后的大小为81KB。在jQuery 1.8.3支持IE6、7、8的情况下，原始大小为261KB，优化后的大小为91KB。有了这样的体积，即使在宽带环境中，完全加载也需要1秒或更长时间，更不用说移动设备了。这意味着，如果使用jQuery，用户将被延迟至少一秒钟才能看到网页的效果。考虑到jQuery本质上只是一个操作DOM的工具，我们不应该只问：如果只是为了网页上的几个特效，有必要使用这么大的库吗？

2006年jQuery诞生时，主要是用来消除不同浏览器(主要是IE6)之间的差异，为开发者提供一个简单统一的界面。当时，今天的情况发生了很大的变化。IE的市场份额在下降，基于ECMAScript的JavaScript标准语法得到越来越多的支持。开发人员可以直接使用JavScript的标准语法在所有主要浏览器中同时运行，不需要通过jQuery获得兼容性。下面讨论如何用JavaScript标准语法替换jQuery的一些主要功能，从而实现jQuery的无。

1.选择DOM元素jQuery的核心是通过各种选择器选择DOM元素，这个功能可以用querySelectorAll方法来模拟。复制代码如下： var $=document . queryselectorall . bind(document)；这里需要注意的是，querySelectorAll方法返回的是NodeList对象，与数组(有数值索引和长度属性)非常相似，但不是数组，所以不能使用pop、push等数组特有的方法。如有必要，考虑将节点列表对象转换为数组。复制代码如下： mylist=array . prototype . slice . call(my nodelist)；二、DOM操作DOM本身有丰富的操作方法，可以替代jQuery提供的操作方法。在尾部添加DOM元素。复制代码如下：//jQuery写成$(parent)。追加($(子级))；//DOM写成parent.appendChild(子级)，头部插入DOM元素。复制代码如下：//jQuery写成$(parent)。prepend($(child))；//将DOM写成parent.insertbefore (child，parent.childnodes [0])来删除DOM元素。复制代码如下：//jQuery写成$(child)。remove ()//DOM被写成子级。parentnode。RemoveChild(子级)。三.事件监控jQuery的on方法可以用addEventListener来模拟。复制代码如下： element . prototype . on=element . prototype . addevent listener；为了方便起见，这个方法也可以部署在NodeList对象上。复制代码如下： modelist . prototype . on=function(event，fn) {[] ['foreach']。调用(this，function (El) {El.on (event，fn)；});归还这个；};第四，jQuery的触发方法需要单独部署，比较复杂。复制代码如下： element . prototype . trigger=function(类型，数据){ varevent=document . create event(' htmlevents ')；event.initEvent (type，true，true)；event . data=data { }；event.eventName=类型；event.target=thisthis.dispatchEvent(事件)；归还这个；};此方法也部署在节点列表对象上。复制代码如下： modelist . prototype . trigger=function(event){[][' foreach ']。调用(this，function (El) {El ['trigger'](事件)；});归还这个；};当前document.ready的最佳实践是在页面底部加载所有的JavaScript文件。在这种情况下，document.ready方法(jQuery缩写为$(function))是不必要的，因为当它运行时，DOM对象已经生成了。Attr方法jQuery使用attr方法读写网页元素的属性。复制代码如下：$('#picture ')。attr ('src '，' http://URL/to/image ')；DOM元素允许直接读取属性值，编写简单得多。复制代码如下： $ ('# picture ')。src=' 3358 URL/to/image '；注意，输入元素的this.value返回输入框中的值，链接元素的this.href返回绝对URL。如果需要这两个网页元素的确切属性值，可以使用this.getAttribute ('value ')和this . GetAttribute(' href ')。七、addClass方法jQuery addClass方法，用于为DOM元素添加一个类。复制代码如下： $(“body”)。add class(' Hasjs ')；DOM元素本身有一个读写类名属性，可以用来操作这个类。复制的代码如下： document . body . class name=' has js '；//or document . body . class name=' Hasjs '；HTML 5还提供了一个classList对象，功能更强大(IE 9不支持)。复制代码如下： document . body . class list . add(' has js ')；document . body . class list . remove(' Hasjs ')；document . body . class list . toggle(' Hasjs ')；document . body . class list . contains(' Hasjs ')；八、css jQuery CSS方法，用于设置网页元素的样式。复制代码如下：$(节点)。css ('color '，' red ')；DOM元素有一个样式属性，可以直接操作。复制代码如下： element . style . color=' red '；//or element . style . CSS text=' color : red '；九.数据存储jQuery对象可以存储数据。

复制代码如下：$('body ')。数据(' foo '，52)；HTML 5有一个数据集对象，有类似的功能(IE 10不支持)，但只能保存字符串。复制代码如下： element . dataset . user=JSON . stringify(用户)；element . dataset . score=score；十、Ajax jQuery Ajax方法，用于异步操作。复制的代码如下： $。Ajax ({type:' post '，url:' some。PHP '，data: {name3360' John '，location:' Boston'}})。完成(函数(msg) {alert('数据保存30)。});我们可以定义一个请求函数来模拟Ajax方法。复制代码如下：函数请求(类型、URL、opts、回调){ var xhr=new xmlhttprequest()；if(type of opts==' function '){ callback=opts；opts=null}xhr.open(类型，URL)；var FD=new FormData()；if(type===' POST ' opts){ for(opts中的var键){fd.append (key，JSON . stringify(opts[key])；} } xhr . onload=function(){ callback(JSON . parse(xhr . response))；};xhr.send (opts？FD : null)；}然后，基于请求函数，模拟jQuery的get和post方法。复制代码如下： var get=request.bind(这个，‘get’)；var post=request.bind(这个，‘POST’)；十一.动画jQuery的animate方法，用于生成动画效果。复制代码如下：$foo.animate ('slow '，{ x : '=10px ' })；jQuery的动画效果大多基于DOM。不过目前CSS 3的动画功能远比DOM强大，可以将动画效果写入CSS，然后通过操作DOM元素的类来显示动画。复制的代码如下： foo . class list . add(' animate ')；如果需要对动画使用回调函数，CSS 3也定义了相应的事件。复制代码如下：el。addeventlistener(' webkittransitionend '，transitionEnded)；El . addeventlistener(' transitionend '，transitionEnded)；十二.替代品由于jQuery的庞大规模，替代品层出不穷。其中最著名的是zepto.js，它的设计目标是以最小的体积实现与jQuery API的最大兼容性。zepto.js版本的原始大小是55KB，优化后是29KB，gzip压缩后是10KB。如果只想模拟jQuery的基本功能而没有最大兼容性，那么优化后的min.js只有200字节，而dolla优化后是1.7KB。另外，jQuery本身采用模块设计，所以只能选择使用自己需要的模块。详情请查看其GitHub网站，或使用专用的网络界面。十三.参考链接-雷米夏普，我知道jQuery。现在怎么办？-赫曼特。嗯，香草的力量，你应该停止用JQuery做的5件事(结束)。