Tristan1126-CSDN博客

转载 ajax跨域请求

js中几种实用的跨域方法原理详解这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:要解决跨域的问题，我...

2017-01-11 13:59:00 116

转载 gulp的使用

前端构建工具gulpjs的使用介绍及技巧gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。本文导航：gulp的安装开始使用...

2017-01-11 13:57:00 130

转载移动web开发实践-css3（1）盒模型display:-webkit-box;的使用

提到移动布局不得不提到盒模型display:-webkit-box;这个属性，在移动布局中浮动已经不在重要，相反自适应成为主要的需求，所以display:-webkit-box;变得尤为重要。　　box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属...

2016-12-01 16:13:00 132

转载 CSS3中-webkit-overflow-scrolling: touch 的使用方法详解

-webkit-overflow-scrolling属性控制元素在移动设备上是否使用滚动回弹效果.auto使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。-webkit-overflow-scro...

2016-12-01 15:43:00 420

转载 css3动画3

1.transition过渡动画2.@keyframes关键帧动画，配合transform、animation使用转载于:https://www.cnblogs.com/931298654yy/p/6089830.html

2016-11-22 16:22:00 93

转载 css3动画2（transform用法）

1.直接写在样式里，比如一个小箭头，transform:rotate(135deg)即可2.写动画过程，@keyframes和transform和animation组合起来用写在@keyframes minify{　　0%{　　　　transform:scale(1);　　　　-webkit-transform(1);　　}　　100%{　　　　le...

2016-11-22 16:08:00 147

转载 css3动画（@keyframes和animation的用法）

animation基本用法是：animation: name keeping-time animate-function delay times iteration final;第一个参数：name (animation-name)：动画的名字，即设定动画过程的名字，CSS3采用“关键帧 keyframes”来定义动画，方式形如：@-webkit-keyframes na...

2016-11-22 15:53:00 202

转载 clientTop、offsetTop和scrollTop的区分

页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollW...

2016-11-21 15:24:00 234

转载 clientWidth、offsetWidth和scrollWidth的区分

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。 clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。 offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。情况1：元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。scrol...

2016-11-21 15:17:00 113

转载 gulp和grunt的区别

1. Grunt -> Gulp早些年提到构建工具，难免会让人联想到历史比较悠久的Make，Ant，以及后来为了更方便的构建结构类似的Java项目而出现的Maven。Node催生了一批自动化工具，像Bower，Yeoman，Grunt等。而如今前端提到构建工具会自然想起Grunt。Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理。在JavaScript的世...

2016-10-31 15:56:00 162

转载 gulp.js基础入门

安装 Node去 nodejs.org 根据系统选择性按照教程安装Node。创建项目创建项目文件夹进入项目文件夹初始化项目使用npm命令:npm init,根据提示完成。安装 Gulp进入项目文件夹,使用Node的包管理命令npm进行安装.全局安装npm install -g gulp...

2016-10-31 15:37:00 116

转载正则匹配

正则表达式：是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串，简单说，就是我们写个模板，然后去匹配字符串。　　下面我们来看看一些基本的正则表达式的语法：　　\：将下个字符标记为一个特殊的字符、一个原义字符、一个向后引用或者一个八进制转义符例如“\n”就是匹配一个换行符。　　^：匹配开始位置，^(a)这个就匹配开头必须为a。　　$：匹配结束位置，$(a)这...

2016-10-28 09:59:00 130

转载 app的meta标签

1.规定网页编码　　<meta http-equiv="Content-Type" content="text/html;charset=utf-8">　　<meta charset="UTF-8">2.这是一个，文档兼容模式的定义。Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升...

2016-10-27 14:17:00 214

转载移动端UC浏览器和QQ浏览器的部分私有meta属性

UC浏览器　　1.设置屏幕横屏还是竖屏　　　　<meta name="screen-orientation" content="portrait | landscape">　　2.设置是否全屏，yes是强制全屏　　　　　　<meta name="full-screen" content="yes | no">　　3.缩放不出滚动条　　　　n...

2016-10-27 11:46:00 203

转载雅虎团队经验：网站页面性能优化的 34条黄金守则

1、尽量减少HTTP请求次数终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又...

2016-10-18 11:05:00 138

转载 DOCTYPE声明作用及用法详解

一、浏览器呈现模式和doctype 有的网页是遵循标准而创作的，但也有很多不是。即使你不能创建遵循标准的网页，也希望浏览器根据标准来正确显示那些页。目前，大量网页充斥着大量非标准代码，它们仍能正常地工作。事实上，为旧版浏览器设计的大多数代码都能在新版浏览器中正确显示（虽然呈现方式可能有所区别）。这是什么原因呢？事实上，假如严格遵循最新标准，会完全破坏那些页的生存基础。对...

2016-10-13 14:21:00 380

转载 DOCTYPE 中xhtml 1.0和 html 4.01区别分析

前者相对于后者有以下特性： 1.所有的标记都都要闭合所有的标记都要闭合,如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如： <h6>close tag </h6> <img src="../avg.png" alt=’avg’/> <br /> 2.所有标签的元素和属性的名字都必须使用小写与HTML不一样，XHTML对大小写...

2016-10-13 14:19:00 155

转载 html doctype 作用介绍

文档模式主要有以下两个作用： 1、告诉浏览器使用什么样的html或xhtml规范来解析html文档 2、对浏览器的渲染模式产生影响；不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析，所以Doctype是非常关键的，尤其是在 IE 系列浏览器中，由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。两种渲染模式： BackCompat：标准兼容...

2016-10-13 14:15:00 110

转载 WebStorm

WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具任何一个编辑器都需要保存(ctrl + s)，这是所有win平台上编辑类软件的特点，但是webstorm编辑文件右上角是没有那个熟悉的 * 的。好处：省去了ctrl + s之后，在结合Firefox的vim，基本不动鼠标就可以看到结果页面了。坏处：没有以前的 * 标识，万一键盘误操作也...

2016-09-21 14:26:00 139

转载 JQuery的Ajax跨域请求原理概述及实例

今天在项目中需要做远程数据加载并渲染页面，直到开发阶段才意识到ajax跨域请求的问题，隐约记得Jquery有提过一个ajax跨域请求的解决方式，于是即刻翻出Jquery的API出来研究，发 JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。什么是jsonp格...

2016-09-19 17:47:00 115

转载关于Reflow回流

在CSS规范中有一个渲染对象的概念，通常用一个盒子（box, rectangle）来表示。mozilla通过一个叫frame的对象对盒子进行操作。frame主要的动作有三个：构造frame, 以建立对象树（DOM树）reflow, 以确定对象位置，或者是调用mozilla的Layout（这里是指源码的实现）绘制，以便对象能显示在屏幕上总的来说，reflow就是载入...

2016-09-06 14:15:00 233

转载 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 的说明

X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与 content="IE=7"在无论页面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首...

2016-09-01 14:52:00 110

转载移动平台对 meta 标签的定义

一、meta 标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）。1、http-equiv 属性的 Content-Type 值（显示字符集的设定）说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。用法：1<meta http-...

2016-09-01 14:40:00 102

转载 HTML <!DOCTYPE> 标签

定义和用法<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML...

2016-09-01 14:35:00 234

Tristan1126的博客