不记得从哪一年开始
每到年底
就开始迫不及待的回忆起这一年
写上一篇饱满的文绉绉的还有点矫情的总结
看着那文字
就好像自己的那一年真的就过得那么优越似的
即使有过多么惨淡的经营
也一定要修饰到靠近完美
似是向外界宣告,爷我活得多么不赖
也似是暗示自己,小我的生活还是有奔的
这个2011的末尾
像一条柔软无骨的胳膊悄悄拉了我走
我在2012年的1月11日凌晨突然想起我还未总结
这么有趣且值得纪念的一年
我怎么能不记录在案
我的2011,就是这样:
像往年一样用几个关键字概括这一年就是
回归、
新房、
工作、
北京。
关于回归:
2010年底,我回来了
我努力说服自己安于现状做一个幸福的居家小媳妇
反正吃喝不愁还有大房子住
我努力学做菜、努力把家收拾得一尘不染
晚饭后和家人一起窝在沙发里看天下足球或者谍战剧
白天去买菜、去逛街、或者去公园溜溜弯、或者干脆睡到傍晚……
这样的生活让我有点找不到北也找不到自己
像是活在别人的世界里
1、setTimeout()的写法
无参数时:setTimeout(fun,200);
有参数时:setTimeout(function(){ fun(e) },200);
2、冒泡的问题:
取消事件的默认动作,避免叠加元素点击时上层元素响应下层元素事件。
btn.onclick = function(e){
.......;
e.preventDefault();
return false;
}
3、<a>元素的onclick事件和href属性:
<a>元素点击时跳转到另一页面:
ele.onclick = function(){
window.location.href = '.../.../';
return false;
}
在onclick事件的最后一句写return false可以避免在事件执行后再执行href属性。
服务器传给浏览器的都是字符串(JSON),需要用eval_r()来转换为可执行的程序语句(对象和数组):
M.net.ajax.request({
url:'...',
method:'GET',
success:function(req){
var myReq = eval_r('(' + req.responseText +
')');
var info = eval_r('(' + myReq.value +
')');
}
});
JSON长什么样子?长这个样子: {'value':'{\'uid\':23172295,\'icon\':\'http://fx00301.files.xiaomi.net
/avatar2/7d5/L3Lwn9PakZ8RsgKzOmdGjI3hQ.jpg\',\'sex\':\'男\',\'nickname\':
\'张三\',\'newLikeEachNum\':1,\'largeIcon\':
\'http://fx00301.files.ximi.net/avatar2/7d5
/L3Lwn9PakZ8RsgKzOmdGjI3hQ_120.jpg\',\'city\':\'北京 -
朝阳\',\'likeEachNum\':1,\'likeNum\':1,\'joinTime\':1322275540572,
\'beLikedNum\':1
DOM——
简单而言,DOM就是一套对web文档的内容进行抽象和概念化的方法。
例如,因为Javascript预先定义了“images”和“forms”等术语,我们才能像这样在Javascript脚本里引用“文档中的第三个图像”或文档中名为“details”的表单:
document.images[2];
document.forms['details'];
现在人们通常把这种试验性质的初级DOM称为“第0级DOM”(DOM LEVEL 0),其常见用途是翻转图片和验证表单数据。
DHTML——
DHTML是Dynamic
HTML(动态HTML)的简称。并不是新技术,其实更像是一种市场营销噱头。它是描述HTML\CSS\JS技术组合的术语。其含义是:
·利用HTML把网页标记为各种元素;
·利用CSS设置元素样式和它们的显示位置;
·利用JS实时的操控页面和改变样式。
小三角形不用再切图了,而是使用css的border即可实现,代码如下:
div.mun::before{
content:'\20';
display:block;
width:0;
height:0;
border-width:0 9px 10px;
border-style:none solid solid;
border-color:transparent transparent
rgba(59,61,64,.9);
}
注意事项:
1、伪类和伪元素:
伪类(如hover、first-child、last-child)前用单冒号引用;
伪元素(如before和after)前用双冒号引用。
伪元素(before和after)在使用时,必须先content:'\20';否则不会显示,另外,它们表示元素(此例中是div.mun)内部的“元素”,显示在元素border和padding范围之内,不会出现在元素外面。
2、关于border:
当width和height都为0的时候,border仍然存在且可以赋值。此例中实现的是一个尖角向上的金字塔形状的三角形。左右边框颜色为透明,但仍然有宽度,二者宽度之和,为三角
-webkit-transform:rotate(5deg); 旋转
-webkit-box-shadow:5px 5px 5px #999; 阴影(默认为外阴影,inset为内阴影)
-webkit-transform:scale(0.5); 大小缩放
div{opacity:1;-webkit-transition:opacity 1s linear;}
div:hover{opacity:0;}; 淡出
input[type=range]{-webkit-appearance:slider-horizontal;}
水平滑动条
-webkit-appearance:push-button; 按钮
-webkit-appearance:searchfield; 搜索框
-webkit-box-sizing:border-box; padding的值包含在width里
-webkit-text-size-adjust:none; 禁用Webkit内核浏览器的文字大小调整功能
-webkit-tap-highlight-color:rgba(0,0,0,0); 只用于iOS (iPhone和iPad)
设置高亮色,alpha为0时禁用高亮
a{
display:block;margin-top:.2em;color:#413F3F;
background-image:-webkit-gradient(linear,0 0,0
100%,from(#e5e5e5),to(#c7c7c7));
background-image:-webkit-linear-gradient(top,#e5e5e5,#c7c7c7);
最近在做安卓客户端的APP界面开发,总结一些经验如下:
1、要保证页面在手机中正常显示,需要在<head>标签内添加如下语句:
<meta name='viewport'
content='width=480, target-densitydpi=high-dpi, user-scalable=no'
/>
2、一些css中需要注意的设置:
html{height:100%;}
body{min-height:100%;position:relative;}
3、表单元素在手机中点击时会出现边框,取消边框的写法如下:
input, textarea,
button, a{-webkit-tap-highlight-color:rgba(0,0,0,0);}
4、背景图片background中,0 0
位置值是默认值,可以省略不写;repeat双方向重复也是默认值,也可以不写;位置值中的“bottom”、“right”可以使用“100%”来替代,以此减少代码量。如下:
div{background:url(pic.png) 0 0
repeat;}简写为div{background:url(pi
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$('p') 选取 <p> 元素。
$('p.intro') 选取所有 class='intro' 的 <p> 元素。
$('p#demo') 选取 id='demo' 的第一个 <p> 元素。
$('ul li:first') 选取每个 <ul> 的第一个 <li> 元素。
$('div#intro .head') 选取id='intro' 的 <div> 元素中的所有
class='head' 的元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$('[href]') 选取所有带有 href 属性的元素。
HTML5 的 canvas 元素可以使用 JavaScript
在网页上绘制图像。画布是一个矩形区域,我们可以随意的控制其每一像素。canvas
拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。总结一部分方法如下:
1、绘制线条:
<canvas id='myCanvas' width='300' height='120'>
Your browser does not support
canvas!(canvas标签内的文字只有在浏览器不支持canvas标签的时候才会显示出来)
</canvas>
<script type='text/javascript'>
var c=document.getElementByIdx_x('myCanvas');
var txt=c.getContext('2d');
txt.moveTo(10,10);
txt.lineTo(150,60);
txt.lineTo(150,100);
txt.lineTo(60,60);
txt.lineTo(200,70);
txt.stroke();
</script>
getContext()方法用来返回一个环境对象,该对象导出一个二维绘图API。可以理解为它
1、h标签的含义是“标题”,搜索引擎对这个标签比较敏感,尤其是<h1>和<h2>。一个语义良好的页面,h标签应该是完整有序没有断层的,也就是要按照h1、h2、h3、h4、h5、h6这样的顺序依次排列下来,不能出现h1、h3而漏掉h2的情况。
2、使HTML结构语义化,只有当页面内标签无法满足设计需要时,才会适当添加div和span等无语义的标签来辅助实现。例如一个标题和“更多”在同一行内的实现,如下列代码:
<div class='title'>
<h2>这里是标题</h2>
<a href='#'>更多</a>
</div>
CSS样式为:给div:text-align:right; 给h2:float:left;
3、关于表单:表单域要用fieldset标签包括起来,并用legend标签说明表单的用途。因为fieldset有默认边框legend也有其默认样式,为满足设计的需要,可以给fieldset的border设为none,并把legend的