0%

PHP

综述

PHP的图像处理主要有下面几个用途,一个是验证码的操作,另一个就是图像水印操作,这里我们一起来学习一下吧。

图像处理基础

1.总体流程

首先,我们必须先了解PHP图像处理的基本函数的用法。总体来说分为以下四个步骤

(1)创建画布,创建资源类型,指定 高度 宽度

1
2
resource imagecreate ( int x_size, int y_size )
resource imagecreatetruecolor ( int x_size, int y_size )

imagecreate() 返回一个图像标识符,代表了一幅大小为 x_size 和 y_size 的空白图像。不过推荐使用 imagecreatetruecolor(),这个是新建一个真彩色图像。

(2)绘制图像

制定各种颜色,矩形, 圆, 点, 线段, 扇形, 画字(字符, 字符串, freetype),每一个形状和字符绘制对应一个函数,这部分我们后面详细介绍。

(3)输出图像/保存处理好的图像

1
2
3
imagegif();
imagejpeg();
imagepng();

例如,imagegif() 则将其保存为gif格式的图像。 bool imagegif ( resource image [, string filename] )

imagegif() 从 image 图像以 filename 为文件名创建一个 GIF 图像。image 参数是 imagecreatetruecolor() 函数的返回值。 filename 参数为可选,如果省略,则原始图像流将被直接输出。通过 header() 发送 Content-type: image/gif 可以使 PHP 脚本直接输出 GIF 图像。

(4)释放资源

1
imagedestroy($img);

所以,我们创建图像的一般流程用代码可以总结如下

1
2
3
4
5
6
7
8
9
10
11
12
<?php
//创建图片资源
$img = imagecreatetruecolor( 200, 200);
//绘制图形
$red = imagecolorallocate($img, 0xFF, 0, 0);
imagechar($img, 5, 100, 100, "A", $red);
//输出图像
header("Content-Type:image/gif");
imagegif($img);
//释放资源
imagedestroy($img);
?>

输出的结果如下,它直接在浏览器中显示如下,背景默认为黑色。 20150328153220 如果我们不加header,那么则会显示字符乱码,所以一定要记得下面这句话。

1
header("Content-Type:image/gif");

2.设置色彩

我们主要用到下面这个函数 int imagecolorallocate ( resource image, int red, int green, int blue ) imagecolorallocate() 返回一个标识符,代表了由给定的 RGB 成分组成的颜色。image 参数是 imagecreatetruecolor() 函数的返回值。red,green 和 blue 分别是所需要的颜色的红,绿,蓝成分。这些参数是 0 到 255 的整数或者十六进制的 0x00 到 0xFF。imagecolorallocate() 必须被调用以创建每一种用在 image 所代表的图像中的颜色。 例如下面的例子

1
2
3
4
5
6
7
8
9
10
<?php
//十进制方式
$red = imagecolorallocate($img, 0xFF, 0, 0);
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
// 十六进制方式
$gray = imagecolorallocate($img, 0xEE, 0xEE, 0xEE);
$white = imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
$black = imagecolorallocate($im, 0x00, 0x00, 0x00);
?>

3.区域填充色彩

bool imagefill ( resource image, int x, int y, int color ) imagefill() 在 image 图像的坐标 x,y(图像左上角为 0, 0)处用 color 颜色执行区域填充(即与 x, y 点颜色相同且相邻的点都会被填充)。 好,让我们尝试一下填充背景色吧

1
2
3
4
5
6
7
8
9
10
11
12
<?php
//创建图片资源
$img = imagecreatetruecolor( 200, 200);
//绘制图形
$red = imagecolorallocate($img, 0xFF, 0, 0);
imagefill($img,0,0,$red);
//输出图像
header("Content-Type:image/gif");
imagegif($img);
//释放资源
imagedestroy($img);
?>

运行结果如下,背景被填充为了红色。 20150328154707

4.画各种元素

(1)画空心矩形

bool imagerectangle ( resource image, int x1, int y1, int x2, int y2, int col ) imagerectangle() 用 col 颜色在 image 图像中画一个矩形,其左上角坐标为 x1, y1,右下角坐标为 x2, y2。图像的左上角坐标为 0, 0。

(2)画填充矩形

bool imagefilledrectangle ( resource image, int x1, int y1, int x2, int y2, int color ) imagefilledrectangle() 在 image 图像中画一个用 color 颜色填充了的矩形,其左上角坐标为 x1,y1,右下角坐标为 x2,y2。0, 0 是图像的最左上角。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
//创建图片资源
$img = imagecreatetruecolor( 200, 200);
//声明颜色
$red=imagecolorallocate($img, 255, 0, 0);
$yellow=imagecolorallocate($img, 255, 255, 0);
$green=imagecolorallocate($img, 0, 255, 0);
$blue=imagecolorallocate($img, 0, 0, 255);
//填充背景
imagefill($img,0,0,$yellow);
//画一个矩形并填充
imagefilledrectangle($img, 10, 10, 80, 80, $green);
//画一个矩形
imagerectangle($img, 90, 10, 190, 80, $green);
//输出图像
header("Content-Type:image/gif");
imagegif($img);
//释放资源
imagedestroy($img);
?>

20150328155313

(3)画一条线段

bool imageline ( resource image, int x1, int y1, int x2, int y2, int color ) imageline() 用 color 颜色在图像 image 中从坐标 x1,y1 到 x2,y2(图像左上角为 0, 0)画一条线段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
//创建图片资源
$img = imagecreatetruecolor( 200, 200);
//声明颜色
$red=imagecolorallocate($img, 255, 0, 0);
$yellow=imagecolorallocate($img, 255, 255, 0);
$green=imagecolorallocate($img, 0, 255, 0);
$blue=imagecolorallocate($img, 0, 0, 255);
//填充背景
imagefill($img,0,0,$yellow);
//线段
imageline($img,0, 0, 200, 200 ,$blue);
imageline($img,200, 0, 0, 200, $blue);
//输出图像
header("Content-Type:image/gif");
imagegif($img);
//释放资源
imagedestroy($img);
?>

20150328155846

(4)画点

bool imagesetpixel ( resource image, int x, int y, int color ) imagesetpixel() 在 image 图像中用 color 颜色在 x,y 坐标(图像左上角为 0,0)上画一个点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
//创建图片资源
$img = imagecreatetruecolor( 200, 200);
//声明颜色
$red=imagecolorallocate($img, 255, 0, 0);
$yellow=imagecolorallocate($img, 255, 255, 0);
$green=imagecolorallocate($img, 0, 255, 0);
$blue=imagecolorallocate($img, 0, 0, 255);
//填充背景
imagefill($img,0,0,$yellow);
//点
imagesetpixel($img,50, 50 ,$red);
imagesetpixel($img,55, 50 ,$red);
imagesetpixel($img,59, 50 ,$red);
imagesetpixel($img,64, 50 ,$red);
imagesetpixel($img,72, 50 ,$red);
//输出图像
header("Content-Type:image/gif");
imagegif($img);
//释放资源
imagedestroy($img);
?>

20150328160304

(5)画空心圆

bool imageellipse ( resource image, int cx, int cy, int w, int h, int color ) imageellipse() 在 image 所代表的图像中画一个中心为 cx,cy(图像左上角为 0, 0)的椭圆。w 和 h 分别指定了椭圆的宽度和高度,椭圆的颜色由 color 指定。

(6)画实心圆

bool imagefilledellipse ( resource image, int cx, int cy, int w, int h, int color ) imagefilledellipse() 在 image 所代表的图像中以 cx,cy(图像左上角为 0, 0)为中心画一个椭圆。w 和 h 分别指定了椭圆的宽和高。椭圆用 color 颜色填充。如果成功则返回 TRUE,失败则返回 FALSE。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
//创建图片资源
$img = imagecreatetruecolor( 200, 200);
//声明颜色
$red=imagecolorallocate($img, 255, 0, 0);
$yellow=imagecolorallocate($img, 255, 255, 0);
$green=imagecolorallocate($img, 0, 255, 0);
$blue=imagecolorallocate($img, 0, 0, 255);
//填充背景
imagefill($img,0,0,$yellow);
//圆
imageellipse($img, 100, 100, 100, 100,$green);
//实心圆
imagefilledellipse($img, 100, 100, 10, 10,$blue);
//输出图像
header("Content-Type:image/gif");
imagegif($img);
//释放资源
imagedestroy($img);
?>

20150328161138

(7)水平画一个字符

bool imagechar ( resource image, int font, int x, int y, string c, int color ) imagechar() 将字符串 c 的第一个字符画在 image 指定的图像中,其左上角位于 x,y(图像左上角为 0, 0),颜色为 color。如果 font 是 1,2,3,4 或 5,则使用内置的字体(更大的数字对应于更大的字体)。 bool imagestring ( resource image, int font, int x, int y, string s, int col ) imagestring() 用 col 颜色将字符串 s 画到 image 所代表的图像的 x,y 坐标处(这是字符串左上角坐标,整幅图像的左上角为 0,0)。如果 font 是 1,2,3,4 或 5,则使用内置字体。

(8)竖直画一个字符

bool imagecharup ( resource image, int font, int x, int y, string c, int color ) imagecharup() 将字符 c 垂直地画在 image 指定的图像上,位于 x,y(图像左上角为 0, 0),颜色为 color。如果 font 为 1,2,3,4 或 5,则使用内置的字体。 bool imagestringup ( resource image, int font, int x, int y, string s, int col ) imagestring() 用 col 颜色将字符串 s 垂直地画到 image 所代表的图像的 x, y 座标处(图像的左上角为 0, 0)。如果 font 是 1,2,3,4 或 5,则使用内置字体。

(9)带字体写入字符

array imagettftext ( resource image, float size, float angle, int x, int y, int color, string fontfile, string text )

image:图像资源。见 imagecreatetruecolor()。 size: 字体大小。根据 GD 版本不同,应该以像素大小指定(GD1)或点大小(GD2)。 angle: 角度制表示的角度,0 度为从左向右读的文本。更高数值表示逆时针旋转。例如 90 度表示从下向上读的文本。 x: 由 x,y 所表示的坐标定义了第一个字符的基本点(大概是字符的左下角)。这和 imagestring() 不同,其 x,y 定义了第一个字符的左上角。例如 “top left” 为 0, 0。 y: Y 坐标。它设定了字体基线的位置,不是字符的最底端。 color: 颜色索引。使用负的颜色索引值具有关闭防锯齿的效果。见 imagecolorallocate()。 fontfile: 是想要使用的 TrueType 字体的路径。 text: 文本字符串。

imagettftext() 返回一个含有 8 个单元的数组表示了文本外框的四个角,顺序为坐下角,右下角,右上角,左上角。这些点是相对于文本的而和角度无关,因此“左上角”指的是以水平方向看文字时其左上角。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
//创建图片资源
$img = imagecreatetruecolor( 200, 200);
//声明颜色
$red=imagecolorallocate($img, 255, 0, 0);
$yellow=imagecolorallocate($img, 255, 255, 0);
$green=imagecolorallocate($img, 0, 255, 0);
$blue=imagecolorallocate($img, 0, 0, 255);
$navy=imagecolorallocate($img, 0, 0, 0x80);
//填充背景
imagefill($img,0,0,$yellow);
//画字符
imagechar($img, 2, 100, 100, "A", $red);
imagechar($img, 5, 120, 120, "B", $red);
imagecharup($img, 4, 60, 60, "C", $red);
imagecharup($img, 5, 80, 80, "D", $red);
imagestring($img, 3, 10, 10, "Hello", $navy);
imagestringup($img, 3, 10, 80, "Hello", $navy);
imagettftext($img, 25, 60, 150, 150, $blue, "simkai.ttf", "Hello");
imagettftext($img, 12, -60, 50, 150, $green, "simli.ttf", "Nihao");
//输出图像
header("Content-Type:image/gif");
imagegif($img);
//释放资源
imagedestroy($img);
?>

20150328163147

总结

以上我们总结了PHP图像绘图的相关函数的使用,在后面我们将应用于实际,比如验证码和图像水印操作中。 希望对大家有帮助!

HTML

综述

CSS3已经变得非常流行,原本的CSS不支持自定义字体,但是传说中的CSS3基本上什么都可以,那么CSS3中可不可以自定义英文字体呢?这里我们就一起来感受一下。

语法规则

1
2
3
4
5
6
7
8
9
10
11
@font-face {

  font-family: 自定义的字体名称;

  src: 自定义的字体的存放路径;

  font-weight: normal;是否为粗体

  font-style: normal;定义字体样式,如斜体

}

取值说明

font-famliy

此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:”YourWebFontName”;”

source

此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;

format

此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等

weight和style

这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体

各个浏览器需要字体的格式

TureTpe(.ttf)

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有 IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+

OpenType(.otf)

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有 Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+

Web Open Font Format(.woff)

.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有 IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+

Embedded Open Type(.eot)

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有 IE4+

SVG(.svg)

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有 Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+ 所以,@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

综合写法

