首页
学习
活动
专区
圈层
工具
发布

JS简史

这篇文章按四个主要时期划分:早期时代--新兴的语言在浏览器中可用的十来年;jQuery时代--当jQuery和其他框架横空出世以应对JS开发中一些基础并头疼的问题的年代;单页应用时代--当开发者遇到了jQuery...单页应用时代已经到来。...The Single Page App Era - 单页应用时代 时间轴: 约在 2010 - 2014 问题: 不堪重负的 DHTML, 大规模的数据操作, 速度 创新: 类MVC框架, 双向数据流,...智能操作DOM 主要浏览器: Google Chrome, Microsoft IE, Mozilla Firefox, Apple Safari 还有一些其他的创新也促成了单页应用时代的开启。...在单页应用时代,并不只是 Chrome,其他浏览器都比其他时期更平等的被使用,这对开发是某种好事。即便是 IE 这样的浏览器,也从善如流的越来越拥抱标准。

2K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端|Bootstrap——导航组件

    图1.1 效果图 问题描述 如何制作导航菜单 首先要引入jquery.js、bootstrap.min.js和bootstrap.min.css文件。...还可以向上面的元素添加role="navigation",这样有助于增加可访问性,也可以不加,对于功能的实现没有很大的影响。...第一个标签页必须添加 .in 类,以便淡入显示初始内容。如下代码就可以实现跳转到B页面: 当添加 data-toggle="dropdown" 属性,就可以让下拉菜单默认隐藏,只有在点击按钮或链接时,它才显示出来。 此外,这里的下拉菜单,还使用了使用来指示按钮作为下拉菜单。...这里需要注意aria-labelledby属性的作用是当想要的标签文本已在其他元素中存在时,可以将其值为该元素的id。tabindex="-1":不允许使用tab键。

    7.9K10

    Wijmo 更优美的jQuery UI部件集:从wijwizard和wijpager开始

    本文演示了如何使用Wijmo的其中两个部件,wijwizard 以及 wijpager。如果你期望看到Wijmo的其他文章,请参阅Wijmo 更优美的jQuery UI部件集:发现 Wijmo。...你将从添加并且自定义一个wijwizard部件入手,可以了解到一些独特的功能,然后你将学习如何通过连接到wijpager部件对wijwizard添加分页导航支持。...同时元素的标识符被设置成“pages”,你将在接下来通过jQuery访问这个元素以完成对部件的初始化。 请注意,为了向部件添加页,你所要做的只是将文本放置在一对标签中间。...当部件包含多于一个页面的时候,导航按钮将自动的被添加到部件上。你可以更改,甚至删除控件上显示的导航按钮。...这里我们会让你这么做,因为你之前没有见过它是如何工作的。 首先,添加一个的HTML元素到工程。

    3.4K70

    jQuery操作DOM元素

    实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用一些别人封装好的js库来辅助我们的工作,jQuery就是这些辅助库中的一员。...常用选择器 选择器 说明 element $('标签名'),$('a')选取页面上的所有a标签,返回类型是DOM元素数组 class $('.类名'),$('.cls')选取页面上class属性为cls...'last'的所有tr标签 //且为选择的元素添加even类 $('#table tr:odd:not(.last)').addClass('even'); //对id='table'标签中的索引大于...("#form1 :disabled");//选取id为form1的表单内所有禁用的元素 常用方法 jQuery的方法只有jQuery对象才可以调用,DOM对象不能调用。...() 将元素添加到指定的元素末尾 children('selector') 获取标签的所有子元素(不包括子元素的子元素),selector表示选择器,可省略 find('selector') 根据selector

    3.6K40

    看不完的那种!前端170面试题+答案学习整理(良心制作)

    42.jQuery中有哪几种常见的选择器 基本选择器;层次选择器;过滤选择器;属性选择器;子元素选择器;表单选择器;内容选择器;可见选择器 43.使用jQuery将页面上所有元素边框设置为2px宽的虚线...$("ul").delegate("li", "click", function(){ $(this).hide(); }); 当元素在当前页面中不可用时,使用delegate() 47.如何禁用浏览器的前进和后退按钮...63.如何用jquery将一个html元素添加到dom树中 appendTo()方法,将一个html元素添加到dom树中,使用它可以在指定的dom元素末尾添加一个现存的元素或者一个新的html元素。...image 112.jquery中是如何操作类的 用addClass()来追加类,用removeClass()来删除类,用toggle()来切换类。...如何给jQuery动态添加新的元素,如何给新生产的元素绑定事件 jQuery的html()可以给当前元素添加新的元素。直接在元素还未生成前就绑定事件肯定是无效的,因为所绑定的元素目前根本不存在。

    13.1K50

    【面试】1093- 21 道关于性能优化的面试题(附答案)

    20、jQuery性能优化如何做? 优化方法如下。 (1)使用最新版本的 jQuery类库。...JQuery类库每一个新的版本都会对上一个版本进行Bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的 jQuery类库提高性能。...(3)以数组方式使用 jQuery对象。使用 jQuery选择器获取的结果是一个 jQuery对象。然而, jQuery类库会让你感觉正在使用一个定义了索引和长度的数组。...当需要给多个元素绑定相同的回调函数时,建议使用事件委托模式。 (5)使用join( )来拼接字符串。...box- shadows和 gradients,它们往往严重影响页面的性能,尤其是在一个元素中同时都使用时。

    2.3K20

    8个用于编写可维护,简化的前端代码的CSS策略

    2.可以把你的css写成可重用的组件 不要将CSS元素视为每个单独页面上的元素,如果您可以定义可重用的CSS的组件以供自己使用,则可以减少很多复杂性。...编写可重用的css类可以解决一些事情: 它可以确保您的设计在不同的页面之间保持一致。当你在很多页面上共享你的CSS类时,你知道当你改变这个类时,它会在每一个出现在页面上的页面上改变。...你在流行的框架中看到的一些例子是: 例如,使用.hide,而不是每次只需要在页面上写出一个元素就写出一个新的类,你可以在你的元素上加上.hide类,它会使元素显示display: none; 。...所以,在这种情况下,我会100%确定需要一个额外的css类来处理红色链接。这是在实践中会出现的例子: 然后将其添加到HTML中的每个li元素。...但这是使用BEM的最好例子,而我为什么建议使用它。 6.只有使用!important 作为最后的手段 在一个类上重写一个!

    1.8K90

    放大镜神器!让网站怦然心动的神奇体验!用起不亦乐乎~

    它允许您通过简单的 CSS 类选择器轻松地为任何 HTML 元素添加缩放效果。...内容缩放:除了图片之外,您还可以使用 AnythingZoomer 为文本、表格和其他 HTML 元素添加缩放效果。...混合缩放:如果您希望在同一页面中组合使用多种类型的缩放效果,那么 AnythingZoomer 将是一个不错的选择。...特性 以下是 AnythingZoomer 的一些主要特性: 轻量级:AnythingZoomer 的源代码只有大约 3 KB,加载速度非常快。...易于使用:只需简单地向 HTML 元素添加特定的 CSS 类选择器即可启用缩放效果。 完全可定制:您可以自定义缩放的比例、动画速度、触发方式等参数,以满足您的需求。

    53410

    JavaWeb(八)JQuery

    $(this) :当前 HTML 元素 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。...中事件方法的一些例子: Event 函数 绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时) $(selector).click(function...ready() 文档就绪事件(当 HTML 文档就绪可用时) resize() 触发、或将函数绑定到指定元素的 resize 事件 scroll() 触发、或将函数绑定到指定元素的 scroll 事件...方法 描述 addClass() 向匹配的元素添加指定的类名。 after() 在匹配的元素之后插入内容。 append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。...text() 设置或返回匹配元素的内容。 toggleClass() 从匹配的元素中添加或删除一个类。 unwrap() 移除并替换指定元素的父元素。 val() 设置或返回匹配元素的值。

    2.5K40

    富Web应用的架构与转化方法:Web应用系列第二篇

    一、Rich Web应用 富Web应用程序是具有以下特征的应用程序: 丰富的用户界面组件 无需页面重新加载 动态页面更新以响应事件 单页工作单位 丰富的页面组件,是具有标准安装软件外观的用户界面元素。...如何在页面上放置一个组件,例如列出当前库存的表格,并在库存发生变化时自动更新,即使库存交易不是来自你? 使用RichFaces推送。 RichFaces推送组件适用于基于JMS或CDI事件的数据源。...有关上面代码段的注意事项: 使用一些jQuery逻辑输出Javascript,以根据事件的内容显示消息。...我们在Invoice类中添加了适当的bean验证注释: 公司名称,联系人姓名和电子邮件不能为空 - 我们使用@NotEmpty 电子邮件必须采用有效格式 - 我们使用@Email ?...我们在JSF页面中添加了和相关标签。 我们确保主题地址属性与@Push注释中设置的主题一致。 当新数据可用时,将显示“invoiceTable”面板。 ?

    5.6K20

    如何编写一个jQuery插件

    转自 如何编写jQuery插件 译自 jQuery Plugins / Authoring 创建插件 ---- 看来 jQuery 你已经用得很爽了,想学习如何自己编写插件。...); 恩,这样好一些。...正确的定义名称空间可以确保你的插件很难被其它插件或同一页面中的其它代码所覆盖。名称空间也可以让插件开发者的日子好过一些,因为它能帮你跟踪你的方法、事件和数据。...数据 插件开发中,你可能经常需要维护状态,或检查你的插件是否已在给定元素上做过初始化。jQuery data 方法是针对每个元素跟踪变量的好办法。...总结及最佳实践 编写 jQuery 插件使库更加高效。把你最聪明、最有用的功能抽象成可重用代码,这将节省你的时间,进一步提高开发效率。

    1.2K30

    多种前端框架的优缺点「建议收藏」

    这一特点使得JQuery的代码无比优雅。 9、隐式迭代:当用JQuery找到带有“.myClass”类的全部元素,然后隐藏他们时。无需循环遍历每一个返回的元素。...10、行为层与结构层的分离:开发者可以使用选择器选中元素,然后直接给元素添加事件。...2、插件兼容性:与上一点类似,当新版jQuery推出后,如果开发者想升级的话,要看插件作者是否支持。通常情况下,在最新版jQuery版本下,现有插件可能无法正常使用。...3、多个插件冲突:在同一页面上使用多个插件时,很容易碰到冲突现象,尤其是这些插件依赖相同事件或selector时最为明显。...自己手写代码解决一些. 4.指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作. 5

    5.3K20

    20个为前端开发者准备的文档和指南6

    这个demo可以帮助读者可视一些在SVG元素上使用的与viewBox和preserveAspectRatio属性相关的概念。值得注意的是,这个demo页面也有一个相关的参考手册。 ? 3....在一些示例中,当点击示例时,链接会链接到参考手册的某个地方关于该示例的一个简单定义,在另一些示例里,它会链接到参考手册上该功能所在的地方。 ? 4....该app也允许你自己向一个“栈”(就好像添加到购物车里一样)里添加自己的不同的JavaScript库。这样你就可以查看你所有库的大小了。...Default Browser Focus Outline Styles(默认浏览器焦点轮廓样式) 它是一张图表,使用屏幕截图来显示不同的浏览器在不同的情况下在各种表单元素上是如何处理焦点样式的。...当点击每一个功能时,它都会链接到tddbin站点页面上,并且在该页面上加载对应的源代码。你唯一要做的就是修改失败的测试代码。而且通过动手,你应该可以在同一时间内学会使用ES6并且掌握ES6。”

    1.7K100

    Vue.js知识点整理

    下面是关于Vue.js的一些重要知识点整理:原生DOM:浏览器/平台已实现的函数,可以直接使用,但代码繁琐。...框架可以极大地简化项目整体代码和做事的步骤,只需添加个性化功能即可。但需要改变原有的做事方法,可能难以接受。Vue.js特点: - 渐进式:提供了多个组成部分,不强迫全部使用,可与其他技术混用。...• 在CSS中必须添加: [v-cloak] { display: none; } • 用属性选择器找到所有带有v-cloak的元素,让其暂时隐藏 • 当new Vue()加载完成,就会找到页面中所有v-cloak...创建自定义指令Vue.directive('指令名', { inserted( el ){ //当元素被加载到DOM树时触发 //el 可自动获得当前写有指令的这个DOM元素对象 //函数中,可对这个写有指令的...只有在html中使用时,才加v-前缀 使用自定义指令 元素 v-指令名>强调: 使用指令时必须前边加v-计算属性:什么是: 不实际存储属性值,而是根据其它数据属性的值,动态计算获得。

    1.4K10

    Speak开坑记录

    方式,由于同时间所用Hexo博客主题作者更新了pjax,导致出现了一些出人意料地错误。...直到9月20日,最终决定通过webpack打包,将其放在一起并放弃jQuery(为了减少体积)。 基本架构 为了方便使用,采用了类似jQuery的写法。...Speak.prototype.init.prototype = Speak.prototype; window.Speak = Speak; })(window); 其好处就是在使用时只需要实例化...因此便遇到了另一个问题,dom元素的操作。 由于gitee的图片是带有防盗链的,因此需要在头部插入一个标签meta标签,表示no-referrer才可以正常使用其防盗链图片。...如何使用 使用很简单,只需要一个class为container的容器和一个实例化的Speak对象即可。 由于基于某个主题开发,部分样式可能存在细微差别。

    98840

    Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别

    而jQuery的查询最主要针对的是元素节点,如段落(p)、锚点(a)、表格(table)等,只有少数方法可以处理文本节点与注释节点。...在jQuery出现之前,在js程序中获取元素节点比较麻烦,例如获取id为elem1的节点 document.getElementById('elem1') 或者是获取页面上的所有checkbox元素,首先需要获取...ajax的核心是异步方式,而同步方式只有在极其特殊的情况下才会被用到。 XMLHttpRequest在早期IE浏览器里是使用ActiveX来实现的,并不是浏览器自身的对象。...有一天,你们人类不满足网页只是一些文字和图片的展示,希望页面上可以有更多功能。比如点击一个按钮,弹一个窗口或者改变页面上某些内容。...当接口返回『被占用』的时候,JS 在页面上给个提示就可以很好的实现了。 Ajax 技术提供了一种新的前后端数据交互方式,不需要刷新页面,而且不阻塞页面执行流程,异步的去请求去获取、交互数据。

    2.8K20
    领券