知识大全网站如何做到完全不需要jQuery也可以满足简单需求

Posted 2022-07-20 元素

篇首语：无论你有多少知识，假如不用便是一无所知。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全网站如何做到完全不需要jQuery也可以满足简单需求相关的知识，希望对你有一定的参考价值。

网站如何做到完全不需要jQuery也可以满足简单需求 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　据统计目前全世界 %的网站使用它也就是说个网站里面有个使用jQuery 如果只考察使用工具库的网站这个比例就会上升到惊人的 %

　　虽然jQuery如此受欢迎但是它臃肿的体积也让人头痛不已 jQuery 的原始大小为 KB 优化后为 KB 如果是支持IE 的jQuery 原始大小为 KB 优化后为 KB

　　这样的体积即使是宽带环境完全加载也需要秒或更长更不要说移动设备了这意味着如果你使用了jQuery 用户至少延迟秒才能看到网页效果考虑到本质上 jQuery只是一个操作DOM的工具我们不仅要问如果只是为了几个网页特效是否有必要动用这么大的库？

　　年 jQuery诞生的时候主要用于消除不同浏览器的差异（主要是IE ）为开发者提供一个简洁的统一接口相比当时如今的情况已经发生了很大的变化 IE的市场份额不断下降以ECMAScript为基础的JavaScript标准语法正得到越来越广泛的支持开发者直接使用JavScript标准语法就能同时在各大浏览器运行不再需要通过jQuery获取兼容性

　　下面就探讨如何用JavaScript标准语法取代jQuery的一些主要功能做到jQuery free

　　一选取DOM元素

　　jQuery的核心是通过各种选择器选中DOM元素可以用querySelectorAll方法模拟这个功能

　　var $ = document querySelectorAll bind(document);

　　这里需要注意的是 querySelectorAll方法返回的是NodeList对象它很像数组（有数字索引和length属性）但不是数组不能使用pop push等数组特有方法如果有需要可以考虑将Nodelist对象转为数组

　　myList = Array prototype slice call(myNodeList);

　　二 DOM操作

　　DOM本身就具有很丰富的操作方法可以取代jQuery提供的操作方法

　　尾部追加DOM元素

　　// jQuery写法 $(parent) append($(child));
　　// DOM写法 parent appendChild(child)

　　头部插入DOM元素

　　// jQuery写法 $(parent) prepend($(child));
　　// DOM写法 parent insertBefore(child parent childNodes[ ])

　　删除DOM元素

　　// jQuery写法 $(child) remove()
　　// DOM写法 child parentNode removeChild(child)

　　三事件的监听

　　jQuery的on方法完全可以用addEventListener模拟

　　Element prototype on = Element prototype addEventListener;

　　为了使用方便可以在NodeList对象上也部署这个方法

　　NodeList prototype on = function (event fn) [][ forEach ] call(this function (el) el on(event fn); ); return this; ;

　　四事件的触发

　　jQuery的trigger方法则需要单独部署相对复杂一些

　　Element prototype trigger = function (type data) var event = document createEvent( HTMLEvents ); event initEvent(type true true); event data = data || ; event eventName = type; event target = this; this dispatchEvent(event); return this; ;

　　在NodeList对象上也部署这个方法

　　NodeList prototype trigger = function (event) [][ forEach ] call(this function (el) el[ trigger ](event); ); return this; ;

　　五 document ready

　　目前的最佳实践是将JavaScript脚本文件都放在页面底部加载这样的话其实document ready方法（jQuery简写为$(function)）已经不必要了因为等到运行的时候 DOM对象已经生成了

　　六 attr方法

　　jQuery使用attr方法读写网页元素的属性

　　$("#picture") attr("src" "//url/to/image");

　　DOM元素允许直接读取属性值写法要简洁许多

　　$("#picture") src = "//url/to/image";

　　需要注意 input元素的this value返回的是输入框中的值链接元素的this href返回的是绝对URL 如果需要用到这两个网页元素的属性准确值可以用this getAttribute( value )和this getAttibute( href )

　　七 addClass方法

　　jQuery的addClass方法用于为DOM元素添加一个class

　　$( body ) addClass( hasJS );

　　DOM元素本身有一个可读写的className属性可以用来操作class

　　document body className = hasJS ;
　　// or
　　document body className += hasJS ;

　　HTML 还提供一个classList对象功能更强大（IE 不支持）

　　document body classList add( hasJS );
　　document body classList remove( hasJS );
　　document body classList toggle( hasJS );
　　document body classList contains( hasJS );

　　八 CSS

　　jQuery的css方法用来设置网页元素的样式

　　$(node) css( "color" "red" );

　　DOM元素有一个style属性可以直接操作

　　element style color = "red";;
　　// or
　　element style cssText += color:red ;

　　九数据储存

　　jQuery对象可以储存数据

　　$("body") data("foo" );

　　HTML 有一个dataset对象也有类似的功能（IE 不支持）不过只能保存字符串

　　element dataset user = JSON stringify(user);
　　element dataset score = score;

　　十 Ajax

　　jQuery的Ajax方法用于异步操作

　　$ ajax( type: "POST" url: "some php" data: name: "John" location: "Boston" ) done(function( msg ) alert( "Data Saved: " + msg ); );

　　我们可以定义一个request函数模拟Ajax方法

　　function request(type url opts callback)
　　var xhr = new XMLHttpRequest();
　　if (typeof opts === function ) callback = opts; opts = null;
　　xhr open(type url);
　　var fd = new FormData();
　　if (type === POST && opts) for (var key in opts) fd append(key JSON stringify(opts[key]));
　　xhr onload = function () callback(JSON parse(xhr response)); ;
　　xhr send(opts ? fd : null);
　　

　　然后基于request函数模拟jQuery的get和post方法

　　var get = request bind(this GET );
　　var post = request bind(this POST );

　　十一动画

　　jQuery的animate方法用于生成动画效果

　　$foo animate( slow x: += px )

　　jQuery的动画效果很大部分基于DOM 但是目前 CSS 的动画远比DOM强大所以可以把动画效果写进CSS 然后通过操作DOM元素的class 来展示动画

　　foo classList add( animate )

　　如果需要对动画使用回调函数 CSS 也定义了相应的事件

　　el addEventListener("webkitTransitionEnd" transitionEnded);
　　el addEventListener("transitionend" transitionEnded);

　　十二替代方案

　　由于jQuery体积过大替代方案层出不穷

　　其中最有名的是zepto js 它的设计目标是以最小的体积做到最大兼容jQuery的API zepto js 版的原始大小是 KB 优化后是 KB gzip压缩后为 KB

　　如果不求最大兼容只希望模拟jQuery的基本功能那么 min js优化后只有字节而dolla优化后是 KB

　　此外 jQuery本身采用模块设计可以只选择使用自己需要的模块具体做法参见它的github网站或者使用专用的Web界面

　　十三参考链接

　　 Remy Sharp I know jQuery Now what? Hemanth HM Power of Vanilla JS Burke Holland Things You Should Stop Doing With jQuery

cha138/Article/program/Java/JSP/201311/20562

知识大全 网站如何做到完全不需要jQuery也可以满足简单需求

知识大全网站如何做到完全不需要jQuery也可以满足简单需求