js常用数据操作函数库

1.js操作cookie

js原生操作cookie
document.cookie=”name=”+username;
编写函数
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + “=”+ escape (value) + “;expires=” +    exp.toGMTString();
}
//读cookie
function getCookie(name)
{
var arr,reg=new RegExp(“(^| )”+name+”=([^;]*)(;|$)”);
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
//删除cookie
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() – 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + “=”+cval+”;expires=”+exp.toGMTString();
}

2.js获取url 

有时候会出现编码错误导致的乱码
function get_url_var(name)
{
var reg = new RegExp(“(^|&)”+ name +”=([^&]*)(&|$)”);
var r = window.location.search.substr(1).match(reg);
if(r!=null)return  unescape(r[2]); return null;
}

3.jq  ajax

$.ajax({
url:url
data:{
‘ui_cardnum’:ui_cardnum
},
type:’post’,
dataType:’json’,

success:function(data){

 

},
error:function(data) {
console.log(data);
}
});

 

4.js  操作localstorage

  • 获取键值:localStorage.getItem(“key”)
  • 设置键值:localStorage.setItem(“key”,”value”)
  • 清除键值:localStorage.removeItem(“key”)
  • 清除所有键值:localStorage.clear()

php 数据处理相关代码片段

一.2V数组转树形 代码片段

 

数据模型

 

$items = array(
1 => array(‘id’ => 1, ‘pid’ => 0, ‘name’ => ‘江西省’),
2 => array(‘id’ => 2, ‘pid’ => 0, ‘name’ => ‘黑龙江省’),
3 => array(‘id’ => 3, ‘pid’ => 1, ‘name’ => ‘南昌市’),
4 => array(‘id’ => 4, ‘pid’ => 2, ‘name’ => ‘哈尔滨市’),
5 => array(‘id’ => 5, ‘pid’ => 2, ‘name’ => ‘鸡西市’),
6 => array(‘id’ => 6, ‘pid’ => 4, ‘name’ => ‘香坊区’),
7 => array(‘id’ => 7, ‘pid’ => 4, ‘name’ => ‘南岗区’),
8 => array(‘id’ => 8, ‘pid’ => 6, ‘name’ => ‘和兴路’),
9 => array(‘id’ => 9, ‘pid’ => 7, ‘name’ => ‘西大直街’),
10 => array(‘id’ => 10, ‘pid’ => 8, ‘name’ => ‘东北林业大学’),
11 => array(‘id’ => 11, ‘pid’ => 9, ‘name’ => ‘哈尔滨工业大学’),
12 => array(‘id’ => 12, ‘pid’ => 8, ‘name’ => ‘哈尔滨师范大学’),
13 => array(‘id’ => 13, ‘pid’ => 1, ‘name’ => ‘赣州市’),
14 => array(‘id’ => 14, ‘pid’ => 13, ‘name’ => ‘赣县’),
15 => array(‘id’ => 15, ‘pid’ => 13, ‘name’ => ‘于都县’),
16 => array(‘id’ => 16, ‘pid’ => 14, ‘name’ => ‘茅店镇’),
17 => array(‘id’ => 17, ‘pid’ => 14, ‘name’ => ‘大田乡’),
18 => array(‘id’ => 18, ‘pid’ => 16, ‘name’ => ‘义源村’),
19 => array(‘id’ => 19, ‘pid’ => 16, ‘name’ => ‘上坝村’),
);

函数

 

function genTree9(Array $items) {

$tree = array();    //格式化好的树
foreach ($items as $item)
if (isset($items[$item[‘pid’]]))
$items[$item[‘pid’]][‘son’][] = &$items[$item[‘id’]];
else
$tree[] = &$items[$item[‘id’]];
return $tree;

}

二.传输过程中 汉字不转uncode

json_encode($data, JSON_UNESCAPED_UNICODE)

三.带有特殊字符的url转码

 

urlencode($data)

 

如  http://weixin.com?XXXX?a=1&b=222&c=666/d=777/…

 

其中? & /将被转义

四.get和post请求

get

function get_curl($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,FALSE);
curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,FALSE);
curl_setopt($ch, CURLOPT_HEADER, FALSE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
//运行curl,结果以json形式返回
$res = curl_exec($ch);
curl_close($ch);
return $res;
}

//post请求
function http_request($url,$data){
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$output=curl_exec($curl);
curl_close($curl);
return $output;
}

file_get_content()函数也可以作get获取内容 亦可以用作读取网络文件

10.27小型网站框架搭建文件小结

php脚本

@session_start();
开启session 为防止重复开启 添加@隐藏此条代码的警告信息


date_default_timezone_set(“Asia/Shanghai”);
设置php脚本时区 如中国所使用的北京/上海时间

header(“Content-type:text/html;charset=utf-8”);
设置脚本utf8编码


header(‘Access-Control-Allow-Origin: *’);

允许任何域访问

数据库连接代码

mysql_connect($add,$name,$pwd);

设置数据库字符编码

default-character-set=utf8

html标签 头文件

<meta http-equiv=”Content-type” content=”text/html;charset=utf-8″ />