1
2
3
4
5
6
7
8
9
10
11
12
13
 @font-face {
    font-family: 'YourWebFontName';
    /* IE9 Compat Modes */
    src: url('YourWebFontName.eot');
    /* IE6-IE8 */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'),
        /* Modern Browsers */
        url('YourWebFontName.woff') format('woff'),
        /* Safari, Android, iOS */
        url('YourWebFontName.ttf'format('truetype'),
        /* Legacy iOS */
        url('YourWebFontName.svg#YourWebFontName') format('svg');
}

获取字体

在这里介绍一个网站,叫做 fontsquirrel

在这里,你可以通过上传你的字体,来获取上面四种格式的字体文件。

20150327005358

我们点击按钮 UPLOAD FONTS,选择本地的字体文件,然后网站就会为我们生成上述格式的字体文件,勾选 Agreement,然后直接点击下载即可,DOWNLOAD YOUR KIT。

20150327005550

比如我上传的字体名叫做 FuturaICG-Light,那么下载之后的文件目录就如下

20150327010127

其中,这个目录下给我们生成了一个demo,可以用浏览器打开 html 后缀的文件,预览一下 demo 是怎么写的。

应用字体

如果我们要用,就把五个字体文件复制一下,复制到项目目录里。

20150327010641

然后在样式表css中加入如下代码即可生效啦,这个代码在 demo 的 stylesheet 文件中,我们直接复制即可,比如我的便是

1
2
3
4
5
6
7
8
9
10
11
@font-face {
font-family: 'futuraicg_lightregular';
src: url('FuturaICG-Light-webfont.eot');
src: url('FuturaICG-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('FuturaICG-Light-webfont.woff2') format('woff2'),
url('FuturaICG-Light-webfont.woff') format('woff'),
url('FuturaICG-Light-webfont.ttf') format('truetype'),
url('FuturaICG-Light-webfont.svg#futuraicg_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}

在这里要注意路径问题,如果 css 在字体的上级目录,那么就要在前面加上字体文件夹的名称,我想大家都能理解。 刷新一下页面,我们可以发现页面的字体效果就已经生效啦。 如果有不生效的地方,很可能是 CSS 表中设置了 html 或者 body 的 font-family 样式,在这里我们只需要把它们去掉即可。如图所示,把改行删掉即可。 20150327011119

这时,如果还不行,请检查路径设置。 以上就是我们用 CSS3 来自定义网页字体的方法,希望对大家有帮助。

Other

在远程主机上,我开启了mysql 服务,用 phpmyadmin 可以打开,比如说用户名为 root,密码为 123456。不过用 Mysql 客户端远程连接时却报了错误,比如 Mysql-Front 报了如下错误。 Access denied for user ‘root’@’121.42.8.33’(using password:YES) 20150327004005 比较奇怪,phpmyadmin 可以正常访问,而 Mysql-Front 为什么无法连接呢?可能的原因,应该就是 IP 限制了,phpmyadmin在连接时使用的是localhost,而我们访问页面才使用的远程主机的 IP,而 Mysql-Front 连接的是远程主机。 解决方法如下, 首先修改mysql的配置文件,my.cnf,将

1
#bind-address = 127.0.0.1

这一行注释掉,要不然它永远限制了只能本机连接 然后我们需要新建一个用户,然后授予所有 IP 可以访问的权限就好啦。 在下面的 sql 语句中,username 即为用户名,password 为你要设置的密码。

1
2
3
4
5
6
7
CREATE USER 'username'@'localhost' IDENTIFIED BY 'password';

GRANT ALL PRIVILEGES ON *.* TO 'username'@'localhost' WITH GRANT OPTION;

CREATE USER 'username'@'%' IDENTIFIED BY 'password';

GRANT ALL PRIVILEGES ON *.* TO 'username'@'%' WITH GRANT OPTION;

通过执行以上语句,便创建了一个用户名为 username,密码为 password 的新账户,再用新账号登录,就可以连接成功啦。

PHP

搞WEB开发,PHP后台当然少不了,PHP的高级用法虽然不一定用到,但是作为WEB开发人员,是必须要了解的。在这里,博主把自己学习的一些高级特性总结如下,希望对大家有帮助。

PHP高级特性总结

1. PHP高级特性一之正则表达式用法 2. PHP高级特性二之文件处理 3. PHP高级特性三之文件上传和下载 4. PHP高级特性四之SMTP邮件发送 5. PHP高级特性五之时间处理 6. PHP高级特性六之图像处理 7. PHP高级特性七之验证码操作 随着学习的进行,会不断更新,希望对大家有帮助!

PHP

综述

PHP中的时间处理函数是非常常用的,在这里我们介绍的主要内容有

UNIX时间戳

以整数表示格林威治标准时间,英文叫做 timestamp,例如 11230499325,它在UNIX系统中是以32位存储的。从协调世界时1970年1月1日0时0分0秒起至现在的总秒数,不考虑闰秒。 作用:方便我们计算使用(参于运算)。

获取时间函数

1.int time ( void )

返回自从 Unix 纪元(格林威治时间 1970 年 1 月 1 日 00:00:00)到当前时间的秒数,即返回的就是UNIX时间戳。

1
2
3
<?php 
echo time();
?>
1
 1426741342

2.array getdate ( [int timestamp] )/array getDate ( [int timestamp] )

可以通过传入时间戳获得时间,也可以不传参数获取时间。例如下面的例子获取了当前时间,返回类型是一个数组。

1
2
3
4
5
<?php 
echo "<pre>";
print_r(getDate()); //或者getdate();
echo "</pre>";
?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Array
(
[seconds] => 4
[minutes] => 6
[hours] => 5
[mday] => 19
[wday] => 4
[mon] => 3
[year] => 2015
[yday] => 77
[weekday] => Thursday
[month] => March
[0] => 1426741564
)

数组各个元素的说明如下

键名

说明

返回值例子

“seconds”

秒的数字表示

0 到 59

“minutes”

分钟的数字表示

0 到 59

“hours”

小时的数字表示

0 到 23

“mday”

月份中第几天的数字表示

1 到 31

“wday”

星期中第几天的数字表示

0(表示星期天)到 6(表示星期六)

“mon”

月份的数字表示

1 到 12

“year”

4 位数字表示的完整年份

例如:1999 或 2003

“yday”

一年中第几天的数字表示

0 到 365

“weekday”

星期几的完整文本表示

Sunday 到 Saturday

“month”

月份的完整文本表示

January> 到 December

可以传入时间戳参数,如下所示

1
2
3
4
5
6
<?php 
echo "<pre>";
print_r(getDate(time()+60*60*24));
print_r(getdate(time()));
echo "</pre>";
?>

时间戳转日期

1.string date ( string format [, int timestamp] )

返回将整数 timestamp 按照给定的格式字串而产生的字符串。如果没有给出时间戳则使用本地当前时间。换句话说,timestamp 是可选的,默认值为 time()。

1
2
3
4
5
<?php
echo date("Y-m-d H:i:s")."<br>";
echo date("Y-m-d H:i:s",time())."<br>";
echo date("Y-m-d H:i:s",time()+60*60*24)."<br>";
?>
1
2
3
2015-03-19 05:45:49
2015-03-19 05:45:49
2015-03-20 05:45:49

下面是格式化的字符表

format 字符

说明

返回值例子

-—

-—

d

月份中的第几天,有前导零的 2 位数字

01 到 31

D

星期中的第几天,文本表示,3 个字母

Mon 到 Sun

j

月份中的第几天,没有前导零

1 到 31

l(“L”的小写字母)

星期几,完整的文本格式

Sunday 到 Saturday

N

ISO-8601 格式数字表示的星期中的第几天(PHP 5.1.0 新加)

1(表示星期一)到 7(表示星期天)

S

每月天数后面的英文后缀,2 个字符

st,nd,rd 或者 th。可以和 j 一起用

w

星期中的第几天,数字表示

0(表示星期天)到 6(表示星期六)

z

年份中的第几天

0 到 366

星期

-—

-—

W

ISO-8601 格式年份中的第几周,每周从星期一开始(PHP 4.1.0 新加的)

例如:42(当年的第 42 周)

-—

-—

F

月份,完整的文本格式,例如 January 或者 March

January 到 December

m

数字表示的月份,有前导零

01 到 12

M

三个字母缩写表示的月份

Jan 到 Dec

n

数字表示的月份,没有前导零

1 到 12

t

给定月份所应有的天数

28 到 31

-—

-—

L

是否为闰年

如果是闰年为 1,否则为 0

o

ISO-8601 格式年份数字。这和 Y 的值相同,只除了如果 ISO 的星期数(W)属于前一年或下一年,则用那一年。(PHP 5.1.0 新加)

Examples: 1999 or 2003

Y

4 位数字完整表示的年份

例如:1999 或 2003

y

2 位数字表示的年份

例如:99 或 03

时间

-—

-—

a

小写的上午和下午值

am 或 pm

A

大写的上午和下午值

AM 或 PM

B

Swatch Internet 标准时

000 到 999

g

小时,12 小时格式,没有前导零

1 到 12

G

小时,24 小时格式,没有前导零

0 到 23

h

小时,12 小时格式,有前导零

01 到 12

H

小时,24 小时格式,有前导零

00 到 23

i

有前导零的分钟数

00 到 59>

s

秒数,有前导零

00 到 59>

时区

-—

-—

e

时区标识(PHP 5.1.0 新加)

例如:UTC,GMT,Atlantic/Azores

I

是否为夏令时

如果是夏令时为 1,否则为 0

O

与格林威治时间相差的小时数

例如:+0200

T

本机所在的时区

例如:EST,MDT(【译者注】在 Windows 下为完整文本格式,例如“Eastern Standard Time”,中文版会显示“中国标准时间”)。

Z

时差偏移量的秒数。UTC 西边的时区偏移量总是负的,UTC 东边的时区偏移量总是正的。

-43200 到 43200

完整的日期/时间

-—

-—

c

ISO 8601 格式的日期(PHP 5 新加)

2004-02-12T15:19:21+00:00

r

RFC 822 格式的日期

例如:Thu, 21 Dec 2000 16:01:07 +0200

U

从 Unix 纪元(January 1 1970 00:00:00 GMT)开始至今的秒数

参见 time()

日期转时间戳

1.int mktime ( [int hour [, int minute [, int second [, int month [, int day [, int year [, int is_dst]]]]]]] )

根据给出的参数返回 Unix 时间戳。时间戳是一个长整数,包含了从 Unix 纪元(January 1 1970 00:00:00 GMT)到给定时间的秒数。参数可以从右向左省略,任何省略的参数会被设置成本地日期和时间的当前值。 例如我们获取1997年12月1日的时间戳

1
2
3
<?php
echo mktime(0, 0, 0, 12, 1, 1997)."<br>";
?>
1
 880934400

在这里如果我们的年份如果填2位数,函数可以智能给我们转化,例如第六个参数填 97,那么则会识别为 1997年,如果填 03,那么则会识别为 2003年。那么有的小伙伴就问了,两个之间的分界点是哪一年哪一月哪一日呢?我们来看下面的例子

1
2
3
4
5
6
7
<?php
echo date("m-d-Y", mktime(0, 0, 0, 12, 32, 1997))."<br>";
echo date("M-d-Y", mktime(0, 0, 0, 3, 14, 98))."<br>";
echo date("M-d-Y", mktime(0, 0, 0, 1, 1, 03))."<br>";
echo date("M-d-Y", mktime(0, 0, 0, 1, 19, 38))."<br>";
echo date("M-d-Y", mktime(0, 0, 0, 1, 20, 38))."<br>";
?>
1
2
3
4
5
01-01-1998
Mar-14-1998
Jan-01-2003
Jan-19-2038
Jan-01-1970

在这里我们可以发现,当我们输入2038年的1月19日时,可以正常识别为2038-1-19,不过当我们输入2038年1月20日时,则识别成了1970-1-1,可见分界点就在2038-1-19这一天。 在这里有个有趣的2038年问题,扩展阅读一下

在计算机应用上,2038年问题可能会导致某些软件在2038年无法正常工作。所有使用UNIX时间表示时间的程序都将受其影响,因为它们以自1970年1月1日经过的秒数(忽略闰秒)来表示时间。这种时间表示法在类Unix(Unix-like)操作系统上是一个标准,并会影响以其C编程语言开发给其他大部份操作系统使用的软件。在大部份的32位操作系统上,此“time_t”数据模式使用一个有正负号的32位元整数(signedint32)存储计算的秒数。依照此“time_t”标准,在此格式能被表示的最后时间是2038年1月19日03:14:07,星期二(UTC)。超过此一瞬间,时间将会被掩盖(wrap around)且在内部被表示为一个负数,并造成程序无法工作,因为它们无法将此时间识别为2038年,而可能会依个别实作而跳回1970年或1901年。错误的计算及动作可能因此产生。

修改PHP默认时区

我们来看下面一个例子,是上面所说的调用date方法返回的时间。

1
2
3
<?php
echo date("Y-m-d H:i:s");
?>
1
2015-03-19 06:03:22

而现在我的电脑系统时间为

1
2015-03-19 14:03:22

这是什么原因?很简单,PHP程序中返回的是中时区的格林威治时间,而我们国家使用的是东八区区时,所以程序中的时间会慢8个小时。所以,我们只需要设置一下时区即可。

1.设置PHP.ini文件

这种方法是通用的设置方法,一次设置,其他所有编写的PHP文件都会生效,而且不需要在程序中设置了。只需要修改

1
2
3
4
[Date]
; Defines the default timezone used by the date functions
; http://php.net/date.timezone
date.timezone = PRC

默认的 date.timezone = UTC,在这里我们修改为中国的代号PRC即可。修改完之后记得重启服务器才能生效。 再运行程序,发现时间已经很准确了。

2.在程序中设置

1
2
3
4
5
<?php
date_default_timezone_set("PRC");
date_default_timezone_set("Asia/Shanghai");
date_default_timezone_set("Gtc/GET-8");
?>

上面三行语句均可使用,效果相同。第一个是设置中国时区,第二个是设置上海时区,第三个是设置东八区区时。 在此附亚洲区时

Asia/Aden

Asia/Almaty

Asia/Amman

Asia/Anadyr

Asia/Aqtau

Asia/Aqtobe

Asia/Ashgabat

Asia/Ashkhabad

Asia/Baghdad

Asia/Bahrain

Asia/Baku

Asia/Bangkok

Asia/Beirut

Asia/Bishkek

Asia/Brunei

Asia/Calcutta

Asia/Chita

Asia/Choibalsan

Asia/Chongqing

Asia/Chungking

Asia/Colombo

Asia/Dacca

Asia/Damascus

Asia/Dhaka

Asia/Dili

Asia/Dubai

Asia/Dushanbe

Asia/Gaza

Asia/Harbin

Asia/Hebron

Asia/Ho_Chi_Minh

Asia/Hong_Kong

Asia/Hovd

Asia/Irkutsk

Asia/Istanbul

Asia/Jakarta

Asia/Jayapura

Asia/Jerusalem

Asia/Kabul

Asia/Kamchatka

Asia/Karachi

Asia/Kashgar

Asia/Kathmandu

Asia/Katmandu

Asia/Khandyga

Asia/Kolkata

Asia/Krasnoyarsk

Asia/Kuala_Lumpur

Asia/Kuching

Asia/Kuwait

Asia/Macao

Asia/Macau

Asia/Magadan

Asia/Makassar

Asia/Manila

Asia/Muscat

Asia/Nicosia

Asia/Novokuznetsk

Asia/Novosibirsk

Asia/Omsk

Asia/Oral

Asia/Phnom_Penh

Asia/Pontianak

Asia/Pyongyang

Asia/Qatar

Asia/Qyzylorda

Asia/Rangoon

Asia/Riyadh

Asia/Saigon

Asia/Sakhalin

Asia/Samarkand

Asia/Seoul

Asia/Shanghai

Asia/Singapore

Asia/Srednekolymsk

Asia/Taipei

Asia/Tashkent

Asia/Tbilisi

Asia/Tehran

Asia/Tel_Aviv

Asia/Thimbu

Asia/Thimphu

Asia/Tokyo

Asia/Ujung_Pandang

Asia/Ulaanbaatar

Asia/Ulan_Bator

Asia/Urumqi

Asia/Ust-Nera

Asia/Vientiane

Asia/Vladivostok

Asia/Yakutsk

Asia/Yekaterinburg

Asia/Yerevan

微妙精确计算

1.mixed microtime ( [bool get_as_float] )

microtime() 当前 Unix 时间戳以及微秒数。本函数仅在支持 gettimeofday() 系统调用的操作系统下可用。 如果调用时不带可选参数,本函数以 “msec sec” 的格式返回一个字符串,其中 sec 是自 Unix 纪元(0:00:00 January 1, 1970 GMT)起到现在的秒数,msec 是微秒部分。字符串的两部分都是以秒为单位返回的。如果传入true参数,那么则会返回sec.msec的形式,是一个浮点数。 我们大多数用来计算程序执行时间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
class Timer {

private $startTime; //开始时间
private $stopTime; //结束时间
private $count = 0;

//初始化两个时间为0
function __construct(){
$this->startTime=0;
$this->stopTime=0;
}

//设置开始时间
function start(){
$this->startTime=microtime(true);
echo $this->startTime."<br>";
}

//设置结束时间
function stop(){
$this->stopTime=microtime(true);
echo $this->stopTime."<br>";
}

//计算过了多长时间
function spent(){
$this->start();
$this->dosomething();
$this->stop();
return ($this->stopTime - $this->startTime);
}

//程序执行某些任务
function dosomething(){
for($i=0; $i<10000; $i++)
{
$this->count ++;
}
}
}

$timer = new Timer();

echo $timer->spent();

?>
1
2
3
1426746064.4247
1426746064.4267
0.0019998550415039

可以发现,程序执行用了 1.99 微秒。 好,关于PHP中的时间问题,我们就介绍到这里,希望对大家有帮助。

PHP

综述

PHP的邮件发送最常见的便是SMTP,通过编写一个Smtp类,设置好smtp服务器,邮箱用户名,密码,即可实现邮件的发送

邮件发送

邮件发送的类如下,文件名叫做

1
email.class.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<?php

/* smtp class */
class smtp {
/* Public Variables */
var $smtp_port;
var $time_out;
var $host_name;
var $log_file;
var $relay_host;
var $debug;
var $auth;
var $user;
var $pass;
/* Private Variables */
var $sock;
/* Constractor */
function smtp($relay_host = "", $smtp_port = 25, $auth = false, $user, $pass) {
$this->debug = FALSE;
$this->smtp_port = $smtp_port;
$this->relay_host = $relay_host;
$this->time_out = 30; //is used in fsockopen()
//
$this->auth = $auth; //auth
$this->user = $user;
$this->pass = $pass;
//
$this->host_name = "localhost"; //is used in HELO command
$this->log_file = "";
$this->sock = FALSE;
}
/* Main Function */
function sendmail($to, $from, $subject = "", $body = "", $mailtype, $cc = "", $bcc = "", $additional_headers = "") {
$mail_from = $this->get_address($this->strip_comment($from));
$body = preg_replace("/(^|(\r\n))(\.)/", "\1.\3", $body);
$header = "MIME-Version:1.0\r\n";
if ($mailtype == "HTML") {
$header.= "Content-Type:text/html\r\n";
}
$header.= "To: " . $to . "\r\n";
if ($cc != "") {
$header.= "Cc: " . $cc . "\r\n";
}
$header.= "From: $from<" . $from . ">\r\n";
$header.= "Subject: " . $subject . "\r\n";
$header.= $additional_headers;
$header.= "Date: " . date("r") . "\r\n";
$header.= "X-Mailer:By Redhat (PHP/" . phpversion() . ")\r\n";
list($msec, $sec) = explode(" ", microtime());
$header.= "Message-ID: <" . date("YmdHis", $sec) . "." . ($msec * 1000000) . "." . $mail_from . ">\r\n";
$TO = explode(",", $this->strip_comment($to));
if ($cc != "") {
$TO = array_merge($TO, explode(",", $this->strip_comment($cc)));
}
if ($bcc != "") {
$TO = array_merge($TO, explode(",", $this->strip_comment($bcc)));
}
$sent = TRUE;
foreach ($TO as $rcpt_to) {
$rcpt_to = $this->get_address($rcpt_to);
if (!$this->smtp_sockopen($rcpt_to)) {
$this->log_write("Error: Cannot send email to " . $rcpt_to . "\n");
$sent = FALSE;
continue;
}
if ($this->smtp_send($this->host_name, $mail_from, $rcpt_to, $header, $body)) {
$this->log_write("E-mail has been sent to <" . $rcpt_to . ">\n");
} else {
$this->log_write("Error: Cannot send email to <" . $rcpt_to . ">\n");
$sent = FALSE;
}
fclose($this->sock);
$this->log_write("Disconnected from remote host\n");
}
return $sent;
}
/* Private Functions */
function smtp_send($helo, $from, $to, $header, $body = "") {
if (!$this->smtp_putcmd("HELO", $helo)) {
return $this->smtp_error("sending HELO command");
}
//auth
if ($this->auth) {
if (!$this->smtp_putcmd("AUTH LOGIN", base64_encode($this->user))) {
return $this->smtp_error("sending HELO command");
}
if (!$this->smtp_putcmd("", base64_encode($this->pass))) {
return $this->smtp_error("sending HELO command");
}
}
//
if (!$this->smtp_putcmd("MAIL", "FROM:<" . $from . ">")) {
return $this->smtp_error("sending MAIL FROM command");
}
if (!$this->smtp_putcmd("RCPT", "TO:<" . $to . ">")) {
return $this->smtp_error("sending RCPT TO command");
}
if (!$this->smtp_putcmd("DATA")) {
return $this->smtp_error("sending DATA command");
}
if (!$this->smtp_message($header, $body)) {
return $this->smtp_error("sending message");
}
if (!$this->smtp_eom()) {
return $this->smtp_error("sending <CR><LF>.<CR><LF> [EOM]");
}
if (!$this->smtp_putcmd("QUIT")) {
return $this->smtp_error("sending QUIT command");
}
return TRUE;
}
function smtp_sockopen($address) {
if ($this->relay_host == "") {
return $this->smtp_sockopen_mx($address);
} else {
return $this->smtp_sockopen_relay();
}
}
function smtp_sockopen_relay() {
$this->log_write("Trying to " . $this->relay_host . ":" . $this->smtp_port . "\n");
$this->sock = @fsockopen($this->relay_host, $this->smtp_port, $errno, $errstr, $this->time_out);
if (!($this->sock && $this->smtp_ok())) {
$this->log_write("Error: Cannot connenct to relay host " . $this->relay_host . "\n");
$this->log_write("Error: " . $errstr . " (" . $errno . ")\n");
return FALSE;
}
$this->log_write("Connected to relay host " . $this->relay_host . "\n");
return TRUE;;
}
function smtp_sockopen_mx($address) {
$domain = preg_replace("/^.+@([^@]+)$/", "\1", $address);
if (!@getmxrr($domain, $MXHOSTS)) {
$this->log_write("Error: Cannot resolve MX \"" . $domain . "\"\n");
return FALSE;
}
foreach ($MXHOSTS as $host) {
$this->log_write("Trying to " . $host . ":" . $this->smtp_port . "\n");
$this->sock = @fsockopen($host, $this->smtp_port, $errno, $errstr, $this->time_out);
if (!($this->sock && $this->smtp_ok())) {
$this->log_write("Warning: Cannot connect to mx host " . $host . "\n");
$this->log_write("Error: " . $errstr . " (" . $errno . ")\n");
continue;
}
$this->log_write("Connected to mx host " . $host . "\n");
return TRUE;
}
$this->log_write("Error: Cannot connect to any mx hosts (" . implode(", ", $MXHOSTS) . ")\n");
return FALSE;
}
function smtp_message($header, $body) {
fputs($this->sock, $header . "\r\n" . $body);
$this->smtp_debug("> " . str_replace("\r\n", "\n" . "> ", $header . "\n> " . $body . "\n> "));
return TRUE;
}
function smtp_eom() {
fputs($this->sock, "\r\n.\r\n");
$this->smtp_debug(". [EOM]\n");
return $this->smtp_ok();
}
function smtp_ok() {
$response = str_replace("\r\n", "", fgets($this->sock, 512));
$this->smtp_debug($response . "\n");
if (!preg_match("/^[23]/", $response)) {
fputs($this->sock, "QUIT\r\n");
fgets($this->sock, 512);
$this->log_write("Error: Remote host returned \"" . $response . "\"\n");
return FALSE;
}
return TRUE;
}
function smtp_putcmd($cmd, $arg = "") {
if ($arg != "") {
if ($cmd == "") $cmd = $arg;
else $cmd = $cmd . " " . $arg;
}
fputs($this->sock, $cmd . "\r\n");
$this->smtp_debug("> " . $cmd . "\n");
return $this->smtp_ok();
}
function smtp_error($string) {
$this->log_write("Error: Error occurred while " . $string . ".\n");
return FALSE;
}
function log_write($message) {
$this->smtp_debug($message);
if ($this->log_file == "") {
return TRUE;
}
$message = date("M d H:i:s ") . get_current_user() . "[" . getmypid() . "]: " . $message;
if (!@file_exists($this->log_file) || !($fp = @fopen($this->log_file, "a"))) {
$this->smtp_debug("Warning: Cannot open log file \"" . $this->log_file . "\"\n");
return FALSE;;
}
flock($fp, LOCK_EX);
fputs($fp, $message);
fclose($fp);
return TRUE;
}
function strip_comment($address) {
$comment = "/\([^()]*\)/";
while (preg_match($comment, $address)) {
$address = preg_replace($comment, "", $address);
}
return $address;
}
function get_address($address) {
$address = preg_replace("/([ \t\r\n])+/", "", $address);
$address = preg_replace("/^.*<(.+)>.*$/", "\1", $address);
return $address;
}
function smtp_debug($message) {
if ($this->debug) {
echo $message;
}
}
}
?>

然后便是一个php文件引用该文件,设置好各种参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发送状态</title>
</head>
<body>
<?php

require_once "email.class.php";
//SMTP服务器
$smtpserver = "smtp.163.com";
//SMTP端口号?
$smtpserverport = 25;
//SMTP发邮件的邮箱
$smtpusermail = "cqc@163.com";
//发给谁
$smtpemailto = $_POST['toemail'];
//SMTP用户名,不加@163.com
$smtpuser = "cqc";
//SMTP用户密码
$smtppass = "wtf";
//主题
$mailtitle = $_POST['topic'];
//构建内容
$mailcontent = "TA的名字 ".$_POST['name']."<br>内容: ".$_POST['content'];
//邮件内容为HTML格式
$mailtype = "HTML";
//实例化对象
$smtp = new smtp($smtpserver,$smtpserverport,true,$smtpuser,$smtppass);
//关闭调试信息
$smtp->debug = false;
//发送邮件
$state = $smtp->sendmail($smtpemailto, $smtpusermail, $mailtitle, $mailcontent, $mailtype);
//检查发送状态
if($state==""){
echo "邮件发送失败,请检查密码或其他设置";
}else if(strlen($state)!=0){
//发送成功
echo "邮件发送成功";
}else{
echo "未知错误";
}

?>
</body>
</html>

最后是一个表单提交,包括目的邮箱,主题,内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP利用SMTP发送邮件范例</title>
</head>
<body>
<form action="sendmail.php" method="post">
<p>收件人:<input type="text" name="toemail" /></p>
<p>&nbsp;&nbsp;题:<input type="text" name="topic" /></p>
<p>&nbsp;&nbsp;名:<input type="text" name="name" /></p>
<p>&nbsp;&nbsp;容:<textarea name="content" cols="50" rows="5"></textarea></p>
<p><input type="submit" value="发送" /></p>
</form>
</body>
</html>

代码下载

代码下载

个人随笔

博主来自山东大学,现在大三了,想保研北京航空航天大学。去年的保研政策,其中复试是这么规定的

北京航空航天大学计算机学院 1、学院复试工作小组对申请者各项材料(含体格检查表及推免服务系统填写的网上报名志愿)进行综合评审,确定复试名单,通过“推免服务系统”发放复试通知。接到“推免服务系统”复试通知的申请者,须通过“推免服务系统”接受学院的复试通知。学院将对接受复试通知的申请者组织复试,申请者复试时需交纳复试费100元/人。 2、.复试形式:采取差额复试。复试内容包括C语言上机考试和综合面试两部分,C语言上机考试为资格考试,通过上机考试后方可进入综合面试环节,面试总成绩300分。综合面试内容包括英语能力、数理基础、专业素质、综合素质等四个方面的内容。 ⑴ 英语能力方面主要考核内容包括:口语、听力、现场阅读与翻译; ⑵ 数理基础方面主要考核内容包括:本专业研究方向应该掌握的数学基础理论(或离散数学,或其他基础理论知识); ⑶ 专业素质方面主要考核内容包括:专业基础知识和专业综合能力。专业基础知识考核专业知识问题,考生;专业综合能力主要考核考生综合运用所学知识解决计算机领域具体应用问题(或设计问题,或工程问题)的能力,以考核考生的分析能力和专业综合能力。 ⑷ 综合素质方面主要考核内容包括:语言表达能力、逻辑思维能力、对学科热点的关注和了解情况、考生本科阶段的专业背景、本科阶段参与的各类科技活动以及获得过的各种奖励、考生的行为举止、特点特长、综合印象等。

看完之后,心中生出淡淡的忧伤,上机考试竟然是C语言,上机题目估计和ACM题目差不多,接下来要重拾C语言了。 另外,对于英语,也是比较看重的,该下点功夫学习英语了,本来英语不算太差,不过也毕竟有一年多没系统学习英语了,希望这几个月可以有些提高。 还有很重要的就是联系北航的导师,如果小伙伴们知道有优秀的导师,可以推荐给我,感激不尽~ 加油吧,崔庆才,为了将来的辉煌!拼一把又何妨!

JavaScript

综述

原创内容,个人学习记录,部分API来自W3C,本篇主要介绍了JavaScript中常见的内置对象及其相关用法。

Date

日期对象,它没有专有属性,有一系列相关方法。

1.三种创建方式

1
2
3
date = new Date();&nbsp;                                //直接创建
date = new Date(val); //指定日期创建
date = new Date(Y,m,d[,h[,min[,second[,ms]]]]) //传入具体时间创建

2.API

方法

描述

Date()

返回当日的日期和时间。

getDate()

从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay()

从 Date 对象返回一周中的某一天 (0 ~ 6)。注:0-6分别表示星期天-星期六。

getMonth()

从 Date 对象返回月份 (0 ~ 11)。注:0-11分别表示1-12月份,其值总是比实际月份小1。

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 对象的原始值。

3.Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<script>
date = new Date();
date.setMonth(10)
document.write(date.toDateString()+"<br>");
document.write(date.toTimeString()+"<br>");
document.write(date.toLocaleDateString()+"<br>");
document.write(date.toLocaleTimeString()+"<br>");
</script>
</body>
</html>
1
2
3
4
Mon Nov 16 2015
20:06:14 GMT+0800 (中国标准时间)
2015/11/16
下午8:06:14

Math

1.属性

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)。

2.API

方法

描述

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 对象的原始值。

3.Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Math.E+"<br>");
document.write(Math.ceil(0.6)+"<br>");
document.write(Math.max(5,7) + "<br>");
document.write(Math.min(-3,5) + "<br>");
document.write(Math.random()+"<br>");
document.write(Math.round(0.49)+"<br>");
</script>
</body>
</html>
1
2
3
4
5
6
2.718281828459045
1
7
-3
0.6166561744175851
0

String

1.属性

constructor

对创建该对象的函数的引用

length

字符串的长度

prototype

允许您向对象添加属性和方法

2.方法

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()

返回某个字符串对象的原始值。

3.Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<script>
var txt="Hello world!"
document.write(txt.anchor("myanchor")+"<br>");
document.write(txt.big()+"<br>");
document.write(txt.blink()+"<br>");
document.write(txt.small()+"<br>");
document.write(txt.sup()+"<br>");
var str1="Hello "
var str2="world!"
document.write(str1.concat(str2))
</script>
</body>
</html>
1
2
3
4
5
6
 Hello world!
Hello world!
Hello world!
Hello world!
Hello world!
Hello world!

Array

1.创建方式

1
2
3
4
var a = new Array();
var a = new Array(1,2,3,4,5,6);
var a = [1,2,3,4,5];
var a = new Array(3);

2.属性

constructor

返回对创建此对象的数组函数的引用。

length

设置或返回数组中元素的数目。

prototype

使您有能力向对象添加属性和方法。

3.API

JavaScript Array 对象

concat()

连接两个或更多的数组,并返回结果。

join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop()

删除并返回数组的最后一个元素

push()

向数组的末尾添加一个或更多元素,并返回新的长度。

reverse()

颠倒数组中元素的顺序。

shift()

删除并返回数组的第一个元素

slice()

从某个已有的数组返回选定的元素

sort()

对数组的元素进行排序

splice()

删除元素,并向数组添加新元素。

toSource()

返回该对象的源代码。

toString()

把数组转换为字符串,并返回结果。

toLocaleString()

把数组转换为本地数组,并返回结果。

unshift()

向数组的开头添加一个或更多元素,并返回新的长度。

valueOf()

返回数组对象的原始值

3.Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<body>
<script>
var arr1 = new Array(1,2,3);
document.write(arr1.concat([6,7])+"<br>");
var arr2 = new Array(2);
arr2[0] = 'Hello';
arr2[1] = 'World';
document.write(arr2.join()+"<br>");
document.write(arr2.pop()+"<br>");
var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";
document.write(arr + "<br />");
arr.splice(2,3,"William"); //删除index2开始的3个元素
document.write(arr+"<br>");
document.write(arr.valueOf());
</script>
</body>
</html>
1
2
3
4
5
6
1,2,3,6,7
Hello,World
World
George,John,Thomas,James,Adrew,Martin
George,John,William,Martin
George,John,William,Martin

s

Other

综述

博主原创内容。 在PS里,对于抠图,比较有技术含量的便是抠头发丝了,下面为大家带来一个比较详细的抠头发丝的教程。

素材准备

在这里我们用这张图片作为抠图素材,下面让我们一步步来演示抠图的过程,并为之更换背景。 3f5733ef0e9cd8dafeb910d866284128

抠图过程

1.打开素材

第一步,当然是用PS打开这张图片素材啦。 20150314235120

2.复制通道

打开通道选项卡,按每个通道的前面的小眼睛,让红绿蓝通道依次显示,观察哪一个通道明暗对比更加明显,在这里,我们发现蓝色通道的明暗对比更加明显,那我们就右键复制,建立蓝色通道的一个副本,如图所示。 20150314235402

3.调整色阶

打开图像-调整-色阶,将低色阶调高,高色阶调低,让图片的明暗对比更加明显,点击确定。 未标题-1 0150314235948

4.减淡加深

切换至减淡或加深工具,首先我们切换到减淡工具,范围选择高光,直接对图片的亮白部分进行涂抹,这时我们会发现比较亮的部分都被减淡为白色,如图所示。 20150315000249 然后切换到加深工具,范围选择阴影,直接涂抹人物,将人物全部涂抹成黑色,如图所示 20150315000438 20150315000519 20150315000617

5.画笔修补

这时我们会发现几乎所有的人物都已经变成了黑色,不过还有小瑕疵,有一小部分还没有变成黑色,没关系,切换到画笔工具,颜色选择黑色,让我们把没有变成黑色的部分进行填充。 20150315000838 20150315001006

6.反向检查

按Ctrl+I,将图片切换为反向,将黑白部分没有填充好的地方重新用画笔工具填充一下,保证做到黑白分明。 20150315001156

7.抠出人物

按住Ctrl键,鼠标移至图层的小图标处点击,即图中红色框处的区域,点击一下,即可选中人物的轮廓。 20150315001334 将图层的RGB通道全部复原,切换至图层面板 20150315001556 20150315001638 按Ctrl+J,复制选区中的内容到新的图层,这时我们会发现新建了一个图层,它的背景是透明的。(P.S.按第一次不生效可以尝试按第二次,我这边出现了一个副本,然后便是透明背景的图片) 20150315002534

8.更换背景

我们在该图层下面新建一个图层,填充为自己想要的颜色,看一下效果,在这里我设置了灰白渐变效果。 20150315002659

9.去除白边

选中人物图层,选择图层-修边-移除白色杂边,即可去除边缘的杂边干扰 20150315004324 这样一来,抠头发丝的完整过程就结束啦。

总结

以上便是抠头发丝的全部过程,如果做证件照的话,可以尝试一用,希望对大家有帮助

HTML

综述

改编内容,HTML5实现2048游戏的开发,添加了小屏幕适配,支持手机端触控。

截图

1.电脑端

20150313140648

2.平板端

20150313142906

3.手机端

20150313143200

在线演示

在线演示

源码下载

源码下载

HTML

综述

原创内容,纯 CSS3 实现微信扫一扫的功能,页面一共五个二维码,鼠标移上二维码会自动放大,同时支持响应式布局,整体会根据页面响应式缩放。 在我的个人网站赞助页面即存在这个 DEMO 进入页面

截图

1.正常情况,大屏幕

20150312235820

2.鼠标移上,大屏幕

20150312235953 3.小屏幕 20150313000056

在线演示

在线演示

源码下载

源码下载

JavaScript

关于JavaScript

JavaScript,一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。然而现在JavaScript也可被用于网络服务器,如Node.js。 不同于服务器端脚本语言,例如PHP与ASP,JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担,而与此同时也带来另一个问题:安全性。而随着服务器的强壮,虽然现在的程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(如AJAX)必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展,及其事件驱动及异步IO等特性,JavaScript逐渐被用来编写服务器端程序。 视频来源:兄弟连教育 感谢 @兄弟连教育

关于兄弟连

兄弟连成立于2006年,专注于IT技术培训,是国内最早及最大的PHP/LAMP技术专业培训学校。 兄弟连现已开设PHP/Java/Android/IOS/手游/云计算/UI等多学科,累计培养逾万名学员,2014年学员就业平均起薪高达5500元+。 兄弟连已是第9个年头,这条路虽历尽艰辛,但我们痴心不改。我们就是想让学员们知道:不是所有的培训机构都是骗人的! 在兄弟连,你可以找到自我、重拾自信;在兄弟连,你会每天渴求成长,学到深夜; 在兄弟连,你把学习当成一种习惯;在兄弟连,你有更多的兄弟姐妹; 在兄弟连,有陪你一起熬夜的老师;在兄弟连,你会被“狠狠”的爱着…… 兄弟连已在北京、上海和广州设立校区,今后几年内将会陆续在成都、西安等地建设校区,每年有数十万名学员受益于兄弟连教育的职业培训、教学视频、网络公开课。

兄弟连

“我们不仅仅是老师,我们是学员的梦想守护者与职场引路人。” 我们不敢妄言改变中国教育,只是低下头认认真真做教育。兄弟连没有做什么惊天动地的大事,我们就是把别人不愿做的脏活累活做到极致,做教育就是需要这种工匠精神。 在中国,选择职业培训的学生,一定是对自己未来有憧憬、想改变命运的有志青年。主观上有学习的欲望,客观上自控能力差,需要外力协助其改变。 教学靠谱/变态严管/职业素养课我们的核心竞争力。 培训结束会有脱胎换骨的感觉,怕死别来兄弟连!

视频下载

视频下载

福利专区

摄影基本原理

在摄影中,通常使用照相机或者照相暗盒(Camera obscura)作为照相设备,利用光学胶卷或者数码存储卡作为记录介质。但也有例外,比如曼·雷的实物投影法(rayographs)就是利用影子在相纸上成像,而不需要用到照相机。 多数照相是用一系列的透镜组成的镜头,将光线折射聚焦后在胶片或者CCD光学感应介质,胶片本身也是储存介质,以化学变化储存讯号。而CCD则会将光转换为电子讯号后,以数码存储卡储存。储存的讯号可透过某些方式,还原成光学信息后,用相片或显示器观赏。除了透镜构成的镜头,少数镜头是用反射镜或反射镜搭配透镜所构成。

摄影艺术

摄影艺术是一门较为年轻的艺术门类,它是紧紧伴随着每个时代高新科技发展而发展着。摄影艺术是一种对现实高度概括;是来源于生活而高于生活的影像工作方式;是一种高贵的雅文化。摄影艺术就是作者的一种表达,正如说话是一种表达、写作是一种表达一样。摄影的表达方式多种多样,可以“风光”、“静物”、“人像”,也可以“纪实”、“民俗”、“观念”,表达方式没有高下之分。

摄影技术的学习不仅仅是学习光圈、焦距、曝光、色温、反差、感光度、白平衡之类的技术性知识,也不仅仅是学习构图、造型、色彩、光影等等美学知识,还有学习中外优秀摄影师的作品,看摄影师的画册和论著啦,等等。此外,还要学习一些诸如哲学、人类学、社会学、历史学、艺术史之类似乎与摄影无甚直接关系的学问。

wallpaper_5255573

视频下载

视频下载

PHP

关于PHP

PHP(外文名: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTML(标准通用标记语言下的一个应用)文档中去执行,执行效率比完全生成HTML标记的CGI要高许多;PHP还可以执行编译后代码,编译可以达到加密和优化代码运行,使代码运行更快。 在此提供PHP视频教程,视频来源:兄弟连教育

关于THINKPHP

    ThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的。最早诞生于2006年初,2007年元旦正式更名为ThinkPHP,并且遵循Apache2开源协议发布。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进。

    ThinkPHP是一个快速、兼容而且简单的轻量级国产PHP开发框架,诞生于2006年初,原名FCS,2007年元旦正式更名为ThinkPHP,遵循Apache2开源协议发布,从Struts结构移植过来并做了改进和完善,同时也借鉴了国外很多优秀的框架和模式,使用面向对象的开发结构和MVC模式,融合了Struts的思想和TagLib(标签库)、RoR的ORM映射和ActiveRecord模式。

ThinkPHP可以支持windows/Unix/Liunx等服务器环境,正式版需要PHP5.0以上版本支持,支持MySql、PgSQL、Sqlite以及PDO等多种数据库,ThinkPHP框架本身没有什么特别模块要求,具体的应用系统运行环境要求视开发所涉及的模块。

作为一个整体开发解决方案,ThinkPHP能够解决应用开发中的大多数需要,因为其自身包含了底层架构、兼容处理、基类库、数据库访问层、模板引擎、缓存机制、插件机制、角色认证、表单处理等常用的组件,并且对于跨版本、跨平台和跨数据库移植都比较方便。并且每个组件都是精心设计和完善的,应用开发过程仅仅需要关注您的业务逻辑。

关于兄弟连

兄弟连成立于2006年,专注于IT技术培训,是国内最早及最大的PHP/LAMP技术专业培训学校。 兄弟连现已开设PHP/Java/Android/IOS/手游/云计算/UI等多学科,累计培养逾万名学员,2014年学员就业平均起薪高达5500元+。 兄弟连已是第9个年头,这条路虽历尽艰辛,但我们痴心不改。我们就是想让学员们知道:不是所有的培训机构都是骗人的! 在兄弟连,你可以找到自我、重拾自信;在兄弟连,你会每天渴求成长,学到深夜; 在兄弟连,你把学习当成一种习惯;在兄弟连,你有更多的兄弟姐妹; 在兄弟连,有陪你一起熬夜的老师;在兄弟连,你会被“狠狠”的爱着…… 兄弟连已在北京、上海和广州设立校区,今后几年内将会陆续在成都、西安等地建设校区,每年有数十万名学员受益于兄弟连教育的职业培训、教学视频、网络公开课。

兄弟连

“我们不仅仅是老师,我们是学员的梦想守护者与职场引路人。” 我们不敢妄言改变中国教育,只是低下头认认真真做教育。兄弟连没有做什么惊天动地的大事,我们就是把别人不愿做的脏活累活做到极致,做教育就是需要这种工匠精神。 在中国,选择职业培训的学生,一定是对自己未来有憧憬、想改变命运的有志青年。主观上有学习的欲望,客观上自控能力差,需要外力协助其改变。 教学靠谱/变态严管/职业素养课我们的核心竞争力。 培训结束会有脱胎换骨的感觉,怕死别来兄弟连!

感谢 @兄弟连教育

VERSION:THINKPHP 版本 3.1.2

视频下载

Java

一、安装jdk

1)下载jdk1.7

下载地址 自己定义一个目录安装,一步步安装下来,我是安装到了D盘,如图所示:

2)设置环境变量

我的电脑右击点属性,再点高级系统设置 点击环境变量进行环境变量配置,如图所示: 配置方法一: 1)配置时找到系统变量,找到path变量,如果没有则新建。 在变量名填Path,变量值填 D:\jdk1.7\bin;注意要加分号! 如图所示: 2)同理,找到变量名classpath,没有就新建一个classpath 变量值填D:\jdk1.7\lib;. 配制方法二:

