Mac下安装yaf

刚刚加入了新的团队。团队里使用鸟哥惠新宸的yaf框架。于是便在自己电脑上安装了起来,稍微记录一下注意事项。题外话,我也是刚刚才了解到,鸟哥竟然是我的学长😓。。。。。。

由于之前使用的是thinkphp框架,本地的环境基本上已经搭建好了,xampp+phpstorm搞定。于是要做的,就是将yaf编译好,将其与xampp的php结合起来,即可。

先在yaf官网上面下载最新的源码,然后按照官网上的教程进行安装。http://www.laruence.com/manual/

1. 编译

官网上给出的编译步骤如下,

下载Yaf的最新版本, 解压缩以后, 进入Yaf的源码目录, 依次执行

$PHP_BIN/phpize
./configure --with-php-config=$PHP_BIN/php-config
make
make install

其中,$PHP_BIN指的是php所在的bin目录,在这我们的目录是/Applications/XAMPP/bin 同时注意需要在make和make install命令前面加上sudo。

tips

在这个过程中你可能会遇到这个问题:

Cannot find autoconf. Please check your autoconf installation and the $PHP_AUTOCONF environment variable. Then, rerun this script.

于是使用万能的homebrew来进行安装autoconf。

brew install autoconf

2. 配置

make install之后,系统会编译出一个yaf.so,并且存放在某个文件夹下面。具体存放在哪不用去了解。将yaf.so加入配置文件php.ini中。

vi /Applications/XAMPP/etc/php.ini 加入以下语句:

extension=yaf.so 使用php -m,查看yaf是否已经加入php

/Applications/XAMPP/bin/php -m
[PHP Modules]
……
省略一些模块
……
xmlwriter
xsl
yaf
zip
zlib

如果看到了yaf,就说明yaf这个模块已经载入成功了。

tips

为了使你的php用的更加方便点,可以添加一个alias进入你的.bashrc文件中

alias xamppphp='/Applications/XAMPP/bin/php'

3. 生成sample应用

按照yaf官网上面的教程,生成一份样例的yaf应用,具体步骤如下:

下载php-yaf源码

git clone https://github.com/laruence/php-yaf/ 运行代码生成工具

$PHP_YAF_SRC/tools/cg/yaf_cg sample

然后将会在$PHP_YAF_SRC/tools/cg/output下生成sample应用。

tips

将此应用移动到你的workspace目录下

4. 配置PHPstorm

按照普通项目设置run configurations即可。增加项目的PHP build-in web server,设置好项目根目录,即可。


css3备忘

本文将会着重记录一下css的高级属性与css3的几个特有的属性(其实目前就两个,有空再回来补)。

CSS3 transform 属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

translate 	定义 2D 转换
scale		定义 2D 缩放转换
rotate(angle)	定义 2D 旋转,在参数中规定角度
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。

CSS高级选择器 nth-child

