需要异步加载的子页面,像上图中每个步骤的页面,我都使用jQuery的$.load()方法来加载,此方法能在页面某个容器中加载内容,并可指定回调函数,使用起来很方便。...事实上使用history API也可以更优雅的解决问题,但需要考虑兼容性,还有额外工作要做,考虑时间因素,退而求其次,况且本项目也无需做SEO。...搜索、尝试了多种方法后,最终的方案定为:用document.write()将编译结果写到页面,这样标签能够正常加载。...这样做还有一个便捷之处,我们切换视图不必手动调loadPage方法,只需要修改页面的hash就可以了,hash发生变化被监听到,自动加载对应的子页面。...另外想说的一点就是页面的缓存,异步加载来的内容可以存在localStorage中,也可以放在页面上进行显隐控制,这样用户在频繁切换视图的时候无需再次请求,回到上一步的时候之前填好的表单数据也不会消失,体验会非常好
return { inc: function () { x += 1; return x; } } } 它用起来像这样...针对表单元素,jQuery还有一组特殊的选择器: :input:可以选择,,和; :file:可以选择的作用域内运行;在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此this等于window。...标签的async属性和defer属性 async:规定异步执行脚本(仅适用于外部脚本) defer:规定是否对脚本执行进行延迟,直到页面加载为止 - 设置async,设置/不设置defer...如果有多个脚本,执行属性也许跟它们在源代码中的顺序不一致,取决于哪个先加载完成 - 不设置async,设置defer 页面解析后执行脚本,脚本的执行顺序确定 - 不设置async和defer
大可放心,jquery 有容错机制,即使没有找到元素,也不会出错。还为你提供了验证是否找到的方法,那便是 length 属性。...不知道大家是否发现了一个规律:凡是成对出现的属性,一般都有一个组合属性,名字带有 toggle 2.2 链式调用 链式调用,其实就是将多个方法一直拼接在对象后面,像链条一样调用。...html('xxx'); jquery 中获取或者设置某个属性值时可以使用如下方法: // 取出图片的地址 var $src = $('#img1').prop('src');...; }); 然后看一下其中的参数: 1、 url 请求地址 2、 type 请求方式,默认是 GET,常用的还有 POST 3、 dataType 设置返回的数据格式,常用的是 json 格式,也可以设置为...答:ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分
在CommonJS中,有一个全局性方法require(),用于加载模块。假定有一个数学模块math.js,就可以像下面这样加载。...//未定义config,加载页面目录下的a.js config是用来配置模块加载位置,简单点说就是给模块起一个更短更好记的名字,比如将百度的jquery库地址标记为jquery,这样在require...时只需要写["jquery"]就可以加载该js,本地的js我们也可以这样配置: require.config({ paths : { "jquery" : ["http://libs.baidu.com...jquery 在使用requirejs时,加载模块时不用写.js后缀的,当然也是不能写后缀 上面例子中的callback函数中发现有$参数,这个就是依赖的jquery模块的输出变量,如果你依赖多个模块,...,然后页面中就可以直接使用require来加载所有的短模块名;config可以在该js中定义;同时可作为程序的执行入口; data-main还有一个重要的功能,当script标签指定data-main属性时
浏览器不能同时加载JS脚本(大多数情况下),这意味着如果你同一时间加载很多脚本的话,将减缓页面的加载速度。因此,如果每个页面都要加载这些脚本,你应该考虑在发布之前将这些脚本整合成一个稍大的JS脚本。...,在页面加载后的一瞬间你将会看到页面的闪动,但是在特定情况下你有很多重复的HTML内容,这时通过这个方法你可以显著的减小页面代码体积,减少无关且重复的标记能使你的SEO从中受益。 ...为了速度和SEO方面的考虑,延迟加载内容 另外还有一个方法可以提升页面加载速度,理顺Spiders搜索的HTML内容,通过在页面加载之后使用AJAX请求晚加载其他内容,这样用户就可以马上开始浏览,让Spider...如何检查元素是否存在你不必检查元素是否在页面上存在就可以使用它,因为如果没有在DOM中找到合适的元素,jQuery什么也不会做。...首先,在jQuery加载之后你可以使用方法将”JS”类添加到HTML标签中: 复制代码代码如下:$(‘HTML’).addClass(‘JS’); 因为这仅仅发生在javascript有效的时候,如果用户打开
// 等待dom元素加载完毕 alert("成功引入"); }); cdn中配置Jquery,如果不下载jquery的话,可以用cdn引用的。...入口函数如下 window.onload = function(){ // 执行代码 } JavaScript的入口函数与jquery入口函数: jquery的入口函数是在HTML所有标签都加载后执行... $(function(){ //一定会在页面加载完成后运行 }) 将jquery函数代码放到这个函数就可以等到页面加载结束再运行...dom中删除被选元素以及子元素,就是如果某个元素被删除了,那么它的后代元素也都被删除。...change()当元素的值发生改变时,会发生change事件,focus()当元素获得焦点时,触发focus事件。blur()当元素失去焦点时触发。
大致意思: 在浏览器中可以作为js文件的模块加载器,也可以用在Node和Rhino环境,balabala...。这段话描述了requirejs的基本功能"模块化加载",什么是模块化加载?...jquery,这样在require时只需要写["jquery"]就可以加载该js,本地的js我们也可以这样配置: require.config({ paths : { "jquery...,paths还有一个重要的功能,就是可以配置多个路径,如果远程cdn库没有加载成功,可以加载本地的库,如: require.config({ paths : { "jquery"...jquery没有加载成功后,会加载本地js目录下的jquery 在使用requirejs时,加载模块时不用写.js后缀的,当然也是不能写后缀 上面例子中的callback函数中发现有$参数,这个就是依赖的...data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名 data-main还有一个重要的功能,当script标签指定data-main属性时,
绑定简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。...-- jQuery绑定事件的方法 --> $(function(){ // 页面加载完成(dom树已经初始化好了,可以进行交互访问) $('#btn...focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况 change([[data],fn]) $('p').change(); 当元素的值发生改变时,会发生 change...load([[data],fn]) $(window).load(fn); 当页面加载完成 unload([[data],fn]) $(window).unload(fn); 当页面卸载完成后,离开页面时...data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
> 入口函数 为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。...('页面加载完') }); 也可以用下面简写方式,与上面写法效果一样 // 简洁写法(与以上写法效果相同 $(function(){ alert('页面加载完2')...的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。...jQuery 基本语法 通过jQuery 可以对元素查询修改操作,也可以添加事件。...}) }); 但是通过id定位的元素,只会绑定第一个,因为一般id在页面上具有唯一性,不要重复,通过id查找的元素,只返回第一个 点我 <button
)但遗憾的是,大多数浏览器并不支持捕获阶段,jQuery也不支持。...在jQuery脚本加载到页面时,会设置一个isReady的标记,用于监听页面加载的进度。...遇到执行ready()方法时,通过查看isReady值是否被设置,如果未被设置,那么就说明页面并未加载完成,在此情况下,将未完成的部分用一个数组缓存起来,待ready()方法加载完成后,再将未完成的部分通过缓存一一执行...PS:ready()其在页面框架下载完毕后就执行 3....可以使元素在鼠标悬停与鼠标移除的事件中进行切换,可使用jQuery中的mouseenter与mouseleave进行替换。
前言: 在《jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。..., function() { $(this).css("background", 'blue'); } ); 当鼠标移入p标签区域时,该区域背景颜色变为红色,鼠标离开时该区域背景颜色变为蓝色...2、change()事件: 元素,和元素的值都是可以发生改变的,我们就可以通过change事件去监听这些改变的动作。..." ,function(){ }); }) 这段代码就表示当点击了加载按钮后,就会异步请求fruit.html这个页面,然后会把fruit这个页面的内容填充到本页的...和get的不同之处就是post方式可以像服务器传参,这个data可以是一个参数,也可以是多个参数,多个参数的时候用大括号包起来,例如:$.post(url,{data1,data2},function(
对于网站seo优化来说,title与alt还有最重要的一点: 搜索引擎对图片意思的判断,主要靠alt属性。所以在图片alt属性中以简要文字说明,同时包含关键词,也是页面优化的一部分。...当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...(阿里) 通过判断Global对象是否为window,如果不为window,当前脚本没有运行在浏览器中。...它的出现的主要目的就是检测我们的页面性能。 它让用户可以就近取得所需的内容,解决网络拥挤的状况,提高用户访问网站的响应速度。 是否了解flex布局?...当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。 异步ajax的优缺点都有什么? 优点: • 相对于同步ajax:不会造成UI卡死,用户体验好。
在中放置CSS 在标签中放置CSS要比在标签中放置CSS有两个好处: 无样式内容闪烁的问题; 加载时提高页面的渲染性能。...放在中还有一个问题是页面加载完中的样式以后会重新渲染和绘制整个DOM,页面渲染性能较差。...非关键CSS,即折叠之下的内容,这些是用户开始向下滚动页面之前看不到的内容样式,这种CSS也应该尽快加载,但不能在关键CSS之前加载。...加载非首屏样式:非首屏样式也会遇到渲染阻塞的问题,可以使用preload来减少阻塞渲染时间。...标签会阻塞页面的渲染,放在body最后面有助于加快页面加载速度。
基本搭建请访问:http://blog.csdn.net/xiangzhihong8/article/details/53355036 主题配置介绍 从中我们也可以看出,对于主题来讲,大部分可以配置的地方其实都是在这里的...true,不是用新标签的都是坏人 baidu_tongji,我个人使用的是百度统计,具体百度统计的使用可以查看百度统计官网:http://tongji.baidu.com。...# id 中填写你的友言用户数字ID,注册后进入后台管理即可查看 # 友言服务在 Web 环境下运行,普通本地环境无法查看,请部署后在线上测试。...目录序号 max_depth: 3 # 1 - 6 (h1-h6) 目录最大级数 nowrap: false # Keep title on same line | 目录标题不换行 # 是否开启主页及加载头像时的动画效果...,多个关键词用英文逗号隔开 文章图片的存放 想要在文章中插入图片的话,可以按照Markdown语法来插入,图片的存放有两种方式:在本地D:\Hexo\source目录下新建一个存放图片的文件夹,比如images
提供的,只能用于加载CSS; ②页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载; ③import是CSS2.1 提出的,只在IE5以上才能被识别,而link是...如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题。 20、如何实现浏览器内多个标签页之间的通信?...我们举例说明:比如一个黑客程序,他利用Iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名...③Ajax与JSONP的区别也不在于是否跨域,Ajax通过服务端代理也可以跨域,JSONP也可获取同源数据。...③当然jQuery还有非常有用的其它特性,如为dom对象绑定数据、动画、等。并且jQuery还非常容易扩展,在它的基础上开发非常灵活,也有众多的插件可用,如jQueryUI、easyUI等。
在jQuery中还有很多遍历节点的方法,具体参看API帮助文档。...//得到的结果如下 jQuery">jQuery 5.jQuery 中的事件 在页面加载完毕后, 浏览器会通过 JavaScript...面试题: 1.在js里面可以使用widow.onload= 当页面上面所有的元素加载完毕之后执行触发。 2....它需要等待页面上面所有元素都加载完毕,包括图片,src=“” $(function(){})只需要页面上面的dom元素绘制完毕之后就执行,不含图片或者第三方的连接地址… 事件绑定 我们除了可以直接为页面的元素增加事件...,也可以利用bind()方法为页面元素来绑定事件。
它通过在页面刷新时添加历史记录功能(通常表现为左侧和右侧的 ← 和 → 按钮),允许用户通过按钮快速返回到之前的状态而不需重新加载页面。这种特性特别适合需要快速切换状态的应用场景,显著提升了交互体验。...只要是个网站,每次切换页面的时候,title 标签是必然得替换的。在我这个案例中,main 是每次切换页面之后会产生内容变化的容器。...下面这个是我现在所使用的一个案例,你也可以自己设计一个加载动画,使用图片什么的都是一样的。 HTML:这样一个改善体验的加载动画也完成了!...该组件还有一些高级的功能,例如加载时调用动画库等操作,都可以在该项目的 README 中寻找答案。
下面还有一些内容你需要了解: 通过instantclick加载的每个页面的标签里面的样式和脚本应该是相同的(因为instantclick只会加载一次标签里的内容) 如果标签里面的某些内容依赖于网页的内容(比如在页面加载时运行的脚本或css动画),它需要调整以便正常运行。...预加载页面 InstantClick 关于预加载方式有多种选择。你可以根据你的服务器配置来选择合适的方式。 但是不管怎样,当每个页面改变时,不会重新加载脚本和样式表,这样会使你的页面加载速度提升一倍!...InstantClick会触发4个事件以便于挂钩到页面的整个生命周期: change:当前的页面一旦改变会触发该事件,即使浏览器不支持instantclick,页面初始加载的时候也会触发该事件,这个事件可以用来替换...即使页面已经立即加载,也会显示进度条,在将来这将更改。你可以在github讨论。 当访问者缩放页面或旋转其设备时,该栏的大小和位置会自动调整,因此即使您的网站未针对移动设备进行优化,也会正常工作。
在每个页面中可以有很多个函数被加载执行,按照fn的顺序来执行。...( ) 用户改变域的内容 input, textarea, select change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。...) 鼠标双击某个对象 几乎所有元素 error( ) 当加载文档或图像时发生某个错误 window, img keydown( ) 某个键盘的键被按下 几乎所有元素 keypress( ) 某个键盘的键被按下或按住...几乎所有元素 keyup( ) 某个键盘的键被松开 几乎所有元素 load( fn ) 某个页面或图像被完成加载 window, img mousedown( fn ) 某个鼠标按键被按下 几乎所有元素...JQuery Utilities 方法说明 jQuery.browser .msie 表示ie jQuery.browser.version 读取用户浏览器的版本信息 jQuery.boxModel 检测用户浏览器针对当前页的显示是否基于
函数调用: .noConflict() 作为一个函数, 可以在执行后根据内部逻辑修改当前 JavaScript 运行环境中的一些变量引用关系。...举例来说, 如果在页面中某个位置曾经写过:var $ = 'SomeOtherLibrary';在加载 jQuery 之后, $ 就会被 jQuery 覆盖为 jQuery 的快捷引用。...这样做既能保证旧系统的平稳运行, 又能让团队在新功能中灵活运用 jQuery 进行开发。有些人会疑惑, 在现代前端项目里, 是否还有这种命名冲突的麻烦。...例如, 某些旧式广告投放脚本或者内嵌的地图库(可能在页面上也会占用 $)与我们项目中的 jQuery 同时加载。....$ = MyCustomLib; 的做法来暴露全局变量。当 jQuery 加载时, 它又会想把 $ 占为己有, 这样就需要在合适的时机调用 jQuery.noConflict()。