4.
cs 模式更新维护是缺陷
5,
bs Browser/Server 模式
协议:http
url 统一资源定位符,也被称为网页地址。是因特网上标准的资源地址。
http的表现方式(浏览器中地址栏url)
http://主机/资源?参数
工作过程:Browser通过url请求主机资源,Server根据Browser 请求返回html代码,Browser分析解析html代码,显示。
6.
搭建工作环境
Browser
Apache 服务 service httpd start
7.
资源文件位置:/var/www/html 由配置文件决定
/etc/httpd/conf/httpd.conf 中DocumentRoot
在conf.d文件中welcome.conf的第7行
Options -Indexes 把前面的 ‘ - ‘ 去掉即可在
127.0.0.1时直接显示目录,不显示红色网页。
8.
开发工具bluefish
9.
HTML是英文HyperText Markup Language 的缩写
标签格式:
双标签 <标签名> </标签名>:成对标签又称之为容器,一对标签中还可以嵌套其它的标签。
单标签<标签名/> 单独标签不需要与之配对的结束标签,又称之为空标签。
一个HTML标签及标签中嵌套的内容就是网页中的一个’HTML元素’
10.
IETF制定HTTP协议
W3C制定HTML等协议
11.
Bluefish中第一行版本和字体编码。要与保存类型一致。在编辑 –首选项---文件中选
第二行strict 严格只显示xhtml1.0版本。其它不显示。
12.
最基本的网页组成结构:
<html>
<head>
<title> 显示在浏览器上方的标题</title>
</head>
<body bgcolor = ‘red’ text= ‘blue’>
</body>
</html>
13.
颜色表示有两种类型如 bgcolor=’red’ text=’#FF00FF’
只支持16种颜色 RGB三原色
14.
DTD文档类型定义
15.
<pre> 保留空格,回车
<marquee> 滚动
<blink> 字体闪
16.
<dl>定义列表<dt>定义列表中的项目<dd>定义列表中的项目描述
<ol type=”A”> 定义有序列表 <li>定义列表中的项目
<ul>第一无序列表(以黑点为头)<li>定义列表中的项目
17.
<a href=”http://127.0.0.1/1.html”>定义超链接
链接有三种路径
绝对路径http:www.sohu.com/index.html
站内相对路径 href=”../2.html”
站内绝对路径:href=”/n8/1.html”
还有一个空 href=”” 代表当期页面
注意此处所有根目录为/var/www/html 而非系统的根目录。所有内容一定要在站内根下,不能写系统的路径,既不能加上站根目录的系统路径
超链接的属性target=
_blank 将链接内容在新的浏览窗口中打开
_parent 将链接的内容,当成文件上的一个画面
_self 将链接的内容,显示在目前的窗口中,同不写属性时效果相同
top 这个参数可以解决新内容被旧框窗包围的困扰,使用这参数,会将整个画面重新显示成链接的画面内容
网页内的定位:
<a name=”here1”>第一部分</a> 作为标签
<a href=”#here1”> 跳到第一部分</a> 超链接到当前网页的标签为here1处 标签写什么都可以,只要超链接相同即可
18.
<h1><h2>……<h6>定义各级标题
<center>文本相对网页的当前行居中</center>
<p>段落</p>两端无缩进
<blockquote>段落</blockquote>两端自动缩进
<fieldset>段落 <legend>边框文字</legend>
</fieldset>加边框无缩进
<br/>换行 <nobr/>不换行
<font color=”red” size=”7” face=”字体”> 定义字体格式</font>
<pre>空格回车原样输出</pre>不加此标签,多空格只认一个。
19.
注释 <!- - 注释- ->
特殊字符:用数值码和引用实体两种方式表示,例如:©
©
代码 | 效果 | 代码 | 效果 |
" | “ | & | & |
< | < | > | > |
| 空格 | © | © |
§ | § | ¤ | ¤ |
第二天
1.
<a href=’’> 此功能还可用于下载
A 127.0.0.1 在浏览器脱机模式下可进入站根目录直接点击站内资源即可下载。
B <a href=’image.tar.gz’> 图片打包下载</a>
写路径 也能点解下载在脚本中。
C <a href= ‘ftp://127.0.0.1/’> ftp</a>直接进入ftp 中pub服务器
浏览器直接输入ftp://user:password@主机名/资源
清除记录
2.
mii-tool eth0 测试物理连接是否可用。
dhclient eth0 自动分配IP地址
ifconfig eht0
3.
chown -R apache.root * 改文件为apache用户属主,解决权限问题。
4.
块级标签:独立成行的 p h1..h6 dl ul ol blockqoute fieldset div
行级标签:b i em stong a img span
5.
img src= 路径
alt=‘替代者’ 如果没有则有的浏览器显示叉,有的不显示
width= ‘100px’ px像素单位
height= ‘200px’ 一般这两个参数只设一个,可按自动按比例
align=””
border=”10px”加10像素黑框
图片也可加超链接
6.
<table> 可加属性有border=”1px”边框1像素 width=”300px” 或”62%” 可指定占全网页宽度的62%
align=”right” “center” “left” 对齐方式 此处是相对网页的对齐方式。
<caption>员工列表</caption> 表名 表上面居中显示。
<th> 姓名</th> 添加表头,放在哪就添加在哪。其中字体自动 黑体加粗居中。
<tr> 一行 <td> 一格 其中都有属性是align,此处对齐是字体的对齐。数据要写在<td>中
表格缺点。若一个格里的内容过长,则整个表的布局会成为问题。
7.
<form> 表单网页交互标签.属性action=”1.php”内容提交给的目标文件。method=”get” 以什么方法提交。
里面包含多个<input>
姓名:<input type=”text” name=”uname”> 输入</input>
text 输入文本框。 后接的汉字在文本框后面 。name 为此文本框的变量。此时设 value=’张三’ 为文本默认值。
<input type=”submit” value=”提交”/> 按钮提交
<input type=”reset” value=”重置”/> 内容重置。使用此标签时一定要在<form></form>标签中,否则不起作用
<input type=”button” value=”其它操作”/>
<input type=”hidden” name=”act” value=”login”></input>
隐藏内容,在页面上不显示,但当页面内容提交时value的值会提交给name。
<input type=”password” name=”passwd”> 密码,此时输入的文本以黑点为显示。
<span>男</span><input type=”radio” name=”sex” value=”male”>
<span>女</span><input type=”radio” name=”sex” value=”female”> 此处为点选,由name=”sex”决定此两者只能选一个,选后提交value的值。
实现点男也可选中点
<label for=”male”><span>男</span></label><input type=”radio” name=”sex” value=”male” id=”male” checked=”checked”> 此处设置默认值是checked 注意与text的默认值value区分。这这里的value是提交后送给的值。name为值提交给的变量显示”sex”
<span>吃<span><input type=”chekbox” value=”eat” name=”like[]” checked=”checked”>
<span>喝<span><input type=”chekbox” value=”drink” name=”like[]” checked=”checked”>
<span>玩<span><input type=”chekbox” value=”play” name=”like[]” >
此处实现多选。注意name变量后加[] 这样提交数据时才能都提交注意与不家时指定单选的区别
大块输入文本。
<textarea name=’intr’ rows=”10” cols=”40”> 默认内容写在中间</textarea> 可指几行高度,和一行几个字符宽。
<select name=”city”><option>北京</option><option>上海</option><option>广州</option></select>
7.
多窗口操作,无<body>标签
<frameset rows=”20%,80%”>先将页面划分为上下两部分。
<frame src= “1.html”/> 上部分连接到1.html 此处为单标签
<frameset cols=”20%,80%”> 将下部分再划分为左右两部分。
<frame src=”2.html” name=”top”/> 注意此时name变量的值与超链接的属性如<a src=”test.html” target=”top”></a> 中target相联系,top无特殊意义,可以是name=”1” 。用于指定超连接打开的窗口位置
注意此时窗口的大小可以动,加属性<frame src=”f.html” noresize=”noresize”> 此时窗口可固定。只需加任意一个,则所有都不变。
缺陷:由于多窗口操作只有框架无内容无法搜索,不推荐使用
8.
<base>标签用于指定网页中的超链接的基准地址,以改变网页中所有使用相对的URL的基准地址。
第三天
1.
<meta>标签可以提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。
有两种类型的<meta>用不同的属性名来划分,这两种属性名为:name和http-equiv.
– <metaname=“属性名” content=“对该属性设置值”>
– <metahttp-equiv=“HTTP头属性名” content=“对头属性设置值”>
name的属性设置有
keywords content=”php,python”> 搜索引擎关键字。
description 与keywords相似
robots搜索机械人。 content 设置值 index允许搜索索引,noindex不允许搜素索引,follow允许搜索下面的
nofollow 不允许搜索下面的。all允许全部,none一点也不允许。
author 作者
copyright 版权
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”> 通知浏览器以html标签解析,后面是字符集。
refresh
– 例如:<meta http-equiv=“refresh” content=“1;url=http://www.csvt.net”>
第一个为时间值1秒,到时间自动跳转到后面的地址。
expires
– 例如:<meta http-equiv=“expires” content=“Mon, 12 may 2006 00:20:00 GMT”>将content设置为0,可以禁止浏览器使用缓存页面。
Windows-Target
– 例如,要防止自己的网页被别人当作一个frame页面调用,可以使用<meta http-equiv=“Windows-Target” content=“_top”> 自动占用全屏幕。
• Page-Enter和Page-Exit
– 例如,<meta http-equiv=“Page-Enter” content=“revealTrans(Transition=23, Duration=1.000)”>
设置打开和关闭网页的方式,如百叶窗。
2.
html 中单双引号通用。
3.
传统布局方式:table
缺点:单元格的空间可变性。灵活性差,调整不方便,字体大小单一:标题文字大小六种,font文字大小七种。
4.
DHTML是制作动态HTML页面的技术
DHTML=HTML+CSS+JavaScript 分别作用是:指定一个网页的元素,决定元素的大小颜色和位置,操纵网页的元素。
CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果。
简而言之,CSS就是要对网页的显示效果实现与Word一样的排版控制
5.
color 颜色
font-size 字体大小
font-family 字体
text-align 文本对齐
border-style 边框样式
border-width 边框宽度
border-color 边框颜色
6.
firebug安装,直接将压缩包拖到浏览器中会自动安装。
border-width 和border-height 只对块级标签起作用,对行级标签不起作用。
块级标签默认宽度由浏览器宽度决定,高度由内容决定。行级标签宽度和高度都由内容决定。
7.
内联样式:在标签内的style属性中,作用范围是当前标签有效区。<p style=”color:red;font-size:10px”>段内容</p>
内嵌样式:在head中的style标签中。
<head >
<style>
p{color:red} 标签选择器 标签名{样式:样式值}
.c1{color:blue} 类选择器 以点开头的
.c2{font-size:20px}
#fire{color:blue} id选择器,以#开头,一个id选择器对应唯一的标签。
</style>
</head>
<body>
<p class=”c1 c2”>段内容 在标签内以class属性选择类此处不必加 ’ . ’ 多个类用空格隔开不用逗号。
<p id=”fire”> 在标签内用id属性来选择id选择器。
样式冲突时的优先级 内联样式>id选择器>类选择器>标签选择器
样式不冲突时:叠加效果
选择器如两个.c1 .c1多次出现,
样式不冲突则叠加
样式冲突:后面的有效,后面的覆盖前面。
综合使用:
组合选择器,同时设定多个选择器有相同的样式以逗号分割。 h1,h2,p{color:red}
关联选择器,形式以空格分隔的选择器,作用带层次关系。
<head><style> #nav a{ ….}</style></head>
<body><div id=”nav”><ul><li><a href=””>首页</a></li></body>
font-size:1.2em; 字体为原来基础上的1.2倍。
全局选择器:其实是组合选择器全集。*{…..}
8
外部文件导入:
创建css文件创建空文件非html1.0模板,保存为.css后缀的文件。
P{color:red;}
在html中
导入两种方式
1. <head><link rel=”stylesheet” href=”f.css” type=”text/css” /> </head> 其中href指定导入的文件名
2. <head><style> @import url(“f.css”);</style></head> 其中url中的文件为指定文件。 尽量用此中方法。
导入相当于将全部文件写在上面。
注释只有一种形式 “/*要注释的内容*/”
第五天
1.
具体样式
font-family:字体类型
font-size:绝对单位有:px mm cm in pt pc
相对单位有:em倍 ex半 %原来的百分比
color 三中表示方法: #FF0000 rgb(255,0,0) red
font-weight:字体粗细
font-style:字体斜体
text-decoration: 下划线,顶划线,删除线,闪烁
设为none可去掉链接的下划线。
text-transform:英文字母所有单词首字母大写。
font:italic bold 12pt Times,serif
可以合并写上一次是 斜体 粗 大小 字体
2.
段落
text-align:段落水平对齐
vertical-align:行内元素垂直对齐,如图片和文字在一行时,文字是在图片上部还是下部。
letter-spacing: 字母的间距
word-spacing: 单词的间距
line-height:文本行高
text-indent:缩进方式
white-space:排版方式,pre
3.
border
块级标签:width heigt 有效。默认width最大化,height内容确定。
行级标签:width height无效 ,均由内容确定。
border-width:边框宽度
(border-top-width、border-right-width、border-bottom-width、border-left-width)
可以border-width:10px,20px,30px,40px; 上右下左,顺时针
border-width:10px,20px 第一个值为上下线宽,第二个值为左右线宽
border-style:solid dotted dashed ridge; 线样式。同理可写两值。
border-color: 边框颜色 。同理两值四值均可。
width: 宽度 这里设的都是content的高宽
height:高度
4.
background-color:背景颜色 transparent透明色
background-image:url(1.jpg) 背景图片
background-repeat:设置如何重复图像。no-repeat 不重复。
background-position: 图像的位置
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。fixed 图像不动
合并设置背景样式:
background: #00cc00 url(1.jpg) no-repeat bottom right fixed;
5.
表格 有快速建立的快捷键
table{ border:2px solid black} 只是建立了外边框。
td{border:2px solid black} 建立内边框。但效果像双层框
table{ border-collapse:collapse; } 设置表格的边框被合并为单一的边框。
tr: hover{ color:red; } 伪元素选择器。当鼠标移动到行上时,变为红色。
一条线的文本框input{ border-style: none none solid none; }
像文字一样的按钮input{ tyle=button border-style: none none none none; }
彩色的下拉框:<select id=”color1”><option id=”color2”>北京</option><option id=”color3”>上海</option></select>
#color1{..} #color2{..} #color3{..}
6.
伪元素选择器:对同一个HTML元素的各种装填和其所包括的部分内容是一种定义方式。
常用的伪元素:a:link超链接的正常状态,没有任何动作之前。
a:visited 访问过的超链接状态
a:hover 光标移动到超链接上的状态
a:active 选中超链接时的状态
p:first-line 段落中的第一行文本
p:first-letter 段落中的第一个字母
鼠标样式cursor:
– body{cursor:pointer;}
– 设置值:help、move、crosshair….
滚动条样式scrollbar:
– scrollbar-3dlight-color
– scrollbar-arrow-color
– scrollbar-base-color
– scrollbar-darkshadow-color
– scrollbar-face-color
– scrollbar-highlight-color
– scrollbar-shadow-color
7.
list-style-type:列表符号
ul{list-style-type:none;} 无序列表去掉黑点。
list-style-image:url(1.jpg) 以图片作为列表符号
list-style-position
– 设置值:inside(内部)、outside(外部)
list-style-position
inside的显示效果:主题与列表每一项对齐,前面黑点在外边
outside : 主题与前面的黑点对齐
8.
文件一旦被复制,则属主会变为操作的用户要改回来
chown -R apache.root *
9.
<div> 块容器</div> <span>行容器</span>
注意<div>标签可以用来组合其它的HTML元素,但不能嵌套在段落元素中,例如,<p>aa<div>bb</div>cc</p>的结果是不确定的。
10.
每个HTML元素都可以看作一个装了东西的盒子,盒子具有宽度(width)和高度(height),盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)
11.
padding:10px 设置填充距离。
body 的margin 有默认值8px
对于不同的浏览器要清楚默认的margin margin:0
margin:0 auto 居中 在body标签中
对于行级标签如<span> 在设定border的边框宽度时,只有水平方向有效果,而垂直方向无意义。border-width:0 20px
12.
width 决定内容的宽度
padding 决定边框的大小,随其变化
第六天
1.
布局
display: 显示形式
li{display:inline; } 可将列表内容横向显示。注意这里是li而不是ul
li{display:inline-block; 在行内显示,但仍有块的特征
width:50px; 可设置宽高。
heght:50px;
}
display:none 不显示,且像代码不存在一样,空间也消失
visibility:hidden 不显示,但占据空间仍然存在。
2.
浏览器脱机时连127.0.0.1也访问不了,要把对勾去掉。
3.
在firebug中可以现场调整,但不会保存。
4.
实现文本在块中居中
div{
width:100px;
height:100px;
line-height:100px; 行高设为块高
text-align:center 水平居中
}
5.
将整个页面放在一个<div id=”main”>全部内容<div> 中
#main{margin: 0 auto; width:1000px; }
整个页面在浏览器中居中显示,且宽度在1000px,这样可以解决显示器分辨率不兼容的问题。注意与body的margin区别
6.
float: 块在行内叠加
#main{margin: 0 auto; width:1000px; }
#link{width:300px; float:left;}
#content{width:680px;float:right;}
实现两个块的左右布局,float的优点,在于左右两部分互换简单。
clear:left 左边不可有浮动元素。right both
在前面有float时,下面会自动按行向后排,加clear可使其跳到下面行头显示。
float与clear 结合完成基本的网页构造。最下面的footer用clear
浮动的会覆盖没有浮动的,但浮动的之间不能相互覆盖。内容即文字应该不能被覆盖,会被挤出来
7.
图片在逻辑上相当于一个字符,一个文字
<div id=”photo”><imgsrc=”1.jpg”><div> 图片后面的文字
#photo{float:left} 这样可实现图片环绕效果。
float 和基本文字可达到环绕效果。
当一个元素float时,会将这个元素以从正常的文档流中脱离出来,不再占空间,相当于display中的none。原本是float的一个bug。
8.
当一个的单词特长时,会从块内溢出。
#content{overflow: hidden} 溢出隐藏
一般情况下溢出的都是错误单词,故常用隐藏项。
overflow: scroll 加下滚动条
overflow:auto 溢出后加下滚动条,不溢出,不加。
9.
clip矩形内显示。这个属性用于定义一个裁剪矩形,对于一个绝对定义元素,在这个矩形内的内容才可见,出了这个裁剪区的内容会根据overflow的值来处理。裁剪区域可能比元素的内容区大,也可能比内容区小。
10.
position 指定元素位置
position:relative; 相对定位,对与原来的位置。
top :100px y轴向下偏移了100px
left: 50px x轴向右偏移了50px
注意方向与名字相反
static 和不定位position完全相同
relative 元素框偏移某个距离,元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute 元素从文档流完全删除,元素原来在正常文档流中所占的空间会关闭,就好像元素不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相当于最初的包含块。
fixed 元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。即使它的父块没有position定位,也以父块作为基础
11.
当定位后可能发生覆盖的现象,z-index 可使块类似于垂直上浮,值大的显示。z-index:1 没有单位,默认是0 ,可以是负数
12.
还可以用margin与position结合来定位
margin-left:200px; 左外边距离外框为200px
注意,在定义了position:absolute的因从文档流中删除,相当于没有这块,故在用margin定位时,不必顾忌此类定位的块,直接相对于最外边框即可。用margin定位时只能用margi-left和
margin-top来定位,另外的两边不管用
13.
普通情况下margin是互相重叠的,按最大的值来显示。
但如果有float后margin是相加的效果。
第七天
1.
JavaScript是一种基于对象和事件驱动,并具有安全性能的脚本语言。从页面级别对html和css做基本处理。
JavaScript与Java
– 是两个公司开发的两个不同的产品,作用与用途大不一样,但两者语法上有很多多相似之处,JavaScript并不是Java的子集。
2.
在html文件中使用js
1在<script type=”text/javascript”>程序语句</script>
2在html的标签的属性中加入ls的程序语句
<input type=”button” value=”ok” οnclick=”alert(‘hello’)”></input>
3在url中加入前缀javascript :
<a href=”javascript:alert(‘hello’);”>link</a>
也可以在浏览器的地址栏中直接输入 javascript:alert(“hello”)
4.
外部js文件导入
<script scr=”1.js”></script>
5.
基本语法
严格区分大小写
注释 /*…….*/中可以嵌套“//”注释,但不能嵌套“/*….*/”
null 相当于Python中的none
undefined 相当于Python中的异常
布尔值 true和false 注意首字母没有大写
6.
变量用之前要声明
var a; var a=10; var x, y, z=10;注意此处只给z赋值了
7.
prompt( “提示信息”, [初始值] ) 弹出交互对话框,且返回字符串
alert( ) 点ok返回字符串形式初始值后输入值,点取消则返回null
parseInt(数值型字符串) 返回int
parseFloat(数值型字符串) 返回float
document.write() 向当前窗口中写入内容
document.writeIn() 向当前窗口中写入且换行配合<pre>能看出来
8.
‘ + ’ 在数值和字符串相加时会自动把数值转化为字符串。
a=3 为赋值运算,python中只有赋值,没有赋值运算。所谓赋值运算是有返回值的,此处赋几,返回几。而python中的赋值没有返回值。
b=++a a+1后赋给b
b=a++ a先赋给b然后a+1
逻辑运算符 && || ! 不能用 and or not 与Python相反
9.
if(){
执行语句;
}else if(){
执行语句;
}else{
执行语句;
}
else if 会包含了前面if条件的非操作,即是当前条件的与
三目运算符:变量=布尔表达式 ? 语句1:语句2; true执行语句1,false执行语句2 例如: y = x > 0 ? x:-x;
10.
switch(表达式)
{
case 取值1:语句1;break;
case 取值2:语句2;break;
case 取值3:语句3;break;
default: 语句;break;
}
注意若语句1没有break则,直接执行语句2,即只要只要进入事件了,没有遇到break则执行下面的所有语句。
11.
while (条件表达式语句)
{
执行语句;
}
do
{
执行语句;
}while(条件表达式语句);
do while 语句与while的区别是,前者先执行一次,然后再判断,即至少执行一次。
12.
for( 初始化表达式;循环条件表达式;循环后的操作表达式)
{
执行语句块;
}
如for(x = 1;x<10;x++)
{
y = x
}
执行后x为10,y为9 注意
第八天
1.
面向过程:算法 + 数据强调处理过程(算法)
面向对象:数据 + 算法某一个数据上封装操作。输入处理和输出,以数据位中心。
2.
循环次数明显固定用for
循环次数不明显,由某项事件控制,用while
至少执行一次的用do while
break 结束整个循环
continue 结束本次循环,跳至下次循环。
3.
获取一个n以内的随机整数
m = Math.random() 产生0到1间的小数
num =Math.ceil( m * n) 上入取整
num就是n以内的随机整数,包含n
Math.floor(x) 下舍取整
Math.round(x) 四舍五入
4.
定义函数
function 函数名(参数){
程序代码;
return 表达式;
}
“//” 来注释
5.
document.write(“<div>” + f(n) + “<div>” );
alert( x +“\n” + y ) 注意区别在此处可以用”\n”
6.
<pre>
<script>
document.writeln(“前面是小写的L 不是大写的i”)
</script></pre>
此时会出现换行效果
7.
在函数中
局部变量:1 形参本身 2 有var声明的.
全局变量:没有var声明的(经测试,一个变量如果主程序中没有,且在函数内也没有声明,则这个变量就会成为全局变量)
主程序中加或不加var都是全局变量。经测试变量不加var也可用。
<input type= “button” onclick = “ var i = 100 ; f();”/>此处的i为局部变量,即在html标签的属性js代码,等同于一个函数。
8.
js 支持可变参数,即可以传入多余的值。并会保存在内置argument数组中。
9.
动态函数,即函数名可变相当于python的下面代码
def fun(): pass a= fun a()此时a也成为函数名
js中创建动态函数
1. var 函数名= new Function(参数1,参数2,… ,程序代码)
所有参数必须都是字符串型的,且最后参数必须是这个动态函数的功能代码。
var fun = new Function(“x”,“y”,“var sum; sum = x*x+y*y; return sum;”);
fun(2,2) 调用
2. var函数名 = function(参数){
函数体
}
动态函数即可以创建不同的函数内容,但有相同的函数名。比如一个按钮<input type= button οnclick=”fun()”> 绑定了一个fun的函数,就可以通过动态函数方法,来赋给这个按钮不同的功能。
10.
顺序 分支 循环 函数 为面向过程编程
11.
面向对象oop
对象是属性和方法的组合
属性是对象所拥有的一组外观特征,一般为名词
方法是对象可以执行的功能,一般为动词
对象中所包含的:变量就是对象的属性,对属性进行操作的函数就是对象的方法,对象的属性和方法都叫对象的成员
对象使对某一类事物的描述,是抽象上的概念;而对象实例是一类事物中的具体个例。
能够被用来创建对象实例的函数就叫对象的构造函数,只要定义了一个对象的构造函数就等于定义了一个对象,使用new关键字和对象的构造函数可以创建对象实例
Python中类的self代表代表对象本身
类方法中第一个self参数为类对象本身
成员方法中第一个self参数为成员对象本身
静态方法对self无要求。
function Person(name,age){ 定义构造函数
this.name=name;
this.age = age;
this.say =say; 方法1. 注册方法,下面在另外定义 外部实现
this.say1 =function(){ 方法2. 动态函数定义 内部实现
alter(this.name)
}
}
function say(){ 内部直接调用构造函数内部的属性
alter(this.name)
}
var z = new Person(“zhangsan”, 23 ); 实例化
alert(z.name); 访问类属性
12.
参数的调用
参数是基本数据类型:传输调用,变量的作用域
参数是对象类型: 传输调用
function fun(p , name){
p.name
}
fun(z , name) z为实例化的一个对象,传输调用 z.name
与python中一样,即对象可变量传输
13.
动态对象
– 使用“对象实例名.成员”的格式来访问其属性和方法
静态对象
直接使用“对象名.成员”的格式来访问其属性和方法
Object对象提供了一种创建自定义对象的简单方式,不需要程序员再定义构造函数。
var z =new Object(); 可以理解为空类。
z.name = “张三” z对象里增加属性
z.say = function(){程序} z对象里增加方法。
优点,不用自己定义类,直接实例化一个对象,然后动态往里增加属性和方法,在只实例化一次时才能使用。缺点也是只能实例化一次
14.
创建字符串有两种不同方法
var str = “这是我的字符串”;
var str = new String(“这是我的字符串”);
indexOf(“查找的字符串”, 查找的起始位置)
返回字符串所在位置,如果没有找到,返回-1
x = str.indexOf(“c”, 0);
15.
Math对象是一个静态对象,不能使用new来创建对象实例。直接使用Math.成员 来访问属性和方法
16.
Date对象存储的日期为自1970年1月1日00:00:00以来的毫秒数
var mydate = new Date(“july 29, 1998,10:30:00”)
如果没有参数,表示当前日期和时间。
var today = new Date()
set* 这些方法用于设置时间和日期值
get* 这些方法用于获取时间和日期值
To* 这些方法用于从Date对象返回字符串值
parse* & UTC* 这些方法用于解析字符串
值 | 整 数 |
Seconds 和 minutes | 0 至 59 |
Hours | 0 至 23 |
Day | 0 至 6(星期几) |
Date | 1 至 31(月份中的天数) |
Months | 0 至 11(一月至十二月) |
17.
kill 3488 关闭进程
kil -9 3488 强行关闭进程
第九天
1.
HTML DOM---Browser对象---DOM Window找setTimeout()
setTimeout(“代码字符串” , 延时时间(单位毫秒))
一次性计划任务。
可以理解为设置后打开了一个线程,并不影响主程序。
取消延时动作 var c1 = setTimeout(……….);clearTimeout( c1)
2.
alert 只能显示一个,后面的要一次显示。
3.
var c1 = setInterval(代码字符串,周期时间(单位毫秒))
clearInterval(c1 ) 取消周期任务。 也相当于一个线程。
4.
<div id= “clock”></div>
c =document.getElementById(“clock”) 获取id为clock的html标签对象。
c.innerHTML = “this is a test” 注意此处为属性不是方法。对标签容器内复制,相当于写入此处的<div>块中,注意此属性是div容器中的所有内容,而不是一部分。
5.
显示时钟
var run = setInterval( “ disp() ”, 1000);
function disp(){
var clock = document.getElementById(“c1”)
var now = new Date(); 对时间创建对象,放在函数内,每秒产生新对象
c1.innerHTML = now.toTimeString(); 后面是将当前时间转化为字符串
}
6.
toString 方法是JavaScript中的所有内部对象的一个成员方法,它的主要作用就是将对象中的数据装换成某种格式的字符串来表示,具体的转换方式取决于对象的类型
x = 255;
x.toString() 转化字符串
x.toString(2) 转化以2进制形式字符串
x.toString(16) 转化以16进制形式字符串
now.toString() 将时间显示为字符串,前面now为时间对象
7.
with(对象名称){
执行语句块
} 这样在执行语句中就不用像x.getYear() 一样加’ x . ‘直接写getYear()即可。
8.
for … in语句 仅对对象的属性进行遍历
for(变量in对象){
执行语句
}
9.
数组列表
方式一:生成空数组,通过索引进行添加元素。
var emps = new Array(); 生成空数组
emps[0] = “alen”;
emps[1] = “tom”; 依次添加数组元素。
方式二 先定义长度,再通过索引往里添加元素,如果添加元素不够,则会出现undifined
var emps = new Array(4);
方式三 定义数组,同时初始化元素。
var emps = new Array(‘tom’, ’jack’, ’alen’);
数组中也可包含数组,注意一定要写new Array()
aa= new Array(new Array(“a”, ”b”) ,
new Array(“1”, “2”)
) 注意内部的数组也要写new Array
索引用两个中括号 a[0][0]
10.
滚动显示两行
<div id=”d1”></div>
<div id=”d2”></div>
<script>
news = newArry(“1111”,”22222”,”33333”,”44444”);
var d1=document.getElementById(“d1”)
var d2=document.getElementById(“d2”)
function disp(){
if( i==news.length-1 ){ i = 0;} 因此处显示两行故要要减一
d1.innerHTML=news[i];
d2.innerHTML=news[i+1];
i++;
}
setInterval( “disp() ”,1000 ); 周期性调用函数,可实现滚动。
</script>
11.
获取文本框内容
前面有<input type=”text” id= “n”>
Js中 n =document.getElementById( ‘ n ’ );
x = n.value 获取文本框的值,注意为属性不是方法
12.
显示数组
for(var i=0; i<a.length;i++){
s +=”<li>” + a[i] +”<li>”;
}
msg.innerHTML = s
13.
注意最好用标签的id名作为对象名
显示和操作要分开写两个函数
Js代码从上到下执行,但函数位置没有关系。
14.
ob.innerHTML = value 写入
var x = ob.innerHTML 取出
15.
程序设计思想:
数据初始化 输入
数据如何操作 处理
数据如何显示 输出
16.
Js中:
浏览器对象BOM
内置对象:Math String Arry Rey(正则)
html 标签对象:document.getElementById()
17.
BOM
window窗口对象
location地址对象
document文档对象
form表单对象
window对象:顶层,使用方法和属性时不用加 “ window. “ 直接用。如alert() prompt() setTimeout() setInterval()
x = confirm(“提示信息”) 显示确认一个对话框,包含一个确定和取消按钮。返回true或false,即x的值。
18.
Swin =open(“1.html”, “_blank”, “heigh=300,width=200,top=400,left=500” )
打开一个新窗口,第一个参数,是页面地址,第二个参数是可以用作标记<a>和<form>的属性tartget的值。如果该参数指定了一个已经存在的窗口,那么就不在创建一个新窗口,而只是返回指定窗口的引用
第三个参数设置弹出窗口的特征,注意不必加单位默认为像素
Swin.close() 关闭由js打开的窗口。
因浏览器大多设置了阻止弹出窗口,故open已经快不用
19.
手册后面的 IE F O 三种浏览器支持。
20.
属性innerHeight innerWidth 当前窗口的高宽
outerHeight outerWidth 窗口外的高宽
21.
时间处理机制
事件源:按钮
事件: 点击
事件处理程序:onclick后的代码。
事件名 | 说明 |
onClick | 鼠标单击 |
onChange | 文本内容或下拉菜单中的选项发生改变 |
onFocus | 获得焦点,表示文本框等获得鼠标光标。 |
onBlur | 失去焦点,表示文本框等失去鼠标光标。 |
onMouseOver | 鼠标悬停,即鼠标停留在图片等的上方 |
onMouseOut | 鼠标移出,即离开图片等所在的区域 |
onMouseMove | 鼠标移动,表示在<DIV>层等上方移动 |
onLoad | 网页文档加载事件 |
onSubmit | 表单提交事件 |
onMouseDown | 鼠标按下 |
onMouseUp | 鼠标弹起 |
22.
事件驱动验证
<input type=”text” οnblur=”f()” id=”n” /><span id= “m”></span>
在表单后面加上一个空容器,用来存放验证信息
js中
var n=document.getElementById(“n”)
var m= document.getElementById(“m”)
function f(){
x= n.value; 注意此处赋值一定要在函数内,否则只能判断一次。或者直接在下面用n.value.length<4
if(x.length < 4){
m.innerHTML = “必须超过四个单词”
}
else{
m.innerHTML = “” 实现当修改后符合要求后,提示内容消失
}
}
第十天
1.
事件处理程序
形式一:在标签的时间属性加代码,如input中的onclick后的代码
形式二:在标签对象的事件属性中定义处理代码,
<input …. Id= “b1”>
var b1 = document.getElementById(“b1”);
b1.onclick = f1 ; 注意此处不加括号为动态函数,否则为直接调用
function f1(){
代码
}
这样可以将js从html中分离出来,将代码放入js文件中,然后<script src= “1.js”>
注意:虽然<script>可以放在html的任意位置,但代码是从上到下执行的,如果,js代码放在了用到的id标签的上方,则会出现id为null的错误。所以一般将js放在body的最下方。
形式三:在一个专门的<script>标签对中编写某个元素对象的某种事件处理程序代码,并用for属性指定事件源和用event属性指定事件名,这种<script>标签中的脚本程序只在指定事件源的指定事件发生时才被调用执行,这种方式常用于网页文档中的各种插件对象的事件处理程序:
<script language=“javascript” for=“document” event=“oncontextmenu”>
window.event.returnValue=false;
</script>
2.
this 指针:事件处理程序中,可以直接用this,此处this指的是标签对象。
<input type=”text” id=”t1”>
Js中 t1=document.getElementById(“t1”);
t1 .οnfοcus= function(){ 注意此处为定义动态函数。
alter( this.value ); this代表t1
this.blur(); 自动失焦点,否则一直弹上一条窗口
}
注意此处因t1为生成的对象,所以可以用this,如果在标签中
<input type=”text” id=”t1” οnfοcus= “f1()”> 此处在f1()中就不可以用this,因标签对象根本就没有生成。所以要注意this的使用,一定是先生成了对象
点中文本框,使文字消失,用onfocus
3.
window 对象---事件
onload事件:当前页面完全加载成功,则执行onload,可用于js的初始化
window.onload =function(){ 动态函数
b1 = getElementById(“b1”); b1.onclick =f1; b1为按钮的对象
}
function f1(){ ……..}
这样就可以将<script src = “1.js”> 放在<head>中,而不会出现b1为null的错误
window.onunload = function(){ alert(“close??”) } 关闭窗口后的事件属性
window.onbeforeunload = function(){return confirm(“ close??”); } 关闭窗口时的事件属性,此处点返回true才能关闭
4.
document 对象也有设置颜色的属性
5.
document.write(“<h1>hello</h1>”)以及writeln只能在主程序中执行,不能作为一个事件触发线程,因为会将整个页面清楚,出面异常。
6.
anchors 锚点,网页内部链接的集合
7.
location 对象
location.href 跳转到指定链接
location.search是url中?后面的内容 属性
location.assign(“url”)跳转,且保留后退功能 方法
location.replace(“url”)跳转,且不保留后退功能。有时仍有后退,要清楚历史记录然后再看。
location.reload() 刷新当前页面
<input type=”button” οnclick=”location.replace(‘1.html’)” />
8.
history对象
<input type=”button” οnclick=”history.back()” /> 后退
<input type=”button” οnclick=”history.forward()” /> 前进
<input type=”button” οnclick=”history.go( i )” /> 前进i页,若i为负值,则倒退i
还可以写进链接里
<a href=”javascript:history.back()”>后退</a>
9.
navigator(浏览器)对象
10.
DOM文件物件模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口。Dom对象的方法,均是document的
D 为document
O 为object
M 为model
节点:文档是由节点构成的集合。HTML文档中的每个成分都是一个节点。Html结构为树状结构
元素节点
文本节点
属性节点
节点关系:父子关系,兄弟关系(直系)
属性
• nodeName
• nodeValue
• nodeType
• firstChild
• lastChild
• childNodes
• previousSibling
• nextSibling
• Attributes
parentNode
方法hasChildNodes()
• createElement()
• createTextNode()
• appendChild()
• removeChild()
• replaceChild()
• InsertBefore()
开始DOM之旅。下面的均是document的方法
• getElementById()
• 返回一个与那个给定id属性相对应的对象
• getElementsByTagName()
• 返回一个跟标签名相对应的对象数组
例如body若没有id 则此时可以
ob_body= document.getElementsByTagName(“body”)[0] 因返回的是个数组,且body只有一个所以索引为0,用来的到body标签的对象。
• getElementsByName()
• 返回指定name的对象数组
• 且在数组中的位置与在html中位置相同,即从上到下获取然后依次存储
• getAttribute()
• 查询对象的属性值
• setAttribute()
• 设置对象的属性值
11.
由内向外的原则,由下后上的原则,即后添加的会跑前面去。
但是添加的内容一定在原本html中内容的后面。
hello = document.createTextNode(“hello world”);创建文本节点
onh3 = document.createElement(“h3” ); 创建h3标签元素
obh3.appendChild(hello); 将文本对象加入标签,父子关系
obdiv=document.createElement(“div”);
obdiv.appendChild(obh3); 将标题对象放入块中
obbody=document.getElementsByTagName(“body”)[0];得到没有id的body的标签对象
因此处在空的body中凭空建立内容,因此要追溯到body的对象中,如在已有的div中建立只需要的到此div的标签对象加入即可(通过document.getElementById() )
按一次按钮建立一个上传附件,且有删除按钮每一个附件的按钮:
<input type=”button” οnclick=”addfj()”/>
<div id=”fj”></div>
Js中
function addfj(){
fj=document.getElementById(“fj”); 得到大div块的对象
tfj=document.createElement(“input”); 创建一个input标签对象
sdiv=document.createElement(“div”); 创建一个div标签对象
tfj.setAttribute(“type”,”file”); 对tfj设置属性:type=”file”
dbu=document.createElement(“input”);再创建一个
dbu.setAttribute(“type”,”button”);
dbu.setAttribute(“value”,”删除”);
dbu.οnclick=delfj; 设置事件处理,也可以用上面的setAttribute
sdiv.appendChild(tfj); 将input放入div中
sdiv.appendChild(dbu);将按钮依次放入div中
fj.appendChild(sdiv); 将每一个div块放入大的div中
}
function delfj(){
fbu = this.parentNode; 得到删除按钮的父节点,此处this代表对象dbu,此处只能用this而不能用dbu,是因为删除时只能删除一次,别的删不了,用this可以定位到每次删除本身对象
fj.removeChild(fbu); 父节点删除子节点。
}
按钮触发事件,函数中要用this来代替按钮对象,这样可以定位到每次的事件对象,而不混淆
第十一天
1.
用节点的style属性来修改css样式。优先级高于一切(应该是)
2.
position 定位最好操作块,图片为行级标签,所以要放在div中进行定位。
图片滚动效果:在css中#baby{ position:absolute}
在js中:var x= 0;
var baby =document.getElementById(“baby”);
var run =setInterval(“disp()”, 100);
function disp(){
if(x>innerWidth){ innerWidth为屏幕可用像素宽度
x = 0;
}
baby.style.left = x+ “px”; 数字与字符串相加转化为字符串
x += 10;
}
baby.onmouseover = stopit; 鼠标指向时的事件
function stopit(){
clearInterval(run) 鼠标移动上去时停止
}
baby.onmouseout = goit; 鼠标移开事件
function goit(){
run = setInterval(“disp()”,100) 此处也要加run否则,只能停止一次
}
3.
如果一个事件触发了setInterval。当这个事件反复触发,且中间没有clearInterval时,相当于开启了多个线程,看起来好像时间变快似得。
4.
msg.style.display= “none”;属性值以字符串的形式赋给style属性
5.
编程要使程序具有通用性,即即使数据发生变化,代码仍然可用。
实现点上一个字,然后在下面显示相关内容的,高通用性代码,即是添加了目录和内容,也可通用。
function ok(){
menu =document.getElementById(“menu”); 得到总的div的对象
ids = menu.childNodes; childNodes属性可返回子节点的数组
for(var i;i < ids.length; i++){
if(ids[i].nodeName ==”LI”){ nodeName属性根据节点的类型返回其名称,注意为大写
ids[i].onmouseover = disp; 鼠标移动上面事件绑定
ids[i].οnmοuseοut=nodisp;鼠标离开后事件绑定
}
}
function disp(){
cid = this.getAttribute(“id”);得到属性值,此处得到id的值
nid = cid + “c”; 因menu内于下文内容div的id关系:例如
目录为军事id设的是 ”js”,内容id设的是”jsc”
nodisp(); 调用一个函数,用来清除之前显示出的div
msgdiv =document.getElementById(nid); 得到包含了menu对应内容的div块的对象。
msgdiv.style.display=”block”; 设置此div的style属性为显示
}
function nodisp(){
msg = document.getElementById(“msg”); 得到内容存放的大块div的对象
cm = msg.childNodes; 得到大div内的所有节点对象的数组
for(var i = 0; i<cm.length; i++){
if(cm[i].nodeName == “DIV”){ 找出里面是div块的对象
cm[i].style.display = “none” 让其不显示
}
}
}
注意此处childNodes属性只能得到子节点,不能得到孙节点
如父节点中包含子节点div,而不能得到子节点div中里面例如有<li>的节点。
6.
oldstr = “hello”
newstr = oldstr.substr(3) 从索引3开始提取字符串中的字符。
newstr = “lo”
7.
form表单作用1交互信息2提交信息
<input type = “text” id = “uname” />
uname=document.getElementById(“uname”).value; 得到文本框的值
8.
radio : <input type=”radio” name= “sex” value=”male”>
sex = document.getElementsByName(“sex”) 得到所有标签的name属性为sex的对象的数组。
for( var i= 0; i < sex.length; i++ ){
if(sex[i].checked){ sexvalue = sex[i].value ;}
} 对象的checked属性,如果选择了的话,返回true否则返回false。注意以上取值操作,最好绑定在点击onclick属性上,这样每点一次取一次值。
对于表单的清空,恢复默认,有<form>对象的reset()方法,此可以清楚已选的单选。
对于单选题,没答过的清除,答过的题显示答案的可用switch:
switch(da_an){
case “a”: choice[0].checked = “checked”; break;
case “b”: choice[1].checked = “checked”; break;
case “c”: choice[2].checked = “checked”; break;
default: form对象.reset();
} da_an为保存答案的变量,choice为getbyname得到三个选项的数组,且三个选项有value分别对应为”a”,”b”,”c”。
type =checkbox 即多选的
for(var i=0;i<like.length;i++){
likevalue = new Arry(); 用一个空数组接收选中的值
if( like[i].checked){
likevalue[likevalue.length] = like[i].value 将值加入到数组中
}
}
likestring = likevalue.join(“ ”) 将数组以空格连接返回字符串
对于多选题,没答过的清除,答过的题显示答案的可用
form对象.reset(); 无论答过与否,先全部清除
for(var i=0; i<da_an.length; i++){ 挨个遍历字符串中字符
switch( da_an[i] ){ 将答案中有的分别勾上。
case “A”: id_aa.checked = “checked”;break;
case “B”: id_bb.checked = “checked”;break;
case “C”: id_cc.checked = “checked”;break;
}
}
多选题实现答案排序和多次重复选择取消后答案保存的值(以字符串保存)不乱:
仍然是选项对象的onclick属性绑定函数
if(this.checked){
aa += this.value; 将点上的选项加入累加器
}else{
aa = aa.replace( this.value, “”); 将点上后又消去的答案去除
}
var b = new Array();
for(vari=0; i<aa.length; i++){
b.push( aa[i] ;) 将字符串转化为数组
}
b.sort(); 只有数组可排列,此处作用防止选答案时点击先后
aa =b.join( “” ); 顺序不同导致答案错误。最后以空隔开转化为字符串
<select id=”sel”><option>下拉选项的值
sel = document.getElementById();
i = sel.selectedIndex 返回选中项的索引
ob = sel.options[i] options[]包含下拉选项所有对象的数组
ob.value 下拉选项的值既标签中间的字
如<option>北京</option>中的”北京”
第十二天
1.
eval(“1+2*3”) 此函数可计算字符串形式的式子。
2.
数组追加元素:1. arrayobj[arrayobj.length] 2.arrayobj.push()
例如arrayobj.push(“111”); 注意返回的是数组的长度
3.
实现跳转:
meta中refresh a form location.href location.assgin location.replace history.forward() history.back() history.go()
4.
表单提交
1. html提交流程
submit—form收集值
变量名—变量值提交action的url(name为变量名,value为变量值)
以get或post方式提交
enctype 提交时的编码方式
2. dom时
方式一:按钮类型为submit的点击触发form对象的onsubmit事件属性,为非false时提交
<form action=”http://192.168.4.125/login.php“
method=”get” onsubmit=”return putdata() ” />
此时<input type=submit> 按钮一旦被点击,则自动触发form中的事件属性onsubmit,此处可以通过控制函数putdata()的返回值,来控制提交条件
方式二:按钮button可绑定form对象的submit()方法。注意一旦form对象的submit()方法一旦为调用,则form对象的submit属性不会触发事件属性
方式三:无<form>标签时 用button的onclick来触发事件
onclick =f1()
f1(){ location.href=”http://192.168.4.125/login.php?uname=“ +uname }
“ ? ” 后面加传递过去的参数
方式四:无button用<a>
<a id=”aob”>
Js中:var aob =document.getElementById(“aob”)
aob.href= ”http://192.168.4.125/login.php?uname=“ +uname
3.
ajax局部刷新 :减轻服务器端负担,后退功能失效,对流媒体支持不太好,对手持设备支持不是很好
1. var hr=new XMLHttpRequest() 创建ajax对象
2. hr.overrideMimeType(“text/html”); 设定mime类型
3. hr.onreadystatechange = pro; 绑定事件处理程序
4. hr.open(“get” ,”1.txt”, true); 确定发送的url,发送的方法,采用异步
5. hr.send() 数据发送,发送请求
4与5写在事件处理函数中
下面在写function pro(){}
4.
readyState:状态变化自动触发属性
0:未初始化 1:读取中 2:已读取 3:交互中,服务器将数据返回到浏览器过程 4:完成
if(readyState==4) { 接收完成
var value = hr.responseText 服务器接收的变量放在此属性中
}
5.
Python中随机选择列表或元组中的一项 random.choice([“aa”, “bb”, ”cc”])
6.
tail -f 1.txt 动态查看文件
7.
<div>
<script>document.write.Math.random()</script>
</div> 写入的位置和script标签位置有关系
8.
get方法发送
hr.open(“get”, “url?key1=v1&key2=v2&key3=v3”, true)
hr.send()
post方法发送
hr.open(“post”, “url”, true)
hr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”); 一定要加这个方法,下面才能以键值对的方式发送
hr.send(“key1=v1&key2=v2&key3=v3”)
9.
yum install php
10.
Json js对象表示方法,可以理解为python中的字典
var person={“name”:”alen”, “age”:23} 注意其中不能有换行
person.name=”tom” 注意key在用时不加引号,且这样就重新给jason的一样重赋值了
11.
将字符串格式的jason转化为真正的jason对象
p= ‘{“name”:”alen”, “age”:23}’
var person=eval( “(” +p + “)” ) 固定格式
网页编辑
1.
#id .lei {}
#id .biaoqian {}
#id h1 span {}
2.
列表的边距是ul的padding决定的
3.
页面背景要放在body中,即使有width仍能全屏变色。
内容居中:全部居中也要用body的marin来做,不能用<div>
大块。<div>可以实现居中,但不能实现顶端无间隔。
4.
visibility:hidden 后背景图片也会消失
display:none 更是没有,空间都消失
5.
利用下面的空id来添加图片用background属性,且一定将大小设置为图片大小。
6.
z-index 只有在position:absolute时才能用
7.
单独改变一边的padding会将内容移动,若四边均变,则框变大。
8.
对于position:absolute的图片(内容),最好给个top:0;
否则可能有时候上不去。
9.
标题h1h2h3与下面的距离通过标题的margin-bottom:0;和下文的
margin-top:0;来调节
10.
h1…h6下面内容的缩进通过下文的padding-left:0;来取消
11.
font : 12px/20px italic; 字体大小/行间距 斜体
直接用font时一定要写两个以上的参数。
12.
当有行莫名其妙的下移不在一行显示时,考虑是否前面有float。此时用clear:both;即可。
13.
当复制到/var/www/html/ 的文件在浏览器中不显示时,将整个文件属主改为apache,还是就不行就直接另存为,既重新创建
14.
在设置背景图时,一般框要设为图片像素大小,但若想实现对内容的宽度换行限制时,可将框大小设为内容大小,即通过
width来限制,然后通过padding 来扩大边框从而将图片全部显示出来
15.
链接位置可以是顶左右下
16.
一个标签不能同时有背景图片和背景颜色
17.
position:absolute定位后,后面的块在margin时可直接对主框定位,忽视前面已定位的块占空间。
18.
对<a>链接直接设置color字体颜色则,链接点前和点后均会变成那个设置的颜色。伪选择器优先级高于标签选择器。但
#id a{color:red} 的优先级比a:visted{}及a:link{}的
都高
关联选择器 > 伪选择器 >标签选择器
因此最好对于链接的设置,在伪选择器中设置。
19.
指向一个目标的多个链接,如果一个访问,而全部变为访问过后状态。
20.
选择器与大括号间要有一个空格
一个属性一行
最后大括号一行,且与属性同样缩进。
21.
如果想用图片代替文字的标题,则要将文字放入span中
如 #id h3 span{visiblity:hidden;} 将文字隐藏
然后再对 #id h3{background: url()…..} 导入图片
22.
用margin定位时只能用margi-left和margin-top来定位,另外的两边不管用
23.
事件响应的对象的属性值,是每次响应都会发生变化的,因此,如果用一个变量接收属性值,这个变量一定要在事件响应函数内接收属性值,否则,只能接受一次的属性值。可见第九天22条记载
24.
jungo 1.4.3版本
至少看documention P1
25.
Js中跳出函数只能用return
没有exit和quit
26.
有时将文件夹复制到站内根下,但在浏览器中不显示,只需将文件夹移到本身显示的文件夹下即可,记得改属主。实在不行就另存为吧
27.
有些按钮比如,启动,提交之类的,最好在点下之后隐藏,否则若再次按下,会出现混乱。
28.
<div style = “visibility:hidden”><span style = “visibility:visible”>此显示</span>此不显示</div> 此时内容显示,即如果父元素不可见,子元素设置了可见,则子元素可见。但父元素内其他子元素不可见。
<div style =“display:none”><span style = “display:block”>此不显示</span>此不显示</div> 注意此时是都不显示,display与visibility不同
此处可以配合display使用,父元素none,则此时子元素设visible仍然无法显示。
display和visibility没有优先级之分,只要父元素和子元素分别设一个,如果父元素是隐藏,则子原素即使设了显示也会隐藏。如:
<div style = “visibility:hidden”><span style= “display:block”>此不显示</span>此不显示</div> 全都不显示
29.
<script></script> 一定是双标签,即使用src引入也是双标签
在<style>标签中@import url(); 后面一定要加分号
30.
在网页内,即使有些网页的宽度是全屏的,也要将body或者对大的div块设置宽度,否则在屏幕分辨率不同时,用像素定位的元素会乱套。
31.
注意在表单验证用户名长度或密码长度时,记得加value
如 uname.value.length< 4
32.
函数调用全局变量时,即使全局变量在函数后面定义,函数也可调用。
33.
有时设了css但不起作用,此时只需重启firefox即可。
34.
文字也有onclick事件属性。选择取值时,可通过每个选项的onclick来取值
35.
按钮的禁用和启用
按钮有属性
按钮对象.disabled = “disabled”; 设置后按钮变灰不可用
在js中用下代码启用此按钮
按钮对象.removeAttribute(“disabled” , “disabled”);
36.
在做考试系统时,考生的答案,存放在题库数组里,正确答案,另外单独一个数组。这样用for循环,来一次判断是否正确。
37.
字符串也可索引像python一样。
字符串可以相加,但不能想减。
字符串的替换replace
var x = “abc”;
y = x.replace( / a/, “b” ) 此时x仍然为”abc” 但y为”bbc”,注意第一个为斜杠不是引号。注意此处当z = “a”时,只需写
y =x.replace( z,”b” ) 即可,不需要考虑斜杠与引号区别
若有多个”a” 只需加g /a/g
38.
sort() 只能排列数组,不能排列字符串。
排列字符串,先将字符串转化为数组,再排列
var aa=“cb”;
var cc=new Array();
for(var i=0; i<aa.length; i++){
cc[cc.length] = aa[i]; 将字符串转化为数组
}
cc.sort(); 排列在原数组上
c = cc.jion( “” ); 以空隔开返回字符串;c为”bc”
39.
空字符串也是数组的一项,如果加入空字符串,注意索引也会加。
40.
可以将清除周期任务的代码放在周期任务调用的函数中。