:nth-child(2)选取第几个标签,“2可以是你想要的数字”
.demo01 li:nth-child(2){background:#090}

:nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同
.demo01 li:nth-child(n+4){background:#090}

:nth-child(-n+4)选取小于等于4标签
.demo01 li:nth-child(-n+4){background:#090}

:nth-child(2n)选取偶数标签,2n也可以是even
.demo01 li:nth-child(2n){background:#090}

:nth-child(2n-1)选取奇数标签,2n-1可以是odd
.demo01 li:nth-child(2n-1){background:#090}

:nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一”
.demo01 li:nth-child(3n+1){background:#090}

:last-child选取最后一个标签
.demo01 li:last-child{background:#090}

:nth-last-child(3)选取倒数第几个标签,3表示选取第3个

svg入门

连续整理几篇入门,再来一篇svg的。基本上转载自《HTML5实战——svg学习》

本文将按照以下目录进行介绍。

  • 基本形状
  • 文本与图像
  • 笔画与填充
  • 颜色的表示
  • 坐标与变换
  • 重用与引用
  • 文档结构
  • 蒙板
  • 滤镜
  • 动画
  • SVG DOM
  • svg对决canvas

转载的那篇文章排版要好很多,建议大家去那儿看。我也是在慢慢学习中。未完待续。

基本形状

右键自行查看源代码

矩形 - rect元素

x:矩形左上角的坐标(用户坐标系)的x值。
y:矩形左上角的坐标(用户坐标系)的y值。
width:矩形宽度。
height:矩形高度。
rx:实现圆角效果时,圆角沿x轴的半径。
ry:实现圆角效果时,圆角沿y轴的半径。

圆 - circle元素

r:圆的半径。
cx:圆心坐标x值。
cy:圆心坐标y值。

椭圆 - ellipse元素

rx:半长轴(x半径)。
ry:半短轴(y半径)。
cx:圆心坐标x值。
cy:圆心坐标y值。

直线 - line元素

x1:起点x坐标。
y1:起点y坐标。
x2:终点x坐标。
y2:终点y坐标。

折线 - polyline元素

折线主要是要定义每条线段的端点即可,所以只需要一个点的集合作为参数。

points:一系列的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成:"0 0, 1 1, 2 2"。

多边形 - polygon元素

这个元素就是比polyline元素多做一步,把最后一个点和第一个点连起来,形成闭合图形。参数是一样的。
points:一系列的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成:"0 0, 1 1, 2 2"。

路径 - path元素

  这个是最通用,最强力的元素了;使用这个元素你可以实现任何其他的图形,不仅包括上面这些基本形状,也可以实现像贝塞尔曲线那样的复杂形状;此外,使用path可以实现平滑的过渡线段,虽然也可以使用polyline来实现这种效果,但是需要提供的点很多,而且放大了效果也不好。这个元素控制位置和形状的只有一个参数:
d:一系列绘制指令和绘制参数(点)组合成。

绘制指令分为绝对坐标指令和相对坐标指令两种,这两种指令使用的字母是一样的,就是大小写不一样,绝对指令使用大写字母,坐标也是绝对坐标;相对指令使用对应的小写字母,点的坐标表示的都是偏移量。

指令说明

M
x y
将画笔移动到点(x,y)

L
x y
画笔从当前的点绘制线段到点(x,y)
H
x 
画笔从当前的点绘制水平线段到点(x,y0)

V
y 
画笔从当前的点绘制竖直线段到点(x0,y)

A
rx ry x-axis-rotation large-arc-flag sweep-flag x y
画笔从当前的点绘制一段圆弧到点(x,y)

C
x1 y1, x2 y2, x y
画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)

S
x2 y2, x y
特殊版本的三次贝塞尔曲线(省略第一个控制点)

Q
x1 y1, x y 
绘制二次贝塞尔曲线到点(x,y)

T
x y
特殊版本的二次贝塞尔曲线(省略控制点)

Z
无参数
绘制闭合图形,如果d属性不指定Z命令,则绘制线段,而不是封闭图形。

移动画笔指令M,画直线指令:L,H,V,闭合指令Z都比较简单;下面重点看看绘制曲线的几个指令。

绘制圆弧指令

A  rx ry x-axis-rotation large-arc-flag sweep-flag x y
  用圆弧连接2个点比较复杂,情况也很多,所以这个命令有7个参数,分别控制曲线的的各个属性。下面解释一下数值的含义:
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation 是此段弧所在的x轴与水平方向的夹角,即x轴的逆时针旋转角度,负数代表顺时针转动的角度。
large-arc-flag 为1 表示大角度弧线,0 代表小角度弧线。
sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向,0 代表逆时针方向。
x,y 是弧终端坐标。
  前两个参数和后两个参数就不多说了,很简单;下面就说说中间的3个参数: _

x-axis-rotation代表旋转的角度
large-arc-flag和sweep-flag控制了圆弧的大小和走向,体会下面例子中圆弧的不同:

绘制三次贝塞尔曲线指令:C x1 y1, x2 y2, x y

  三次贝塞尔曲线有两个控制点,就是(x1,y1)和(x2,y2),最后面(x,y)代表曲线的终点。体会下面的例子:

特殊版本的三次贝塞尔曲线:S x2 y2, x y

  很多时候,为了绘制平滑的曲线,需要多次连续绘制曲线。这个时候,为了平滑过渡,常常第二个曲线的控制点是第一个曲线控制点在曲线另外一边的映射点。这个时候可以使用这个简化版本。这里要注意的是,如果S指令前面没有其他的S指令或C指令,这个时候会认为两个控制点是一样的,退化成二次贝塞尔曲线的样子;如果S指令是用在另外一个S指令或者C指令后面,这个时候后面这个S指令的第一个控制点会默认设置为前面的这个曲线的第二个控制点的一个映射点,体会一下:

上面的S指令只有第二个控制点,第一个控制点采用了前面的曲线指令的第二个控制点的一个映射点。

绘制二次贝塞尔曲线指令:Q x1 y1, x y , T x y (特殊版本的二次贝塞尔曲线)

  二次贝塞尔曲线只有一个控制点(x1,y1),通常如下图所示:   如果是连续的绘制曲线,同样可以使用简化版本T。同样的,只有T前面是Q或者T指令的时候,后面的T指令的控制点会默认设置为前面的曲线的控制点的映射点,体会一下:

  

同样的,如果T指令前面不是Q或者T指令,则认为无控制点,画出来的是直线。

相对坐标绘制指令

  与绝对坐标绘制指令的字母是一样的,只不过全部是小写表示。这组指令的参数中涉及坐标的参数代表的是相对坐标,意思就是参数代表的是从当前点到目标点的偏移量,正数就代表向轴正向偏移,负数代表向反向偏移。不过对Z指令来说,大小写没有区别。

  这里要注意,绝对坐标指令与相对坐标指令是可以混合使用的。有时混合使用可以带来更灵活的画法。

SVG path绘制注意事项:   绘制带孔的图形时要注意:外层边的绘制需要是逆时针顺序的,里面的洞的边的顺序必须是顺时针的。只有这样绘制的图形填充效果才会正确。   

文本与图像

 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件。任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行。  此外,可以使用 tspan 元素可以将文本元素分成几部分,允许每部分有各自的样式。

  还有,在text元素中,空格的处理与HTML类似:换行和回车变成空格,而多个空格压缩成单个空格。   

直接显示在图片中的文本 - text元素

  直接显示文本,可以使用text元素,例子如下:

这是文字
  • x,y是文本位置坐标。
  • text-anchor是文本显示的方向,其实也就是位置(x,y)处于文本的位置。这个属性有start,middle和end三种值。
  • start表示文本位置坐标(x,y)位于文本的开始处,文本从这点开始向右挨个显示。
  • middle表示(x,y)位于文本中间处,文本向左右两个方向显示,其实就是居中显示。
  • end表示(x,y)点位于文本结尾,文本向左挨个显示。   除了这些属性,下面的这些属性都既可以在CSS中指定,也可以直接在属性中指定:

    fill,stroke:填充和描边颜色,具体使用在后面总结。 font的相关属性:font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration。

文本区间 - tspan元素

  这个元素是text元素的强力补充;它用于渲染一个区间内的文本;它只能出现在text元素或者tspan元素的子元素中。典型的用法就是强调显示部分文本。例如:

This is bold and red

tspan元素有下列的属性可以设置:

x,y用于设置包含的文本的绝对坐标值,这个值会覆盖默认的文本位置。这些属性可以包含一系列数字,这些数字会应用到每个对应的单个字符。没有对应设置的字符会紧跟前一个字符。例如:

Hello World! This is bold and red

dx,dy用于设置包含的文本相对于默认的文本位置的偏移量。这些属性同样可以包含一系列数字,每个都会应用到对应的字符。没有对应设置的字符会紧跟前一个字符。你可以把上面的例子中的x换成dx看看效果。

rotate用于设置字体的旋转角度。这个属性页可以包含一系列数字,应用到每个字符。没有对应设置的字符会使用最后设置的那个数字。

Hello World! This is bold and red

textLength:这是最令人费解的属性,据说设置完以后,渲染发现文本的长度与这个值不一致时,会以这个长度为准。但是我没有试出来效果。

文本引用 - tref元素

  这个元素允许引用定义过的文本,并高效的拷贝到当前位置,通常配合xlink:href指定目的元素。因为是拷贝过来的,所以使用css修改当前文本的时候,不会修改原来的文本。看例子:

This is an example text.

文本路径 - textPath元素

  这个比较有意思,效果也很酷,能做出很多的艺术效果;这个元素从它的xlink:href属性获取指定的路径并把文本对齐到这个路径上,看例子:

This text follows a curve.

SVG中渲染图片 - image元素

  SVG中的image元素可以直接支持显示光栅图片,使用很简单。看下面的例子:

这里需要注意几点: 1.如果没有设置x或y坐标,则默认是0。

2.如果没有设置width或height,则默认也是0.

3.如果显式的设置width或height为0,则会禁止渲染这幅图片。

4.图片的格式支持png,jpeg,jpg,svg等等,所以svg是支持嵌套svg的。

5.image与其他元素一样,是svg的常规元素,所以它支持所有的裁剪,蒙板,滤镜,旋转等效果。

笔画与填充

上面例子中画了一个红色蓝边的矩形。注意几点:

  1. 如果不提供fill属性,则默认会使用黑色填充,如果要取消填充,需要设置成none。
  2. 可以设置填充的透明度,就是fill-opacity,值的范围是0到1。
  3. 稍微复杂一点的是fill-rule属性。这个属性定义了判断点是不是属于填充范围的算法;除了inherit这个值外,还有两个取值:

nonzero:这个值采用的算法是:从需要判定的点向任意方向发射线,然后计算图形与线段交点的处的走向;计算结果从0开始,每有一个交点处的线段是从左到右的,就加1;每有一个交点处的线段是从右到左的,就减1;这样计算完所有交点后,如果这个计算的结果不等于0,则该点在图形内,需要填充;如果该值等于0,则在图形外,不需要填充。看下面的示例:

evenodd:这个值采用的算法是:从需要判定的点向任意方向发射线,然后计算图形与线段交点的个数,个数为奇数则改点在图形内,需要填充;个数为偶数则点在图形外,不需要填充。看下图的示例:

边框色 - stroke属性

  上面的例子中已经用到了stroke属性,这个属性使用设置的值画图形的边框,使用起来也很直接,把颜色值赋给它就可以了。注意:

  1. 如果不提供stroke属性,则默认不绘制图形边框。
  2. 可以设置边的透明度,就是stroke-opacity,值的范围是0到1。

实际上,边的情况比图形内部稍微复杂一点,因为边除了颜色,还有”形状”需要定义。

线的端点 - stroke-linecap属性

  这个属性定义了线段端点的风格,这个属性可以使用butt,square,round三个值。看例子:

线的连接 - stroke-linejoin属性

  这个属性定义了线段连接处的风格,这个属性可以使用miter,round,bevel三个值。看例子:

线的虚实 - stroke-dasharray属性

  这个属性可以设置线段采用何种虚实线。看例子:

这个属性是设置一些列数字,不过这些数字必须是逗号隔开的。属性中当然可以包含空格,但是空格不作为分隔符。每个数字定义了实线段的长度,分别是按照绘制、不绘制这个顺序循环下去。

除了这些常用的属性,还有下列属性可以设置:
stroke-miterlimit:这个和canvas中的一样,它处理什么时候画和不画线连接处的miter效果。
stroke-dashoffset:这个属性设置开始画虚线的位置。

使用CSS展示数据

  HTML5强化了DIV+CSS的思想,所以展示数据的部分还可以交给CSS处理。与普通HTML元素相比,只不过是 background-color和border换成了fill和stroke。其他的大多都差不多。简单看个例子:

#MyRect:hover {
   stroke: black;
   fill: blue;
 }

颜色的表示

SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性。 基本有下面这些定义颜色的方式:

  1. 颜色名字: 直接使用颜色名字red, blue, black…
  2. rgba/rgb值: 这个也很好理解,例如#ff0000,rgba(255,100,100,0.5)。
  3. 十六进制值: 用十六进制定义的颜色,例如#ffffff。
  4. 渐变值:这个也与canvas中一样,支持两种渐变色:线性渐变,环形渐变。
  5. 图案填充:使用自定义的图案作为填充色。

线性渐变

  使用linearGradient元素即可定义线性渐变,每一个渐变色成分使用stop元素定义。看下面的例子:

<svg width="120" height="240">  
 <defs>  
    <linearGradient id="Gradient1">  
      <stop class="stop1" offset="0%"/>  
      <stop class="stop2" offset="50%"/>  
      <stop class="stop3" offset="100%"/>  
    </linearGradient>  
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">  
      <stop offset="0%" stop-color="red"/>  
      <stop offset="50%" stop-color="black" stop-opacity="0"/>  
      <stop offset="100%" stop-color="blue"/>  
    </linearGradient>  
    <style type="text/css"><![CDATA[  
       #rect1 { fill: url(#Gradient1); }  
       .stop1 { stop-color: red; }  
       .stop2 { stop-color: black; stop-opacity: 0; }  
       .stop3 { stop-color: blue; }  
     ]]>
    </style>  
  </defs>  
    
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>  
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>     
</svg>  

在这个例子中,我们需要注意:

  1. 渐变色元素必须要放到defs元素中;
  2. 需要给渐变色元素设置id值,否则的话,别的元素无法使用这个渐变色。
  3. 渐变色的成员使用stop定义,它的属性也可以使用CSS定义;它支持class,id这种标准HTML都支持的属性。其它常用属性如下: offset属性:这个定义了该成员色的作用范围,该属性取值从0%到100%(或者是0到1);通常第一种颜色都是设置成0%,最后一种设置成100%。 stop-color属性:这个很简单,定义了该成员色的颜色。 stop-opacity属性:定义了成员色的透明度。 x1,y1,x2,y2属性:这两个点定义了渐变的方向,默认不写的话是水平渐变,上面例子中同时也创建了一个垂直渐变。
  4. 渐变色的使用,如例子中所示,直接用url(#id)的形式赋值给fill或者stroke就可以了。
  5. 渐变色成员的复用:你也可以使用xlink:href引用定义过的渐变色成员,所以上面的例子也可以改写如下:

     <linearGradient id="Gradient1">  
        <stop class="stop1" offset="0%"/>  
        <stop class="stop2" offset="50%"/>  
        <stop class="stop3" offset="100%"/>  
     </linearGradient> 
     <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" xlink:href="#Gradient1"/>
    

环形渐变

  使用radialGradient元素定义环形渐变,还是使用stop定义成员色。看例子:

<svg width="120" height="240">
  <defs>
      <radialGradient id="Gradient3">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
      <radialGradient id="Gradient4" cx="0.25" cy="0.25" r="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
  </defs>
 
  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient3)"/> 
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient4)"/> 
</svg>

​   从上面的例子看到,除了元素名字和一些特别的成员,其他的所有都和线性渐变一样,包括stop的定义,必须放到defs中,必须给它设置id,使用url(#id)去赋值等。这些特别的成员如下: 

offset属性:这个和线性渐变的值是一样,但是含义不一样。在环形渐变中,0%代表圆心处,这个很好理解
cx,cy,r属性:其实也很好理解,环形渐变,当然要定义环的圆心和半径了,体会一下上面例子中圆的大小和位置就能理解了
fx,fy属性:定义颜色中心(焦点)处的位置,也就是渐变色最浓处的坐标,在上面例子中,红色最红的是圆心,这是默认效果;如果想改变一下,就可以设置fx,fy坐标值。

  不过这里需要注意一下上面cx,cy,r,fx,fy的值,你会发现它们都是小数,那么单位是什么呢?   这个需要先了解另外一个相关的属性:gradientUnits,它定义了定义渐变色使用的坐标单位。这个属性有2个可用值:userSpaceOnUse和objectBoundingBox。

  objectBoundingBox是默认值,它使用的坐标都是相对于对象包围盒的(方形包围盒,不是方形包围盒的情况比较复杂,略过),取值范围是0到1。例如上例中的cx,cy的坐标值(0.25,0.25)。意味着这个圆心是在包围盒的左上角1/4处,半径0.25意味着半径长是对象方形包围盒长的1/4,就像你们图中看到的那样。   userSpaceOnUse表示使用的是绝对坐标,使用这个设置的时候,你必须要保证渐变色和填充的对象要保持在一个位置。   再看下面这个例子,注意gradientUnits属性默认值是objectBoundingBox:

<svg width="120" height="120">
  <defs>
      <radialGradient id="Gradient5"
            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
  </defs>
 
  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
        fill="url(#Gradient5)" stroke="black" stroke-width="2"/>

  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> 
</svg>

  此外,还有渐变色元素还有一些变换的属性,如gradientTransform,这个不是这里的重点,后面会总结变换。   另外一个可能用到的属性是spreadMethod属性,这个属性定义了渐变色到达它的终点时应该采取的行为。该属性有3个可选值:pad(默认值),reflect,repeat。pad不用说了,属于自然过渡,渐变色结束以后,使用最后一个成员色直接渲染对象剩下的部分。refect会让渐变色继续,只不过渐变色会反向继续渲染,从最后一个颜色开始到第一个颜色这个顺序渲染;等到再次到达渐变色终点时,再反序,如此这般指导对象填充完毕。repeat也会让渐变色继续渲染,但是不会反序,还是一遍一遍从第一种颜色到最后一种颜色渲染。

  看一段重复渲染的代码:

纹理填充

  纹理填充也是一种流行的填充方式,在SVG中,可以使用pattern创建一个纹理,然后用这个pattern去填充别的对象。直接看例子:

例子看起来很简单,由渐变色创建pattern,然后使用pattern

填充矩形。这里需要注意:

  1. 不同的浏览器填充这个pattern的时候效果不一样。 比如例子在FireFix和Chrome中效果一样。但是如果你把渐变色 和pattern定义在同一个defs组合里,则FireFox仍然能正常渲染, 但是Chrome就识别不了渐变色,只会用默认的黑色填充。
  2. pattern也需要定义id。
  3. pattern也必须要定义在defs中。
  4. pattern的使用也是把url(#id)直接赋值给fill或stroke。

  上面这些都是很简单的,我们重点看一下例子中的坐标表示情况,坐标在pattern中比较复杂。   pattern中包含两个相关属性:patternUnits和patternContentUnits属性;这两个属性的取值都还是只有2个:objectBoundingBox和userSpaceOnUse,这两个值的含义上面以及讲过了。这里容易混淆的是这  两个属性的默认值不同,但是当你理解这么做的原因以后,你又会发现这么做还真是有道理。

  1. patternUnits属性   这个属性与Gradient的gradientUnits属性是一样的,默认采用objectBoundingBox。受这个属性影响的属性有x,y,width,height,这4个属性分别定义了pattern的起点,宽高度。它们都采用了相对值,例子中想要在水平和竖直方向上都填充4次,所以width和height都设为了0.25。
  2. patternContentUnits属性   这个属性的默认值正好相反,采用userSpaceOnUse。这个属性描述了pattern中绘制的形状(比如上面的rect,circle)的坐标系统。也就是说在默认情况下,你在pattern中绘制的形状和pattern自身的大小/位置使用了不一样的坐标系。考虑上面例子中的情况,我们想填充一个200200的矩形,而且每个方向重复4次。这就意味着每个pattern是5050的,那么pattern里面的两个矩形和一个圆形就是画在这个50*50的矩形中。这样我们就能理解上面pattern中的矩形和圆的坐标了。此外,这个例子中的pattern为了居中,需要偏移10px后开始渲染,而这个值是受patternUnits属性制约的,所以默认情况下,x,y值就为:10/200=0.05。  那么pattern为什么要这么设置两个属性的默认值呢?

这是由用户的使用决定的(以上面的例子来讨论):

  第一种pattern样式:我想这是大多数情况,所以处理成默认值:pattern是会随着外面的图形缩放而被拉伸,不管外围方形是多大,pattern始终在两个方向上都会被填充4次。但是pattern中包含的图形是不会随着外面被填充的方形缩放而进行拉伸的。虽然比较牵强,但就这么理解吧。
  第二种pattern样式:pattern中的形状也随着外围的形状缩放进行拉伸。我们可以显示的把patternContentUnits属性的值也设为objectBoundingBox达到这个效果。例如把pattern的部分修改如下:

修改后,当改变被填充的矩形的大小时,pattern中的形状也会进行拉伸。而且修改后改成了相对外围对象的坐标,所以不再需要pattern的x和y坐标了,pattern会始终调整以适合被填充的形状。

  第三种pattern的样式:pattern的形状和大小都是固定了,不管外围对象怎么缩放,你可以把坐标系统都改成userSpaceOnUse实现这个效果。代码如下:

坐标与变换


参考资料:

http://www.cnblogs.com/duanhuajian/archive/2013/07/31/3227410.html

实用参考:


sass备忘

本文并不是科普性文章,主要是个人的资料收集和备忘。文章大部分转载自《SegmentFault - CSS 强化装备!Sass 安装与使用》《阮一峰 - SASS用法指南》,需要入门的请移步这两篇文章。

安装配置

注意提前翻墙,或者使用淘宝 RubyGems 镜像

gem install sass

按回车键确认,等待一段时间就会提示 Sass 安装成功。最后使用版本查看命令确保安装成功:

sass -v

scss和sass

  • 文件扩展名不同。 Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名;
  • 语法书写方式不同。 Sass 是以严格的缩进式语法规则来书写,不带大括号“{}”和分号“;”,而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

sass转换成css

sass test.scss
sass test.scss test.css
sass --style compressed test.scss test.min.css
// 监听文件
sass --watch input.scss:output.css

// 监听目录 
sass --watch sassFileDirectory:cssFileDirectory

Sass 提供四个编译风格的选项:

  • nested: 嵌套缩进的css代码,它是默认值;
  • expanded: 没有缩进的、扩展的css代码;
  • compact: 简洁格式的css代码;
  • compressed:压缩后的css代码。

基本语法

1.变量

SASS允许使用变量,所有变量以$开头。

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。border-#{$side}-radius: 5px;

2.嵌套

ul {    
   li {
       display: inline-block;
   }
}

在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

a {
   &:hover { color: #ffb3ff; }
  }

3.导入

 @import "path/filename.scss";

4.mixin

Sass 中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。从此处理 CSS 3 的前缀兼容轻松便捷。

//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
    -webkit-box-sizing: $sizing;
       -moz-box-sizing: $sizing;
           -box-sizing: $sizing;
}
.box-border {
    border: 1px solid #ccc;
    @include box-sizing(border-box);
}

//css style
//-----------------------------------
.box-border {
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
           -box-sizing: border-box; 
}

5.扩展/继承

Sass 可通过 @extend 来实现代码组合声明,使代码更加优越简洁。

//sass style
//-----------------------------------
.bar-left {
    border: 1px solid #ccc;
}
.bar-right {
    @extend .bar-left;
    color: #999;
}

//css style
//-----------------------------------
.bar-left, .bar-right {
    border: 1px solid #ccc; 
}
.bar-right {
    color: #999; 
}

6.运算

Sass 可进行简单的加减乘除运算等。

//sass style
//-----------------------------------
$defaultFontSize: 10px;
.msg {
    position: absolute;
    top: (800px/2);
    left: 200px + 200px;
    font-size: $defaultFontSize * 2;
}

//css style
//-----------------------------------
.msg {
    position: absolute;
    top: 400px;
    left: 400px;
    font-size: 20px; 
}

7.颜色函数

SASS提供了一些内置的颜色函数,以便生成系列颜色。

  lighten(#cc3, 10%) // #d6d65c
  darken(#cc3, 10%) // #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c

8.注释

Sass 共有两种注释风格。

标准的 CSS 注释 /* comment /,会保留到编译后的文件
单行注释 // comment,只保留在 SASS 源文件中,编译后会被省略。
提示:在/
后面加一个感叹号,表示这是“重要注释”。即使是压缩模式编译,也会保留这行注释。通常可以用于声明版权。

/*!
    重要注释!
*/

高级用法

条件语句

  @if lightness($color) > 30% {
    background-color: #000;
  } @else {
    background-color: #fff;
  } ### 循环语句 SASS支持for循环:

  @for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }

也支持while循环:

  $i: 6;
  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  } each命令,作用与for类似:

  @each $member in a, b, c, d {
    .#{$member} {
      background-image: url("/image/#{$member}.jpg");
    }
  }

自定义函数

SASS允许用户编写自己的函数。

  @function double($n) {
    @return $n * 2;
  }
  #sidebar {
    width: double(5px);
  }

php备忘

同上一篇javascript入门,用了这么久的PHP,也还没正经地总结过。记录些容易忘记的。本文的信息并不完整。

基本知识

语法

PHP 脚本以 <?php 开头,以 ?> 结尾。
PHP 支持三种常见注释:`//` `#` 和`/* */`。
PHP 大小写敏感,类型松散的语言。
变量$,常量const(php5+),define("x",200)(php4-).函数function xxx。

有三种不同的变量作用域:local(局部)global(全局)static(静态)
数据类型:字符串、整数、浮点数、逻辑、数组、对象class、null。
逻辑运算,与或非 && || !

echo - 能够输出一个以上的字符串.
print - 只能输出一个字符串,并始终返回 1

字符串

strlen();			// 计算长度
strpos($str,'o');	// 计算位置
substr($str, 2, 3);	// 截取字符串
str_split($str,2);	// 分割字符串
explode(' ',$str);	// 分割字符串
$str.'some string';	// 连接字符串.,直接吧变量包含在""内也OK
print_r();

数组

PHP的数组可以存所有类型的数据

位置的方式初始化

$myArr = array("Volvo","BMW","SAAB");
$myArr = array();
myArr[0] = 'hello';

key-value的方式初始化(PHP的数组不仅可以当数组用,还可以当map用)

$myArr=array("Peter"=>"35","Ben"=>"37","Joe"=>"43");
$myArr=array(0=>"35","Ben"=>"37","Joe"=>"43");
myArr[kv] = 'key-value';

array_push($str,"text");

数组内容用var_dump查看如下

array(3) {
  [0] => string(5) "Volvo"
  [1] => string(3) "BMW"
  [2] => string(4) "SAAB"
}

对象

后续待补…

object(medoo)#6 (13) {
  ["database_type":protected] => string(5) "mysql"
  ["charset":protected] => string(4) "utf8"
  ["database_name":protected] => string(3) ""
  ["server":protected] => string(9) "localhost"
  ["username":protected] => string(4) "root"
  ["password":protected] => string(14) ""
  ["database_file":protected] => NULL
  ["socket":protected] => NULL
  ["port":protected] => NULL
  ["option":protected] => array(0) {
  }
  ["logs":protected] => array(0) {
  }
  ["debug_mode":protected] => bool(false)
  ["pdo"] => object(PDO)#7 (0) {
  }
}

语句

常用的语句,外加foreach

foreach(array_expression as $value) statement
foreach(array_expression as $key => $value) statement

类(php5添加的)

include		加载失败显示warning(包含)
require		加载失败显示error(依赖)
require_once	加载一次

require 'myNamespace/xxx.php'

class Hello{
	const constNum = 200;
	private $_age,$_name;
	
	public funciton __construct($age,$name){
		$this->_age = $age;
		...
	}
	public function helloPHP(){ _age......}
	public static function staticPHP(){ Hello::constNum......}
}

$h = new \myNamespace\Hello();
$h->helloPHP();

Hello::staticPHP();
Hello::constNum;

​ // 继承 class newHello extends Hello(){ public funciton __construct($age,$name){ parent::__construct($age,$name) … } }

常用函数

时间函数

time()
date() ### json
json数据是一串字符串,它们包含json数组与json对象,区别是:
数组里都是单个的值,对象是key-value。
数组:
[1,2,3,{"h":"hello"},[7,8,9]]
对象:
{"t":"test","k":"value",[12,34]}

数组里可以存对象,对象里也可以存数组。

json_encode	
json_decode($json)	// 转为对象
json_decode($json,true)// 转为数组

文件操作

写:

$f = fopen("date","w");
fwrite($f,'string');
fclose($f);

$f = @fopen("date","w"); //取消警告

读:

$f = fopen("date","w");
$content = fgets($f);	// 读取一行
// 一直读
while(!feof($$f)){
}

echo $content;
fclose($f);
或者
$allContent = file_get_contents('fileName');

会话管理

cookie
session

javascript入门

最近使用javascript的频率比较多,是不是会和PHP弄混。于是记录一些简单的信息信息,避免每次都去查阅手册。注意,这并不是一个完整的入门教程,例如我不会在本文包含最基础的加减乘除此类的信息。

目录

  1. 基本知识
  2. js 对象
  3. DOM 文档对象模型
  4. BOM 浏览器对象模型

1 基本知识

JavaScript 是因特网上最流行的脚本语言。

  1. 语法
  2. 变量
  3. 数据类型
  4. 对象Object
  5. 语句
  6. 函数
  7. 运算

1.1 语法

<script> 和 </script> 之间的代码行包含了 JavaScript
<script type="text/javascript" src="jq.js ></script>

分号用于分隔 JavaScript 语句
JavaScript 对大小写是敏感的。
javascript是动态类型

单行注释以 // 开头。
多行注释以 /* 开始,以 */ 结尾。

1.2 变量

var name="Gates",
age=56,
job="CEO";

未使用值来声明的变量,其值实际上是 undefined。

JavaScript 中的所有事物都是对象(拥有属性和方法)。

变量类型有:数据类型,字符串、数字、布尔、数组、对象、Null、Undefined。

1.3 数据类型

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array("hello","world","2");
var person= new Object;

var myString = "hello";
var i1 = 3.2;
var flag = true;
var arr=["Hello","world"];	// 静态定义(相同数据类型的集合)
var arr2= new Array("hello","world","2"); // 
var cars= new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

数组的显示是[]包裹(使用console.log查看)

1.4 对象Object

对象的显示是{}包裹。(使用console.log查看)

// 这个people将会以全局方式村子啊。如果加一个var,那就是局部的。
people = new Object();
people.name = 'bill';
people.age = 13;

或者这么定义:

people = {name:"bill",age:30};

或者使用函数来定义一个类对象。

function people(name,age){
	this._name = name;
	this._age = age;
}
son = new people('bill',23);

1.5 语句

if else
for
while
switch case
try catch

for (变量x in 对象array)
{
    在此执行代码
    array[x];
}

1.6 函数

通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。 如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

function demo(a,b){}

// 两种调用方法
1. demo();
2. <button onclick="demo()"></button>

1.7 运算

如果把数字与字符串相加,结果将成为字符串。

有一个比较特别的运算符 === ,给定 x=5

===	全等(值和类型)	x===5 为 true;x==="5" 为 false

2 JS 对象

  1. JS Array
  2. JS Boolean
  3. JS Date
  4. JS Math
  5. JS Number
  6. JS String
  7. JS RegExp
  8. JS Functions

2.1 Array 对象

属性
constructor	返回对创建此对象的数组函数的引用。
length	设置或返回数组中元素的数目。
prototype	使您有能力向对象添加属性和方法。

方法
concat()	连接两个或更多的数组,并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素,并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素,并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串,并返回结果。
toLocaleString()	把数组转换为本地数组,并返回结果。
unshift()	向数组的开头添加一个或更多元素,并返回新的长度。
valueOf()	返回数组对象的原始值

2.2 Boolean 对象

属性
constructor	返回对创建此对象的 Boolean 函数的引用
prototype	使您有能力向对象添加属性和方法。

方法
toSource()	返回该对象的源代码。
toString()	把逻辑值转换为字符串,并返回结果。
valueOf()	返回 Boolean 对象的原始值。

2.3 Date 对象

属性
constructor	返回对创建此对象的 Date 函数的引用。
prototype	使您有能力向对象添加属性和方法。

方法
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()	返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份(四位数字)。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份(四位数字)。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	请使用 toUTCString() 方法代替。
toUTCString()	根据世界时,把 Date 对象转换为字符串。
toLocaleString()	根据本地时间格式,把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式,把 Date 对象的日期部分转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

2.4 Math 对象

属性
E	返回算术常量 e,即自然对数的底数(约等于2.718)。
LN2	返回 2 的自然对数(约等于0.693)。
LN10	返回 10 的自然对数(约等于2.302)。
LOG2E	返回以 2 为底的 e 的对数(约等于 1.414)。
LOG10E	返回以 10 为底的 e 的对数(约等于0.434)。
PI	返回圆周率(约等于3.14159)。
SQRT1_2	返回返回 2 的平方根的倒数(约等于 0.707)。
SQRT2	返回 2 的平方根(约等于 1.414)。

方法
abs(x)	返回数的绝对值。
acos(x)	返回数的反余弦值。
asin(x)	返回数的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 e 的指数。
floor(x)	对数进行下舍入。
log(x)	返回数的自然对数(底为e)。
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。
toSource()	返回该对象的源代码。
valueOf()	返回 Math 对象的原始值。

2.5 Number 对象

属性
constructor	返回对创建此对象的 Number 函数的引用。
MAX_VALUE	可表示的最大的数。
MIN_VALUE	可表示的最小的数。
NaN	非数字值。
NEGATIVE_INFINITY	负无穷大,溢出时返回该值。
POSITIVE_INFINITY	正无穷大,溢出时返回该值。
prototype	使您有能力向对象添加属性和方法。

方法
toString	把数字转换为字符串,使用指定的基数。
toLocaleString	把数字转换为字符串,使用本地数字格式顺序。
toFixed	把数字转换为字符串,结果的小数点后有指定位数的数字。
toExponential	把对象的值转换为指数计数法。
toPrecision	把数字格式化为指定的长度。
valueOf	返回一个 Number 对象的基本数字值。

2.6 String字符串对象

属性
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

方法
anchor()	创建 HTML 锚。
big()	用大号字体显示字符串。
blink()	显示闪动字符串。
bold()	使用粗体显示字符串。
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接字符串。
fixed()	以打字机文本显示字符串。
fontcolor()	使用指定的颜色来显示字符串。
fontsize()	使用指定的尺寸来显示字符串。
fromCharCode()	从字符编码创建一个字符串。
indexOf()	检索字符串。
italics()	使用斜体显示字符串。
lastIndexOf()	从后向前搜索字符串。
link()	将字符串显示为链接。
localeCompare()	用本地特定的顺序来比较两个字符串。
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
slice()	提取字符串的片断,并在新的字符串中返回被提取的部分。
small()	使用小字号来显示字符串。
split()	把字符串分割为字符串数组。
strike()	使用删除线来显示字符串。
sub()	把字符串显示为下标。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
sup()	把字符串显示为上标。
toLocaleLowerCase()	把字符串转换为小写。
toLocaleUpperCase()	把字符串转换为大写。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toSource()	代表对象的源代码。
toString()	返回字符串。
valueOf()	返回某个字符串对象的原始值。

2.7 RegExp 对象

直接语法 /pattern/attributes

创建 RegExp 对象的语法 new RegExp(pattern, attributes)

修饰符	
i	执行对大小写不敏感的匹配。
g	执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m	执行多行匹配。

表达式	
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red|blue|green)	查找任何指定的选项。

元字符	
.	查找单个字符,除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词	
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

属性		
global	RegExp 对象是否具有标志 g。	
ignoreCase	RegExp 对象是否具有标志 i。	
lastIndex	一个整数,标示开始下一次匹配的字符位置。	
multiline	RegExp 对象是否具有标志 m。	
source	正则表达式的源文本。	

方法		
compile	编译正则表达式。	
exec	检索字符串中指定的值。返回找到的值,并确定其位置。	
test	检索字符串中指定的值。返回 true 或 false。	

支持正则表达式的 String 对象的方法
方法		
search	检索与正则表达式相匹配的值。	
match	找到一个或多个正则表达式的匹配。	
replace	替换与正则表达式匹配的子串。	
split	把字符串分割为字符串数组。

2.8 全局对象

函数
decodeURI()	解码某个编码的 URI。
decodeURIComponent()	解码一个编码的 URI 组件。
encodeURI()	把字符串编码为 URI。
encodeURIComponent()	把字符串编码为 URI 组件。
escape()	对字符串进行编码。
eval()	计算 JavaScript 字符串,并把它作为脚本代码来执行。
getClass()	返回一个 JavaObject 的 JavaClass。
isFinite()	检查某个值是否为有穷大的数。
isNaN()	检查某个值是否是数字。
Number()	把对象的值转换为数字。
parseFloat()	解析一个字符串并返回一个浮点数。
parseInt()	解析一个字符串并返回一个整数。
String()	把对象的值转换为字符串。
unescape()	对由 escape() 编码的字符串进行解码。

属性
Infinity	代表正的无穷大的数值。
java	代表 java.* 包层级的一个 JavaPackage。
NaN	指示某个值是不是数字值。
Packages	根 JavaPackage 对象。
undefined	指示未定义的值。

3 DOM 文档对象模型

  1. DOM 简介
  2. DOM 对象
  3. DOM 事件
  4. DOM HTML
  5. DOM CSS

3.1 DOM简介

DOM 是 W3C(万维网联盟)的标准。

JavaScript 能够改变页面中的所有 HTML 元素、 属性、CSS 样式,并且能够对页面中的所有事件做出反应。

3.2 DOM 对象

document对象

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

方法
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。

属性
body
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL		返回当前文档的 URL。

集合
all[]	提供对文档中所有 HTML 元素的访问。
anchors[]	返回对文档中所有 Anchor 对象的引用。
applets	返回对文档中所有 Applet 对象的引用。
forms[]	返回对文档中所有 Form 对象引用。
images[]	返回对文档中所有 Image 对象引用。
links[]	返回对文档中所有 Area 和 Link 对象引用。

在这里顺带说一下jQuery,获取对象的方法为:

$("button").text(xxx);
$("#id").text(xxx);
$(".class").text();

element对象

在 HTML DOM 中,Element 对象表示 HTML 元素。 换一种说法,从document对象中的id、标签名或者类名找到的元素,就称为element对象。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

属性 / 方法
element.accessKey	设置或返回元素的快捷键。
element.appendChild()	向元素添加新的子节点,作为最后一个子节点。
element.attributes	返回元素属性的 NamedNodeMap。
element.childNodes	返回元素子节点的 NodeList。
element.className	设置或返回元素的 class 属性。
element.clientHeight	返回元素的可见高度。
element.clientWidth	返回元素的可见宽度。
element.cloneNode()	克隆元素。
element.compareDocumentPosition()	比较两个元素的文档位置。
element.contentEditable	设置或返回元素的文本方向。
element.dir	设置或返回元素的文本方向。
element.firstChild	返回元素的首个子。
element.getAttribute()	返回元素节点的指定属性值。
element.getAttributeNode()	返回指定的属性节点。
element.getElementsByTagName()	返回拥有指定标签名的所有子元素的集合。
element.getFeature()	返回实现了指定特性的 API 的某个对象。
element.getUserData()	返回关联元素上键的对象。
element.hasAttribute()	如果元素拥有指定属性,则返回true,否则返回 false。
element.hasAttributes()	如果元素拥有属性,则返回 true,否则返回 false。
element.hasChildNodes()	如果元素拥有子节点,则返回 true,否则 false。
element.id	设置或返回元素的 id。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.isContentEditable	设置或返回元素的内容。
element.isDefaultNamespace()	如果指定的 namespaceURI 是默认的,则返回 true,否则返回 false。
element.isEqualNode()	检查两个元素是否相等。
element.isSameNode()	检查两个元素是否是相同的节点。
element.isSupported()	如果元素支持指定特性,则返回 true。
element.lang	设置或返回元素的语言代码。
element.lastChild	返回元素的最后一个子元素。
element.namespaceURI	返回元素的 namespace URI。
element.nextSibling	返回位于相同节点树层级的下一个节点。
element.nodeName	返回元素的名称。
element.nodeType	返回元素的节点类型。
element.nodeValue	设置或返回元素值。
element.normalize()	合并元素中相邻的文本节点,并移除空的文本节点。
element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的宽度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetParent	返回元素的偏移容器。
element.offsetTop	返回元素的垂直偏移位置。
element.ownerDocument	返回元素的根元素(文档对象)。
element.parentNode	返回元素的父节点。
element.previousSibling	返回位于相同节点树层级的前一个元素。
element.removeAttribute()	从元素中移除指定属性。
element.removeAttributeNode()	移除指定的属性节点,并返回被移除的节点。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。
element.scrollHeight	返回元素的整体高度。
element.scrollLeft	返回元素左边缘与视图之间的距离。
element.scrollTop	返回元素上边缘与视图之间的距离。
element.scrollWidth	返回元素的整体宽度。
element.setAttribute()	把指定属性设置或更改为指定值。
element.setAttributeNode()	设置或更改指定属性节点。
element.setIdAttribute()	
element.setIdAttributeNode()	
element.setUserData()	把对象关联到元素上的键。
element.style	设置或返回元素的 style 属性。
element.tabIndex	设置或返回元素的 tab 键控制次序。
element.tagName	返回元素的标签名。
element.textContent	设置或返回节点及其后代的文本内容。
element.title	设置或返回元素的 title 属性。
element.toString()	把元素转换为字符串。
nodelist.item()	返回 NodeList 中位于指定下标的节点。
nodelist.length	返回 NodeList 中的节点数。

3.3 DOM 事件

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。

属性
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

移动设备
touchstart: 当手指触摸屏幕时触发,即使是一个手指放在屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续地触发,这个事件发生期间,我们可以使用preventDefault()事件可以阻止滚动。
touchend: 当手指从屏幕上移开时触发。
touchcancel: 当系统停止跟踪触摸时触发

用法示例

<p><a href="http://developer.mozilla.org/" onmouseover="oTooltip.append(event,'Example text 1');" onmousemove="oTooltip.follow(event);" onmouseout="oTooltip.remove();">Move your mouse here&hellip;</a></p>

​ 鼠标 / 键盘属性

altKey	返回当事件被触发时,"ALT" 是否被按下。
button	返回当事件被触发时,哪个鼠标按钮被点击。
clientX	返回当事件被触发时,鼠标指针的水平坐标。
clientY	返回当事件被触发时,鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时,"CTRL" 键是否被按下。
metaKey	返回当事件被触发时,"meta" 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时,鼠标指针的水平坐标。
screenY	返回当某个事件被触发时,鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时,"SHIFT" 键是否被按下。

3.4 DOM HTML

在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

document.getElementById(id).innerHTML=new HTML

改变 HTML 元素的属性

document.getElementById(id).attribute=new value

3.5 DOM CSS

document.getElementById(id).style.property=new style

4 BOM 浏览器对象模型

浏览器对象模型(Browser Object Model)尚无正式标准。所有浏览器都支持 window 对象。它表示浏览器窗口。

甚至 HTML DOM 的 document 也是 window 对象的属性之一。

  1. JS Window. Window 对象表示浏览器中打开的窗口。
  2. JS Navigator. Navigator 对象包含有关浏览器的信息。
  3. JS History. History 对象包含用户(在浏览器窗口中)访问过的 URL。
  4. JS Location. Location 对象包含有关当前 URL 的信息。
  5. JS Screen. Screen 对象包含有关客户端显示屏幕的信息。

4.1 window对象

Window 对象表示浏览器中打开的窗口。 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

属性
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。请参阅 Document 对象。
history	对 History 对象的只读引用。请参数 History 对象。
innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
Navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
Screen	对 Screen 对象的只读引用。请参数 Screen 对象。
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的先辈窗口。
window	window 属性等价于 self 属性,它包含了对窗口自身的引用。
screenLeft
screenTop
screenX
screenY 只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,

方法
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

4.2 Navigator对象

Navigator 对象包含有关浏览器的信息。

属性
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

方法	
javaEnabled()	规定浏览器是否启用 Java。
taintEnabled()	规定浏览器是否启用数据污点 (data tainting)。

4.3 History对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。 History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

属性
length	返回浏览器历史列表中的 URL 数量。
方法	
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。

4.4 Location对象

Location 对象包含有关当前 URL 的信息。 Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

属性
hash	设置或返回从井号 (#) 开始的 URL(锚)。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL(查询部分)。

属性
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。

4.5 Screen对象

Screen 对象包含有关客户端显示屏幕的信息。

属性
availHeight	返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)。
bufferDepth	设置或返回调色板的比特深度。
colorDepth	返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI	返回显示屏幕的每英寸水平点数。
deviceYDPI	返回显示屏幕的每英寸垂直点数。
fontSmoothingEnabled	返回用户是否在显示控制面板中启用了字体平滑。
height	返回显示屏幕的高度。
logicalXDPI	返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI	返回显示屏幕每英寸的垂直方向的常规点数。
pixelDepth	返回显示屏幕的颜色分辨率(比特每像素)。
updateInterval	设置或返回屏幕的刷新率。
width	返回显示器屏幕的宽度。

git 出现warning crlf will be replaced by...

我想这应该是下载一个从windows里到处的项目时遇上的。前些天发现了这个问题。在git commit时无法提交,提示warning: LF will be replaced by CRLF…..

相关的问题在 stackoverflow上也有提及。

产生这个问题的原因是,windows、Linux和Mac在处理文件换行时的标示符是不一致的。windows使用CRLF作为结束符,而Linux和Mac使用LF作为结束符。

同时呢,Git 有两种模式来对待换行符,你可以通过下面这行代码查看你的git配置。

$ git config core.autocrlf

如果显示为true,则每一次当你git commit时,如果存在文本文件,那么git会自动帮你将末尾的换行符改为CRLF,省去了烦心的转换工作。

如果显示为false,则git不会对换行符进行修改,保持原本的内容。

所以呢,作为Linux和Mac开发者,这个配置应当为false,而windows开发者,则应当设置为true。

$ git config --global core.autocrlf  false

引用资料:

http://stackoverflow.com/questions/1967370/git-replacing-lf-with-crlf