html大全-白红宇

html大全

阅读量：6689 次

发布时间：2019-06-25

本文共 25346 字，大约阅读时间需要 84 分钟。

1.HTML简介

{

HTML(HyperText?Markup?Language)就是描述网页长什么样子、有什么内容的一个文本。

}

2.HTML的基本格式

{

<html>

<head>

<title>我的第一个网页</title>

</head>

Hello world

</body>

</html>

}

3.HTML里的标签

{

<html>

(1)H标签，HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。其中<H1>最大字体。

(2)BR标签，只是回车正常用在需要回车的地方的后面打上<br> 不需要</br>

(3)P标签，<p>是分段。<p>前后会有比较大的空白，而<br>则没有。

(4)位置标签 <center>传智播客</center>居中显示 <left></left>靠左 <right></right>靠右

(5)B标签，<b>和</b>表示标签之间的字加粗显示。

(6)I标签，<i>和</i>表示标签之间的字为斜体显示。

(7)Font标签 ,<font></font>是字体标签，在里面可以设置color,size,face等属性

<font color="red" size="30">我是Font标签</font>

(8)特殊字符HTML中<、>是有特殊含义的、空格是不会被显示的，所以需要特殊符号，相当于C#中的'\n'转义符。

<（小于号，less than）；

>（大于号，greater than）；

 （空格，no-break space）

(9)HR标签，在HTML中 <hr> 为分隔符（水平线），可以设置width,color,size,align 等属性

(10)Pre标签，预格式化，在<pre>和</pre> 之间的内容，全部按照你在设计时的格式显示出去

</html>

(11)关于HTML注释

}

4.URL、超链接

{

(1)URL：URL表示资源在网络中的地址，比如 http://127.0.0.1/a.htm、ftp://192.168.88.128/b.zip。

(2)超级链接：<a href="http://www.rupeng.com">如鹏网</a>。

中还可以嵌套图片，这样就是点击图UR片打开连接

} 5.路径

{

(1)绝对路径

绝对路径就是物理路径，

在herf里面写上全路径

(2)相对路径相对URL表示相对于当前文档的资源，“/”表示网站根目录，“../”表示父目录，“http://www.cnblogs.com/”表示父目录的父目录，“./”或者不写任何斜线表示相对于当前路径的目录。在文件夹里就写 ./123/test.xml

站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。

将<a>的target属性设定为"_blank"就可以在新窗口中打开超链接。国情：国内的网站很多都是默认在新窗口中打开。

(3)锚记

用name属性为<a> 起名字：<a name="Last">这里是最后</a>。这样可以通过<a href="#Last">转到平台</a>来跳转到超链接的部分。

案例：去往评论、回到正文

} 6.图片

{

(1)<img src="a.jpg"/>注意图片是链接的，不是插入的，所以如果Src指向的文件不存在了，就看不了了

关于图片的几个属性

(2)Alt属性：alt属性为图片无法显示时的显示文本，鼠标方式去也会有悬浮提示“点击查看大图”；

(3)border属性：border属性指定边框，border="0"不显示边框；

(4)width、height属性：最好指定width、height，哪怕是原始尺寸大小，因为如果不指定大小，图片会不占位置，图片下载后才调整大小，会造成页面很乱。如果指定了width、height哪怕图片没有加载完成，也会先把位置占上。

} 7.列表

{

(1)无序列表

列表的格式为<ul>

</ul> 可以再列表里面设置属性来控制前面显示的内容 Type = disc, circle, square

(2) 有序列表<ol>

</ol> 可以再列表里面设置属性来控制前面显示的内容 Type= 1,a,A,I,i

}

8.表格