1)新建java_home变量 变量名:java_home 变量值:D:\jdk1.7; 2)变量名:path 变量值:%java_home%\bin; 3)变量名:classpath 变量值:%java_home%\lib;

这个是以后配置时直接引用java_home比较方便 这样jdk的安装和环境变量的配置就完成啦! 测试是否成功:在命令行输入java -version 如果出现下列字符则说明成功

二、Eclipse的下载

注意:此处提供的3.3版本,若版本太高,没有与Eclipse相对应的lomboz版本则无法配置,目前lomboz最高是3.3版本 下载地址 注意:如果你已经有了3.3版本,那么可以跳过此步。 我新建了一个JspEclipse文件夹,解压到此文件夹如图所示: 首先进行汉化 语言包下载 下载后新建一个eclipse_plugins文件夹,解压到此文件夹下,创建这个文件夹的目的是把所有下载的插件都保存到这里,便于管理 目录层次如图所示,language下有eclipse,eclipse下有features和plugins文件夹 在原先的JspEclipse下的eclipse文件夹下新建一个links文件夹,再新建文本文件,扩展名为link,内容如图所示: 这样汉化就完成了

三、配置lomboz

下载地址 同样下载解压到原先创建的eclipse_plugins文件夹下,如图所示: 同上在原先的JspEclipse下的eclipse文件夹下新建一个links文件夹,再新建文本文件,扩展名为link,内容如图所示: 这样lomboz就配置完成啦,启动一下试试! 此处显示中文,说明汉化成功! 小问题的解决:或许有的人会显示这样的页面: 那么下载 eclipse.ini 这个文件,把目录下的eclipse.ini文件替换掉。用记事本打开这个文件显示如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
-startup
plugins\org.eclipse.equinox.launcher_1.0.0.v20070606.jar
--launcher.library
plugins\org.eclipse.equinox.launcher.win32.win32.x86_1.0.0.v20070523
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
128m
-vm
D:\java Jdk 1.6\bin\javaw.exe
-vmargs
-Xms40m
-Xmx384m
-Djava.net.preferIPv4Stack=true

