HTML:超文本标记语言
由标签和数据组成,标签封装数据
主体结构:
<html>
<head>
<title>标题</title>
</head>
<body>
内容
</body>
</html>
双标签:如:<font></font>,<a></a>
单标签:如:<br/>, <hr/>, <img/>,<imput/>
格式:<标签名 属性="属性值">数据</标签名>
XHTML:更加严格的HTML,标签必须关闭,标签名必须小写,属性必须用“”括起来,内容标签中不能嵌套格式标签,等等。
如果要在页面显示特殊符号,需要字符实体
< < > >
& & 空格
-------------------------------------------------------------------------
常见标签:
1.字体:<font></font> <font size=""color="">数据</font>
<br/>换行,<b>加粗,<i>斜体,<u>下划线
2.标题:<h1></h1>...<h6></h6>
3.列表:
列表范围<dl></dl>
上层项目:<dt>
下层项目:<dd>
或
项目范围:<ul> (unordered无序) <ol> (ordered有序)
列表项:<li>
示例:
<ol>
<li>游戏名称</li>
<oltype="a">
<li>魔兽</li>
<li>仙剑</li>
</ol>
<li>游戏类型</li>
<ul>
<li>攻略</li>
<li>角色扮演</li>
</ul>
</ol>
4.图像:<img/>
<img src="url/uri" width=”宽度” height=”高度” alt="说明文字" />
最好加上宽度和高度属性,这样即使页面没有加载完成,图片也会占着位置
另外,缩略图最好不要使用width和height来缩小,应使用本就比较小的图片
5.表格:
一个2行3列带标题的表格
<table>
<caption>表格标题</caption>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
tr的属性:align:整行的内容的水平对齐方式,valign:垂直对齐方式
td的属性:align:此单元格的内容的对齐方式,valign:垂直对齐方式
rowsapn:水平单元格合并,colspan:垂直单元格合并
注意:<table>中默认有一个<tbody>!!!!!!!很重要!!!!虽然我们看不到它,但是在DOM解析中,DOM会读取这个元素,
<thead></thead>:表头所在行,和<tr></tr>类似
<th></th> 是表头内容,和<td></td>类似,但其内容默认居中加粗
表格可以用来对网页内容进行排版,如:表单
6.超链接:<a></a>
<ahref="http://www.baidu.com" target="_blank" title="提示文字">百度</a>
href属性可以是URL/URI,也可是一张图片的URI
target的5个属性:_self 自身 _blank 新窗口 _parent父级窗口 _top 顶级窗口,以及 framename 帧的名称
发邮件:<ahref="mailto:abc@qq.com&subject=haha">联系我们</a>
迅雷下载:<ahref="thunder://alsdjfasldfja">龙门飞甲下载</a>
定位
<aname="top"><a>
................
<a href="#top">回到top处</a>
7.表单:
<form></form>:用于收集客户端数据,发送给客户端
输入项:<input/>根据type值不同,对应的组件也不同
type属性:
1.text 文本框,输入内容可见。size:文本框长度
readonly=”readonly”:只读 maxlength:最大输入字符个数
2.password 密码框,输入内容不可见,属性同上
3.radio 单选按钮,要想多个单选按钮只有一个被选中,必须有相同的 name 属性值。
4.checkbox 复选框,可同时选中多个数据。checked=”checked”,已选中
5.hidden 隐藏域,该组件不会显示在页面上,但是其数据可以提交到服务端,这个很有用
6.button 自定义按钮,默认没有任何效果,可以通过注册事件加入自定义效果,可使用javascript来控制点击后的动作
7.reset 重置按钮,将组件填入的内容和操作的效果还原到初始值
8.submit 提交按钮,将组件中填入的内容提交到服务端
9.image 图像,提交按钮比较难看,可以用图像代替它,功能和提交按
钮一样,另外它还会把鼠标点击的坐标提交给服务器
10.file 浏览文件,可选择文件,用于文件上传。如果使用了这种type,那么,它所在的form的enctype 属性值必须为 ”multipart/form-data”
还有几个不属于type的属性,但是也可用在<form>中
11.下拉列表:
<select size=”3” multiple=”multiple”> 表示显示三个选项,可多选
<option selected=”selected”>列表项</option> 表示默认选中
</select>
12.文本区域:<textarea></textarea> cols=”列数” rows=”行数”
13.标签:<labelfor="male">Male</label>
<input type="radio"name="sex" id="male"/>
点击这个label就相当于点击了male点选框,提高用户体验
14.包含框:可以将一部分内容框起来,显得比较规整
<fieldset>
<legend>健康信息:</legend> 包含框的标题
<label>身高:<inputtype="text" /></label>
<label>体重:<inputtype="text" /></label>
</fieldset>
每一个表单组件(输入项),都应该有name 属性和 value 属性
<form>标签常用属性:
action:数据提交的目的地
method:数据提交方式 get 和 post,默认是get
onsubmit:点提交按钮后执行的动作,可使用javascript函数
get 和 post的区别:get 会将提交的数据显示在地址栏上,跟在url后面,在http协议请求行中,数据长度有限制;post 不会显示在地址栏,在http请求实体内容中,数据大小无限制。另外,对于中文,get需要先用ISO8859-1重新编码,再用gbk编码
注意:表单组件并不是必须要在<form></form>中
8.框架
<framesetrows="28%,*" frameborder=0 >
<framesrc="练习7top.html" noresizescrolling="no"/>
<framesetcols="20%,*">
<framesrc="练习7left.html" noresize />
<!--frame中有一个属性 name,可以为frame换个名字-->
<framesrc="练习7right1.html" name="right"/>
</frameset>
</framefet>
注意:frameset不能放在 body 中
frameset 的几个属性:
rows:分为几行(数字 或百分比或 *)
cols:分为几列(同上)
frame 的几个属性:
src:目标文件URL
noresize=”noresize”:是否可以改变大小
scrolling:是否有滚动条 yes,no,auto
frameborder:是否有边框
name 名字:(可作为超链接 target 的目标值)
marginheight:定义框架的上方和下方的边距。
marginwidth:定义框架的左侧和右侧的边距。
9.内联框架:<iframe>,就是页面中间的一个框
src:框架内容的URL
width:宽度
height:高度
scrolling: 是否有滚动条 yes,no,auto
CSS:
优点: 将网页中的样式提取出来,完全由css控制
增强了样式的复用性,减少流量,提高网页加载速度
CSS与HTML结合的四种方式
1.行内式:每一个html标签都有一个 style 属性,可在其中直接写css代码。如:<h1 style=”color:red; background:blue”>This ishead</h1>
2.内嵌式:页面中有多个标签使用同样的样式可使用
<styletype=text/css>
css代码
</style>
3.导入式:多个页面使用同一样式,可将css代码单独封装成一个css文件,然后在每一个页面中写上:
<style>
@importurl("1.css");
</style>
4.链接式:同导入式,但是在html的<head></head>标签中引入
<link rel="stylesheet" type=”text/css”href="1.css" />
区别:1.导入式是由CSS规范实现的,而链接式是由HTML规范实现的2.链接式在html页面加载前就会读取css文件,而导入式在html页面加载完成后才读取css文件
技巧:为了提高样式的复用性和可扩展性,可以将多个标签样式进行单独定义并封装成多个css文件,在一个css文件中用import导入其他css,在hmtl页面中用link导入
如:已有 p.css,div.css,
则 在1.css中
@import url("p.css");
@import url("div.css");
然后再html中:
<link rel="stylesheet"href="1.css" />
----------------------------------------------------------------------------
选择器:样式作用的范围
基本选择器:
1.标记选择器:以html中的每一个标签名来命名
2.类选择器:.选择器名 对应html标签中的class属性,可以对不同标签设定,只能被css使用,
一个元素可同时使用多个类选择器,中间以空格隔开,class=”a b c”,没有冲突的话,则都会生效,有冲突的话,以第一个出现的为准
3.ID选择器:#选择器名 对应html标签中的id属性,必须唯一,不可同时使用多个,ID选择器不仅可以给css使用,还可被js使用
优先级:行内样式 > ID选择器 > 类选择器 > 标记选择器
复合选择器:
1.交集选择器:对标记选择器再进行样式设定,如:
div.special{……}
div#special{……}
只有对既满足div,又满足class=”special”或id=”special”的元素才会生效
2.并集选择器:(组合选择器)对多个选择器同时进行样式设定,每个选择器既可为基本选择器,也可为复合选择器,中间以逗号隔开
div,h1.first,p.special,...{……}
3.后代选择器:(父子选择器/关联选择器)中间以空格隔开
div h1.first span.special{……}
意思为:在div的h1中,class属性为first的元素,还要满足在h1的sapn中,并且class属性为special的元素才会生效(好麻烦……)
4.伪元素选择器:元素的某种状态
a:link{} 被点击前
a:visited{} 被点击后
a:hover{} 鼠标悬停时
a:active{} 鼠标按下时
p:first-letter{} 首字母
p:first-line{} 首行
css滤镜:通过代码丰富样式,不说了
CSS的继承特性:
一个HTML文档可抽象为一个DOM树
当使用CSS对某个元素进行设置以后,这个设置不仅会对该元素产生作用,还会对他的所有子元素(孙子元素)起作用,除非某个子元素重新做了设置
盒子模型:
每一个html元素都可看成一个盒子,这个盒子由内容(content),边框(border),内边距(padding),和外边距(margin)组成
content拥有width和height属性,
其他三个都可分别设置其top,right,bottom,left的属性
整个盒子的大小就是content的width,height加上border,padding和margin宽度和高度
属性的简写形式:
如果给出2个属性值,前者表示上下,后者表示左右
如:padding:20px 10px;表示上下内边距20px,左右内边距10px
如果给出3个属性值,前者表示上,中间表示左右,后者表示下
如:border-color:red blue green;
如果给出4个属性值,则依次是上,右,下,左,即顺时针
如:border-style:dotted dashed solid double;
另外还需注意:
若对一个属性值做了多次设置,则按最后一次的设置为准
可对border(当然还有其他属性)同时设置多个属性值,如
border:1px gray solid;表示边框为1px,灰色,实线;
属性值出现的顺序需查阅相关的文档
body默认有一定的外边距(没有内边距),所以做网页时要先设置成0;
盒子之间的关系
标准流:所谓标准流是指,在不引入CSS的情况下,HTML文档中各个元素的默认排列方式
块级元素(block):以一个“块”的形式表现出来,左右延伸,独自占满一行,或者说一块区域,元素之间上下排列。如:div,p,ul,li 等等
行内元素(inline):本身不占有区域,依附于块级元素,元素之间左右排列,不会自动换行,如:sapn,a,img 等等
标准流就是默认的块级元素和行内元素的排列方式
盒子在标准流中的定位原则:
1. 行内元素之间的水平margin是二者相加的结果
2. 块级元素之间的数值margin,有“塌陷“现象”,即二者之间的margin以较大者为准,较小的“塌陷”在较大的margin中
3. 嵌套的盒子之间的关系:如果外层盒子没有明确设定高度,则其高度为正好容纳下内层盒子以及自己的padding和内层盒子的margin;如果外层盒子明确设定了高度,则当内层盒子过大时,外层盒子不会自动伸展,依然按照设定的高度显示,内层盒子会从外层盒子里“撑”出来。ie6不注意:IE6不支持这一特性
4. margin可以为负值,此时,设为负数的盒子会向相反的方向移动,设置出现“覆盖”和“分离”的现象
浮动与定位:
非标准流:即浮动和定位,盒子不在按照标准流中的排列方式
浮动:float
float属性的取值可以是left或right,表示向左或向右“浮动”
注意,一旦某个元素设置了浮动效果,它就脱离了标准流,意思就是说:它不再属于标准流的定位其他的盒子就会当做它不存在,后面紧接着它的盒子会占据它的位置
设置了浮动的盒子(box1)不会再向两端自动扩展,大小为正好容纳里面的内容,而紧随其后的盒子(box2)会占据它原先的位置,但是:box2中的content(只是content)会受box1影响,会围绕着box1来排列
如果box1和box2都设置了浮动,二者之间的左右margin会叠加,他们之后的box3会占据他们的原先的位置,box3的content也会受他们的影响
当浏览器窗口很小,小到不足以容纳几个浮动的盒子时,最后面的盒子就会被挤到下一行
清除浮动:clear
clear属性的取值可为left,light或both,表示清楚此元素左,右或两边的浮动盒子对他content的影响
容器盒子的高度:若一个盒子里套了许多其他盒子,我们可称之为容器盒子,比如网页中用一个div套住所有的网页元素。如果容器盒子里的所有盒子都设置了float,那么这个容器盒子的高度就会变成0,这是因为,它里面的所有盒子都脱离了标准流,就相当于它里面什么都没有,所以他的高度就是0。
解决的方法是,在容器盒子里再增加一个div,样式设置为 .father .clear{
margin:0; padding:0;border:0; clear:both;}
其中 .father是为其指定父div
定位:position
position属性的取值可为static,relative,absolute或fixed
static:默认定位,即标准流定位方式
relative:相对定位,相对于盒子的标准流位置,进行偏移,使用相对定位的盒子,并没有脱离标准流,后面的盒子仍以标准流对待他。
相对定位的盒子对其他盒子(包括父级,子级,兄弟级盒子)没有任何影响,以为他依然是标准流,他的定位是在标准流的基准上进行的
例如以下代码:
#block1{
position:relative; bottom:30px; right:20px;
}
表示block1的新位置的下边框,距离标准流所在的位置的下边框为30px
新位置的右边框,距离标准流所在位置的右边框为20px
也就是说在标准流的基础上向上偏移30px,向左偏移20px(这点要注意)
absolute:绝对定位,以此盒子的“包含框”为基准进行偏移,使用绝对定位的盒子从标准流中脱离,后面的盒子会当他不存在
包含框:指的是绝对定位偏移的基准盒子,确定包含框的方法是:
以离此元素“最近”的一个“已经定位”的“祖先元素” 为基准,如果没有,则以浏览器窗口为基准
已经定位:指position属性被设置,且值是除static外的任意一个
祖先元素:指在DOM中的父节点以及祖先节点
最近:父节点比祖父节点近,祖父节点比曾祖父节点近,以此类推
例如以下代码:
#block2{position:absolute;top:30px;right:20px}
#father{padding:5px;position:relative;}
如果在DOM中,#father元素是#block2元素的最近祖先节点,那么#father就可称为#block2的包含框,
以上代码表示:#block2的所在位置的上边框距离#father上边框的距离为30px,右边框距离#father右边框的距离为20px,即在#father的基础上向下偏移30px,向左偏移20px
另外要注意:绝对定位的元素脱离了标准流,对于他的兄弟盒子来说,他就好像不存在一样,如果设置了绝对定位,但是没有设置其偏移值,那么它仍在原来的位置,但是已经脱离了标准流
fixed:固定定位,与绝对定位类似,但是以浏览器窗口为基准进行定位
z-index:用于调整重叠块的上下位置,取值为正,负,0
display属性:
display属性的取值可为inline,block或none,它可以强制改变盒子是行内元素还是块级元素,还可以设置为none,将盒子隐藏
javascript中的基础知识:
是 Netscape 公司的发明编程语言,是基于对象和事件的。
和 java 不同之处:
1.java 是 Sun 公司的(现在是Oracle)
2.java 是面向对象,js 是基于对象
3.java 由 JVM 执行,js 由浏览器解释执行
4.java 是强类型,js 是弱类型
5.java 严谨,js 不严谨
6.js 运行在客户端
js 代码调用方法:
1.在 html 文件中任何位置, <script type="text/javascript">js代码</script>
这种方式,网页会按照顺序从上往下执行js代码
2.在html <head></head> 标签中引入,<script type="text/javascript"src="/js/xxx.js"></script>,这种方式,网页会先执行js代码
js基本语法
1.变量
通过 var 来定义变量,该变量可以赋予不同类型的值
var x = 3;
x = "abc";
特殊的常量:undefined 未定义
2.语句
if...else, switch...case, while,do...while, for
js 中,非0为true,0为false,非 null 为true,null 为false
使用逻辑运算符进行布尔表达式连接的时候,要用短路与和短路或 && ||
js 中特有的语句:
with(对象) {} : 可以确定对象的使用范围,在此范围内,可以直接使用该对象的属性和方法,而不需要使用 对象. 的形式调用,简化了对象的操作
for(变量 in 对象): 可以遍历对象的属性和行为
3.数组
js 中的数组长度是可变的,相当于java 中的集合
数组中存放的元素类型可以不同。定义方式如下:
var arr1 = [3,"abc",true]; 注意是中括号,不是大括号
var arr2 = new Array(); 创建一个Array对象
var arr3 = [[1,2,3],[4,5]]; 创建二维数组
操作方式和 java 一样,都是通过 for循环遍历,也是用了指针思想
4.函数
1.一般函数
function 函数名(参数列表...) {
执行语句;
return 返回值;
}
两个明确:
1.明确该功能运行后的返回结果
2.该功能在运行过程中是否有位置内容参与运算
2.动态函数(不常用)
使用 Function 对象定义
varshow = new Function("x", "y", "return x+y;");
特点:可以将 参数列表,方法体 作为参数传递
3.匿名函数:一般函数的简化形式 function(){}
匿名函数通常可以用于事件的响应和处理,如:
window.οnlοad= function() {alert("onload over");};
使用函数时需要注意的问题:
functionshow() {
return"show run";
}
varmethod1 = show();
varmehtod2 = show;
两个语句都是对的,
第一个表示 将 show() 函数运行的结果返回给method1;
第二个表示 将 show 指向的对象的地址赋给method2,method2 也指向了此函数之后就可以使用method2() 来调用此函数
----------------------------------------------------------------------------
js 可以通过对象的形式来封装数据
//首先对对象进行描述,需要使用函数来完成
functionPerson(name, age) {
this.name= name; //相当于构造方法
this.age= age;
}
var p = newPerson("lisi", 20);
alert(p[“name”] +"..." + p.age); //注意第一种调用形式
//还可以给对象添加方法
p.show() {
alert("pshow run");
}
----------------------------------------------------------------------
js中已定义好的一些对象
String,
var s1 = "HelloWorld" //习惯性使用方法
var s2 = new String("HelloWorld");
alert(s1); alert(s2);
//取得第四个位置的字符
alert(s1.charAt(4));
//取得r的位置
alert(s1.indexOf("r"));
//取得最后一个l的位置
alert(s1.lastIndexOf("l"));
//分隔如下字符串
var s3 = "a,b,c,d,e";
var s4 = s3.split(",");
for (var i=0; i<s4.length; i++) {
alert(s4[i]);
}
//截取rld字符串
alert(s1.substring(7, s1.length));
Math,
//0-1之间的随机小数
alert(Math.random());
//四舍五入
alert(Math.round(Math.random()*10));
Date,
var date = new Date();
alert(date.toLocaleString());
Array,
var arr = ['a','b','c'];
for(var i=0; i<arr.length; i++) {
alert(arr[i]);
}
var arr2 = [[1,2],[3,4,5]];
for(var i=0; i<arr2.length; i++) {
for(var j=0; j<arr2[i].length;j++) {
document.write(arr2[i][j] +", ");
}
document.write("<br/>");
}
//动态添加内容
var arr3 = new Array(10);
for(var i=0; i<arr3.length; i++) {
arr3[i] = i;
}
for(var i=0; i<arr3.length; i++) {
document.write(arr3[i] + ",");
}
//倒序
document.write("<br/>");
arr3.reverse();
for(var i=0; i<arr3.length; i++) {
document.write(arr3[i] + ",");
}
//排序
document.write("<br/>");
arr3.sort();
for(var i=0; i<arr3.length; i++) {
document.write(arr3[i] + ",");
}
//元素以 # 号隔开输出
document.write("<br/>");
document.write(arr3.join("#"));
这些对象都有一个属性 prototype (对象原型)
prototype 可以获取指定对象的引用
可以通过该引用给已有对象赋予新的功能
如:
functiongetMax() {
var max= 0;
for(vari=0; i<this.length; i++) {
if(this[i]> this[max]) {
max= i;
}
returnthis[max];
}
}
vararr1 = [3,2,6,1];
arr1.sort(); //直接调用 Array 对象的 sort 方法
//如果想像调用普通Array对象的方法一样调用getMax方法
//就需要利用 prototype,将getMax方法添加到Array对象中
Array.prototype.getMax= getMax;
vararr2= [5,8,6,2];
arr2.getMax();
再如:
varstr1 = "abcdef";
str1.bold(); //直接调用 String的 bole 方法(加粗)
//给String对象添加一个新方法,加颜色
functionaddColor(color) {
return"<font color=\""+ color + "\">" + this +"</font>";
}
String.prototype.addColor =addColor;
var str2 = "asdflk";
str2.addColor("red");
//在给String对象定义一个新方法,去掉前后的空格
function trim() {
varstart, end;
start = 0;
end = this.length-1;
while(start <= end&& this.charAt(start) == " ")
start++;
while(starr <= end&& this.charAt(end) == " ")
end--;
returnthis.subString(start, end-1);
}
String.prototype.trim= trim;
vars = " ada f ";
alert(s.trim()); //ada f
-------------------------------------------------------------------------
常见的全局函数(Global对象中的函数,不需对象)
parseInt("number",[radix]); //将数字格式的字符串转为数字,[radix]为可选参数,表示进制,默认是十进制
parseInt("110",2); // 6,把110以二进制转成数字,就是6
var x = 6;
alert(x.toString(2)); // 110 将数字转成字符串,参数是进制,默认是十进制
DOM:Document Object Model 文档对象模型
将一些标记型文档及文档内容封装成对象
这样可以定义对象的属性和行为,方便操作文档,包括文档本身,文档中的元素和元素的属性
DOM三层模型
DOM1:html
DOM2/ DOM3:xml
html,xhtml,xml 都是标记型文档
DHTML,DynamicHTML 动态HTML,多项技术的综合
html:负责将数据用标签封装
css:负责标签的样式
dom:负责将标签和标签中的数据封装成对象
javascript :负责通过程序来操作这些对象
-----------------------------------------------------------------
HTML文档中的树形结构:
window:
|--navigator
|--location
|--...
document:
html
|--head
|--title
|--meta
|--link
|--style
|---...
|--body
|--div
|--span
|--table
|--tbody
|--tr
|--th
|--td
|--form
|--input
|--a
|--...
由于标记型文档具有这种树形结构,我么可以称加载到内存中的标记型文档是一棵dom树!
这些标签以及标签中的数据都是这棵树上的节点
当标记型文档加载到内存中时,内存中就有了一棵dom树
当标记型文档很大时,dom解析很消耗内存,这时应使用sax解析
节点类型:
标签节点:类型 1
属性节点:类型 2
文本节点:类型 3
注释节点:类型 8
document:类型 9
每个节点都有以下属性:nodeName, nodeType, nodeValue,可通过节点对象的getNodeName(), getNodeType(), getNodeValue() 这些方法获得
节点关系:
父节点:只有一个
子节点:一个或多个
兄弟节点:
上一个兄弟节点:
下一个兄弟节点:
1.获取节点可以通过ID来获取;
var obj =document.getElementById("id") 返回指定id节点
2.也可以通过节点的层次关系来完成:这些是节点的方法
obj.parentNode; 得到父节点
obj.childNodes; 得到子节点数组
obj.previousSibling; 得到上一个兄弟节点
obj.nextSibling; 得到下一个兄弟节点
注意:1》在获取节点时,标签之间的空行,空格可能会被当做一个空白的文本节点。2》table 节点中默认有一个tbody 子节点,tr,td 又是 tbody 的子节点。3》文本标签(如<a>,<p>)中的文本是其子节点,不是其value
3.还可以通过 document 对象来完成,这些都是document对象的方法
getElementByID("id") 通过标签的 id 属性,返回一个对象数组
getElementsByName("name") 通过标签的 name 属性(name属性不唯
一),返回一个对象数组
getElementsByTagName("tagName") 通过标签名,返回一个对象数组
document.all 返回文档中的所有标签节点组成的数组
以上方法通过节点对象也可以调用
DOM事件:
1. 标准静态事件 onclick, onkeypress, onblur等等。可用于javascript函数
如:<inputtype=”button” οnclick=”test()” value=”button1”/>
表示当点击此按钮时,就会调用test() 函数
2. 动态设置事件
如:<inputtype=”button” οnclick=”document.ondblick=test” value=”button2” />
注意没有括号。表示当点击按钮时,document对象的ondbclick事件就会由test()函数去响应,就是说如果document对象再发生ondbclick事件是,就会调用test()函数,
几个常用对象:
window对象:一个打开的浏览器窗口
常用的alert() 方法就是window对象的方法,下面演示其常用方法
<head>
<title>无标题文档</title>
<script type="text/javascript">
function windemo() {
//页面前进和后退
//window.history.back(); window.history.go(-1); //后退
//window.history.forward(); window.history.go(2); //前进
//window.open("http://www.baidu.com")
//通过window中的 navigator对象 获取浏览器名称和版本
var name =window.navigator.appName;
var version =window.navigator.appVersion;
//alert(name +"---" + version);
//通过window中的 location对象 获取当前页面的url
var url = window.location.href;
//alert(url);
//设置当前页面的url,浏览器会自动跳转
//window.location.href = "www.baidu.com";
//弹出对话框,有确定和取消按钮,返回布尔值
//var back = confirm("点点点");
//alert(back);
//窗口偏移,相对偏移,谷歌浏览器和ie9不支持
//window.moveBy(100,100);
//偏移到
//window.moveTo(200,200);
//关闭窗口
//window.close();
}
function windemo2() {
//打开一个新窗口,各种特征
//window.open("ad.html","_blank","width=400,height=400, location=no, menubar=no, menubar=no, resizable=no, scrollbars=no");
//每个一段时间,就会执行代码,注意引号!!!
//var intervalid = window.setInterval("alert('haha')",3000); //有返回值
//clearInterval(intervalid); //清除定时器
}
//onload事件,每一个元素都有onload事件,普通元素在此元素自己加载完成后触发,body元素在整个页面加载完后触发
window.onload = function() {
//alert("页面加载完成时");
}
//谷歌浏览器不支持
window.onunload = function() {
//window.open("","_blank","");
}
//谷歌浏览器不支持
window.onbeforeunload =function() {
alert("页面关闭前");
}
Event对象:也是非常的重要啊!!!
//event对象的属性,获取键盘事件 谷歌,ie都支持
function keydemo() {
var keycode = event.keyCode;
//alert(keycode);
if(!(event.keyCode >=47 && event.keyCode <= 57)) {
alert("不允许输入非法值");
event.returnValue = false; //取消事件,可以用在任何事件上
}
}
//event的另一个非常重要的属性,获取事件源
function keydemo2() {
var node = event.srcElement;
alert(node.name);
}
</script>
</head>
<body>
<input type="button"οnclick="windemo()" value="演示window对象"/>
<inputtype="button" οnclick="windemo2()" value="演示window方法"/><br/>
<input type="text"οnkeypress="keydemo()"/>
<input type="text"name="keydemo2" οnkeypress="keydemo2()"/>
</body>
</html>
动态创建元素:
document.write() 只能在页面加载时向文档中写入HTML代码,页面加载完成后就不能再使用了。如果希望在页面中动态创建具有指定标签的DOM元素,就需要使用document.createElement()方法,然后调用某个元素的appendChild()方法。如:每次点击“创建按钮”,就会动态创建一个按钮
<head>
<title>动态创建按钮</title>
<scripttype="text/javascript">
functioncreateButton() {
var myinput =document.createElement("input");
myinput.type = "button";
myinput.value = "动态创建的按钮";
var mydiv =document.getElementById("mydiv");
mydiv.appendChild(myinput);
}
</script>
</head>
<body>
<divid="mydiv"></div>
<inputtype="button" οnclick="createButton()" value="创建按钮"/>
</body>
innerText和innerHTML:非常重要的两个属性,几乎每个内容元素(a,div,span等等)都有
innerText:元素中的文本内容(FireFox不支持)
innerHTML:元素中的HTML内容
<head>
<title>innerHtml-innerText</title>
</head>
<body>
<ahref="javascript:void(0)" id="link"><fontcolor="#FF0000">gao</font>yuan</a>
<inputtype="button" value="innerHTML"οnclick="innerhtml()" />
<inputtype="button" value="innerText"οnclick="innertext()" />
<inputtype="button" value="修改innerHTML"οnclick="changehtml()" />
<inputtype="button" value="修改innerText"οnclick="changetext()" />
</body>
<scripttype="text/javascript">
/*注意页面的加载顺序!!!!!*/
var a =document.getElementById("link");
//alert("a.nodeName");
functioninnerhtml() {
//var a =document.getElementsByTagName("a")[0];
//var a = document.getElementById("link");
alert(a.innerHTML);
}
functioninnertext() {
//var a =document.getElementById("link");
alert(a.innerText);
}
functionchangehtml() {
//var a =document.getElementById("link");
/*注意!!!!一定要注意单双引号!!!!!*/
a.innerHTML = "gao<font color='#FF0000'>yuan</font>";
}
functionchangetext() {
//var a =document.getElementById("link");
a.innerText = "gaoyuan";
}
</script>
</html>
创建表格专用方法:
var tabnode = doc.createElement("table");
for(var i=0; i<5; i++) {
//创建tr并加入到table中,好用的方法
var trnode =tabnode.insertRow(-1);
for(var j=0; j<4; j++) {
var tdnode =trnode.insertCell();
tdnode.innerHTML = "单元格";
}
}
ByTag("div")[0].appendChild(tabnode);
<body>
<inputtype="button" value="添加一行"οnclick="createTable()" />
<inputtype="button" value="添加一行"οnclick="createTable()" />
<div></div>
注意:
1.动态产生的元素,查看源文件是看不到的,需要用专门的工具
2.动态产生元素时,一定要注意层次结构,比如表格:table-tr-td
3.innerHTML一定要注意单双引号的问题
4.使用javascript全局变量时,一定要注意页面的加载顺序,而且全局变量能不用就不用。
事件冒泡:如果元素A嵌套在元素B中,如果A的onclick事件触发,则B的onclick也会触发,触发的顺序是由内而外。
事件中的this:表示当前触发事件的元素,可直接在事件触发的代码中使用,如:(οnclick=”alert(this.value)”),也可作为javascript函数的参数传入。this和event.srcElement不太一样,注意体会
修改元素的样式:通过javascript和DOM可以改变网页中元素的CSS样式,先得到某元素,再通过此元素的className属性来改变样式,也可直接改变其CSS属性(如:body.bgcolor = “black”,或body.style.backgroundColor = “#FFFFFF”)。
注意:DOM中的属性名和CSS中的属性名是不同的,具体参看文档
body元素事件响应的范围:在body中添加onclick,onmousemove等事件,如果body中没有放满元素,则在body中最后一个元素一下是监听不到这些事件的,如果需要再页面中任何位置都能监听到事件,则需要再javascript中通过document指定