作为曾经的 Web 开发“王者”,jQuery 的传奇怎么续写?
2019-09-20 20:50
1531 查看
作者 | Danny Guo
译者 | 弯月,责编 | 刘静
出品 | CSDN(ID:CSDNnews)
jQuery的发展简史
除了通过id或类选择元素之外,jQuery还允许使用复杂的表达式,例如根据它们与其他元素的关系选择元素:
// Select every item within the list of people within the contacts element
$('#contacts ul.people li');
这个选择引擎最终单独抽象成了一个名为Sizzle的库。
第二个卖点是,浏览器之间差异的抽象。当时,很难编写出可以在所有浏览器上稳健运行的代码。
// If Mozilla is usedif ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
// Use the handy event callback
jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );// If IE is used, use the excellent hack by Matthias Miller// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited} else if ( jQuery.browser == "msie" ) {
// Only works if you document.write() it
document.write("<scr" + "ipt id=__ie_init defer=true " +
"src=javascript:void(0)></script>");
// Use the defer script hack
var script = document.getElementById("__ie_init");
script.onreadystatechange = function() {
if ( this.readyState == "complete" )
jQuery.ready();
};
// Clear from memory
script = null;// If Safari is used} else if ( jQuery.browser == "safari" ) {
// Continually check to see if the document.readySt
jQuery出现以后,开发人员就可以依赖jQuery团队来处理这些陷阱。
// jQuery
$.getJSON('https://api.com/songs.json')
.done(function (songs) {
console.log(songs);
})
// native
fetch('https://api.com/songs.json')
.then(function (response) {
return response.json();
})
.then(function (songs) {
console.log(songs);
});
querySelector和querySelectorAll方法也可以取代jQuery的选择功能:
// jQuery
const fooDivs = $('.foo div');
// native
const fooDivs = document.querySelectorAll('.foo div');
如今我们还可以使用classList操作元素的类:
// jQuery
$('#warning').toggleClass('visible');
// native
document.querySelector('#warning').classList.toggle('visible');
【END】
热 文 推 荐
点击阅读原文,即刻阅读《程序员大本营》最新期刊。
相关文章推荐
- 作为一名做 Web 开发的 Java 工程师,算法在工作中基本不怎么用到,但为什么面试总会问算法的问题?
- 混合开发hybrid app(3)怎么增强webview安全功能 和 适配不同手机分辨率的html
- 用eclipse开发web工程时WebRoot和WebContent什么区别?怎么有时WebRoot,而有时没有呢,请帮一下忙。
- [译]用 Gulp 作为 Web 开发服务器
- 值得 Web 开发人员学习的20个 jQuery 实例教程
- Html5+css3+angularjs+jquery+webAPi 开发手机web(一)
- js,jQuery实现拖拽自定义移动端板块,web移动端开发
- 十条jQuery代码片段助力Web开发效率提升
- Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
- 使用jQuery、Yahoo API和HTML5的geolocation来开发一个天气预报web应用
- 作为Web开发人员,我为什么喜欢Google Chrome浏览器
- 分享一套帮助你优化开发web应用的jQuery插件集 - Vanity Toolset
- 基于jquery、canvas开发的jbpm-web设计器的雏形
- webapp开发相关jquery手势事件之jGestures
- 我的第一个python web开发框架(3)——怎么开始?
- Java Web开发(五) JavaScript库jQuery学习(3) jQuery与Ajax的应用(1)
- 基于webpack和vue.js搭建的H5端框架(其实主要用于Hybrid开发H5端框架,但是依然能够作为纯web端使用)
- 作为Web开发人员,我为什么喜欢Google Chrome浏览器
- 作为Web开发人员,我为什么喜欢Google Chrome浏览器
- Web开发人员必备的20款超赞的jQuery插件