{

表格：<table></table>为表格，在内部通过<tr>创建行，<tr>内部通过<td> 创建单元格。

可以将table的border属性设为0来隐藏表格线。

<table>

<td>

<tr>

</tr>

<tr>

</tr>

</td>

</table>

(1)填充间距

cellpadding内容和表格边线之间的距离 cellspacing单元格之间的间距

(2)<tr>的属性：

align，水平对齐，可选值left、right、center；

valign，垂直对齐，可选值top、middle、bottom。

(3)<td>也有align和valign。

<tr align="right"><td>tom</td><td align="left">20</td><td>男</td></tr>子标签默认继承父标签的属性，如果自己单独指定了属性，则会覆盖父标签的属性。

(4)

可以使用rowspan(合并行）、colspan(合并列）进行单元格的合并

<BODY>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</BODY>

}

9.表单

{

(1)<form>标签为表单标签。如果要把数据提交到服务器，则需要将<input>、<textarea>、<select>等表单元素放到form中。

...

</form>

(2)Input

是主要的表单元素，type的可选值：

(2.1)text（文本框）

size属性为宽度，value为值，maxlength为可以输入的最大长度，readonly只读。disabled为不可填写

(2.2)password（密码框）

size属性为宽度，value为值，maxlength为可以输入的最大长度，readonly只读。disabled为不可填写

(2.3)radio（单选按钮）

相同name属性的为一只有组，不同radio设定不同的value值，这样通过取指定name的值就可以知道谁被选中了，不用单独的判断。

checked为默认选中，value为真实值，用来查询

<input type="radio" name="sex" value="male" checked="checked">男

<input type="radio" name="sex" value="female" >女

<input type="radio" name="sex" value="unknow">未知

(2.4)checkbox（复选框）

checked属性表示是否被选中，可以设定不同的name和value ,可以设定

<td>

<input type="checkbox" value="cf" checked="checked">吃饭

<input type="checkbox" value="sj" checked="checked">睡觉

<input type="checkbox" value="ddd" checked="checked">打豆豆

</td>

(2.5) file（文件选择框）

使用file，则form的enctype必须设置为multipart/form-data、method属性为POST（*）

(2.6)submit（提交按钮）,button（普通按钮）,reset（重置按钮）,image（图片按钮）

<input type="button" value="注册" > 普通按钮

<input type="submit" value="注册"> 可以转到设定的action="url"页面

<input type="reset" value="重置"> 重置页面为默认页面

<input type="image" src="btn.JPG"> 图像按钮，也是普通按钮，不过样子是一个图像

(2.7）hidden（隐藏字段）

隐藏字段，内容不可见

（3）关于Label的用法，设定id属性的值，然后通过<label for="值"> 文字</label> 来使用

但是单击修饰文本的时候input并不会得到焦点，而用label则可以，for属性指定要修饰的控件的id，<label for="txt1" >asdfad</label>

(3.1)

设定快捷键，例子中设定快捷键f来快速切换到密码框，CTRL+F

<tr>

<td>

</td>

</tr>

(3.2)点击文字则选中复选（单选）框

(4).<select>标签

用来创建类似于WinForm中的ComboBox或者ListBox

(4.1)如果size属性大于1就是ListBox（size的值为显示出来的列表数量）， <select name=*>

否则就是ComboBox。 <select size=**>

<select multiple>或者<select multiple="multiple">（推荐），那么就是可以多选的ListBox。

注意，是用 Ctrl 键配合鼠标实现多选。

(4.2)select中的项是<option>，

<option>北京</option>还可以设定项的值<option value="1">北京</option>。

(4.3)将一个option设置为选中：<option selected>333</option>或者<option selected="selected">333</option>

(推荐)就可以将这个项设定为默认选择项

(4.4)如何实现“不选择”，添加一个<option value="-1">--不选择--<option>，然后编程判断select选中的值如果是-1就认为是不选择。

select分组选项，可以使用optgroup对数据进行分组，分组本身不会被选择，无论对于下拉列表还是列表框都适用。备注

(5)<textarea>多行文本（也是表单元素）

<textarea>文本</textarea>，cols、rows属性表示行数和列数。

<textarea rows="15" cols="30">asdfasfd</textarea>

注意<textarea>1231</textarea>之间的是多行文本里面显示的内容，加了空格或者转行也会显示空格

}

10.meta标签

{

}

11.DIV和Span

{

(1)

层：<div></div>将内容放到层中，就以将这些内容当成一个整体进行处理，比如整体隐藏、整体移动等。div非常强大和常用。类似于WinForm的Panel。

(2)span：div是将内容放到一个矩形的区块中，会影响布局，而span只是把一段内容定义成一个整体进行操作，但不影响布局、显示。

}

12.CSS样式

{

CSS（层叠样式表）是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。CSS主要有元素内联、页面嵌入和外部引用三种使用方式。CSS是描述元素的皮肤！

(1)元素内联（行内样式），直接将样式写入元素的style属性中，<input type="text" readonly="readonly" style="background-color: #FF00FF" />，适用于样式没有可复用性的场合。

(2)

页面嵌入：在head中加入

input{border-color:Yellow;color:Red;}

</style>

表示页面中所有input都是采用指定的样式。适合于样式复用，减小页面体积

(3)

外部引用，将css内容写入css后缀的文件

textarea{background:yellow}

然后在页面中引用，在head中加入

适合于多个页面共享css。

可以以拖页面的方式来快速引用

}

13.样式属性

{

(1)css计量单位：css中表示宽度、距离时有多种计量单位：px（像素）、30%（百分比）、em（相对单位）等。width:20px。

(2)

background-color:Red;背景颜色；color：文本颜色

background-image:url(images/bg.jpg)背景图片

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数：

repeat : 　背景图像在纵向和横向上平铺

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

background-position：设置或检索对象的背景图像位置

(3)

text-decoration :

检索或设置对象中的文本的装饰。 none || underline || blink || overline || line-through

参数：

none : 　无装饰

blink : 　闪烁

underline : 　下划线

line-through : 　贯穿线

overline : 　上划线

复合样式 background border

(4)

border:solid 1px red

border-style:solid;边框风格，实线solid（默认是没有），还有dotted(点)等值；border-color：边框颜色；border-width：边框宽度(默认是0)。例子：style="border-color:Red;border-width:1px;border-style:dotted;"

(5)

display：元素是否显示，可选值none（不显示,不占地儿）、block （显示为块级元素，此元素前后会带有换行符。）、inline（显示为内联元素，元素前后没有换行符）等。

(6)

cursor，鼠标在元素上时显示的光标图标，可选值：cursor（默认光标）、pointer（超链接上的手）、text（输入Bean）、wait（忙沙漏）、help（帮助）等。还可以通过cursor:url(dinosau2.ani)使用ani、cur格式的自定义光标图片。

(7)

LI不显示圆点：LIST-STYLE-TYPE: none;一般设在li或者ul上

}

14.盒子模型

{

在CSS中，如DIV DIV边框与页面之间有边距，为

margin

而DIV里面的元素与DIV边框的间距为padding

border则为边框

div

{

width:200px;

height:200px;

background-color:Red;

margin-bottom:10px;

padding:10px 50px;

filter:alpha(opacity=50);设置或检索对象所应用的滤镜效果。这里设置不透明度为50%，只支持IE

要使用该属性，对象必须具有height，width，position三个属性中的一个。

opacity:0.5;

在其他游览器设置该属性，能达到不透明度为50%的效果

}

15.样式选择器

{

(1)标签选择器，对于指定的标签采用统一的样式

如争对input标签

input

{border-color:Yellow;color:Red;}

(2)class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格

.warning{background:Yellow;}

.highlight{font-size:xx-large;cursor:help;}

当多个类样式中有冲突依然是就近原则

(3)标签+class选择器

class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。

input.accountno{text-align:right;color:Red;}

label.accountno{font-style:italic;}

<lab

el class="accountno">333333333333333333</label>

(4)

id选择器

为指定id的元素设定样式，id前加#

#username

{

font-size:xx-large;

}

id选择器要指定一个内容时需要嵌套，如

#1 #2 #3 则针对#1里面的#2里面的#3进行设定

(5)

style、class可以同时组合使用

(6)

更多选择器(*)

{

这里设定的内容可以应用于全局

}

{

margin:0px;

padding:0px;

}

去除全局的边框之间距离，元素和边框的距离

(7)

包含选择器：

P strong{ background-color:Yellow}

表示P标签内的strong标签内的内容使用的样式

<strong>fadsfasdfads</strong>

<p><strong>adfasfd</strong></p>

(8)

组合选择器，同时为多个标签设定一个样式

H1,H2,input{background-color:Green}

<h1>nihao</h1>

(9)

伪选择器

伪选择器：为标签的不同状态设定不同的样式：

A:visited：超链接点击过的样式；A:active：选中超链接时的样式；A:link：超链接未被访问时的状态；A:hover：鼠标移到超链接时的状态。

A:visited {TEXT-DECORATION: none}

A:active {TEXT-DECORATION: none}

A:link {TEXT-DECORATION: none}

A:hover {TEXT-DECORATION: underline}

使用时有顺序之分，遵守 LoVe HAte

说明：TEXT-DECORATION: none表示超链接不显示下划线。

}

16细边框表格

{

设置了表格的border=“1px” 因为表格边线有重叠，所以表格的边线显示比较粗。

可以使用css去重重叠

(1)

使用css 先给Table加上1px的border- bottom,border- right

再给td加上1px的border- left,border- top

(2)

border-collapse:collapse;

设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。

这里的属性为相邻边被合并

使用ul和li制作横向和纵向菜单

见代码

布局最重要的一个属性就是float

}

17.网页布局

{

(1)框架布局

Frameset 框架页里不能有body

</frameset>

iframe

(2)表格布局

(3)DIV+CSS布局

网页布局就是“这块内容显示在左边，那两块内容并排显示，那块内容漂浮在页面上”。

不要使用table进行布局，因为：table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；用table布局会将布局方式写在html中，违反了“语义性”原则；用table会影响搜索引擎的抓取，不利于SEO。因此Table用来表达真实表格状数据的东西，布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。

Div+CSS就是将要布局的内容用<div>切成块，然后使用css描述每个块的大小、位置等。

详见代码

}

18文档流

{

文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。

(1)position:absolute;绝对定位,

即完全脱离文档流相对于position属性非static值的最近父级元素进行偏移,窗口移动相对屏幕的话会移动

absolute不占原来的位置，后面的DIV会把这个位置顶替掉

position:absolute;

z 轴，值越大，在屏幕最前，必须脱离文档流

z-index:100; 这时，脱离文档流的这个DIV显示在最前面

(2)position:relative;相对定位,

这个属性值保持对象所在文档流中的位置，相对于元素在文档流中位置进行偏移. 但保留原占位.可以设置top, left, right, bottom定位

relative占原来的位置，

(3)position:fixed;固定定位,即完全脱离文档流, 相对于视区进行偏移.

，比如常见的右下角广告小窗口

position:fixed;

bottom:0px;

right:0px;

position:static; 默认值文档流

}

19.JavaScript概念

{

(1)JavaScript是一种脚本语言。

脚本，一条条的文字命令。执行时由系统的一个解释器，将其一条条的翻译成机器可识别的指令，然后执行。常见的脚本：批处理脚本、T-SQL脚本、VBScript等。

(.net生成的exe文件用记事本打开看不懂。它是整体预编译然后再执行的)

(2)JavaScript代码放到<script>标签中，script可以放到<head>、<body>等任意位置，而且可以有不止一个<script>标签。默认值就是当前时间。JS是大小写敏感的。

放到<head>中的<script>在body加载之前就已经运行了。写在body中的<script>是随着页面的加载而一个个执行的。

(3)JavaScript是弱类型语言（声明变量都用var），不存在int n=10;string s=“a”;的情况，所有变量都用var。因为是“动态类型”，所以下面这段代码是合法的：var n=10;n=“a”;

(4)

Js的注释，与C#、Java的相同（//单行注释、/* 多行注释 */）。

(5)JavaScript中也有事件的概念，当按钮被点击的时候也可以执行JavaScript：

只有超链接的href中的JavaScript中才需要加“”javascript:”，因为它不是事件，而是把“”javascript:”看成像“http:”、“ftp:”、“thunder:/

}

20.JavaScript语法

{

(1)变量声明：JS中所有的变量声明都用var

而在C#中var是类型推断，必须定义变量时赋值。

变量使用前可以不用var声明，这样的变量会变认为是“全局变量”（不推荐）

JavaScript中即可以使用双引号声明字符串，也可以使用单引号声明字符串。主要是为了方便和html集成，避免转义符的麻烦。

alert(typeof(str))

(2)JavaScript中的null与undefined

(2.1)undefined,表示一个未知状态

声明了但是没有初始化的该变量，变量的值是一个未知状态(undefined)。?（访问不存在的属性或对象window.xxx）

方法没有明确返回值时，返回值是一个undefined.

当对未声明的变量应用typeof运算符时，显示为undefined（*）

(2.2)

ull表示尚未存在的对象,null是一个有特殊意义的值。可以为变量赋值为null，此时变量的值为“已知状态”(不是undefined)，即null。（用来初始化变量，清除变量内容，释放内存）

(2.3)

始化变量，清除变量内容，释放内存）

undefined==null //结果为true,但含义不同。

undefined===null //false(*),先判断类型是否一致，然后判断值。

(2.4)

== 判断变量的值是否相等

=== 全等！== 值相等并且类型相同

(3)JS中的判断变量是否可用

JavaScript中判断已声明变量、参数是否初始化(可用)的方法：

假设已有变量x：

if (typeof(x) !=‘undefined’ && x!=null)

{ alert("可用"); }

可以简化写成

if(x)

{ alert(‘变量可用！’); } else { alert(‘变量不可用！’); } //null、undefined、’’、0都认为是false

当x声明但没有赋值，或x为null， undefined ，空字符串，或x为0时，都表示不可用！// if(x),返回false

推荐用最后一种方法。但如果x有可能没有声明，则只能用typeof判断（否则会报错）。

经常会遇到的一个场景：if语句的小括号中直接写一个变量。各种值与Boolean之间的关系。

(4)函数的声明

(4.1)JavaScript中声明函数的方式：

function add(i1, i2) {

return i1 + i2;

}

不需要声明返回值类型、参数类型。函数定义以function开头。

var r = add(1, 2);

alert(r);

调用方法时，不带（）时是直接输出整个方法的。

(4.2)JavaScript中不像C#中那样要求所有路径都有返回值，没有返回值就是undefined。

(5)arguments对象

(5.1)JavaScript中没有方法重载。

假如几个方法的方法名相同，则执行的事最后一个方法，不管在哪里调用的这个方法名字的方法，因为JS会先检查所有的方法。

(5.2)动态为方法传递参数，类似于.net中的params关键字作用

function myFunc() {

for (var i = 0; i < arguments.length; i++) {

document.write(arguments[i]);

document.write('<br/>');

}

myFunc('张三', 18, '李四', 19);

</script>

(5)匿名函数

相当于 c#中的委托

var f1 = function(i1, i2) {

return i1 + i2;

}

alert(f1(1,2));

}

21.JS面向对象

{

(1)在JS中，函数就是对象，对象就是函数。

方法直接调用为函数，用new调用为对象。

JavaScript中没有类的语法，是用函数闭包（closure）模拟出来的。

(2)定义一个对象

function Person() { }

(3)使用一个对象

var p=new Person();

p.Name=‘张三’;//动态语言，所以可以直接写。

p.Age=30;

p.SayHello=function() { alert(‘Hi~’); }

alert(p.Name);

alert(p[‘Age’]);//另外一种动态访问属性的方式。

(4)使用对象的另一种方法，类似C#的构造方法

JavaScript同样支持this关键字

构建一个带参数的Person对象。通过this关键字为对象的属性赋值。

function Person(name, age) {

this.name = name;

this.age = age;

this.showInfo = function() {

alert('大家好，我叫' + this.Name + '，今年' + this.Age + '岁了。'); }}

var zjl = new Person('周杰伦', 20);

zjl.showInfo();

function Person(name,age)可以看做是声明构造函数，Name、Age这些属性也是使用者动态添加了。

new 相当于创建了函数的一个实例。

}

22.String对象

{

(1)

length属性：获取字符串的字符个数。（无论中文字符还是英文字符都算1个字符。）

var s = "11 22 33 99 3";

alert(str.length);

(2)

charAt(index)方法：获取指定索引位置的字符。（索引从0开始）

(3)

indexOf(‘字符串’,startIndex 或者lastIndexOf)方法：获取指定字符串第一次出现的位置。startIndex表示从第几个开始搜索。

(4)

split(‘分隔符’,limit);根据分隔符将一个字符串返回为一个数组。

(5)

substr(startIndex,len)从startIndex开始，截取len个字符。

(6)

substring(startIndex,stopIndex)从startIndex开始，截取到stopIndex位置（不包括stopIndex所在的字符）。

(7)

toUpperCase()转换大写

toLowerCase();转换小写

}

23.JS中的正则表达式

{

(1)

JavaScript中创建正则表达式类的方法：

var regex = new RegExp("\\d{5}")

或者 var regex = /\d{5}/

(2)

RegExp对象的方法：

（1）test(str)判断字符串str是否匹配正则表达式，相当于IsMatch

var regex = /.+@.+/;

alert(regex.test("a@b.com"));

alert(regex.test("ab.com"));

（2）exec(str)进行搜索匹配，返回值为匹配结果，没找到返回null(*)

var reg = /.+@.+/;

var a = reg.exec("123abc.com");

alert(a);

(3)

.string的正则表达式方法

String对象中提供了一些与正则表达式相关的方法，相当于对于RegExp类的包装，简化调用：

match(regexp)，相当于调用exec

var s = "aaa@163.com";

var regex = /(.+)@(.+)/;

var match = s.match(regex);

alert(RegExp.$1 + "，服务器：" + RegExp.$2);

(4)

g 全局匹配

var str = "北京北京北京";

alert(str.replace(/北京/g, "邯郸"));

i 忽略大小写

gi 全局忽略大小写

var s = "AAAAbbaa";

alert(s.match(/a+/gi));

}

24.Array对象

{

(1)

JavaScript中的Array对象就是数组，首先是一个动态数组，而且是一个像C#中数组、ArrayList、Hashtable等的超强综合体。

var names = new Array();

names[0] = "tom";

names[1] = "jerry";

names[2] = "lily";

for (var i = 0; i < names.length; i++) {

alert(names[i]);

}

(2)

简化赋值var arr = [‘China’, 2008, true, ‘Hello’];

无需预先制定大小，动态。

(3)

JS中的Array是一个宝贝，不仅是一个数组，还是一个Dictionary，还是一个Stack。

var pinyins = new Array();

pinyins["人"] = "ren";

pinyins["口"] = "kou";

pinyins["手"] = "shou";

alert(pinyins["人"]);

alert(pinyins.人);

像Hashtable、Dictionary那样用，而且像它们一样效率高。

(4)对于数组风格的Array来说，可以使用join方法拼接为字符串

var arr = ["tom","jim","lily"];

alert(arr.join(","));

JS中join是array的方法，不像.Net中是string的方法

}

25.Json对象

{

(1)

对象是一个无序的“‘名称/值’对”集合。

一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

(2)

定义个简单的Json

var json = { "name": "张三", "age": 18, "sex": "男" };

for (var key in json) {

alert(key + "==" + json[key]);

}

(3)

数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、?null、对象（object）或者数组（array）。这些结构可以嵌套。

}

26.遍历

{

for循环可以像C#中的foreach一样用

for循环还可以获得一个对象所有的成员，类似于.Net中的反射

for (var e in document) {

alert(e);

}

有了它没有文档也可以进行开发。

}

27.扩展方法

{

通过类对象的prototype设置扩展方法，下面为String对象增加quote（两边加字符）方法

String.prototype.quote = function(quotestr) {

if (!quotestr) {

quotestr = "\"";

}

return quotestr + this + quotestr;

};

alert("abc".quote()); alert("abc".quote("|"));

扩展方法的声明要在使用扩展方法之前执行。JS的函数没有专门的函数默认值的语法，但是可以不给参数传值，不传值的参数值

}

28.DOM

{

DOM就是Html页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。

DOM也像WinForm一样，通过事件、属性、方法进行编程。

//节点 node ：元素(标签) 文字属性注释

//元素 element : 标签

}

29.DOM事件

{

(1)DOM简介

{

<body οnmοusedοwn=“alert(‘别点我！’);”>//注意body的范围。

有时事件的响应代码比较多，就要放到一个函数中：

function userMouseDown() {

alert('网页被你点坏了>_<~~,赔吧！');

alert('逗你玩呢~~');

}

</script>

οnmοusedοwn=“userMouseDown();”中，

注意： userMouseDown后的括号不能丢（不能写成οnmοusedοwn=“userMouseDown” ），带()表示调用函数，直接写函数名表示设置事件的处理函数为userMouseDown。

}

(2)window对象(Dom中的一个顶级对象。)

{

window对象代表当前浏览器窗口。

使用window对象的属性、方法的时候可以省略window。

能不写window就不要写，这样可以减少js文件的字节数。

(2.1)

window.alert(‘大家好！’);//弹出警告对话框

(2.2)

window.confirm(‘确定要删除吗？’);//确定、取消对话框，返回true或false;

(2.3)

window.navigate(url);//将网页重新导航到url,只支持IE、Opera11.6,建议使用window.location.href=‘url’;//支持大多数浏览器

(2.4)

window.setInterval(code,delay)//每隔一段时间执行指定的代码（类似于winForm中的Timer控件。）

第一个参数：指定的代码字符串

第二个参数：时间间隔（毫秒数）

var intervalId=setInterval(“alert(‘hello’);”,1000);

(2.5)

window.clearInterval(intervalId);//停止计时器

clearInterval()取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。

(2.6)

setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。

var timeoutId = setTimeout("alert('hello')", 2000);

(2.7)

window.location对象：

window.location.href=‘’;//重新导航到新页面,可以取值，也可以赋值。

window.location.reload();//刷新当前页

}

30.body对象的事件

{

(3.1)onload（页面加载后触发）

网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成。

使用：

window.控件Id（不建议使用）

document.getElementById(“控件Id”);(推荐)

}

31.其他事件

{

除了属性之外，当然还有通用的HTML元素的事件：onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）、oncontextmenu（在浏览器中单击鼠标右键显示”右键菜单”时触发）等。

}

32Window.enen

{

(1) window.event是IE下非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArgs)。

window.event.

altKey属性，bool类型，表示事件发生时是否按下了alt键。类似的还有ctrlKey,shiftKey。演示：

if (event.altKey && event.ctrlKey) {

location.href = "04-跑马灯.htm";

}

(2)window.event的属性：

//鼠标在文档中的位置

//document.title = event.clientX + "==" + event.clientY;

clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY

//鼠标在屏幕中的位置

//document.title = event.screenX + "==" + event.screenY;

发生事件时鼠标在屏幕上的坐标；offsetX、offsetY

//相对于当前元素的偏移位置

//document.title = event.offsetX + "==" + event.offsetY;

发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。

(3)

(window.event.returnValue)returnValue属性，如果将returnValue设置为false，就会取消默认行为的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。(οnsubmit="window.event.returnValue=false;")

例子：

function turn(right) {

alert("111");

if (!right) {

//取消a标签的默认行为

window.event.returnValue = false;

}

<a href="http://www.cnbeta.com" οnclick="turn(0)">cnbeta</a>

function check() {

if (document.getElementById("txt").value == "") {

alert("请输入用户名");

//取消submit的默认行为

window.event.returnValue = false;

}

(4)window.event的属性：

srcElement：获得事件源对象。几个按钮共享一个事件响应函数用。****_click(object sender,EventArgs e)

button，发生事件时鼠标按键，IE:1为左键，2为右键，s4中滑轮

除IE浏览器外，其他浏览器在绑定事件处理函数时，有一个默认的参数即event对象。

（*）screen对象，获取屏幕的信息：

alert("分辨率：" + screen.width + "*" + screen.height);

if (screen.width < 1024 || screen.height < 768) {

alert("分辨率太低！");

}

33.clipboardData对象

{

(1)setData("Text",val)，设置粘贴板中的值。

function share() {

var txt = t.value;

//设置粘贴板

window.clipboardData.setData("text", txt);

}

(2)getData(“Text”)读取粘贴板的值，返回值为粘贴板中的内容；

function copy() {

//获取粘贴板中的内容

var txt = clipboardData.getData("text");

t1.value = txt;

}

(3)clearData(“Text”)清空粘贴板；

(4)禁止复制和剪切！

(5)history操作历史记录。

window.history.back()后退；window.history.forward()前进。

window.history.go(-1)后退、window.history.go(1)前进

}

34.document对象

{

document的方法：

(1)write();向文档中写入内容。

writeln()，和write差不多，只不过最后添加一个回车。在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起。writeln()是在源代码里面换行。与<br/>不一样。

(2)getElementById(), （非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、form1.textbox1之类的问题（当元素放在form中的时候（在html页面中需要通过form.元素id）），因此不建议直接通过id操作元素，而是通过getElementById。

(3)getElementsByName()，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。

(4)getElementsByTagName()，获得指定标签名称的元素数组，比如getElementsByTagName(“p”)可以获得所有的<p>标签。*表示所有标签。

function bodyload() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

//判断是不是文本框

if (inputs[i].type == "text") {

inputs[i].value = i + 1;

}

35.事件冒泡

{

事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外” 验证：在页面上添加一个table、table里有tr、tr里有td，td里放一个p，在p、td、tr、table中添加onclick事件响应，

</tr>

</table>

取消事件冒泡： window.event.cancelBubble = true;//IE下的写法。

}

36.onload

{

1.二者效果完全一样,都是在页面内容都加载完毕后才触发。

2.由于网页中没有window所以在body中写onload

3.建议使用window.onload//使用js脚本的方式高效

4.其实应该是document.onload，但是所有浏览器都实现到了window对象上。

window.οnlοad=function(){

}

37.this

{

事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用（这里的this表示window对象），如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象：事件冒泡。

}

38.动态创建DOM

{

document.write只能在页面加载过程中才能动态创建。

可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。

function showIt() {

var divMain = document.getElementById("divMain");

var btn = document.createElement("input");

btn.type = "button";

btn.value = "我是动态的！";

divMain.appendChild(btn);

}

}

39.innerText和innerHTML

{

用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建。

function createlink() {

var divMain = document.getElementById("divMain");

divMain.innerHTML = "<a href='http://www.rupeng.com'>如鹏网</a>";}

innerText只能设置纯文本，即便写了html代码，也会对html代码进行编码，

innerHTML可以设置html代码和纯文本。

}

40.控制层的显示

{

(1) 默认的时候，假如不设定div1.style.display，alterc出来是为空

(2) div1.style.display = 'none'

设置层的隐藏

(3) div.style.display = "block";

设置层的显示

没有设置.style.display= "" ，会以id选择器设置的display为准

}

41.几个特殊事件

{

(1)onchange事件

文本改变时，并没有触发事件

只有当失去焦点的时候，才会触发事件。

(2)click()。

就是用代码来触发点击按钮的动作

var btn = document.getElementById("btn");

//相当于点击了一下按钮

btn.click();

(3)focus()

获得焦点的事件，如打开页面焦点自动在登陆框

var txt = document.getElementById("txtPwd");

txt.focus();

(4)blur();

失去焦点的事件

(5)submit()

提交表单事件，和blur()配合使用可以验证用户名是否已经存在

if (this.value != "") {

//表单自动提交

var form = document.getElementById("f1");

//表单自动提交

form.submit();

}

(6)onsubmit()

用于判断表单信息是否正确，否则在该事件里return false

onsubmit 只有点击提交按钮的时候才触发

表单的submit()方法，不会触发该事件

(7)onkeydown

onkeydown 键盘落下，字符还没有录入到文本框

(8)onkeyup

onkeyup 键盘弹起字符已经到文本框

(9)event.keyCode

对应的按键码

}

42.设置元素位置，大小

{

通过dom读取元素的top、left、width、height等取到的值不是数字，而是“10px”这样的字符串；为这些属性设值的时候IE可以是80、90这样的数字，FF、Chrome必须是“80px”、“90%”等这样的字符串形式，为了兼容统一用字符串形式。left/top需要设置position

易错：不要写成div1.style.width=80px，而是div1.style.width=‘80px’;

如果要修改元素的大小（宽度加1），则首先要取出元素的宽度，然后用parseInt将宽度转换为数字（parseInt可以将“20px”这样数字开头的包含其他内容的字符串解析为20，parseInt(‘22px’,10)，也就是解析尽可能多的部分）；然后加上一个值，再加上px赋值回去。

//!!!!!别忘了 px

div.style.width = width + 20 + "px";

div.style.height = height + 20 + "px";

}

43.setAttribute

{

创建元素属性及赋值，可以创建自定义的属性

label.setAttribute(“for”, “username”);

var index = parseInt(this.getAttribute("index"));

}

44透明度的设置

{

(1)获得IE里面的透明度的数值

var num = div.style.filter.replace("alpha(opacity=","").replace(")","");

(2)设置IE里面的透明度的数值

num = parseInt( num) - 10;

div.style.filter = "alpha(opacity=" + num + ")";

(3)chrome设置透明度

d1.style.opacity = "0.5";

}

45.鼠标的坐标位置

{

例子：跟着鼠标走的图片

var img = document.getElementById("i1");

img.style.position = "absolute";

//图片脱离文档流

// !!!!!!!!!!别忘了px

img.style.left = event.clientX - 10 + "px";

img.style.top = event.clientY - 10 + "px";

}

46.文档居中

{

//document.documentElement 根节点整个文档的高度和宽度

var x = (document.documentElement.clientWidth - div.clientWidth) / 2;

var y = (document.documentElement.clientHeight - div.clientHeight) / 2;

div.style.left = x + "px";

div.style.top = y + "px";

}

47.返回一个空值，childNodes，children

{

href="javascript:void(0)"

childNodes //元素文本注释 ie中会忽略空白行，chome不会

children //元素

}

48.

转载于:https://www.cnblogs.com/chong520/archive/2012/09/25/2703203.html

你可能感兴趣的文章

Use another project as lib

Excel VBA判断Office语言版本

查看>>

linux网桥

查看>>

java.lang.OutOfMemoryError: GC overhead limit exce

查看>>

os change folder owner/group

查看>>

【Linux】shell编程之给变量赋值的五种方法

查看>>

练习写自己的博文

查看>>

random select algorithm（选择算法）

dedecms 当session开启了memcache存储后报错解决办法

查看>>

Centos 下搭建SVN ＋ Apache 服务器

查看>>