-startup是启动所需要的jar文件,这里我把相对路径配好了 -luncher.library我也把相对路径配好了 -xxmaxpermsize是最大内存限制,如果这个数值过大也会出现上述情况,我改成了128m -vm 这里是相对的jdk环境设置,这个要设置成你自己的jdk环境,自己写一个路径,在bin目录下,一个javaw.exe文件,如果还不行,那么可能是jdk的版本导致的,我换用了jdk1.6测试成功!如果1.7不能用的话,就换用1.6版本的jdk吧! 好,小问题暂告一段落,看下图。 如果你能新建Dynamic Web Project说明你已经全配置成功啦!欢呼吧骚年们!

四、配置tomcat

下载地址 这个是免安装版,可以直接下载解压,我放在了D盘 tomcat环境变量的配置: 1,新建变量名:CATALINA_BASE,变量值:D:\tomcat 6.0\apache-tomcat-6.0.29 2,新建变量名:CATALINA_HOME,变量值:D:\tomcat 6.0\apache-tomcat-6.0.29 【1和2中的路径根据你存放的目录不同而不同】 3,打开PATH,添加变量值:%CATALINA_HOME%\lib;%CATALINA_HOME%\bin 启动tomcat: 在开始菜单输入cmd,然后cd命令定位到tomcat的bin目录,如图 然后输入 startup.bat命令,这时tomcat就启动起来了,会弹出一个新的窗口,那个就是tomcat 下面这个图就是tomcat: 下面进行测试:在浏览器输入http://localhost:8080/ 看看能否出现tomcat界面,如果出现了,那么说明成功了!如果不行,检查环境变量的配置。