完整设置页面utf8编码

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

放大倍数1.0 变向适应设备屏幕

<meta name=”renderer” content=”webkit”>

告知浏览器 页面适用内核 因为国内浏览器大多“聪明”地采用了双核模式 设置webkit值告知浏览器采用对应内核

<meta name=”renderer” content=”ie-comp”>

ie兼容模式 ie6和7 虽然不用。。

<meta name=”renderer” content=”ie-stand”> 

ie兼容模式 ie8 9 10 这个也不太用。。

<meta http-equiv=”Pragma” content=”no-cache” />   
<meta http-equiv=”Cache-Control” content=”no-cache” />
<meta http-equiv=”Expires” content=”0″ />
避免大多数浏览器缓存


路径尽量采用相对路径 修改 待续。。

JQ小结20160921

JQ小结

ajaxComplete() 每次完成ajax请求执行该函数 从 jQuery 1.8 开始, .ajaxComplete() 方法只能绑定到 document元素

$(document).ajaxComplete(function() {
 $( “.log” ).text( “Triggered ajaxComplete handler.” );
});

如果global选项设置为false,调用$.ajax() 或 $.ajaxSetup(),.ajaxComplete()方法将不会被触发。

add()结尾添加元素 或者 内容

append()在匹配的元素结尾添加元素 或 内容

after()在元素后面添加同级元素或移动到该位置 若document中有制定的选择器 则为移动 否则在结尾添加内容或标签

before() 在前面添加或移动

$(‘*’) 选择所有元素

$( “:animated” )选择所有正在运行动画的元素 必如关闭动画

