因为有一些兼容或功能没有封装在 jQuery 里面，必须通过原生 js 操作，所以需要 jQuery对象转DOM对象。当这一步操作完之后，再次转回 jQuery 对象，可以更方便的操作页面元素。...3、jQuery对象.val();表示获取该对象 value 属性的值； 4、jQuery对象.val("值");表示设置该对象 value 属性的值； 四、页面加载事件 1、DOM中页面加载事件...特点：整个页面的所有元素，文本，图片等全部加载完才会执行。...特点：不是整个页面的所有元素，而是页面中的基本元素加载完后就执行，所以比使用 load 的方式快一些。...$ 也可以换成 jQuery。 特点：不是整个页面的所有元素，而是页面中的基本元素加载完后就执行，所以比使用 load 的方式快一些。
，就拽一个bootstrap过来 需要操作DOM或发起Ajax，再拽一个jquery过来 需要快速实现网页布局效果，就拽一个Layui过来 实际的前端开发 模块化（js的模块化，css的模块化，资源的模块化...工具了，将语法进行重新编译，把es6语法转化为es5语法。 ...webpack中的插件 当我们修改js文件之后，需要重新打包才能有效，每修改一次都要重新打包一次，这就很麻烦我们可以 通过安装和配置第三方的插件，可以扩展webpack的能力，从而让webpack用起来更方便...注意：webpack-dev-server会启动一个实时打包的http服务器。 这样当我们每次修改index.js文件时，保存后就会自动打包，摁两次ctrl+c就可以终止运行。...这种打包实际上时虚拟打包，并不是每次保存打包之后将main.js进行了修改，当我们修改代码保存自动打包之后，我们发现页面UI并没有变化，那是因为main.js实际上没有修改，访问自动打包修改后的页面需要访问本地
从过去的 jQuery Mobie、Backbone 到今天的 Angular 2、React、Vue 2，除了版本号不同，他们还有很多的相同之处。 刚开始写商业代码的时候，我使用的是 jQuery。...当移动设备的性能越来越好时，开发者们开始在浏览器里渲染页面： 使用 jQuery 来做页面交互 使用 jQuery Ajax 来从服务端获取数据 使用 Backbone 来负责路由及 Model 使用...要说起路由，那可是有很长的故事。当我们在浏览器上输入网址的时候，我们就已经开始了各种路由的旅途了。...当用户点击某个链接进入到新的页面时，会通过 history 的 pushState 来填入新的地址。当我们访问 blog/12 时，URL 的就会变成 ued.party/blog/12。...当我们重新进入这个页面的时候，我们再去读取这些值。 ? 一旦谈论到数据的时候，不可避免的我们就需要关心安全因素。
因为ul中的li是JS动态创建的，在页面加载时Docoment中并没有此元素，选择器并不能选取。...图片懒加载插件 图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。（下载略） 代码演示 懒加载只需引入html 和 js操作 即可，此插件不涉及css。...最后把数组存储给本地存储 (声明函数 savaDate()) 1.7.4 案例：toDoList 本地存储数据渲染加载到页面 因为后面也会经常渲染加载操作，所以声明一个函数 load，方便后面调用 先要读取本地存储数据...，然后存储给本地存储 重新渲染加载数据列表 因为a是动态创建的，我们使用on方法绑定事件 1.7.6 案例：toDoList 正在进行和已完成选项操作 当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表...之后保存数据到本地存储 重新渲染加载数据列表 load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面 如果当前数据的done 为false
要使 UI 发生变更就必须创建各种 action 来维护对应的 state。 双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。...Vue 生命周期的理解 Vue 实例有一个完整的生命周期，生命周期也就是指一个实例从开始创建到销毁的这个过程。 beforeCreated()：在实例创建之间执行，数据未加载状态。...Vue 组件 data 为什么必须是函数 因为 JS 本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有 Vue 实例的数据。...对比 jQuery ，Vue 有什么不同 jQuery 专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染；Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作。...Vue 等单页面应用的优缺点 优点 良好的交互体验 良好的前后端工作分离模式 减轻服务器压力 缺点 SEO 难度较高 前进、后退管理 初次加载耗时多 后记 整理的过程也是重新梳理知识点的过程，途中会发现很多自己理解不是很到位的东西
浏览器不能同时加载JS脚本（大多数情况下），这意味着如果你同一时间加载很多脚本的话，将减缓页面的加载速度。因此，如果每个页面都要加载这些脚本，你应该考虑在发布之前将这些脚本整合成一个稍大的JS脚本。...处理DOM插入操作时，将需要的内容包装在一个元素中 嗯，不要问我为什么要这样做（我相信一个有相当经验的程序员会给你解释）。 在上面的例子中我们使用.html()将1000个item项插入到UL中。...当我们点击表格中的单元格时，上面的代码将使所有单元格背景变为红色。...然而当你需要基于其它一些内容进行元素选择而jQuery却没有提供该选择器时，你能做什么呢？ 嗯，一个解决方案可能是从一开始就给元素添加上classes，从而利用这些classes进行元素的选择操作。...为了速度和SEO方面的考虑，延迟加载内容 另外还有一个方法可以提升页面加载速度，理顺Spiders搜索的HTML内容，通过在页面加载之后使用AJAX请求晚加载其他内容，这样用户就可以马上开始浏览，让Spider
第一步的直观含义是看清楚这行代码本身的结构。这里出现了一个对象 jQuery, 这是当页面加载了 jQuery 库之后所具备的全局对象。...当我们在调用 jQuery.noConflict() 这个方法时, 所实现的功能是让 jQuery 库放弃对 $ 符号这个快捷方式的控制权, 从而避免与其他可能也想占用 $ 符号的第三方库或框架相冲突。...举例来说, 如果在页面中某个位置曾经写过:var $ = 'SomeOtherLibrary';在加载 jQuery 之后, $ 就会被 jQuery 覆盖为 jQuery 的快捷引用。...例如, 某些旧式广告投放脚本或者内嵌的地图库(可能在页面上也会占用 $)与我们项目中的 jQuery 同时加载。....$ = MyCustomLib; 的做法来暴露全局变量。当 jQuery 加载时, 它又会想把 $ 占为己有, 这样就需要在合适的时机调用 jQuery.noConflict()。
想想看， jquery老大哥 就是帮你 提高性能的，肯定是下面那种好呢。 Why? 原因我们接着说. 页面加载 页面加载就是从你输入网址+enter开始，发生的一些列过程，最终到页面显示。...，前文的页面加载和这里的页面加载的范围到底是怎样的一个区别....// 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间 connectStart: 1441112692155, //....performance.timing.navigationStart(页面开始加载)的时间, 到现在的微秒数....其实，这和我们将js文件放在body底部，在js上面加async,defer,以及hard Callback异步加载js文件的效果是一样一样的。
但是，当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后，对于 DOM 的操作我们就应当完全的交给框架，而我们只需要关注于数据。...1、虚拟 DOM 在我们使用 JS/Jquery 直接对 DOM 元素进行操作时，不管是对元素样式的修改（背景颜色从红色变成蓝色）还是对页面中的某些布局进行动态调整（通过点击按钮在列表中添加一行新的数据...），这都会造成页面的重新渲染，从而影响我们网站的性能。...嗯，可以说，我们很难抛弃 Jquery 的一个重大原因，就是当我们需要获取到页面上的 DOM 元素时，使用 Jquery 的 API 相比于原生的 JS 代码，简单到极致，有木有。...当然，当我们决定在项目中使用 Vue，还是需要转变我们的思路，将操作 DOM 转变成操作数据。
请说出三种减少页面加载时间的方法。...在我们开发的过程中会发现，有时候，如果对页面中的大区域进行设置时，将border、padding计算到width和height之内，反而更灵活。但W3C的CSS2.1规范却规定了他们并不能被包含其中。...先熟悉语法，并开始在你的所有的Jquery 1.7版本以上的项目使用它吧！...updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。...getters 类似vue的计算属性，主要用来过滤一些数据。 action actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。
图片懒加载插件 图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。...// 6.最后把数组存储给本地存储 (声明函数 savaDate()) 1.7.4 案例：toDoList 本地存储数据渲染加载到页面 // 1.因为后面也会经常渲染加载操作，所以声明一个函数 load...(i, 1)方法 // 5.存储修改后的数据，然后存储给本地存储 // 6.重新渲染加载数据列表 // 7.因为a是动态创建的，我们使用on方法绑定事件 1.7.6 案例：toDoList 正在进行和已完成选项操作...// 1.当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。...// 4.之后保存数据到本地存储 // 5.重新渲染加载数据列表 // 6.load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面 //
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下...的div将展示Ajax数据 (document).ready(function(){})指页面其他元素加载完成后开始加载Ajax数据，此时，浏览器不会有加载条和转圈的情况出现。...一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。...不过开发者已想出了种种办法来解决这个问题，HTML5之前的方法大多是在用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。...（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态）。
Basket.js不仅用于加载外部 JavaScript，它还将它们缓存在浏览器的本地存储中，这样，在下一次请求页面时，外部 JavaScript 就不必再通过网络请求了，只需从本地存储中加载即可。...例如 重新加载页面时，Basket会首先在缓存中查找，如果文件已经缓存在其中，它将通过本地存储加载文件，而不是通过网络再次请求文件。...首次打开页面时，应该看到以下内容： image.png 但是随着页面的重新加载， jquery 就不会在重新请求了： image.png 大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程...精髓：我们大多数人使用单页应用程序来拥有网络应用程序，当我们导航时，这些应用程序不会加载整个新页面。 在大多数SPA框架中，这样做是因为所有内容都基于一个index.html。...JS-cookies使这变得容易得多，现在我们将介绍基础知识。
要使 UI 发生变更就必须创建各种 action 来维护对应的 state。 双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。...Vue 生命周期的理解 Vue 实例有一个完整的生命周期，生命周期也就是指一个实例从开始创建到销毁的这个过程。 beforeCreated()：在实例创建之间执行，数据未加载状态。...Vue 组件 data 为什么必须是函数 因为 JS 本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有 Vue 实例的数据。...对比 jQuery ，Vue 有什么不同 jQuery 专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染； Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作...Vue 等单页面应用的优缺点 优点 良好的交互体验 良好的前后端工作分离模式 减轻服务器压力 缺点 SEO 难度较高 前进、后退管理 初次加载耗时多 后记 整理的过程也是重新梳理知识点的过程
： 图片延迟加载也称懒加载，通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度...lazy-src="images/realimg.jpg" alt="" /> 页面初次加载时获取图片在页面中的位置并缓存...(每次取offset的值会引发页面的reflow)，计算出可视区域，当图片的位置出现在可视区域中，将src的值替换成真实的地址，此时图片就开始加载了。...当页面滚动的时候，再判断图片已经缓存的位置值是否出现在可视区域内，进行替换src加载。当所有的图片都加载完之后，将相应的触发事件卸载，避免重复操作引起的内存泄漏。...将整个窗口看成是一个大容器，那么也可以在页面中设置一个小容器，在小容器中也同样可以实现图片的延迟加载。 实例插件下载地址：http://pan.baidu.com/s/1c01sSaW
当我们网站的页面图片过多时，加载速度就会很慢。尤其是用手机2G/3G访问页面，不仅页面慢，而且还会用掉很多流量。...我们主题之前也都采用了图片的懒加载形式，但都不完美，部分主题还采用了占位图片来控制懒加载，今天换一种js图片懒加载，它原理就是将页面内所有需要加载的图片全部换成一张默认的图片（一般尺寸很小），只有图片在可视区域才去请求加载...实现原理 页面打开时首先会加载src里的图片，即很小的加载图；通过监听scroll...事件，当图片在可视区域时，使用data-src替换src，加载真正的图片。...lazyload插件网上能搜出很多，常见的是： 1、jquery.lazyload.js: 依赖jQuery JavaScript /*!
var a=[1,2]; alert(a.shift()); unshift 方法 将指定的元素插入数组开始位置并返回该数组。...，当我们修改原型时，与之相关的对象也会继承这一改变。...(1)我们在网页中的某个操作（有的操作对应多个事件）。 例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。...// 同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。...闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环） jQuery 中如何将数组转化为 json 字符串，然后再转化回来？
，单页面应用）开始广泛被认可。...其基本思路：将整个应用内容都在一个页面中实现并完全通过异步交互来根据用户操作加载不同的内容。在这期间，DOM操作和事件绑定将变得十分混乱，不便于管理，于是MV*框架运应而生。...前端MVP模式 MVP（Model-View-Presenter）和MVC区别在于：用户在进行DOM修改操作时将通过View上的行为触发，然后将修改通知给Presenter来完成后面的Model修改和其他...ES6方式，存在兼容性 Virtual DOM交互模式 MVVM的前端交互模式大大提高了编程效率，自动双向数据绑定让我们可以将页面逻辑实现的核心转移到数据层的修改操作上，而不再是在页面中直接操作DOM...Virtual DOM的核心实现：创建原始页面或组件的Virtual DOM结构，用户操作后需要进行DOM更新时，生成用户操作后页面或组件的Virtual DOM结构并与之前的结构进行对比，找到最小变换
强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。 这是一个非常简单的解决方案。...当然，你可能会对其他方式会更感兴趣： 简单粗暴的方式：重新加载整个页面 不妥的方式：使用 v-if 较好的方法：使用Vue的内置forceUpdate方法 最好的方法：在组件上进行 key 更改 简单粗暴的方式...：重新加载整个页面 这相当于每次你想关闭应用程序时都要重新启动你的电脑。...如果我们不等到next tick，我们对renderComponent的更新就会自动取消，什么也不会改变。 其次，当我们第二次渲染时，Vue将创建一个全新的组件。...这是非常有用的，当我们有更复杂的组件，它们有自己的状态，有初始化逻辑，或者做任何类型的DOM操作时，这对我们很有帮助。 所以接下来看看，如果使用最好的方法来重新渲染组件。
高效实用jQuery： 尽可能使用id选择器进行DOM查询操作； 缓存一切需要复用的jQuery DOM对象，使用find()子查询； 不要滥用jQuery，尽可能使用原生代码代替； 尽可能使用jQuery...随着AJAX技术盛行，SPA（Single Page Application，单页面应用）开始广泛被认可。其基本思路：将整个应用内容都在一个页面中实现并完全通过异步交互来根据用户操作加载不同的内容。...前端MVP模式 MVP（Model-View-Presenter）和MVC区别在于：用户在进行DOM修改操作时将通过View上的行为触发，然后将修改通知给Presenter来完成后面的Model修改和其他...ES6方式，存在兼容性 Virtual DOM交互模式 MVVM的前端交互模式大大提高了编程效率，自动双向数据绑定让我们可以将页面逻辑实现的核心转移到数据层的修改操作上，而不再是在页面中直接操作DOM...Virtual DOM的核心实现：创建原始页面或组件的Virtual DOM结构，用户操作后需要进行DOM更新时，生成用户操作后页面或组件的Virtual DOM结构并与之前的结构进行对比，找到最小变换
云服务器
ICP备案
云直播
实时音视频
即时通信 IM