五、tomcat嵌入eclipse

打开eclipse,窗口—>首选项,界面如下: 点选服务器—>运行时环境—>添加,选择Apach—>tomcat6.0,完成 创建之后编辑,添加tomcat的目录,名称自己随便取,jre用缺省jre 这样在eclipse下方就出现了一个tomcat了,绿色的箭头就是启动,红色的方块是停止 可以点击运行tomcat,其中点下方标记的红色处,可以对tomcat进行详细配置,默认配置即可,不用更改了

六、测试项目

新建一个Dynamic Web Project项目 点下一步,我取名为test,服务器选刚才创建的tomcat6.0,然后下一步,下一步,直到完成就好了 在webcontent目录下面新建一个jsp文件,我的叫a.jsp 我在body区输入了My First Jsp 右击该文件,在服务器上运行,选择tomcat,然后结果如图所示。恭喜你,所有配置都成功啦! 点选eclipse的窗口,然后web浏览器,选default system web browser,即系统默认浏览器,就可以用自己的浏览器打开界面啦。如图所示

Python

上一节我们介绍了正则表达式,它的内容其实还是蛮多的,如果一个正则匹配稍有差池,那可能程序就处在永久的循环之中,而且有的小伙伴们也对写正则表达式的写法用得不熟练,没关系,我们还有一个更强大的工具,叫Beautiful Soup,有了它我们可以很方便地提取出HTML或XML标签中的内容,实在是方便,这一节就让我们一起来感受一下Beautiful Soup的强大吧。

1. Beautiful Soup的简介

简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据。官方解释如下:

Beautiful Soup提供一些简单的、python式的函数用来处理导航、搜索、修改分析树等功能。它是一个工具箱,通过解析文档为用户提供需要抓取的数据,因为简单,所以不需要多少代码就可以写出一个完整的应用程序。 Beautiful Soup自动将输入文档转换为Unicode编码,输出文档转换为utf-8编码。你不需要考虑编码方式,除非文档没有指定一个编码方式,这时,Beautiful Soup就不能自动识别编码方式了。然后,你仅仅需要说明一下原始编码方式就可以了。 Beautiful Soup已成为和lxml、html6lib一样出色的python解释器,为用户灵活地提供不同的解析策略或强劲的速度。

废话不多说,我们来试一下吧~

2. Beautiful Soup 安装

Beautiful Soup 3 目前已经停止开发,推荐在现在的项目中使用Beautiful Soup 4,不过它已经被移植到BS4了,也就是说导入时我们需要 import bs4 。所以这里我们用的版本是 Beautiful Soup 4.3.2 (简称BS4),另外据说 BS4 对 Python3 的支持不够好,不过我用的是 Python2.7.7,如果有小伙伴用的是 Python3 版本,可以考虑下载 BS3 版本。 可以利用 pip 或者 easy_install 来安装,以下两种方法均可

1
easy_install beautifulsoup4
1
pip install beautifulsoup4

如果想安装最新的版本,请直接下载安装包来手动安装,也是十分方便的方法。在这里我安装的是 Beautiful Soup 4.3.2 Beautiful Soup 3.2.1Beautiful Soup 4.3.2 下载完成之后解压 运行下面的命令即可完成安装

1
sudo python setup.py install

然后需要安装 lxml

1
easy_install lxml
1
pip install lxml

另一个可供选择的解析器是纯Python实现的 html5lib , html5lib的解析方式与浏览器相同,可以选择下列方法来安装html5lib:

1
easy_install html5lib
1
pip install html5lib

Beautiful Soup支持Python标准库中的HTML解析器,还支持一些第三方的解析器,如果我们不安装它,则 Python 会使用 Python默认的解析器,lxml 解析器更加强大,速度更快,推荐安装。

<thead”>

解析器

使用方法

优势

劣势

Python标准库

BeautifulSoup(markup, “html.parser”)

  • Python的内置标准库
  • 执行速度适中
  • 文档容错能力强

  • Python 2.7.3 or 3.2.2)前 的版本中文档容错能力差

lxml HTML 解析器

BeautifulSoup(markup, “lxml”)

  • 速度快
  • 文档容错能力强

  • 需要安装C语言库

lxml XML 解析器

BeautifulSoup(markup, [“lxml”, “xml”])BeautifulSoup(markup, “xml”)

  • 速度快
  • 唯一支持XML的解析器

  • 需要安装C语言库

html5lib

BeautifulSoup(markup, “html5lib”)

  • 最好的容错性
  • 以浏览器的方式解析文档
  • 生成HTML5格式的文档

  • 速度慢

  • 不依赖外部扩展

3. 开启Beautiful Soup 之旅

在这里先分享官方文档链接,不过内容是有些多,也不够条理,在此本文章做一下整理方便大家参考。 官方文档

4. 创建 Beautiful Soup 对象

首先必须要导入 bs4 库

1
from bs4 import BeautifulSoup

我们创建一个字符串,后面的例子我们便会用它来演示

1
2
3
4
5
6
7
8
9
10
11
html = """
<html><head><title>The Dormouse's story</title></head>
<body>
<p class="title" name="dromouse"><b>The Dormouse's story</b></p>
<p class="story">Once upon a time there were three little sisters; and their names were
<a href="http://example.com/elsie" class="sister" id="link1"><!-- Elsie --></a>,
<a href="http://example.com/lacie" class="sister" id="link2">Lacie</a> and
<a href="http://example.com/tillie" class="sister" id="link3">Tillie</a>;
and they lived at the bottom of a well.</p>
<p class="story">...</p>
"""

创建 beautifulsoup 对象

1
soup = BeautifulSoup(html)

另外,我们还可以用本地 HTML 文件来创建对象,例如

1
soup = BeautifulSoup(open('index.html'))

上面这句代码便是将本地 index.html 文件打开,用它来创建 soup 对象 下面我们来打印一下 soup 对象的内容,格式化输出

1
print soup.prettify()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<head>
<title>
The Dormouse's story
</title>
</head>
<body>
<p class="title" name="dromouse">
<b>
The Dormouse's story
</b>
</p>
<p class="story">
Once upon a time there were three little sisters; and their names were
<a class="sister" href="http://example.com/elsie" id="link1">
<!-- Elsie -->
</a>
,
<a class="sister" href="http://example.com/lacie" id="link2">
Lacie
</a>
and
<a class="sister" href="http://example.com/tillie" id="link3">
Tillie
</a>
;
and they lived at the bottom of a well.
</p>
<p class="story">
...
</p>
</body>
</html>

以上便是输出结果,格式化打印出了它的内容,这个函数经常用到,小伙伴们要记好咯。

5. 四大对象种类

Beautiful Soup将复杂HTML文档转换成一个复杂的树形结构,每个节点都是Python对象,所有对象可以归纳为4种:

  • Tag
  • NavigableString
  • BeautifulSoup
  • Comment

下面我们进行一一介绍

(1)Tag

Tag 是什么?通俗点讲就是 HTML 中的一个个标签,例如

1
<title>The Dormouse's story</title>
1
<a class="sister" href="http://example.com/elsie" id="link1">Elsie</a>

上面的 title a 等等 HTML 标签加上里面包括的内容就是 Tag,下面我们来感受一下怎样用 Beautiful Soup 来方便地获取 Tags 下面每一段代码中注释部分即为运行结果

1
2
print soup.title
#<title>The Dormouse's story</title>
1
2
print soup.head
#<head><title>The Dormouse's story</title></head>
1
2
print soup.a
#<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>
1
2
print soup.p
#<p class="title" name="dromouse"><b>The Dormouse's story</b></p>

我们可以利用 soup加标签名轻松地获取这些标签的内容,是不是感觉比正则表达式方便多了?不过有一点是,它查找的是在所有内容中的第一个符合要求的标签,如果要查询所有的标签,我们在后面进行介绍。 我们可以验证一下这些对象的类型

1
2
print type(soup.a)
#<class 'bs4.element.Tag'>

对于 Tag,它有两个重要的属性,是 name 和 attrs,下面我们分别来感受一下 name

1
2
3
4
print soup.name
print soup.head.name
#[document]
#head

soup 对象本身比较特殊,它的 name 即为 [document],对于其他内部标签,输出的值便为标签本身的名称。 attrs

1
2
print soup.p.attrs
#{'class': ['title'], 'name': 'dromouse'}

在这里,我们把 p 标签的所有属性打印输出了出来,得到的类型是一个字典。 如果我们想要单独获取某个属性,可以这样,例如我们获取它的 class 叫什么

1
2
print soup.p['class']
#['title']

还可以这样,利用get方法,传入属性的名称,二者是等价的

1
2
print soup.p.get('class')
#['title']

我们可以对这些属性和内容等等进行修改,例如

1
2
3
soup.p['class']="newClass"
print soup.p
#<p class="newClass" name="dromouse"><b>The Dormouse's story</b></p>

还可以对这个属性进行删除,例如

1
2
3
del soup.p['class']
print soup.p
#<p name="dromouse"><b>The Dormouse's story</b></p>

不过,对于修改删除的操作,不是我们的主要用途,在此不做详细介绍了,如果有需要,请查看前面提供的官方文档

(2)NavigableString

既然我们已经得到了标签的内容,那么问题来了,我们要想获取标签内部的文字怎么办呢?很简单,用 .string 即可,例如

1
2
print soup.p.string
#The Dormouse's story

这样我们就轻松获取到了标签里面的内容,想想如果用正则表达式要多麻烦。它的类型是一个 NavigableString,翻译过来叫 可以遍历的字符串,不过我们最好还是称它英文名字吧。 来检查一下它的类型

1
2
print type(soup.p.string)
#<class 'bs4.element.NavigableString'>

(3)BeautifulSoup

BeautifulSoup 对象表示的是一个文档的全部内容.大部分时候,可以把它当作 Tag 对象,是一个特殊的 Tag,我们可以分别获取它的类型,名称,以及属性来感受一下

1
2
3
4
5
6
print type(soup.name)
#<type 'unicode'>
print soup.name
# [document]
print soup.attrs
#{} 空字典

(4)Comment

Comment 对象是一个特殊类型的 NavigableString 对象,其实输出的内容仍然不包括注释符号,但是如果不好好处理它,可能会对我们的文本处理造成意想不到的麻烦。 我们找一个带注释的标签

1
2
3
print soup.a
print soup.a.string
print type(soup.a.string)

运行结果如下

1
2
3
<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>
Elsie
<class 'bs4.element.Comment'>

a 标签里的内容实际上是注释,但是如果我们利用 .string 来输出它的内容,我们发现它已经把注释符号去掉了,所以这可能会给我们带来不必要的麻烦。 另外我们打印输出下它的类型,发现它是一个 Comment 类型,所以,我们在使用前最好做一下判断,判断代码如下

1
2
if type(soup.a.string)==bs4.element.Comment:
print soup.a.string

上面的代码中,我们首先判断了它的类型,是否为 Comment 类型,然后再进行其他操作,如打印输出。

6. 遍历文档树

(1)直接子节点

要点:.contents .children 属性

.contents tag 的 .content 属性可以将tag的子节点以列表的方式输出

1
2
print soup.head.contents 
#[<title>The Dormouse's story</title>]

输出方式为列表,我们可以用列表索引来获取它的某一个元素

1
2
print soup.head.contents[0]
#<title>The Dormouse's story</title>

.children 它返回的不是一个 list,不过我们可以通过遍历获取所有子节点。 我们打印输出 .children 看一下,可以发现它是一个 list 生成器对象

1
2
print soup.head.children
#<listiterator object at 0x7f71457f5710>

我们怎样获得里面的内容呢?很简单,遍历一下就好了,代码及结果如下

1
2
for child in  soup.body.children:
print child
1
2
3
4
5
6
7
8
9
10
<p class="title" name="dromouse"><b>The Dormouse's story</b></p>

<p class="story">Once upon a time there were three little sisters; and their names were
<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>,
<a class="sister" href="http://example.com/lacie" id="link2">Lacie</a> and
<a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>;
and they lived at the bottom of a well.</p>


<p class="story">...</p>

(2)所有子孙节点

知识点:.descendants 属性