bind()为元素绑定一个触发时间 如$(’#selector’).bind(‘click’, function(){…})

blur()当元素失去焦点时触发的时间

:checkbox Selector 匹配所有勾选的复选框元素

:checked Selector  匹配所有勾选的元素

error() bind(‘error’,function(){…})元素加载错误调用函数 如图片加载失败 加载默认图片

change() 表单中的控件 值发生变化的时候触发的时间 如下拉列表的选择 单/复选框值得改变 搜索框的输入操作变化等

delegate()为子元素预加载一个函数或事件 如在一个元素下添加一个子元素前加载函数 事件不会加载 若用delegate方法为其子元素预加载一个方法则会执行 待子元素添加后 事件会绑定在对应子元素上   参考w3cschool实例http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_delegate_newelement

clone() 复制对应元素的属性 和 子标签内容 属性clone(true)连同元素的绑定事件也一并获取

contents()选择所有匹配元素的所有子元素

delay(600) 延迟一段时间执行下一事件 如$(selector).slideToggle(600).delay(1000).slideToggle(600);

slideUp() slideDown() slideToggle() 上下滑动

fadeIn()fadeOut() fadeToggle() 淡入淡出

fadeTo()调整匹配元素的透明度

each() 遍历一个jQuery对象,为每个匹配元素执行一个函数。

less 低成本高回报-带逻辑的层叠样式表

★变量

用@定义

@cg:green;
@cr:red;
@cy:yellow;

使用:

.passage{
    color:@cg;
    background-color:@cr;
    border-color:@yellow;
}

编译后:

.passage{
    color:green;
    background-color:red;
    border-color:yellow;
}

★运算

变量可以进行简单运算

★注释

/***********正常注释************/

//其他语言习惯注释 编译时去掉 只被保留在.less文件中

★任性!不想被编译

与其说任性不如说微软比较任性 即使再NB也必须迁就使用微软的庞大用户群 

有一些属性 比如滤镜(类似webkit中的opacity透明度)less不能识别 也可能以后会出现less识别不了的属性  需要处理

使用波浪线加一对单引号可以包含不想被编译的内容 如   ~’i do not want to get translated !’

★函数(混合1)

为类附加参数 

定义:

.border-radius(@radius:10px,@style:solid){

    -webkit-border-radius:@radius @style #313131;
    -moz-border-radius:@radius @style #313131;
    -o-border-radius:@radius @style #313131;
    -ms-border-radius:@radius @style #313131;
    border-radius:@radius @style #313131;

}

使用:

直接使用

.border-radius();//默认使用圆角10px, 样式直线

编译后:

.border-radius{

    -webkit-border-radius:10px solid #313131;
    -moz-border-radius:10px solid #313131;
    -o-border-radius:10px solid #313131;
    -ms-border-radius:10px solid #313131;
    border-radius:10px solid #313131;

}

或使用改变变量

.border-radius(30px, dashed);//使用圆角30px,样式虚线

编译后:

.border-radius{

    -webkit-border-radius:30px dashed #313131;
    -moz-border-radius:30px dashed #313131;
    -o-border-radius:30px dashed #313131;
    -ms-border-radius:30px dashed #313131;
    border-radius:30px dashed #313131;

}

★混合2

整个类的属性当做变量添加到新类中 并 附加其他属性

.img(@width:100px, @height:60px, @size:contain){
    
    width:@width;
    height:@height;
    background-repeat:no-repeat;
    background-size:@size;

}

使用

.img1{

    .img();
    
    background:url(…);

}

编译后:

.img1{

    width:100px;
    height:60px;
    background-repeat:no-repeat;
    background-size:contain;
    background:url(…);

}

★混合3

无键参数

//三个动画

@keyform ani1{
    …
}

@keyform ani2{
    …
}

@keyform ani3{
    …
}

//使用动画的三个类

.box1(ani1, @time:8s, @locus:linear){//使用动画1 轨迹直线
    animation:ani1 @time @locus infinite running;
}

.box2(ani2, @time:10s, @locus:ease){//使用动画2 轨迹先快后慢再快
    animation:ani1 @time @locus infinite running;
}

.box3(ani3, @time:20s, @locus:cubic-bezier(0.1,0.2,0.5,1)){//使用动画3 轨迹自定义贝塞尔曲线
    animation:ani1 @time @locus infinite running;
}

//——————————————————————

.box(@_, @time,@locus){
animation-name:@_;
}

使用

.i-box{

    .box(ani1,8s,linear);

}

即使用了box1的属性:动画1 轨迹直线 

值得注意 虽然.box中的@time和@locus在.box中没用 但必须加上 

如果@_没有匹配到 则会出现只有@time和@locus被编译

如下

.i-box{

   animation: 8s linear infinite running;//没有动画名 报错!!!

}

★嵌套

&表示父元素

.list{

    li{

list-style:none;
margin:0;
padding:0;

        a{

            font-size:#313131;opacity:0.5;

   &:hover{ opacity:1; }

        }

    }

}

编译后:

.list li{

    list-style:none;
    margin:0;
    padding:0;

}

.list li a{

    font-size:#313131;opacity:0.5;

}

.list li a:hover{

    opacity:1;

}

★超级懒B头顶称号arguments

@arguments可以代表所有参数

.box(@border-width:10px,@border-color:green,@border-line-style:solid){

    border:@arguments;

}

使用:

.box();或.box(20px);

★important的继承

加!important的类 其中包含的属性都会添加important属性 可以用作测试

【转】阿里云设计师就从[^-^]表情里挑了一个当LOGO!

 LOGO设计又有新套路!阿里云的新LOGO竟然是个表情

  阿里云新Logo一出,我伙呆的戏码又重新上演了!讲真,马云这个爸爸,我是认的,然而!阿里云push着咱家爸爸的大名,把新Logo“造”成这样,想知道爸爸同意吗?

阿里云设计师就从[^-^]这种表情里挑了一个当LOGO!

  阿里云新Logo,就是方括号内加一个小横线。刚一发布,对于仅有一面之缘的网友们来说,一种似曾相识的撞脸感扑面而来——貌似偶遇聊天必备的颜表情,只不过是从圆脸变成了方脸~

  先自行感觉一下↓↓↓

  新Logo长这样:
s

阿里云设计师就从[^-^]这种表情里挑了一个当LOGO!

  颜表情长这样:

  【不】圆脸:(>﹏<)方脸:[>﹏<]   【怀疑】圆脸:(→_→)方脸:[→_→]   【困】圆脸:( ̄o ̄) . z Z方脸:[ ̄o ̄]. z Z   【崇拜】圆脸:m( __ )m方脸:m[__]m   【我想想】 圆脸:(ˇˍˇ)方脸:[ˇˍˇ]   【无语】圆脸:( ̄. ̄)方脸:[ ̄. ̄]   感受到变“方”的颜表情的各种萌(cao)点了吗?但人家毕竟不是个表情,是Logo!Logo!Logo!好吧~ wu
阿里云设计师就从[^-^]这种表情里挑了一个当LOGO!

  来自官方的解释:新Logo中,“[]”代表计算,“—”代表流动的数据,计算和数据是现代社会的基础设施,因此“—”还是匀速运动的,无时无刻在创造着“无法计算的价值”~~~

  阿里云新Logo的元素对于敲代码的“工友”来说,简直再熟悉不过了:新Logo是从代码中的符号“[]”演绎而来——符合阿里云作为一家科技公司输出计算和数据技术能力、为生活为各行各业源源不断地赋能的初心,而这也是无国界的通用语言,能代表阿里云服务中国也服务全世界的未来创想!

阿里云设计师就从[^-^]这种表情里挑了一个当LOGO!

  尽管有点像“方”了的颜表情,但还是能感受到带有强烈的阿里巴巴DNA的“诗和远方”style,你们说呢?

  说一千道一万,感觉阿里云的新Logo还是跟各路盆友玩儿了一回深深的套路![= ̄ω ̄=]

css3属性小结

20160815 css3

border-radius 可以选两个值 3个值 4个值 分别表是左上右下/右上左下   左上/右上左下/右下 4个值为左上 顺时针

border-image使用必须知道边框图片的像素 不然不好用

background-size 宽高 cover contain

background-origin 表示背景的边界  padding-box内容中添加背景 border-box包含边框的添加背景 content-box在文本中添加背景

rgba hsla(色调 饱和度 明度 透明度alpha)

Gradients 

background: -webkit-linear-gradient(red, yellow);

text-shadow: 10px 10px #c6c6c6;

text-shadow: 10px 10px 5px #c6c6c6;第三个参数可以调节模糊度 越大越模糊 1px与原文本相同

box-shadow: 10px 10px 200px grey; 

例如卡片特效

.card {
    width: 250px;
height:250px;
border:1px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
margin:50px;
}

overflow: hidden ;配合 text-overflow:ellipsis; 达到超出元素边界变为。。。的形式呈现 但貌似不支持中文字符?

如果在该元素的hover事件中加以下属性 会令其在鼠标经过显示隐藏的内容

word-break: keep-all;适合横向排列word-wrap: break-word;适合纵向排列           选一个

CSS3 2D Transform 

★jq的animate函数不支持transform属性

transform:translate(x,y) 可以’转换’元素的位置 相当于定位 基点亦在左上

scale() 或 sacle(x,y)可以缩放元素大小 基点为元素中心点   使用height width属性基点在左上

scale() 中的值如果是负值 会先翻转内容 再缩放

rotate(阿尔法);旋转 基点默认为左上 

transform-origin:left top;也可以设置transform旋转基点

skew() skewX() skewY() 绕X/Y轴旋转 基线为上边界 和 左边界

transition: width 2s;过度效果

resize 属性规定是否可由用户调整元素尺寸 none|both|horizontal|vertical;

nav-index 导航索引号

弹性盒子简单笔记 [未整理]

1 appcan ide
2 弹性和子CSS
3 列表页
2016.6.23
CSS3 弹性盒子模型 flex
兼容浏览器
-webkit
-moz
-o
-ms

属性:
display:box;
-webkit-box
盒子模型属性配合box
盒子子类权重flex
盒子行内元素inline-box
box-orient用来确定子元素的方向。是横着排还是竖着走
属性horizontal | vertical | inline-axis | block-axis | inherit
其中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block-axis的表现也是一致的,让元素纵列。
box-direction是用来确定子元素的排列顺序,可选值有:normal | reverse | inherit
其中
normal是默认值,表示按照正常顺序排列。所谓正常顺序,就是我们看书写文字的顺序,从左往右,由上至下,先出现的元素,就上面或是左边。而reverse表示反转
box-orient决定子元素的排列方式 水平or垂直 默认值inline-axis 所有属性值 horizontal|vertical|inline-axis|block-axis|inherit;
box属性 start | end | center | baseline | stretch
box-align start | end | center | justify
box-pack
(内容!!!的)对齐方式 比如baseline 不管父标签的边界在哪里 令内容对齐
box-lines是用来决定子元素是否可以换行显示其中single是默认值,表示死活不换行 multiple后,就多行显示了
box-ordinal-group (可以)决定box在父元素中的顺序 数值越小 越靠前
2016.2.24
———————————————————–
appcan的JS列表拖拽效果
appcan.optionList
列表类名scroll-bar
隐藏滑块类名scroll-right
可以在样式表中直接添加scroll-bar和scroll-right覆盖其原有的属性 有些难以覆盖的属性也可以在JS代码中修改其属性
scroll-right 包含一个float:left的块 可以直接写覆盖属性
———————————————————–
弹性盒子 实战进阶
弹性盒子中的 表现形式(display)为非box属性的元素 显示以原来的流体式布局标准 又内容撑开
弹性盒子中剩下的带有box属性的元素根据box-flex的值按权重分配容器中剩余的空间
弹性盒子配合绝对定位可以实现大多布局
-webkit-box-direction:reverse反向排列
当子元素横向排列时 box-align:center 可以使子元素可以使子元素间左边界对齐、中线对齐和右边界对齐 达到上下居中的效果
box-pack:center 可以使子元素间左边界对齐、中线对齐和右边界对齐 达到左右居中的效果
注意:当box-orient的值为vertical 时为纵向排列 box-align 和 box-pack 对应值得效果相反 二者同时使用可以达到子元素居中效果
appcan中的对应类名为
ub display:box;
ub-ac box-align:center;
ub-pc box-pack:center;
ub-ver box-orient:vertical;
官方文档
ub 元素采用弹性BOX布局
ub-rev 子元素反序排列
ub-con 在子元素中加入一个容器,用于避免内容引起子元素大小变化
对应CSS代码为position:absolute;width:100%;height:100%;
ub-ac、ub-ae 子元素垂直居中对齐和尾对齐
ub-pc、ub-pe、ub-pj 子元素水平居中对齐、尾对齐和两端对齐
ub-ver 子元素纵向排列
ub-f1 ub-f2 ub-f3 ub-f4 子元素占用区域份数
2、基石 (UI的分辨率适配)
每 一个手机应用,如果需要在众多的移动终端上保持一致的效果,UI适配是工作的重中之重。设计原理是为不同分辨率的系统,选取最贴近于人直观感受舒适度的一 个字体大小作为参考量。例如在320×480分辨率的手机上,采用16px大小字体作为参考量。在480×800分辨率的终端上,采用24px大小字体作 为参考量。一切元素的大小都是以参考量的相对比值来定义。在CSS里面对应的是em。那么在320×480分辨率下 1em=16px,在480×800分辨率下1em=24px。
通过这种方式,我们可以保证,同样代码的界面,在不同分辨率下都能够保持最贴近用户的交互效果。
UI 中,我们在中间件中为不同屏幕密度(单位尺寸中可显示的点数),默认定义好了字体,开发者不再需要在代码中引入ui-media.css文件,即使有新的 分辨率手机问世,也会自动适配。目前参照Andorid屏幕密度划分为低密度、普通密度、高密度、超高密度、超超高密度,分别定义字体为14px 16px 24px 32px 48px。
radio

++++++++++++++++++++++++++++++++++++++++
.radiobox1 {
width: 1em;
height: 1em;
}
.radiobox1 input[type=radio] {
-webkit-appearance: none;
background-color: transparent;
outline: 0 !important;
border: 0;
font-size: 1em !important;
}
.radiobox1 input[type=radio]:before {
display: inline-block;
text-align: center;
font: normal normal normal 14px/1 FontAwesome;
font-size: 1em;
font-weight: thin;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: rgb(212,212,212);
}
.radiobox1 input[type=radio]:checked:before {
color: rgb(0,111,200);
}
.radiobox1 input[type=radio]:before {
content: “\f1db”;
}
.radiobox1 input[type=radio]:checked:before {
content: “\f192”;
}
20160701 wamp2.2 php5.3.8
exit 和 die 在程序后续出错情况下 不能停止运行
php先执行编译 后执行语句
20160704
。。
20160705
输出错误信息 不嵌套
顺序执行
20160712
appcan使用总结2
★弹性盒子特别适用于移动设备 大多布局大小单位采用em 即当前元素的字体大小的倍数
一般选择为12px 24px 36px 一般屏幕越大 分辨率越大 字体像素越大
★固定宽高图片设置 如系统按钮 样式图片
使用块标签 设置背景图片 设置最小宽高 umh1~7 umw1~4 块内不加任何内容 以免撑开 图片资源地址用标签的style属性写background-image
基本配合样例 ub ub-img/ub-img1 umh1 umw1 配合样式
若图片小于设置宽高 设置ub-img标签
-webkit-background-size:contain;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
若图片大于设置宽高 可以设置ub-img1标签
-webkit-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
也可以在div中放入一个背景图片当做默认图片(如找不到图片显示应用的logo) 在div中再加入要加入的图片
★.uinn1~4样式可以增加元素的内边距 但是千万不能和ub-fh一起使用
ub-fh样式为width:100%
☆但是background-clip有可能影响其效果 background-clip表示背景裁剪程度 即背景的作用范围
border-box padding-box content-box分别裁剪到边框 内边距 内容 裁剪到边框即边框算做内容 背景覆盖到边框
该样式一般配合border border-radius padding使用
★块标签中的内容最好用$.html();获取/设置 而input中的值最好用$.val();获取/设置
若父元素uinput配合子元素input 定义一个现实框 input设置disabled属性 其所有其他属性功能失效 如form提交
但input可以作为一个展示框 或用脚本取消disabled 令其激活实现其他功能
若为标注disabled的input设置点击事件 在一些移动适配中 可能不适用 事件不能触发
20160713 SNS
六度分割理论:并不是说任何人与人之间的联系都必须要通过六个层次才会产生联系,
而是表达了这样一个重要的概念:
任何两位素不相识的人之间,通过一定的联系方式,总能够产生必然联系或关系。
20世纪60年代,耶鲁大学的社会心理学家米尔格兰姆(Stanley Milgram, 1933-1984)就设计了一个连锁信件实验(Small world experiment)。
他将一套连锁信件随机发送给居住在内布拉斯加州奥马哈的160个人,信中放了一个波士顿股票经纪人的名字,信中要求每个收信人将这套信寄给自己认为是比较接近那个股票经纪人的朋友。朋友收信后照此办理。
最终,大部分信在经过五、六个步骤后都抵达了该股票经纪人。六度分割(也叫“六度空间”,Six degrees of separation)的概念由此而来。
这个连锁实验,体现了一个似乎很普遍的客观规律:社会化的现代人类社会成员之间,都可能通过“六度空间” 而联系起来,绝对没有联系的A与B是不存在的。
这是一个更典型、深刻而且普遍的自然现象。
LBS 地理信息服务
20160715
设计点击事件
点击按钮范围最好大一些 点击触发类 和改变div内容的类 最好不同
20160718
wamp2.2 php版本为5.3
die()中输出的变量若为int 不能正常输出 可以拼接一个任意字符窜 如下
die(’die:’$para);

CSS box-flex属性,然后弹性盒子模型简介 « 张鑫旭-鑫空间-鑫生活

<blockquote>张鑫旭的个人博客_web前端技术文章_CSS box-flex属性,然后弹性盒子模型简介</blockquote><p>来源: <em><a href=”http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%e5%b1%9e%e6%80%a7%ef%bc%8c%e7%84%b6%e5%90%8e%e5%bc%b9%e6%80%a7%e7%9b%92%e5%ad%90%e6%a8%a1%e5%9e%8b%e7%ae%80%e4%bb%8b/”>CSS box-flex属性,然后弹性盒子模型简介 « 张鑫旭-鑫空间-鑫生活</a></em></p> 

一、淡淡的开头语
昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马,于是习惯性谷歌之,真是不谷不知道,一谷吓一跳。倒不是该属性本身,而是此属性作为导火索,让我了解了下CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)。对于我这样的流体布局控而言,这种盒子模型的出现就好比打麻将杠上开花杠到绝张边七条,让人兴奋不已。在国外,弹性盒子模型早在去年就开始被提及,研究,与应用。然而,自己现在才第一次听到此概念,真是一不留神就out了,学习这东西,果然松懈不得。
本文内容叙述撇开以往顺流而下的方式,直接以box-flex属性为切入口,直入大本营,再铺开叙述。
添加于2014-11-30:本文已老,仅供参考。
二、box-flex属性(和谐版)
有道桌面词典显示,”flex”一词中文有“收缩”之意。不过,从此属性实际上产生的效果来看,无论怎样用“收缩”一词解释都显得很牵强。所以,这里,直接抛开字面意思,我们可以将”box-flex”理解为”房子-分配”。box为“盒子”的意思,我们可以理解为当下价格巨高的“房子”,”flex”指兄弟几个“分配房子”。
举个更实际点的例子:马林大叔省吃俭用一辈子,终于在上海郊外买了间150平米的商品房。后来,马林大叔想回老家养老,决定把房子分配给他的三个儿子。ok,先暂停下,这里提到的“房子”就是”box-flex”中的”box”,“分配”就是”box-flex”中的”flex”,于是,这个“分配房子”的举动就称为”box-flex”,而box-flex属性的值就是说的如何分配,分配比例是什么。oK,继续我们的例子,马林大叔的三个儿子分别叫做大马,中马和小马,其中大马已经结婚多年,有一堆双胞胎女儿,拖家带口的人多;而中马和小马是优秀的光棍人士。所以,大马要求分配更多的房子,最终,家人一番协商有了下面的分配结果,就是:
#大马 { 房子-分配: 2; }
#中马 { 房子-分配: 1; }
#小马 { 房子-分配: 1; }
我想,上面的分配应该很容易看懂的。房子分成了总共4份,其中有家室的大马分得其中的两份,而为国家省橡胶的中马和小马每人分得其中一份,于是用数值换算就是:
大马 = 150 * (2 / (2+1+1)) = 75(平米);
中马 = 150 * (1 / (2+1+1)) = 37.5(平米);
小马 = 150 * (1 / (2+1+1)) = 37.5(平米);
如果装换成CSS表示就是:
#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { box-flex: 1; }
哇咔咔,box-flex的含义与作用理解瞬间柳暗花明:用来按比例分配父标签的宽度(或高度)空间。
box-flex的值为至少为1的整数时起作用。但是,仅仅一个box-flex属性是不足以实现子元素间的空间分配,因为还要看其老爸的意思。所谓,我爸是李刚,撞人很嚣张;恨爸不是刚,撞人心慌慌。只有老爸开口说:“这个房子现在你们随意分配。”其子女才能分配。
所以,父元素也是需要添加必要的声明的。此声明就是:
#father { display: box; }
似乎也可以是:
#father { display: inline-box; }
此声明好像是在说:孩子们,现在我把这个房子变成了可随意分配状态,非固定财产,你们可以自己协商分配了。
display: box;的声明其实就是弹性盒子模型的声明,此声明下的子元素的行为与表现与CSS2中的传统盒子模型的表现是有显著的差异的。
毕竟属于CSS3的东西,目前而言,仅Firefox/Chrome/Safari浏览器支持弹性盒子模型(IE9不详,Opera尚未),且使用的时候,需要附带私有前缀。就是诸如-moz-, -webkit-之类。
CSS实例
现在把上面的马林分房子的例子CSS实例化,看看在web页面上是个如何的表现://zxx:有把小说拍成电影的感觉,抠鼻
主要CSS代码如下:
.test_box {
display: -moz-box;
display: -webkit-box;
display: box;

}
.list {

}
.list_one {
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
.list_two{
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex: 2;
}
HTML代码如下:

1
2
3

结果如下缩略图: 从上图可以看去,老大大马确实分配到了2份的房子空间,而中马和小马均分到了一份房子空间。
您可以狠狠地点击这里:box-flex弹性布局测试demo
三、CSS box-flex属性(不和谐版)
继续上面马林大叔分房的例子。原本兄弟三人和和睦睦是一点问题都没有的,房子怎么分也基本都定下来了。然而,突然,事情起了波澜。老三小马突然有了个彪悍的女朋友,叫阿凤。小马本人对分配房子的大小是觉得无所谓的,即使两个人住,近40平米的屋子也足够了,何必为了这点事情伤了兄弟们间的和气。然而,小马的女友阿凤却是个吃不了亏的人,说什么也要争口气,于是,找来大马中马,强烈要求要加大他们房子的分配面积。
在大马,中马看来,阿凤还属于外来人,凭什么对他们兄弟的房子指手划脚,于是,没得妥协,于是,争执不断,于是,愈演愈烈,于是,不可开交。于是,有天,阿凤实在憋不住了,在厨房做菜的时候突然拿着菜刀跑出来,大声咆哮:“不管怎样,反正我家小马至少要50平米的房子,其余的怎么分是你们的事情,我不管,这是我的底线了,再低就没得商量!!”大马等被这架势吓住了,最终还是妥协了:小马就50平米(即使以后房子扩建还是50平米),剩下的面积大马,中马2:1比例再分配。于是就有:
#大马 { 房子-分配: 2; }
#中马 { 房子-分配: 1; }
#小马 { 房子-分配: 50m2; }
改编成CSS剧本就是:
#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { width: 50px; }
还是不难理解,当子元素中有宽度值的时候,此元素就定宽处理,剩下的空间再按比例分配。
于是,此时,大马的房子大小是:(150 – 50) * (2 / (1 + 2)) = 66.7平米,中马分配房子大小是:(150 – 50) * (1 / (1 + 2)) = 33.3平米。
还是类似上面的demo,看看含有定宽元素的子元素是如何表现的。
新增CSS样式如下:
.list_w300 { width: 300px; }
HTML代码如下:

1
2
3

结果如下缩略图: 老三分得300像素的宽度,剩下的500像素宽度老大和老二2:1比例分配。
您可以狠狠地点击这里:含定宽元素弹性布局demo
然而,事情还没有结束。兄弟几个相处了一段时间后发现,偌大的屋子如果全部都是私有的话,会有诸多生活上的不便。所以,需要腾出些公共空间,给屋子透个气。咋办呢,老三小马的女友阿凤死活不妥协,没有办法,老马和中马只能牺牲自己的住所面积作为公共空间了。
反应到CSS上,大致就是增加了margin间距,如下HTML:

1
2
3

结果如下缩略图: 老大,老二的空间同时被压榨了,老大还好,原本比例高。只是可怜了二当家的,地方越来越小。不过,老二的隐忍换来了和睦,所做的牺牲没有白费。
四、爸爸其实很厉害,的说~
语言小知识:“厉害”用日语说的话,动漫里面经常用的比较文雅的就是“すごい”,现在年轻人常用的就是“スゲ”,还有一种说法“よくできるね”是一种称赞的说法,语气比较柔和。
弹性盒子模型下的爸爸(父标签)其实是很有货的,男人嘛,就应该这样,够沉稳够内涵。
爸爸肚子中的货有:box-orient, box-direction, box-align, box-pack, box-lines. 现在依次讲讲这里box打头的属性都是干嘛用的。
box-orient
box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有:
horizontal | vertical | inline-axis | block-axis | inherit
其中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block-axis的表现也是一致的,让元素纵列。
我专门做了个demo页面,方便您查看各个值的行为与表现。您可以狠狠地点击这里:box-orient值作用测试页面
切换demo页面左边的单选选项卡(如果您的浏览器为Firefox/Chrome/Safari),就可以看到不同的box-orient属性值的行为表现了。//zxx:对比可以发现,Firefox下的display:box会收缩外框(有点display:inline-block的感觉),而Chrome则没有收缩。
点击左边的单选切换属性值 box-direction
box-direction是用来确定子元素的排列顺序,可选值有:
normal | reverse | inherit
其中normal是默认值,表示按照正常顺序排列。所谓正常顺序,就是我们看书写文字的顺序,从左往右,由上至下,先出现的元素,就上面或是左边。而reverse表示反转,原本从左往右应该是1-2-3的,结果显示确实3-2-1。
例如我们将此属性应用在我们一开始的分配房子的demo上的话,最后的显示就会如下缩略图——顺序反过来的: 相关CSS代码如下:
.test_box {
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
box-direction:reverse;

}
您可以狠狠地点击这里:列表顺序反转显示demo
box-align
box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”,这跟Adobe的软件中的一些“对齐”是一致的,例如化妆大师photoshop中的图层-对齐:
对齐 photoshop 其中box-align决定了垂直方向上的空间利用,也就是垂直方向上的对齐表现。为了便于记忆,我们可以拿来和CSS2中的vertical-align隐射记忆,两者都有”align”,都是都是垂直方向的对齐;而剩下的box-pack就是水平方向的了。
box的可选参数有:
start | end | center | baseline | stretch
其中stretch为默认值,为拉伸,也就是父标签高度过高,其孩子元素的高度就多高,//zxx:以后等高布局不用愁了。start表示顶边对齐,end为底部对齐,center为居中对齐,baseline表示基线(英文字母o,m,n等的底边位置线)对齐。
为了直观的知道各个值的效果,我做了个可实时查看效果的demo,您可以狠狠地点击这里:css box-align各值效果demo
点击demo左边的单选按钮组,即可查看各个属性值的效果。 例如,选中”center”这个单选按钮,结果右侧的显示如下面的截图: 其他各个属性值的效果您可以自己点击查看(非IE浏览器),这里就不一一展示效果截图了。
box-pack
box-pack决定了父标签水平遗留空间的使用,其可选值有:
start | end | center | justify
就大部分的行为表现来说分别对应text-align属性的值:left | right | center | justify;但是,之所以box-pack不使用”left”, 而是”start”,是因为box-direction属性,这玩意可以反转原本的排列,原本的“左对齐”反转后结果是“右对齐”了,此时”left”显然就词不达意了,所以使用”start”更具有概括性,就是与父标签的起始位置对齐,从而不会产生语义与行为上的困扰。
为什么使用start而不是left 张鑫旭-鑫空间-鑫生活
其中”start”是box-pack属性的默认值,justify表示两端对齐。 为了方便直观的查看各个属性值的效果,我制作了与上面类似风格的demo,您可以狠狠地点击这里:box-pack属性值效果demo
下为选中end的界面截图缩略图: 貌似发现在Firefox浏览器下,justify是没有反应的,可能还未支持。Chrome浏览器表现良好。
box-lines
box-lines是用来决定子元素是可以换行显示呢?还是就算挤出油还是单行显示。两个可选值:
single | multiple
其中single是默认值,表示死活不换行,如下图所示: 设置box-lines:multiple后,就多行显示了。不过我自己测试了下,貌似现在无论是Firefox浏览器还是Chrome都不认识box-lines:multiple属性,是暂不支持呢,还是什么什么?
您可以狠狠地点击这里:看不到换行效果的demo
五、两个遗漏的属性
子元素除了box-flex属性,还有两个属性,box-flex-group和box-ordinal-group,其中box-flex-group的作用不详,貌似目前浏览器也不支持;box-ordinal-group的作用是拉帮结派。还是上面马林大叔分房子的例子。小马女友阿凤又不消停,眼瞅着大马的房子面积比自己大好多,心里不平衡,于是,就去拉拢中马,一起打大马房子的主意。这个“拉拢”就是这里的box-ordinal-group,拉拢的组织团伙是有一个数字级别的,决定了你这个组织的位置。
数值越小,位置就越靠前,这不难理解,第一组在最前嘛,随后第二组,第三组… 例如:box-ordinal-group:1的组就会在box-ordinal-group:2的组前面显示。于是,我们可以利用这个属性改变子元素的顺序。例如下面这个例子:
HTML代码如下:

1
2
3

相关CSS如下:
.list_one {

-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
box-ordinal-group: 1;
}
.list_two{

-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
box-ordinal-group: 2;
}
结果后面两个class为”list_one”的元素跑到前面去了。如下图所示:
改变列表的显示顺序 您可以狠狠地点击这里:box-ordinal-group分组改序demo
六、实际点的应用
如果您现在浏览器地址栏中的地址中含有”www.zhangxinxu.com”字样,并且浏览器为较新的Firefox/Chrome/Safari浏览器,那么您就可以在本页面上找到我做的应用。
咔咔,我就不卖卖关子了,我改变了相关文章某一处的显示顺序,就是随机文章。
随机文章 张鑫旭-鑫空间-鑫生活
但是在本文所在的页面上,随机文章第一个显示了(由于赞不支持换行,故垂直显示了)。
随机文章顺序第一 相关CSS代码如下:
.similarity ul{display:-moz-box; display:-webkit-box; display:box; -moz-box-orient:vertical; -webkit-box-orient:vertical; -o-box-orient:vertical; box-orient:vertical; }
.similarity ul li{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; -moz-box-ordinal-group:2; -webkit-box-ordinal-group:2; box-ordinal-group:2;}
.similarity ul li:last-child{-moz-box-ordinal-group:1; -webkit-box-ordinal-group:1; box-ordinal-group:1; }
七、参考文章
My CSS Wish List
The CSS 3 Flexible Box Model
Introducing the Flexible Box Layout module
-moz-box-flex
Flexible Box Layout Module W3C Working Draft, 23 July 2009

部分H5新标签整理

整理时间:2016.6.14

H5删除了许多CSS能够代替的标签和属性 新增了许多标签和方法替换用css js实现比较复杂的方法

新增语义化标签
section(块) article aside(文章说明) figure(独立单元) header footer nav hgroup(卵)

媒体标签
video标签
audio标签
embed标签

画布标签更加强大

mark:标注标签

iframe标签
新增属性
srcdoc 可以写标签内容 覆盖链接地址显示的内容 不知道啥用
seamless表示没有边框 让样式变成页面的一部分
sandbox表示安全级别高 不允许内容部分运行JS 提交表单 而且表示内容页面与本页面脚本语言不一致
sandbox 有4个值 表示允许JS 表单 同语言 打开外部链接

javascript属性
defer页面全加载完运行
asyn异步加载 加载完就运行

全局属性 所有标签都可以用
data-type为日后可能用到的数据起个名
spellcheck表单自动纠错 比如llike->like
hidden 代替css块的display方法
tabindex表示用TAB切换的顺序 比如填写表单的位置
contenteditable表示内容可以编辑
新增js属性 window.document。designMode = “on” 表示整个页面都可以编辑 不知道有啥卵用

LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行

响应式 针对不同设备转换页面的布局形式 以适应不同的设备 而不是重新制作一个页面