随笔分类 - js
摘要：gradient语法： -moz-linear-gradient( [ || ,]? , [, ]* ) // chrome的新版写法和FF的一致，只要改版前缀即可 第一个参数：指定渐变方向。例如：top，从上向下渐变；left，从左向右渐变； left top，从左上向右下渐变 第二个参数：指定起始点的颜色值 第三个参数：指定结束点的颜色值 还可以加参数，如： background: -moz-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace); 可以指定多个颜色值，如果不同时指定百分比，则平均...
阅读全文
摘要：rgba语法： rgba(0, 0, 0,0.5); 第一个参数：R 红色（0-255） 第二个参数：G 绿色（0-255） 第三个参数：B 蓝色（0-255） 第四个参数：透明度（0-1）使用rgba指定颜色的好处是：任何位置的颜色，使用rgba指定，都可以通过设置第四个参数来调整透明度。不仅仅可以设置背景色的透明度。使用rgba指定背景透明和使用opacity指定背景颜色的透明度的区别： 1、使用opacity指定背景颜色的透明度时，其内容也一起被设置透明度，导致内容模糊。如果不想内容模糊，只能如下处理： （单独设置一个元素做背景透明设置，其内容反而不在它内部） ...
阅读全文
摘要：word-wrap语法： word-wrap ： normal | break-word normal ： 默认值，单词如果单词超长，会冲出边界（单个单词超长，在当前行显示） break-word ：将内容在边界内换行，当单词在当前行放不下时，会自动切换到下一行（单个单词超长，在下一行显示）word-break语法： word-break:normal | break-all | keep-all normal：如果设置为默认值时中文则到边界处的汉字换行，如果是英文整个单词换行，如果出现某个单词长度过长，则会撑破容器，如果边框为固定属性，则后面部分将无法显示；（单个单词长...
阅读全文
摘要：text-overflow语法： text-overflow ： clip | ellipsis clip:表示不显示省略标记(...)，而只是简单的裁切，需要在一定的高度范围内配合overflow:hidden属性使用，如果不配合的话将无任何效果； 和单独使用overflow:hidden;效果一致。 ellipsis：对象文本溢出时将显示省略标记(...)，需要配合overflow:hidden；white-space:nowrap一起使用才会有效果。小知识点：/**这是firefox特有的属性，只有firefox浏览器可以识别，是firefox的一种hack形式*...
阅读全文
摘要：text-shadow语法： text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]... 或者 text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]... 第一个参数：指定颜色值 第二个参数：指定X轴偏移量 第三个参数：指定Y轴偏移...
阅读全文
摘要：box-shadow语法：（想法：用阴影来做边框，就不会出现动态改变边框宽度而产生的重排问题） 对象选择器{box-shadow：投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} 第一参数： 阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影， 也就是说设置阴影类型为“inset”时，其投影就是内阴影； X轴偏移量：是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边； Y轴偏移量：...
阅读全文
摘要：border-image语法： border-image ： none | [ | ]{1,4} [ / {1,4} ]? [ stretch | repeat | round ]{0,2} 第一个参数：none：默认值，边框无背景图片 image：和background-image一样，根据绝对定位设置背景图片的位置 第二个参数： number：设置边框的宽度，单位px，可以使用1~4个值，指定边框的宽度，设置方式同border-width percentage：同number一样，只不过是使用百分比来设置宽度 第三个参数：（可选，1~4...
阅读全文
摘要：1、border-radius标准：border-top-left-radius: x y // 左上角，x 圆角水平半径， y 圆角垂直半径border-top-right-radius：x yborder-bottom-right-radius：x yborder-bottom-left-radius：x yFF：-moz-border-radius-topleft-moz-border-radius-topright-moz-border-radius-bottomright-moz-border-radius-bottomleftchrome:(标准基础上加前缀)-webkit-bor
阅读全文
摘要：扩充类的方法：1、向原型对象上添加方法或属性。例如：Number.prototype.cl = function(){}; 但这种做法并不推荐，因为ES5之前，无法将这些新添加的方法或属性设置为不可枚举的。他们可以在for/in循环中被遍历到2、使用ES5提供的扩展对象的方法：Object.definePropery()。 在web浏览器环境下，可以通过Object.defineProperty()方法给HTMLElement.prototype添加方法，从而使表示HTML标记的所有对象可以继承该方法。但该方法尚未被普及，实用方面有限制类型检测：1、typeof关键字：无法检测对象的类型2..
阅读全文
摘要：1、类和原型：原型对象是类的核心，类的所有实例都从同一个原型上继承属性和方法，原型对象是类的唯一标识2、类和构造函数：构造函数通过new关键字来创建对象，构造函数的prototype属性被用作新对象的原型。所以，同一个构造函数创建的对象都是同一个类的成员3、类、原型、构造函数：当且仅当两个对象继承自同一个原型对象时，他们才是属于同一个类的实例。而初始化对象的构造函数则不能作为类的标识，因为两个不同的构造函数如果prototype指向同一个原型对象，那么这两个构造函数创建的实例仍然属于同一个类4、constructor：每个javascript函数（除了ES5中的Function.bind()方
阅读全文
摘要：跨域消息传递：postMessage()1、兼容性问题：IE8及其以上浏览器和其它主流浏览器都已经支持2、使用范围：跨iframe、跨页面、跨域3、使用方法： 发送消息：postMessage( data, scope ) data值需要传递的消息，scope指定发送给那些域 监听消息：使用事件监听方法监听（addEventListener/attachEvent） 之所以可以使用事件监听方法监听，是因为当调用postMessage方法时，会触发message事件，并传递给事件处理程序一个事件对象。4、事件对象的属性： data：传递的消息 source：消息源自的Window对象 ...
阅读全文
摘要：1、应用程序缓存和其它存储方式的区别： a、不像localStorage和sessionStorage那样只存储web应用程序的数据，它将应用程序自身存储起来。 b、不像浏览器缓存一样会过期或者被用户手动清除，除非用户“卸载”它们 c、离线状态下使用localStorage存储相关的数据，当再次进入在线状态时，能够将存储的数据传输到服务器2、应用程序缓存清单 使用方法： a、想要将应用程序“安装”到应用程序缓存中，首先创建一个清单：包括所有应用程序所依赖的URL列表 b、在主HTML页面的标签中设置manifest属性指向该清单文件 清单内容： a、首行必须以：CACHE MA...
阅读全文
摘要：userData是IE5及其以上浏览器支持的一种客户端存储方式，它通过在document元素后面附加一个专属的元素来实现。对userData的封装：/*** IE userdata封装*/function UserDataStorage( maxage ){ var memory = document.createElement( "div" ); memory.style.display = "none"; memory.style.behavior = "url('#default#userData')"; doc
阅读全文
摘要：封装cookie的操作：查询cookie个数、查询所有cookie的键、获取cookie、设置cookie、删除cookie、清除全部cookie/*** cookieStorage*/function cookieStorage( maxage, path ){ var cookie = ( function(){ var cookie = {}; var all = document.cookie; if( all ==="" ){ return cookie; } var list = all.split( "; " ); for( var i=0
阅读全文
摘要：1、本地存储方式的补充：flash cookie ，用于flash，最大不超过100k，借助flash的ExternalInterface接口，可以实现js对flash cookie的操作google gears， 是google开发的一款浏览器插件，内嵌SQLite数据库，并提供了api对其进行操作，但已被废弃indexedDB，目前在firefox中有实现，同cookie等存储方式相比，它可以存储多种类型的数据2、cookie1、cookie的值中不允许包含分号、逗号和空白符，在存储之前最好使用encodeURIComponent方法对其进行编码，读取时再进行解码2、和jQuery中不同的
阅读全文
摘要：客户端存储遵循同源策略，不同的站点页面之间不可以相互读取对方的数据，但同一站点的不同页面之间可以共享存储的数据客户端存储的种类：1、web存储 localStorage、sessionStorage2、cookie3、userData（IE）4、web数据库（尚未标准化） 索引数据库API（indexed Database API）5、文件系统API 用于将文件通过XHR上传到服务器主要看了localStorage和sessionStorage区别： 1、存储的有效期。localStorage为永久存储，除非用户手动删除；sessionStorage为会话存储，页面关闭之后就消失。 ...
阅读全文
摘要：1、终止请求和超时终止请求XMLHttpRequest对象提供abort方法，调用该方法时触发abort事件XHR2提供了timeout属性，当超时发生时触发timeout事件。但浏览器尚不支持自动超时。可以使用setTimeout模拟实现。例如：function timedGetText( url, time, callback ){ var request = new XMLHttpRequest(); var timeout = false; var timer = setTimeout( function(){ timeout = true; request.abort(); },..
阅读全文
摘要：1、HTTP进度事件属于XHR2规范定义的系列事件2、事件模型中会触发不同的事件，所以不再需要检查readyState事件3、当调用send()时，触发loadstart事件4、当正在加载服务器响应时，会每隔50毫秒触发一次progress事件5、当加载完成时触发load事件（可根据返回值的状态码判断是否成功）6、如果请求超时触发timeout事件7、如果请求终止触发abort事件8、如果发生网络错误会触发error事件9、当触发了load、abort、timeout、error事件中的一个时，触发loadend事件
阅读全文
摘要：1、表单编码请求 需要对每个表单元素进行普通的URL编码，使用“=”把编码后的名字和值分开，并使用“&”分开名值对。 例如：a=b&c=d 表单数据编码的MIME类型：application/x-www-form-urlencoded 使用post方法提交必须设置Content-Type="application/x-www-form-urlencoded"2、JSON编码请求 JSON数据编码的MIME类型：application/json 发送之前需要对json数据进行JSON.stringify，生成一个json格式的字符串3、XML编码请求 使用创建
阅读全文
摘要：1、异步请求的方法： iframe、script、XMLHttpRequest、comet（服务器端发起）2、XMLHttpRequest request = new XMLHttpRequest(); open( "GET", url ); 两个必须的参数。 “GET” “POST”等，不区分大小写，但通常用大写字母来匹配HTTP协议 想要缓存数据时，最好使用get方法。 如果传false为其第三个参数，则该方法变为同步获取数据，但一般不能这么做，这样很容易阻塞整个浏览器的UI request.setRequestHeader( "Content-Type&qu
阅读全文