29.$.map()和$.each()区别 .map()方法用来遍历操作数组和对象,返回的是一个新的数组; .map()方法适用于将数组或对象的每个项目映射到一个新数组中。...$(this)和this关键字在jquery中的不同 $(this)返回一个jQuery对象,可以对它调用多个jQuery方法,比如用text()获取文本,用on()绑定事件等。...中的方法链是,使用的好处 方法链就是执行完的方法返回的结果是当前jQuery的实例化对象,可以继续调用另一个方法。...IE : Trident safari(苹果公司自带浏览器): webkit FireFox : Gecko Chrome : Blink ,JS引擎为V8引擎 Opera : Blink 91.盒模型的理解...142.说说bind、call、apply的区别?并手写实现一个bind的方法 call和apply都是为了解决改变this的指向; 作用都是相同的,只是传参的方式不同。
Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */ -o-border-image:url...: rotateX(120deg); /* Safari 和 Chrome */ -moz-transform: rotateX(120deg); /* Firefox */ } CSS3 过渡 transition...: yellow;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background...HTML 元素选取和操作 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 attr() 方法用于获取属性值...和C语言一样的比较运算符,多了一个===全等号,值和类型都相等才返回true 和C语言一样的逻辑运算符&&、||、!
此扩展工具的作者同时也是非常流行的Firefox扩展Web Developer extension for Firefox的作者。。 JSON Lint 一个在线验证和格式化JSON文件的应用。...网页截图 截取网页为图片,支持窗口截图,区域截图和整个网页截图三种方式。支持水平和垂直翻页截取超大网页,新版引进自动截图保存功能。...给你测量一个网站中的任何元素的尺寸(像素宽度和高度)。 Page Ruler也是一个不错的选择。...Window Resizer 此扩展可以调整浏览器窗口的大小,以适应各种屏幕分辨率。这对于Web设计师和开发者非常有用,可以帮助他们在不同的屏幕分辨率下测试网站布局。...这是一个开发者最喜欢的Firefox扩展Firebug的精简版。 JQuery 扩展 jQuery扩展让你在当前网页中运行JavaScript和jQuery命令。
本文链接:https://ligang.blog.csdn.net/article/details/41496009 在jQuery中,实用工具是指直接依附于jQuery对象,针对jQuery对象本身定义的方法...$.browser.webkit Google chrome $.browser.mozilla Mozilla Firefox $.browser.safari Apple Safari...;para2表示数组的元素和对象的属性值。.... $.proxy()在处理不同作用域对象事件时相当实用,其返回一个新的函数。 11. $.extend(target,obj1,...[obj2]) target表示合并后的对象。...存在相同参数的名称,后面对象中的参数值将覆盖前面对象中的参数值
http方法: HEAD: 与 GET 相同,但只返回 HTTP 报头,不返回文档主体 PUT: 上传指定的 URI 表示 DELETE: 删除指定资源 OPTIONS: 返回服务器支持的 HTTP...2k;Opera限制4k;Firefox,Chrome限制8k GET 请求只应当用于取回数据 POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST...2、文件可能已经被加载过并保存有缓存 一些通用的js库或者是css样式库,如jQuery,在网络中的使用是非常普遍的。...(为了减少研发成本,Opera在2013年2月宣布放弃Presto,转而跟随Chrome使用WebKit分支的Chromium引擎作为自家浏览器核心引擎) Firefox/SeaMonkey: Gecko...IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
border-box让元素维持IE传统盒模型(IE6以下版本和IE6、IE7的怪异模式)。设置 width/height属性指的是指定 border+ padding+ content的宽度/高度。...(2)会在CSS文件中添加大段的查询代码,增加了CSS文件的大小,为改进上述缺点,可以使用 JavaScript获取移动设备屏幕的宽度,根据设计稿的原型尺寸,动态地计算font-size的值。.../* Safar1和 Chrome*/ -o-transform:rotate(30deg);/* opera*/ -moz-transform:rotate(30deg);/*Firefox*/ 20...具体代码如下: div{ -moz-column-count:3; /* Firefox /-webkit-column-count:3; /* Safari和 Chrome*/ column-count...:3; -moz-column-gap:40px; /*Firefox*/ -webkit- column-gap:40px; /* Safar1和 Chrome*/ column-gap:40px
实现思路 可以通过 JavaScript 来实现判断当前的设备类型:navigator 是 JavaScript 中的一个独立的对象,用于提供用户所使用的浏览器以及操作系统等信息,以 navigator...对象属性的形式来提供。...所有浏览器都支持该对象。 而 navigator 对象有一个 userAgent 属性,会返回用户的设备操作系统和浏览器的信息。...window.screen.availWidth:用来获取浏览器屏幕的宽度。 window.screen.availHeight:用来获取浏览器屏幕的高度。...(/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua))) { alert("Safari"); return;
一、预加载图像 如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。 ? 二、检查图像是否加载 有时为了继续脚本,你可能需要检查图像是否全部加载完毕。 ?...u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u), isSafari3: !...u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') !...三十一、链式插件调用 jQuery 允许“链式”插件的方法调用,以减轻反复查询 DOM 并创建多个 jQuery 对象的过程。 ? 通过使用链式,可以改善 ?...链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。 本文在GitHub的地址 Common-code 阅读更多 参考文章 『总结』web前端开发常用代码整理
作者:WEBING segmentfault.com/a/1190000014700549 一、预加载图像 如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。 ?...u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u), isSafari3: !...u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') !...三十一、链式插件调用 jQuery 允许“链式”插件的方法调用,以减轻反复查询 DOM 并创建多个 jQuery 对象的过程。 ? 通过使用链式,可以改善 ?...链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。
浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。 所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。...[Opera内核原为:Presto,现为:Blink;] Webkit内核:Safari,Chrome等。...[ Chrome的:Blink(WebKit的分支)] 详细文章:浏览器内核的解析和对比 html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?...; 消除代码运行的一些不安全之处,保证代码运行的安全,限制函数中的arguments修改,严格模式下的eval函数的行为和非严格模式的也不相同; 提高编译器效率,增加运行速度; 为未来新版本的Javascript...jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this? jquery中如何将数组转化为json字符串,然后再转化回来?
CSS3浏览器兼容 前缀 内核 浏览器 -webkit- webkit渲染引擎 chrome/safari -moz- gecko渲染引擎 Firefox -ms- trident渲染引擎 IE -o-...大部分人的手机分辨率都是1080x1920,在分类中却被归为了360x640,这个分辨率和CSS中的PX是一致的。...由于Chrome支持DPI,所以并不担心Web有DPI问题。但需要注意的是与手机屏幕分辨率不同,桌面分辨率要除以DPI比例,才是逻辑分辨率。...CSS兼容问题 1、不同浏览器的标签默认的内外边距不同 解决方案:*{margin: 0; padding: 0;} 2、图片加a标签在IE9中会有边框 解决方案:img{border: none;}...中字体不能小于10px 解决方案:p{font-size: 12px; transform: scale(0.8);} JS兼容问题 1、事件对象的兼容 e = ev || window.event 2
Normalize.css 源码中文注释 中文注释以2.0.1版本为对象,所谓翻译只是将其中的注释简单翻译一下,方便查看源代码体验其精妙之处。(来源:姬小光) /*!...: 1px dotted; } /* * 校正 Firefox 4+, Safari 5 和 Chrome 中‘bolder’的样式 */ b,...更正 Firefox 4+, Safari 5 和 Chrome 中外边距不同的问题 */ button, input, select, textarea...校正 Safari 5 和 Chrome 中 ‘appearance’ 被设置为 ‘searchfield’ 的问题 * 2....校正 Safari 5 和 Chrome 中 ‘box-sizing’ 被设置为 `‘border-box’ 的问题 * (include `-moz` to future-proof)
前言 上篇文章主要讲述了CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识,这篇文章我们来介绍下CSS样式更改中2D转换的基础用法。...: scale(1,2); /* IE 9 */ -webkit-transform: scale(1,2); /* Safari 和 Chrome */ -o-transform: scale(1,2...); /* Safari 和 Chrome */ -o-transform:rotate(1deg); /* Opera */ } 它包含了所有的2D方法和3D方法,并且可以单个设置每一种的方法的...(angle) 定义沿着 Z 轴的 3D 旋转 其它的都是差不多的用法,不过还有一个用法不同的就是: perspective(n) 为3D转换元素定义透视视图。...参考文档:W3C官方文档(CSS篇) 总结 这篇文章主要介绍了CSS样式更改篇中的2D转换基本设置,希望对大家的学习有帮助。
标准盒子模型 在标准模型中,如果你给盒设置 width 和 height,实际设置的是 content box。...div,把它的 top 设置为 50%,top margin 设置为负的 content高度。...这意味着对象必须在 CSS 中指定固定的高度。...这个 div 被设置为 top:0; bottom:0;。 但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。...只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。 <!
这是一个有五个展览的博物馆展览,你可以在线访问它们的网站,它允许网站访问者与真实展览进行实时交互。 媒体查询进入W3C推荐标准 为不同的设备创造更好的使用体验。...桌面端应用支持 PWA Chrome 73 添加了对 macOS 的支持,为所有桌面平台(Mac、Windows、Chrome OS 和 Linux)以及移动平台带来了对渐进式 Web 应用程序的支持...互联网博物馆 记录 Web 的历史。 Firefox 启动 4 周发布周期 Firefox 加快了它们的发布周期,为开发者带来了更多的敏捷性和功能。...不那么烦人的通知 Chrome 和 Firefox 一起改进了 Web 通知的用户体验。...Oculus 中的 PWA Meta 将 Web 的力量带到了 VR 中。 Chrome 100 Chrome 版本来到三位数!
Chrome Frame 会把最新版的 Chrome Webkit 内核和 JavaScript 引擎注入到 IE 中。...它将使用 Chrome 的 WebKit 引擎处理网页,另外也支持 IE 所没有的 HTML5 等其他 open web 技术。...当你要使用 Chrome Frame 时,可以在地址前加 cf: ,就可以用 WebKit 核心浏览页面。...,Prototype 和 JQuery 是做得最好的两个库。...”,使用户可以就近取得所需的内容) 配置 ETags(实体标签是服务器和浏览器用于确定浏览器中缓存的组件和服务器中的是否对应的一种机制,如果 ETag 匹配,会返回 HTTP304) 使用 AJAX GET
[ Chrome的:Blink(WebKit的分支)] 详细文章:[浏览器内核的解析和对比](http://www.cnblogs.com/fullhouse/archive/2011/12/19...; 消除代码运行的一些不安全之处,保证代码运行的安全,限制函数中的arguments修改,严格模式下的eval函数的行为和非严格模式的也不相同; 提高编译器效率,增加运行速度; 为未来新版本的Javascript...jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this? jquery中如何将数组转化为json字符串,然后再转化回来?...jquery.extend 为jquery类添加类方法,可以理解为添加静态方法 jquery.fn.extend: 源码中jquery.fn = jquery.prototype,所以对jquery.fn...-0 和 +0 ,保证 -0 和 +0 不再相同, 但 Object.is(NaN, NaN) 会返回 true.
给WordPress博客添加返回顶部和底部的教程 ---- 今天就给大家分享下返回顶部那块的制作教程,其实也不难,主要是用到html、css和一些jq代码。...,请确保你的博客已经加载jquery文件。...*/ -webkit-animation: fadeinB .6s infinite; /* Safari and Chrome */ -o-animation: fadeinB 1s infinite...; /* Opera */ animation-iteration-count: 1; -webkit-animation-iteration-count: 1; /* Safari å’Œ Chrome...*/ -webkit-animation: fadeinB .6s infinite; /* Safari and Chrome */ -o-animation: fadeinB 1s infinite
浏览器的用户界面有很多彼此相同的元素,其中包括:用来输入 URI 的地址栏;前进和后退按钮;书签设置选项;用于刷新和停止加载当前文档的刷新和停止按钮;用于返回主页的主页按钮。 ...图2.3:Mozilla 的 Gecko 渲染引擎主流程 从图2.2 和图2.3可以看出,虽然 Webkit 和 Gecko 使用的术语略有不同,但整体流程还是基本相同的。...父呈现器根据子呈现器的累加高度以及边距和补白的高度来设置自身高度,此值也可供父呈现器的父呈现器使用。 将其 dirty 位设置为 false。 ...Firefox 布局的输出为“metrics”对象 (nsHTMLReflowMetrics),其包含计算得出的呈现器高度。...而在 Chrome 浏览器中,该线程是标签进程的主线程。 网络操作可由多个并行线程执行。并行连接数是有限的(通常为 2 至 6 个,以 Firefox 3 为例是 6 个)。
移动元素,比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流),或者移动元素到另外1个父元素中。(重绘+回流) 4....rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。...vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。 vmin:vw和vh中较小的那个。 vmax:vw和vh中较大的那个。...x的高度,在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀...) ch:以节点所使用字体中的“0”字符为基准,找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4