web前端学习
什么石头
这个作者很懒,什么都没留下…
展开
-
选择器
属性选择器-[att]<from action=""> <div> <input disabled type="text" value="张三" /> </div> <div> <input type="password" placeholser="请输入密码" /> </div></from><!--from是block元素,in原创 2015-09-25 16:54:46 · 297 阅读 · 0 评论 -
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况px:绝对单位,页面按精确像素展示em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/转载 2015-09-17 23:31:43 · 1106 阅读 · 0 评论 -
布局
display属性block默认宽度为父元素的宽度:影响元素大小可设置宽高:影响元素大小换行显示:影响元素的位置 默认常见div p h1 ul form….属性inline默认宽度为内容宽度宽高设置无效同行显示属性:inline-block默认宽度为内容宽度可以设置宽高(会影响前续和后续元素的宽高)同行显示整块换行 默认display:inline-block元素:in原创 2015-09-19 11:21:17 · 303 阅读 · 0 评论 -
运算符与表达式
相等操作符var num = "4";num == 4;//true在做相等操作符是会做类型转换0 == false;//true,因为是false进行转换为0;2 == true;//false,因为true进行转换为2;“” == 0;//true,空字符串会转换为0;逻辑操作符var flag = true;alert(!flag);//false两个!!可以取到操作数的布尔值原创 2015-09-20 14:15:32 · 292 阅读 · 0 评论 -
数值
数值方法取绝对值Math.abs(x);取绝对值Math.abs(5);//5Math.abs(-5);//5四舍五入Math.round(x);Math.round(1.1);//1向上取整Math.ceil(x);Math.ceil(1.1);//2Math.ceil(1.9);//2向下取整Math.floor(x);Math.floor(1.1);//1Math.f原创 2015-09-20 15:41:28 · 318 阅读 · 0 评论 -
对象
创建对象var car = new Object();var car = {};//字面量创建 属性和方法var car ={ color:"red", run:function(){alert("num")}} car.color;//"red"car.run();//alert("run")car["color"];//"red"car["run"]();//aler原创 2015-09-20 23:21:25 · 305 阅读 · 0 评论 -
JS调试
chorm的js调试打开调试工具快捷键F12或者ctrl+shirft+i 或者右键审查元素js调试器source下的文件区域: source面板中可以打开console面板快捷键“Esc”查找特定文件ctrl+o查找函数:ctrl+shirft+o原创 2015-09-20 12:07:11 · 278 阅读 · 0 评论 -
基本类型
基本类型Number整数类型var num = 10;var num = 070;//56var num = 0xff;Float浮点数类型var num = 3.1416;var num = 3.12e2;//312特殊值 - NaN(Not a Number) - Infinity var num = 1/0 ;//Infinity;String类型var name = "原创 2015-09-20 13:35:59 · 295 阅读 · 0 评论 -
字符串
字符串表示字符串方式:"该号码可注册""13982291704""""http://www.163.com"'http://www.163.com'比如要判断字符的长度str.length"mircromajor".length;//11用户不能包含某些字符输入 通过方法str.charAt(index);//index表示索引值 micromajor".charAt(0);//"原创 2015-09-20 22:42:15 · 262 阅读 · 0 评论 -
domReady的实现策略
实现策略window.onload当页面和资源完全加载完毕后执行<script> window.onload = function(){ .....}</script>缺点:如果外部文档很多的时候加载缓慢,则会影响代码执行。jQuery方法DOMReady的jQ实现策略在页面的DOM树创建完成以后(也就是HTML解析第一步完成)即触发,而无需等待其他资源的加载。即DOMRead转载 2015-09-21 22:00:48 · 413 阅读 · 0 评论 -
数组
创建数组创建数组有两种方式方式1:关键字形式var array = new Array();方式2:字面量形式var array = [];//常用var array = [1,2,3,"hell"];数组中的元素类型可以不同 var students = [ {id:1, score:80}, {id:2, score:46}, {id:3, socre:36}原创 2015-09-21 00:07:44 · 387 阅读 · 0 评论 -
浏览器渲染引擎
渲染器所有的HTML节点转换完成以后,就是DOM树构建完毕,即domReady.浏览器如何将HTML标签解析成DOM树?答:浏览器是通过渲染引擎实现的。 渲染引擎的职责就是把请求的内容显示到屏幕上,默认情况下能显示Html xml 及图片。通过扩展即插件可以显示pdf等。 渲染引擎的渲染流程首先通过网络获得请求的内容,通常以8k分块方式完成然后解析HTML构建DOM树(构建DOM节点)构转载 2015-09-21 20:30:44 · 491 阅读 · 0 评论 -
Date
表示当前时间//当前时间new Date();//设定具体时间 2014年12月5日new Date(2014,11,5);//注意JS里面月份是从0开始计数的。所以这里11就是12月份。创建日期new Date();new Date(year,month[,day[,minutes[,seconds[,milliseconds]]]]);//最少传year month两个参数,day默认0原创 2015-09-21 16:10:42 · 410 阅读 · 0 评论 -
响应式布局
响应式布局的实现媒介查询设备高度: device-width, device-height渲染窗口的宽高: width, height设备的手持方向: orientation设备的分辨率: resolution使用方法:用外联或者内嵌样式或者两者同时搭配使用。设备高度: device-width, device-height表示设备物理实际的宽高渲染窗口的宽高: width, heigh转载 2015-10-12 13:40:43 · 257 阅读 · 0 评论 -
sublimetext3的使用教程
相应的教学视频 http://www.imooc.com/learn/333文章地址 http://c.haoduoshipin.com/happysublime/00_course_intro.html转载 2015-09-24 11:24:23 · 406 阅读 · 0 评论 -
JSON
JavaScriptObject NotaionJSON转为JS对象JSON.parse(text)JSON -->JS :将json转换为JS对象然而IE6 和IE7不支持JSON对象所以可以检测并兼容if(!window.JSON){ parse: funciton(sJSON){ return eval('(' + sJSON + ')');转载 2015-10-14 13:15:25 · 210 阅读 · 0 评论 -
DOM
Document Object Model DOM包含: DOM Core DOM HTML DOM Style DOM EventHTML–>DOMhtml转换为DOM节点树 节点遍历如图对绿色的 p 节点的周围的节点的操作 node.parentNode 父节点 图中为bodynode.firstChild 第一个子节点,途中为hello转载 2015-10-14 21:49:42 · 248 阅读 · 0 评论 -
gulp使用简要说明
glup是依赖nodejs的streaming构建工具。 1 在nodejs下安装npm install -g gulpnpm install--save-dev gulp安装完成以后,可以用gulp -v试一试是否正确gulp的简单使用 http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/ht转载 2015-10-15 16:39:42 · 355 阅读 · 0 评论 -
js基础学习笔记
引用<script src=""></script>-不能有margin-left----->marginLeftborder-top ------> borderTop.........给元素动态添加class名 增加相应样式给元素动态添加class名//在js中class是保留字,所以不能使用elem.class = 'name';//要使用classNameelem.classN原创 2015-10-04 14:39:30 · 317 阅读 · 0 评论 -
HTML5存储方式
关于存储服务器端cache缓存数据库磁盘文件内存 HTML5之前通常使用cookies去存浏览器端的内容 特点:1.每次都会带上http请求头head上会带着。 2.对每个域名客户端只能存4k左右的大小 3.主Domain污染 不能存太多,会带来安全问题cookies在浏览器端的存储形态H5试图解决解决存储4k大小的问题解决请求头带存储信息的问题解决转载 2015-10-04 21:46:39 · 442 阅读 · 0 评论 -
动画animation
动画确定产生动画效果的帧名 - animation-name 定义关键帧名 - animation-name:<single-animation-name> [',' <single-animation-name>]* <single-animation-name> = none | <ID原创 2015-09-16 13:18:57 · 427 阅读 · 0 评论 -
属性的继承以及样式优先级
并非所有的属性都能继承的,只有一部分具有继承继承属性子元素自动继承具有继承属性:colorfonttext-aligntext-indentlist-style...非继承属性非继承属性backgroundborderposition...CSS样式优先级对一个元素使用多个样式时,采用哪个个样式可以遵循I-C-E权重方法确定。 样式层叠 一个元素具有多个样式时,首先根据优先级转载 2015-09-25 17:26:25 · 891 阅读 · 0 评论 -
企业网站分析与案例展示
模式大多数网站包含如下区域头部Logo区导航区内容展示区底部版权区如下图结构图分析 这便是企业网站布局的一帮方法首页的制作结构分析自顶向下,逐步细化的结构分析方法页面如下图 从整体 上把页面分为上中下三栏,分别为顶部区,页面主体区,和底部版权区。 2. 页面主体区 细分为logo区 导航区 大图广告区 信息展示区 3.信息展示区细分为新闻中心 课程中心 媒转载 2015-09-28 15:57:22 · 1354 阅读 · 0 评论 -
网易javascript解答
http://blog.csdn.net/sinat_27304985/article/details/47047589#t6转载 2015-10-17 14:50:36 · 236 阅读 · 0 评论 -
多浏览器测试工具 BrowserSyn
http://www.browsersync.cn/#install中文文档网页。 npm install -g browser-sync #安装在全局环境下,没有配合gulp或grunt使用在全局环境下安装好之后进入代码的文件夹中,并运行下面的命令,就会监测css/*.css文件的变化,实时更新到网页中。可以多选文件进行监测,使用空格browser-sync start --server -转载 2015-10-15 14:50:23 · 388 阅读 · 0 评论 -
样式操作
通过JS动态的修改样式CSS->DOM 整张页面的样式表可以通过document.styleSheets来获得。内部样式表 style元素所代表的sheet属性为内嵌样式表 cssRules[]则代表列表,通过下标获取内联样式表更新样式element.style缺点:以element.sytle更新样式会使样式混在逻辑中,导致修改困难。更好的方法是更新class。将特定样式写在class中转载 2015-10-17 21:20:47 · 306 阅读 · 0 评论 -
属性操作
HTML attribute->DOM property每个html 属性对应相应的DOM对象属性 可以通过JS进行属性操作 有以下三种方式--- property accessor 属性访问器--- getAttribute/setAttribute--- datasetproperty accessor属性访问器属性访问器进行读取属性的操作属性访问器进行写操作直接通过个属性赋值的方转载 2015-10-17 16:48:36 · 669 阅读 · 0 评论 -
变量作用域
作用域作用域又有两种分类:静态作用域和动态作用域静态作用域静态作用域又称词法作用域,作用范围由程序定义的位置决定静态作用域---例子var x=10;function foo(){ alert(x);}function bar(){ var x=20; foo();}bar();//x=20;动态作用域由程序运行时决定。Js变量作用域Js使用静态作用域 Js没有转载 2015-10-02 10:21:41 · 299 阅读 · 0 评论 -
Ajax
异步的JavaScript和XMLAjax对象的创建实现程序:var oBtn = document.getElementById('bt');oBtn.noclick = function(){ var xhr = new XMLHttpRequest(); xhr.open('get','1.txt',true); xhr.send(); xhr.onreadys原创 2015-09-30 16:15:19 · 392 阅读 · 0 评论 -
布局
position—设置定位方式top, right, bottom, left, z-index—设置元素位置如果定位元素没有设置宽高,使用top right left等会拉伸元素z-index:元素在z轴的位置,默认值为0;z-index栈:positionrelative相对定元素仍然在文档流中元素参照物为元素本身原来的位置最常用场景:改变层级和绝对定位元素的参照物absolu原创 2015-09-15 18:44:32 · 314 阅读 · 0 评论 -
函数
函数函数语法function 函数名([形参列表]){ 执行代码}function add(num1,num2){ var sum = num1 + num2; return sum;}var x = add(2,3); 函数定义的方式1,函数声明function add(){}function add(num1,num2){ var sum = num1 +转载 2015-09-21 14:41:44 · 276 阅读 · 0 评论 -
原型
原型构造对象原型构造对象的方式是从一个具体到具体的过程,即是会利用一个现有的对象为原型去构建另一个对象。原型对象—->对象JS里面有两种从原型对象中构建对象的方法第一种:Object.create(proto[,propertiesObject])----proto一个对象,作为新创建对象的原型。这个函数会返回构建的对象------propertiesObject对象的属性定义Object.cr转载 2015-09-24 11:20:43 · 472 阅读 · 0 评论 -
类型进阶
类型分为两种类型原始(值)类型Undefined NullBooleanStringNumber对象(引用)类型var obj = {};var arr = [];//数组类型var date = new Date();//所有用new 构造函数赋值的变量 对象类型JS中所有对象的分类 浏览器扩展对象是各个浏览器厂商为自己扩展的JS对象宿主对象是浏览器环境所提供的对象,这些对象转载 2015-09-30 18:52:34 · 408 阅读 · 0 评论 -
函数进阶
构造函数浏览器中有内置的九个原生构造函数对象BooleanStringNumberObjectFunctionArrayDateRegExpError构造函数与普通函数区别本质上是没有区别,从语法上来讲。普通函数也可以当作构造函数来使用构造函数通常会有this指定实例属性,原型对象上通常有一些公共方法构造函数命名通常首字母大写 - 此例子中对需要隐藏的属性 status转载 2015-10-01 11:24:14 · 315 阅读 · 0 评论 -
DOM事件(上)
DOM事件事件流事件注册与触发事件对象事件分类事件代理事件流什么是DOM事件?? 点击一个DOM元素 键盘按下一个键 输入框输入内容等等这些都会触发DOM事件事件流分为三个过程 1. capture phase 事件捕获过程 2. target phase 事件的触发过程 3. bubble phase 事件的冒泡过程 比如如图DOM树中,点转载 2015-10-17 23:26:43 · 312 阅读 · 0 评论 -
DOM(中)
3.事件对象注:不同的事件,其事件对象内的属性并不完全一样,有共同的属性,也有自己独特的属性。 元素的事件触发以后,会自动将事件对象传入元素相应事件注册的函数内。如下图中的event就是自动传入的事件对象。 以上的并没有兼容IE中的,IE版本的事件对象是存在于window对象中。所以要兼容,如下图,通过event = event || window.event; 3.1事件对象event的转载 2015-10-17 23:43:05 · 279 阅读 · 0 评论 -
闭包
闭包闭包定义闭包由函数和与其相关的引用环境的组合而成闭包允许函数访问其引用环境中的变量(又称自由变量)广义上来说,所有JS的函数都可以称为闭包,因为JS函数在创建时保存了当前的词法环境闭包的应用保存现场 封装闭包的引用–保存现场模块封装转载 2015-10-02 11:05:12 · 258 阅读 · 0 评论 -
变形
transformtransform:none | <transform-function>+transform:none; transform:<transform-function> 例如:<body style="transform:rotate(180deg)"> 表示body元素顺时针旋转180度 <transform-function>代表功能性属性值,作为一种方法标题方法原创 2015-09-15 22:45:43 · 306 阅读 · 0 评论 -
节点的操作
获取节点获取节点的方法getElementByIdgetElementByClassNamegetElementByTagNamequerySelectorgetElementById这个方法只能由document这个对象触发var elm = document.getElementById(IDString); 注意:在操作的时候不要大规模添加ID,可以在一个模块的顶部等添加。getEle转载 2015-10-15 01:25:37 · 435 阅读 · 0 评论