.descendants .contents 和 .children 属性仅包含tag的直接子节点,.descendants 属性可以对所有tag的子孙节点进行递归循环,和 children类似,我们也需要遍历获取其中的内容。

1
2
for child in soup.descendants:
print child

运行结果如下,可以发现,所有的节点都被打印出来了,先生最外层的 HTML标签,其次从 head 标签一个个剥离,以此类推。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html><head><title>The Dormouse's story</title></head>
<body>
<p class="title" name="dromouse"><b>The Dormouse's story</b></p>
<p class="story">Once upon a time there were three little sisters; and their names were
<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>,
<a class="sister" href="http://example.com/lacie" id="link2">Lacie</a> and
<a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>;
and they lived at the bottom of a well.</p>
<p class="story">...</p>
</body></html>
<head><title>The Dormouse's story</title></head>
<title>The Dormouse's story</title>
The Dormouse's story


<body>
<p class="title" name="dromouse"><b>The Dormouse's story</b></p>
<p class="story">Once upon a time there were three little sisters; and their names were
<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>,
<a class="sister" href="http://example.com/lacie" id="link2">Lacie</a> and
<a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>;
and they lived at the bottom of a well.</p>
<p class="story">...</p>
</body>


<p class="title" name="dromouse"><b>The Dormouse's story</b></p>
<b>The Dormouse's story</b>
The Dormouse's story


<p class="story">Once upon a time there were three little sisters; and their names were
<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>,
<a class="sister" href="http://example.com/lacie" id="link2">Lacie</a> and
<a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>;
and they lived at the bottom of a well.</p>
Once upon a time there were three little sisters; and their names were

<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>
Elsie
,

<a class="sister" href="http://example.com/lacie" id="link2">Lacie</a>
Lacie
and

<a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>
Tillie
;
and they lived at the bottom of a well.


<p class="story">...</p>
...

(3)节点内容

知识点:.string 属性

如果tag只有一个 NavigableString 类型子节点,那么这个tag可以使用 .string 得到子节点。如果一个tag仅有一个子节点,那么这个tag也可以使用 .string 方法,输出结果与当前唯一子节点的 .string 结果相同。 通俗点说就是:如果一个标签里面没有标签了,那么 .string 就会返回标签里面的内容。如果标签里面只有唯一的一个标签了,那么 .string 也会返回最里面的内容。例如

1
2
3
4
print soup.head.string
#The Dormouse's story
print soup.title.string
#The Dormouse's story

如果tag包含了多个子节点,tag就无法确定,string 方法应该调用哪个子节点的内容, .string 的输出结果是 None

1
2
print soup.html.string
# None

(4)多个内容

知识点: .strings .stripped_strings 属性

.strings 获取多个内容,不过需要遍历获取,比如下面的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
for string in soup.strings:
print(repr(string))
# u"The Dormouse's story"
# u'\n\n'
# u"The Dormouse's story"
# u'\n\n'
# u'Once upon a time there were three little sisters; and their names were\n'
# u'Elsie'
# u',\n'
# u'Lacie'
# u' and\n'
# u'Tillie'
# u';\nand they lived at the bottom of a well.'
# u'\n\n'
# u'...'
# u'\n'

.stripped_strings 输出的字符串中可能包含了很多空格或空行,使用 .stripped_strings 可以去除多余空白内容

1
2
3
4
5
6
7
8
9
10
11
12
for string in soup.stripped_strings:
print(repr(string))
# u"The Dormouse's story"
# u"The Dormouse's story"
# u'Once upon a time there were three little sisters; and their names were'
# u'Elsie'
# u','
# u'Lacie'
# u'and'
# u'Tillie'
# u';\nand they lived at the bottom of a well.'
# u'...'

(5)父节点

知识点: .parent 属性

1
2
3
p = soup.p
print p.parent.name
#body
1
2
3
content = soup.head.title.string
print content.parent.name
#title

(6)全部父节点

知识点:.parents 属性

通过元素的 .parents 属性可以递归得到元素的所有父辈节点,例如

1
2
3
content = soup.head.title.string
for parent in content.parents:
print parent.name
1
2
3
4
title
head
html
[document]

(7)兄弟节点

知识点:.next_sibling .previous_sibling 属性

兄弟节点可以理解为和本节点处在统一级的节点,.next_sibling 属性获取了该节点的下一个兄弟节点,.previous_sibling 则与之相反,如果节点不存在,则返回 None 注意:实际文档中的tag的 .next_sibling 和 .previous_sibling 属性通常是字符串或空白,因为空白或者换行也可以被视作一个节点,所以得到的结果可能是空白或者换行

1
2
3
4
5
6
7
8
9
10
11
print soup.p.next_sibling
# 实际该处为空白
print soup.p.prev_sibling
#None 没有前一个兄弟节点,返回 None
print soup.p.next_sibling.next_sibling
#<p class="story">Once upon a time there were three little sisters; and their names were
#<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>,
#<a class="sister" href="http://example.com/lacie" id="link2">Lacie</a> and
#<a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>;
#and they lived at the bottom of a well.</p>
#下一个节点的下一个兄弟节点是我们可以看到的节点

(8)全部兄弟节点

知识点:.next_siblings .previous_siblings 属性

通过 .next_siblings 和 .previous_siblings 属性可以对当前节点的兄弟节点迭代输出

1
2
3
4
5
6
7
8
for sibling in soup.a.next_siblings:
print(repr(sibling))
# u',\n'
# <a class="sister" href="http://example.com/lacie" id="link2">Lacie</a>
# u' and\n'
# <a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>
# u'; and they lived at the bottom of a well.'
# None

(9)前后节点

知识点:.next_element .previous_element 属性

与 .next_sibling .previous_sibling 不同,它并不是针对于兄弟节点,而是在所有节点,不分层次 比如 head 节点为

1
<head><title>The Dormouse's story</title></head>

那么它的下一个节点便是 title,它是不分层次关系的

1
2
print soup.head.next_element
#<title>The Dormouse's story</title>

(10)所有前后节点

知识点:.next_elements .previous_elements 属性

通过 .next_elements 和 .previous_elements 的迭代器就可以向前或向后访问文档的解析内容,就好像文档正在被解析一样

1
2
3
4
5
6
7
8
9
for element in last_a_tag.next_elements:
print(repr(element))
# u'Tillie'
# u';\nand they lived at the bottom of a well.'
# u'\n\n'
# <p class="story">...</p>
# u'...'
# u'\n'
# None

以上是遍历文档树的基本用法。

7.搜索文档树

(1)find_all( name , attrs , recursive , text , **kwargs )

find_all() 方法搜索当前tag的所有tag子节点,并判断是否符合过滤器的条件 1)name 参数 name 参数可以查找所有名字为 name 的tag,字符串对象会被自动忽略掉 A.传字符串 最简单的过滤器是字符串.在搜索方法中传入一个字符串参数,Beautiful Soup会查找与字符串完整匹配的内容,下面的例子用于查找文档中所有的标签

1
2
soup.find_all('b')
# [<b>The Dormouse's story</b>]
1
2
print soup.find_all('a')
#[<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>, <a class="sister" href="http://example.com/lacie" id="link2">Lacie</a>, <a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>]

B.传正则表达式 如果传入正则表达式作为参数,Beautiful Soup会通过正则表达式的 match() 来匹配内容.下面例子中找出所有以b开头的标签,这表示 和标签都应该被找到

1
2
3
4
5
import re
for tag in soup.find_all(re.compile("^b")):
print(tag.name)
# body
# b

C.传列表 如果传入列表参数,Beautiful Soup会将与列表中任一元素匹配的内容返回.下面代码找到文档中所有标签和标签

1
2
3
4
5
soup.find_all(["a", "b"])
# [<b>The Dormouse's story</b>,
# <a class="sister" href="http://example.com/elsie" id="link1">Elsie</a>,
# <a class="sister" href="http://example.com/lacie" id="link2">Lacie</a>,
# <a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>]

D.传 True True 可以匹配任何值,下面代码查找到所有的tag,但是不会返回字符串节点

1
2
3
4
5
6
7
8
9
10
11
for tag in soup.find_all(True):
print(tag.name)
# html
# head
# title
# body
# p
# b
# p
# a
# a

E.传方法 如果没有合适过滤器,那么还可以定义一个方法,方法只接受一个元素参数 [4] ,如果这个方法返回 True 表示当前元素匹配并且被找到,如果不是则反回 False 下面方法校验了当前元素,如果包含 class 属性却不包含 id 属性,那么将返回 True:

1
2
def has_class_but_no_id(tag):
return tag.has_attr('class') and not tag.has_attr('id')

将这个方法作为参数传入 find_all() 方法,将得到所有

标签:

1
2
3
4
soup.find_all(has_class_but_no_id)
# [<p class="title"><b>The Dormouse's story</b></p>,
# <p class="story">Once upon a time there were...</p>,
# <p class="story">...</p>]

2)keyword 参数

注意:如果一个指定名字的参数不是搜索内置的参数名,搜索时会把该参数当作指定名字tag的属性来搜索,如果包含一个名字为 id 的参数,Beautiful Soup会搜索每个tag的”id”属性

1
2
soup.find_all(id='link2')
# [<a class="sister" href="http://example.com/lacie" id="link2">Lacie</a>]

如果传入 href 参数,Beautiful Soup会搜索每个tag的”href”属性

1
2
soup.find_all(href=re.compile("elsie"))
# [<a class="sister" href="http://example.com/elsie" id="link1">Elsie</a>]

使用多个指定名字的参数可以同时过滤tag的多个属性

1
2
soup.find_all(href=re.compile("elsie"), id='link1')
# [<a class="sister" href="http://example.com/elsie" id="link1">three</a>]

在这里我们想用 class 过滤,不过 class 是 python 的关键词,这怎么办?加个下划线就可以

1
2
3
4
soup.find_all("a", class_="sister")
# [<a class="sister" href="http://example.com/elsie" id="link1">Elsie</a>,
# <a class="sister" href="http://example.com/lacie" id="link2">Lacie</a>,
# <a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>]

有些tag属性在搜索不能使用,比如HTML5中的 data-* 属性

1
2
3
data_soup = BeautifulSoup('<div data-foo="value">foo!</div>')
data_soup.find_all(data-foo="value")
# SyntaxError: keyword can't be an expression

但是可以通过 find_all() 方法的 attrs 参数定义一个字典参数来搜索包含特殊属性的tag

1
2
data_soup.find_all(attrs={"data-foo": "value"})
# [<div data-foo="value">foo!</div>]

3)text 参数 通过 text 参数可以搜搜文档中的字符串内容.与 name 参数的可选值一样, text 参数接受 字符串 , 正则表达式 , 列表, True

1
2
3
4
5
6
7
8
soup.find_all(text="Elsie")
# [u'Elsie']

soup.find_all(text=["Tillie", "Elsie", "Lacie"])
# [u'Elsie', u'Lacie', u'Tillie']

soup.find_all(text=re.compile("Dormouse"))
[u"The Dormouse's story", u"The Dormouse's story"]

4)limit 参数 find_all() 方法返回全部的搜索结构,如果文档树很大那么搜索会很慢.如果我们不需要全部结果,可以使用 limit 参数限制返回结果的数量.效果与SQL中的limit关键字类似,当搜索到的结果数量达到 limit 的限制时,就停止搜索返回结果. 文档树中有3个tag符合搜索条件,但结果只返回了2个,因为我们限制了返回数量

1
2
3
soup.find_all("a", limit=2)
# [<a class="sister" href="http://example.com/elsie" id="link1">Elsie</a>,
# <a class="sister" href="http://example.com/lacie" id="link2">Lacie</a>]

5)recursive 参数 调用tag的 find_all() 方法时,Beautiful Soup会检索当前tag的所有子孙节点,如果只想搜索tag的直接子节点,可以使用参数 recursive=False . 一段简单的文档:

1
2
3
4
5
6
7
<html>
<head>
<title>
The Dormouse's story
</title>
</head>
...

是否使用 recursive 参数的搜索结果:

1
2
3
4
5
soup.html.find_all("title")
# [<title>The Dormouse's story</title>]

soup.html.find_all("title", recursive=False)
# []

(2)find( name , attrs , recursive , text , **kwargs )

它与 find_all() 方法唯一的区别是 find_all() 方法的返回结果是值包含一个元素的列表,而 find() 方法直接返回结果

(3)find_parents() find_parent()

find_all() 和 find() 只搜索当前节点的所有子节点,孙子节点等. find_parents() 和 find_parent() 用来搜索当前节点的父辈节点,搜索方法与普通tag的搜索方法相同,搜索文档搜索文档包含的内容

(4)find_next_siblings() find_next_sibling()

这2个方法通过 .next_siblings 属性对当 tag 的所有后面解析的兄弟 tag 节点进行迭代, find_next_siblings() 方法返回所有符合条件的后面的兄弟节点,find_next_sibling() 只返回符合条件的后面的第一个tag节点

(5)find_previous_siblings() find_previous_sibling()

这2个方法通过 .previous_siblings 属性对当前 tag 的前面解析的兄弟 tag 节点进行迭代, find_previous_siblings() 方法返回所有符合条件的前面的兄弟节点, find_previous_sibling() 方法返回第一个符合条件的前面的兄弟节点

(6)find_all_next() find_next()

这2个方法通过 .next_elements 属性对当前 tag 的之后的 tag 和字符串进行迭代, find_all_next() 方法返回所有符合条件的节点, find_next() 方法返回第一个符合条件的节点

(7)find_all_previous() 和 find_previous()

这2个方法通过 .previous_elements 属性对当前节点前面的 tag 和字符串进行迭代, find_all_previous() 方法返回所有符合条件的节点, find_previous()方法返回第一个符合条件的节点

注:以上(2)(3)(4)(5)(6)(7)方法参数用法与 find_all() 完全相同,原理均类似,在此不再赘述。

8.CSS选择器

我们在写 CSS 时,标签名不加任何修饰,类名前加点,id名前加 #,在这里我们也可以利用类似的方法来筛选元素,用到的方法是 soup.select(),返回类型是 list

(1)通过标签名查找

1
2
print soup.select('title') 
#[<title>The Dormouse's story</title>]
1
2
print soup.select('a')
#[<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>, <a class="sister" href="http://example.com/lacie" id="link2">Lacie</a>, <a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>]
1
2
print soup.select('b')
#[<b>The Dormouse's story</b>]

(2)通过类名查找

1
2
print soup.select('.sister')
#[<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>, <a class="sister" href="http://example.com/lacie" id="link2">Lacie</a>, <a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>]

(3)通过 id 名查找

1
2
print soup.select('#link1')
#[<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>]

(4)组合查找

组合查找即和写 class 文件时,标签名与类名、id名进行的组合原理是一样的,例如查找 p 标签中,id 等于 link1的内容,二者需要用空格分开

1
2
print soup.select('p #link1')
#[<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>]

直接子标签查找

1
2
print soup.select("head > title")
#[<title>The Dormouse's story</title>]

(5)属性查找

查找时还可以加入属性元素,属性需要用中括号括起来,注意属性和标签属于同一节点,所以中间不能加空格,否则会无法匹配到。

1
2
print soup.select('a[class="sister"]')
#[<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>, <a class="sister" href="http://example.com/lacie" id="link2">Lacie</a>, <a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>]
1
2
print soup.select('a[href="http://example.com/elsie"]')
#[<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>]

同样,属性仍然可以与上述查找方式组合,不在同一节点的空格隔开,同一节点的不加空格

1
2
print soup.select('p a[href="http://example.com/elsie"]')
#[<a class="sister" href="http://example.com/elsie" id="link1"><!-- Elsie --></a>]

以上的 select 方法返回的结果都是列表形式,可以遍历形式输出,然后用 get_text() 方法来获取它的内容。

1
2
3
4
5
6
soup = BeautifulSoup(html, 'lxml')
print type(soup.select('title'))
print soup.select('title')[0].get_text()

for title in soup.select('title'):
print title.get_text()

好,这就是另一种与 find_all 方法有异曲同工之妙的查找方法,是不是感觉很方便?

总结

本篇内容比较多,把 Beautiful Soup 的方法进行了大部分整理和总结,不过这还不算完全,仍然有 Beautiful Soup 的修改删除功能,不过这些功能用得比较少,只整理了查找提取的方法,希望对大家有帮助!小伙伴们加油! 熟练掌握了 Beautiful Soup,一定会给你带来太多方便,加油吧!

福利专区

向多人收取文件,并保存于百度盘中,适合收取作业啦,资源啦等等。 2015-03-09 23:38:06 的屏幕截图 这个比较有意思,两步就可以创建一个页面,用于接收任何人发送的文件。 为它授权百度盘账号后,就可以设定一下接收内容了,比如头部颜色、LOGO、名称,说明等等。 文件接收时间最长 30 天,收到的文件位于百度网盘 > 我的应用数据 > DzzCloud 下,然后就没有然后了。 小团队、学校、办公室等地方用于接收多人文件、作业太适合不过了,无需注册打开即可上传。 福利链接 向我传送官方地址

PHP

综述

上一节我们学习了文件的读写操作,这一节我们来看一下文件上传和下载的相关内容。

文件上传

1.PHP配置文件

首先,我们文件上传需要设定一下 php.ini 的配置文件。这是最基本的设置,如果这里设置不成功,那么代码写得再正确也没有用。基本的配置项目如下

file_uploads = on #文件上传开启 upload_max_filesize= 200M #文件上传的最大尺寸 upload_tmp_dir = c:/uploads/ #临时文件目录 post_max_size = 250M #POST时最大尺寸,必须要大于 upload_max_filesize

2.上传时注意事项

1) 文件上传操作表单提交方法必须为 post 2)文件上传时,input type 必须为 file 类型 3)文件上传的表单中,需要增加一个隐含内容,代码如下,value 的单位是 B

1
<input type="hidden" name="MAX_FILE_SIZE" value="100000000">

4)enctype=”multipart/form-data” 只有文件上传时才使用这个值,用来指定表单编码的数据方式,让服务器知道我们要传递一个文件并带有一些常规的表单信息。如下

1
2
<form action="upload.php" method="post" enctype="multipart/form-data">
</form>

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<title> File Uploads </title>
</head>
<body>
<form action="b.php" method="post" enctype="multipart/form-data">
shopname: <input type="text" name="shopname" > <br>
shopprice: <input type="text" name="price"> <br>
shopnum : <input type="text" name="num"> <br>
shoppic: <input type="file" name="pic"> <br>
<input type="submit" name="sub" value="添加商品">
</form>
</body>
</html>

文件 a.php 表单提交到了 b.php 文件,在文件 b.php 中如下

1
2
3
4
5
6
<?php 
echo "<pre>";
print_r($_POST);
print_r($_FILES);
echo "</pre>";
?>

一个是输出 POST得到的数据内容,另一个是输出获取到的文件信息。 运行结果如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Array
(
[shopname] => abc
[price] => abc
[num] => add
[sub] => 添加商品
)
Array
(
[pic] => Array
(
[name] => QPGF.dll
[type] => application/qscall-plugin
[tmp_name] => D:\wamp\tmp\phpC2C7.tmp
[error] => 0
[size] => 199224
)

)

如果不加 enctype=”multipart/form-data” 那么 print_r($_FILES) 不会有任何输出 又比如多文件上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<title> File Uploads </title>
</head>
<body>
<form action="b.php" method="post" enctype="multipart/form-data">
shopname: <input type="text" name="shopname" > <br>
shopprice: <input type="text" name="price"> <br>
shopnum : <input type="text" name="num"> <br>
shoppic: <input type="file" name="pic1"> <br>
shoppic: <input type="file" name="pic2"> <br>
shoppic: <input type="file" name="pic3"> <br>
<input type="submit" name="sub" value="添加商品">
</form>
</body>
</html>

file的name需要不同的名字,那么上面的代码输出结果为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Array
(
[pic1] => Array
(
[name] => libtcmalloc.dll
[type] => application/qscall-plugin
[tmp_name] => D:\wamp\tmp\phpE51E.tmp
[error] => 0
[size] => 178232
)

[pic2] => Array
(
[name] => libexpatw.dll
[type] => application/qscall-plugin
[tmp_name] => D:\wamp\tmp\phpE52E.tmp
[error] => 0
[size] => 130104
)

[pic3] => Array
(
[name] => AsyncTask.dll
[type] => application/qscall-plugin
[tmp_name] => D:\wamp\tmp\phpE52F.tmp
[error] => 0
[size] => 84536
)

)

还可以将name设定为一个数组,如

1
2
3
shoppic: <input type="file" name="pic[]"> <br>
shoppic: <input type="file" name="pic[]"> <br>
shoppic: <input type="file" name="pic[]"> <br>

则输出会是一个三维数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
Array
(
[pic] => Array
(
[name] => Array
(
[0] => libtcmalloc.dll
[1] => libexpatw.dll
[2] => QQProtect.dll
)

[type] => Array
(
[0] => application/qscall-plugin
[1] => application/qscall-plugin
[2] => application/qscall-plugin
)

[tmp_name] => Array
(
[0] => D:\wamp\tmp\phpA17D.tmp
[1] => D:\wamp\tmp\phpA17E.tmp
[2] => D:\wamp\tmp\phpA17F.tmp
)

[error] => Array
(
[0] => 0
[1] => 0
[2] => 0
)

[size] => Array
(
[0] => 178232
[1] => 130104
[2] => 387128
)

)

)

3. 文件上传后的检查

加入上传的表单中文件的name是pic,那么检查的四个方法如下: 1)使用 $_FILES[‘file’][‘error’] 检查错误 2)使用 $_FILES[‘file’][‘size’] 限制大小,单位是字节 3)使用 $_FILES[‘pic’][‘type’] 获取文件或站名,限制文件的类型 4)将上传后的文件名改名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?php
//step 1 使用$_FILES['pic']["error"] 检查错误

if($_FILES["pic"]["error"] > 0){
switch($_FILES["pic"]["error"]) {
case 1:
echo "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值<br>";
break;
case 2:
echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值";
break;

case 3:
echo "文件只有部分被上传";
break;

case 4:
echo "没有文件被上传";
break;

default:

echo "末知错误";

}
exit;
}

$maxsize=5000000; //50k

//step 2 使用$_FILES["pic"]["size"] 限制大小 单位字节 2M=2000000
if($_FILES["pic"]["size"] > $maxsize ) {
echo "上传的文件太大,不能超过{$maxsize}字节";
exit;
}

//step 3 使用$_FILES["pic"]["type"]或是文件的扩展名 限制类型 MIME image/gif image/png gif png jpg

/* list($dl, $xl) = explode("/", $_FILES["pic"]["type"]);

if($dl!="image"){
echo "请上传一个图片,不充许其它类型文件";
exit;
}
*/

$allowtype=array("png", "gif", "jpg", "jpeg");
$arr=explode(".", $_FILES["pic"]["name"]);
$hz=$arr[count($arr)-1];
if(!in_array($hz, $allowtype)){
echo "这是不充许的类型";
exit;
}

//step 4 将让传后的文件名改名


$filepath="./uploads/";
$randname=date("Y").date("m").date("d").date("H").date("i").date("s").rand(100, 999).".".$hz;
//将临时位置的文件移动到指定的目录上即可
if(is_uploaded_file($_FILES["pic"]["tmp_name"])){
if(move_uploaded_file($_FILES["pic"]["tmp_name"], $filepath.$randname)){
echo "上传成功";
}else{
echo "上传失败";
}
}else{
echo "不是一个上传文件";
}

以上便实现了文件上传的检测,包括错误检测,文件大小检测,文件类型检测以及文件更名等等。

文件上传类

在上面的介绍中,我们没有将文件的上传做一个封装,不过,将文件上传个功能封装成一个类的确是一个不错的选择。下面便是一个实例DEMO,让我们来感受一下吧!

1
FileUpload.class.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<?php
class FileUpload {

private $filePath; //指定上传文件保存的路径
private $allowType=array('gif', 'jpg', 'png', 'jpeg'); //充许上传文件的类型
private $maxSize=1000000; //允上传文件的最大长度 1M
private $isRandName=true; //是否随机重命名, true false不随机,使用原文件名
private $originName; //源文件名称
private $tmpFileName; //临时文件名
private $fileType; //文件类型
private $fileSize; //文件大小
private $newFileName; //新文件名
private $errorNum=0; //错误号
private $errorMess=""; //用来提供错误报告



//用于对上传文件初使化
//1. 指定上传路径, 2,充许的类型, 3,限制大小, 4,是否使用随机文件名称
//让用户可以不用按位置传参数,后面参数给值不用将前几个参数也提供值
function __construct($options=array()){
foreach($options as $key=>$val){
//查看用户参数中数组的下标是否和成员属性名相同
if(!in_array($key,get_class_vars(get_class($this)))){
continue;
}
//设置成员变量
$this->setOption($key, $val);
}
}


//获得错误原因
private function getError(){
//获得错误原因
$str="上传文件<font color='red'>{$this->originName}</font>时出错:";
switch($this->errorNum){
case 4: $str .= "没有文件被上传"; break;
case 3: $str .= "文件只被部分上传"; break;
case 2: $str .= "上传文件超过了HTML表单中MAX_FILE_SIZE选项指定的值"; break;
case 1: $str .= "上传文件超过了php.ini 中upload_max_filesize选项的值"; break;
case -1: $str .= "不被充许的类型"; break;
case -2: $str .= "文件过大,上传文件不能超过{$this->maxSize}个字节"; break;
case -3: $str .= "上传失败"; break;
case -4: $str .= "建立存放上传文件目录失败,请重新指定上传目录"; break;
case -5: $str .= "必须指定上传文件的路径"; break;
default: $str .= "末知错误";
}
return $str.'<br>';
}


//用来检查文件上传路径
private function checkFilePath(){
if(empty($this->filePath)) {
$this->setOption('errorNum', -5);
return false;
}
if(!file_exists($this->filePath) || !is_writable($this->filePath)){
if(!@mkdir($this->filePath, 0755)){
$this->setOption('errorNum', -4);
return false;
}
}
return true;
}

//用来检查文件上传的大小
private function checkFileSize() {
if($this->fileSize > $this->maxSize){
$this->setOPtion('errorNum', '-2');
return false;
}else{
return true;
}
}

//用于检查文件上传类型
private function checkFileType() {
if(in_array(strtolower($this->fileType), $this->allowType)) {
return true;
}else{
$this->setOption('errorNum', -1);
return false;
}
}

//设置上传后的文件名称
private function setNewFileName(){
if($this->isRandName){
$this->setOption('newFileName', $this->proRandName());
} else {
$this->setOption('newFileName', $this->originName);
}
}


//设置随机文件名称
private function proRandName(){
$fileName=date("YmdHis").rand(100,999);
return $fileName.'.'.$this->fileType;
}

//设置成员变量
private function setOption($key, $val){
$this->$key=$val;
}

//用来上传一个文件
function uploadFile($fileField){

echo $fileField;
//默认返回值为True
$return=true;
//首先检查文件上传路径
if(!$this->checkFilePath()){
$this->errorMess=$this->getError();
return false;
}

//获得上传文件的名字
$name=$_FILES[$fileField]['name'];
//获得临时文件名
$tmp_name=$_FILES[$fileField]['tmp_name'];
//获得上传文件的大小
$size=$_FILES[$fileField]['size'];
//获得上传错误代号
$error=$_FILES[$fileField]['error'];

//如果上传的是多个文件
if(is_Array($name)){
//错误代号必须也是Array,因为一个文件对应一个错误代号
$errors=array();
//遍历检查文件
for($i=0; $i<count($name); $i++){
if($this->setFiles($name[$i], $tmp_name[$i], $size[$i], $error[$i])){
if(!$this->checkFileSize() || !$this->checkFileType()){
$errors[]=$this->getError();
$return=false;
}
}else{
$error[]=$this->getError();
$return=false;
}
if(!$return)
$this->setFiles();
}
if($return){
$fileNames=array();
for($i=0; $i<count($name); $i++){
if($this->setFiles($name[$i], $tmp_name[$i], $size[$i], $error[$i])){
$this->setNewFileName();
if(!$this->copyFile()){
$errors=$this->getError();
$return=false;
}else{
$fileNames[]=$this->newFileName;
}
}
}
//是一个数组
$this->newFileName=$fileNames;
}
//赋值错误信息
$this->errorMess=$errors;
return $return;
//如果是单个文件上传
} else {
if($this->setFiles($name, $tmp_name, $size, $error)){
if($this->checkFileSize() && $this->checkFileType()){
$this->setNewFileName();
if($this->copyFile()){
return true;
}else{
$return=false;
}
}else{
$return=false;
}
}else{
$return=false;
}

if(!$return)
$this->errorMess=$this->getError();


return $return;
}
}

//保存文件,将文件从临时路径移动到新路径
private function copyFile(){
if(!$this->errorNum){
$filePath=rtrim($this->filePath, '/').'/';
$filePath.=$this->newFileName;

if(@move_uploaded_file($this->tmpFileName, $filePath)) {
return true;
}else{
$this->setOption('errorNum', -3);
return false;
}

}else{
return false;
}
}

//设置和$_FILES有关的内容
private function setFiles($name="", $tmp_name='', $size=0, $error=0){

$this->setOption('errorNum', $error);
if($error){
return false;
}
$this->setOption('originName', $name);
$this->setOption('tmpFileName', $tmp_name);
//分割文件名,取最后一个后缀
$arrStr=explode('.', $name);
$this->setOption('fileType', strtolower($arrStr[count($arrStr)-1]));
$this->setOption('fileSize', $size);
return true;
}

//用于获取上传后文件的文件名
function getNewFileName(){
return $this->newFileName;
}

//上传如果失败,则调用这个方法,就可以查看错误报告
function getErrorMsg() {
return $this->errorMess;
}

}
1
 upload.php
1
2
3
4
5
6
7
8
9
10
11
12
<?php
require "FileUpload.class.php";
//实例化这个对象
$up=new FileUpload(array('isRandName'=>true,'allowType'=>array('txt', 'doc', 'php', 'gif'),'filePath'=>'./uploads/', 'maxSize'=>200000));
echo '<pre>';
//调用上传文件的方法
if($up->uploadFile('upload')){
print_r($up->getNewFileName());
}else{
print_r($up->getErrorMsg());
}
echo '</pre>';
1
 form.html
1
2
3
4
5
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="100000000">
<input type="file" name="upload"> <br>
<input type="submit" name="sub" value="upload file"><br>
</form>
1
 多文件上传的 form.html
1
2
3
4
5
6
7
8
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="100000000">
<input type="file" name="upload[]"> <br>
<input type="file" name="upload[]"> <br>
<input type="file" name="upload[]"> <br>
<input type="file" name="upload[]"> <br>
<input type="submit" name="sub" value="upload file"><br>
</form>

利用上面的这个文件上传类,我们便可以轻松地实现文件上传,非常之便捷。

文件下载

对于浏览器无法直接打开的文件,我们一般只需要设置一下超链接就好了。比如

1
<a href="a.rar">a.rar</a>

点击超链接之后,便会弹出下载的提示框。 可是对于浏览器可以直接打开的文件,例如 1.html,2.php,3.gif 等等文件,如果仍然用这种超链接形式,那就行不通了,浏览器会直接跳转到这个页面。 我们怎样解决这个问题呢?很简单 我们首先要将超链接的文件名改为一个 php 文件,比如上面的链接就可以改为

1
<a href="a.php">logo.gif</a>

这样浏览器会去访问 a.php 文件,那么我们只需要在 a.php 文件中作相应处理即可,例如我们要下载 logo.gif 文件 我们就需要在 a.php 文件最开始设定头部信息,如下

1
2
3
4
5
6
<?php 
header("Content-Type:image/gif");
header('Content-Disposition: attachment; filename="logo.gif"');
header('Content-Length:300');
readfile("logo.gif");
?>

一般设置三个头部信息就好了 第一个是设置文件传输的类型,第二个是设置传送的内容为附件形式,文件名是 logo.gif,这里的filename 即为我们下载文件时命名的名字,而不是文件名本身。第三个是设置文件传输大小。 最后设置一下下载的是哪个文件就好了。利用 readfile 方法。 以上便是文件下载所需要的方法。 这样,文件上传和文件下载的方法就全部介绍完啦!

JavaScript

综述

本篇的主要内容来自慕课网,DOM对象,主要内容如下

  • 1 认识DOM
  • 2 getElementsByName()方法
  • 3 getElementsByTagName()方法
  • 4 区别getElementByID,getElementsByName,getElementsByTagName
  • 5 getAttribute()方法
  • 6 setAttribute()方法
  • 7 节点属性
  • 8 访问子结点childNodes
  • 9 访问子结点的第一和最后项
  • 10 访问父节点parentNode
  • 11 访问兄弟节点
  • 12 插入节点appendChild()
  • 13 插入节点insertBefore()
  • 14 删除节点removeChild()
  • 15 替换元素节点replaceChild()
  • 16 创建元素节点createElement
  • 17 创建文本节点createTextNode
  • 18 浏览器窗口可视区域大小
  • 19 网页尺寸scrollHeight
  • 20 网页尺寸offsetHeight
  • 21 网页卷去的距离与偏移量

认识DOM

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。 先来看看下面代码:

将HTML代码分解为DOM节点层次图:

HTML**文档可以说由节点构成的集合,DOM节点有: 1. 元素节点:上图中、 、

等都是元素节点,即标签。 2. 文本节点:向用户展示的内容,如

  • ...
  • 中的JavaScript、DOM、CSS等文本。 3. 属性节点:元素属性,如标签的链接属性href=”http://www.imooc.com"。 节点属性: 遍历节点树: 以上图ul为例,它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。 DOM操作:**

    getElementsByName()方法

    返回带有指定名称的节点对象的集合。

    语法:

    1
    document.getElementsByName(name)

    与getElementById() 方法不同的是,通过元素的 name 属性查询元素,而不是通过 id 属性。

    注意:

    1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

    2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。

    看看下面的代码:

    运行结果:

    getElementsByTagName()方法

    返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。 语法:

    1
    getElementsByTagName(Tagname)

    说明: 1. Tagname是标签的名称,如p、a、img等标签名。 2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。 看看下面代码,通过getElementsByTagName()获取节点。

    区别getElementByID,getElementsByName,getElementsByTagName

    以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。 1. ID 是一个人的身份证号码,是唯一的。所以通过getElementById获取的是指定的一个人。 2. Name 是他的名字,可以重复。所以通过getElementsByName获取名字相同的人集合。 3. TagName可看似某类,getElementsByTagName获取相同类的人集合。如获取小孩这类人,getElementsByTagName(“小孩”)。 把上面的例子转换到HTML中,如下:

    1
    <input type="checkbox" name="hobby" id="hobby1">  音乐

    input标签就像人的类别。 name属性就像人的姓名。 id属性就像人的身份证。 方法总结如下: 注意:方法区分大小写 通过下面的例子(6个name=”hobby”的复选项,两个按钮)来区分三种方法的不同:

    1
    2
    3
    4
    5
    6
    7
    8
    <input type="checkbox" name="hobby" id="hobby1">  音乐
    <input type="checkbox" name="hobby" id="hobby2"> 登山
    <input type="checkbox" name="hobby" id="hobby3"> 游泳
    <input type="checkbox" name="hobby" id="hobby4"> 阅读
    <input type="checkbox" name="hobby" id="hobby5"> 打球
    <input type="checkbox" name="hobby" id="hobby6"> 跑步
    <input type="button" value = "全选" id="button1">
    <input type="button" value = "全不选" id="button1">

    1. document.getElementsByTagName(“input”),结果为获取所有标签为input的元素,共8个。 2. document.getElementsByName(“hobby”),结果为获取属性name=”hobby”的元素,共6个。 3. document.getElementById(“hobby6”),结果为获取属性id=”hobby6”的元素,只有一个,”跑步”这个复选项。

    getAttribute()方法

    通过元素节点的属性名称获取属性的值。 语法:

    1
    elementNode.getAttribute(name)

    说明: 1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。 2. name:要想查询的元素节点的属性名字 看看下面的代码,获取h1标签的属性值: 运行结果: h1标签的ID :alink h1标签的title :getAttribute()获取标签的属值

    setAttribute()方法

    setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。 语法:

    1
    elementNode.setAttribute(name,value)

    说明: 1.name: 要设置的属性名。 2.value: 要设置的属性值。 注意: 1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。 2.类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数。

    节点属性

    在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 一、nodeName 属性: 节点的名称,是只读的。 1. 元素节点的 nodeName 与标签名相同 2. 属性节点的 nodeName 是属性的名称 3. 文本节点的 nodeName 永远是 #text 4. 文档节点的 nodeName 永远是 #document 二、nodeValue 属性:节点的值 1. 元素节点的 nodeValue 是 undefined 或 null 2. 文本节点的 nodeValue 是文本自身 3. 属性节点的 nodeValue 是属性的值 三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型: 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9

    访问子结点childNodes

    访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。 语法:

    1
    elementNode.childNodes

    注意: 如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。 我们来看看下面的代码: 运行结果: IE:

    1
    2
    UL子节点个数:3
    节点类型:1

    其它浏览器:

    1
    2
    UL子节点个数:7
    节点类型:3

    注意: 1. IE全系列、firefox、chrome、opera、safari兼容问题 2. 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7,如下图所示: 如果把代码改成这样:

    • javascript
    • jQuery
    • PHP
    运行结果:(IE和其它浏览器结果是一样的)

    1
    2
    UL子节点个数:3
    节点类型:1

    访问子结点的第一和最后项

    一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。 语法:

    1
    node.firstChild

    说明:与elementNode.childNodes[0]是同样的效果。 二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。 语法:

    1
    node.lastChild

    说明:与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。 注意: 上一节中,我们知道Internet Explorer 会忽略节点之间生成的空白文本节点,而其它浏览器不会。我们可以通过检测节点类型,过滤子节点。 (以后章节讲解)

    访问父节点parentNode

    获取指定节点的父节点 语法:

    1
    elementNode.parentNode

    注意:父节点只能有一个。 看看下面的例子,获取 P 节点的父节点,代码如下:

    1
    2
    3
    4
    5
    6
    7
    <div id="text">
    <p id="con"> parentNode 获取指点节点的父节点</p>
    </div>
    <script type="text/javascript">
      var mynode= document.getElementById("con");
      document.write(mynode.**parentNode**.nodeName);
    </script>

    运行结果:

    1
    2
    parentNode 获取指点节点的父节点
    DIV

    访问祖节点:

    1
    elementNode.parentNode.parentNode

    看看下面的代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="text">  
      <p>
        parentNode      
        <span id="con"> 获取指点节点的父节点</span>
      </p>
    </div> 
    <script type="text/javascript">
      var mynode= document.getElementById("con");
      document.write(mynode.**parentNode.parentNode.**nodeName);
    </script>

    运行结果:

    1
    2
    parentNode获取指点节点的父节点
    DIV

    注意: 浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

    访问兄弟节点

    1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。 语法:
    1
    nodeObject.nextSibling

    说明:如果无此节点,则该属性返回 null。 2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。 语法:

    1
    nodeObject.previousSibling

    说明:如果无此节点,则该属性返回 null。 注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。 解决问题方法: 判断节点nodeType是否为1, 如是为元素节点,跳过。 运行结果:

    1
    2
    LI = javascript
    nextsibling: LI = jquery

    插入节点appendChild()

    在指定节点的最后一个子节点列表之后添加一个新的子节点。 语法:

    1
    appendChild(newnode)

    参数: newnode:指定追加的节点。 我们来看看,div标签内创建一个新的 P 标签,代码如下: 运行结果:

    1
    2
    3
    HTML
    JavaScript
    This is a new p

    插入节点insertBefore()

    insertBefore() 方法可在已有的子节点前插入一个新的子节点。

    语法:

    insertBefore(newnode,node);

    参数:

    newnode: 要插入的新节点。

    node: 指定此节点前插入节点。

    我们在来看看下面代码,在指定节点前插入节点。

    运行结果:

    1
    2
    3
    This is a new p
    JavaScript
    HTML

    注意: otest.insertBefore(newnode,node); 也可以改为: otest.insertBefore(newnode,otest.childNodes[0]);

    删除节点removeChild()

    removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。 语法:

    1
    nodeObject.removeChild(node)

    参数: node :必需,指定需要删除的节点。 我们来看看下面代码,删除子点。 运行结果:

    1
    2
    HTML
    删除节点的内容: javascript

    注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x 操作。 如果要完全删除对象,给 x 赋 null 值,代码如下:

    替换元素节点replaceChild()

    replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 语法:

    1
    node.replaceChild (newnode,oldnew )

    参数: newnode : 必需,用于替换 oldnew 的对象。 oldnew : 必需,被 newnode 替换的对象。 我们来看看下面的代码: 效果: 将文档中的 Java 改为 JavaScript。 注意: 1. 当 oldnode 被替换时,所有与之相关的属性内容都将被移除。 2. newnode 必须先被建立。

    创建元素节点createElement

    createElement()方法可创建元素节点。此方法可返回一个 Element 对象。 语法:

    1
    document.createElement(tagName)

    参数: tagName:字符串值,这个字符串用来指明创建元素的类型。 注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。 我们来创建一个按钮,代码如下:

    1
    2
    3
    4
    5
    6
    7
    <script type="text/javascript">
    var body = document.body;
    var input = document.createElement("input");
    input.type = "button";
    input.value = "创建一个按钮";
    body.appendChild(input);
    </script>

    效果:在HTML文档中,创建一个按钮。 我们也可以使用setAttribute来设置属性,代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script type="text/javascript">  
    var body= document.body;
    var btn = document.createElement("input");
    btn.setAttribute("type", "text");
    btn.setAttribute("name", "q");
    btn.setAttribute("value", "使用setAttribute");
    btn.setAttribute("onclick", "javascript:alert('This is a text!');");
    body.appendChild(btn);
    </script>

    效果:在HTML文档中,创建一个文本框,使用setAttribute设置属性值。 当点击这个文本框时,会弹出对话框“This is a text!”。

    创建文本节点createTextNode

    createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。 语法:

    1
    document.createTextNode(data)

    参数: data : 字符串值,可规定此节点的文本。 我们来创建一个

    元素并向其中添加一条消息,代码如下: 运行结果:

    浏览器窗口可视区域大小

    获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:

    一、对于IE9+、Chrome、Firefox、Opera 以及 Safari:

    • window.innerHeight - 浏览器窗口的内部高度

    • window.innerWidth - 浏览器窗口的内部宽度

    二、对于 Internet Explorer 8、7、6、5:

    • document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

    • document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

    或者

    Document对象的body属性对应HTML文档的 标签

    • document.body.clientHeight

    • document.body.clientWidth

    在不同浏览器都实用的 JavaScript 方案:

    1
    2
    3
    4
    var w= document.documentElement.clientWidth
    || document.body.clientWidth;
    var h= document.documentElement.clientHeight
    || document.body.clientHeight;

    网页尺寸scrollHeight

    scrollHeight和scrollWidth,获取网页内容高度和宽度(不包括滚动条)。 一、针对IE、Opera:

    scrollHeight 是网页内容实际高度,可以小于 clientHeight。

    二、针对NS、FF:

    scrollHeight 是网页内容高度,不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时,scrollHeight 返回 clientHeight 。

    三、浏览器兼容性

    1
    2
    3
    4
    var w=document.documentElement.scrollWidth
    || document.body.scrollWidth;
    var h=document.documentElement.scrollHeight
    || document.body.scrollHeight;

    注意:区分大小写 scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

    网页尺寸offsetHeight

    offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。

    一、值

    offsetHeight = clientHeight + 滚动条 + 边框。

    二、浏览器兼容性

    1
    2
    3
    4
    var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
    var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

    网页卷去的距离与偏移量

    我们先来看看下面的图: scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。 scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。 offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。 offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。 注意: 1. 区分大小写 2. offsetParent:布局中设置postion属性(Relative、Absolute、fixed)的父容器,从最近的父节点开始,一层层向上找,直到HTML的body。

    来源:慕课网