黑马程序员_毕向东_JavaScript视频教程--学习笔记
2013-07-16 12:53
731 查看
---------------------- android培训、java培训、期待与您交流！
----------------------
第一节:
1. Html基本内容
1.1 Html是超文本标记语言的简写,是最基础的网页语言
1.2 Html是通过标签来定义的语言,代码都是由标签所组成.
1.3 Html代码不区分大小写
1.4 Html代码由<html>开始,由</html>结束.在这之间由头部分<head></head>和体部分<body></body>两部份组成
1.5 头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载.
1.6 体部分是真正存放页面数据的地方
2.
2.1 多数标签都有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容,这样的标签一
般都是在标签内部自动结束.比如:
<br /> 换行标签
<img src="" /> 图片标签
<input type="" />组件标签
<hr />画一条直线
3. 想要对被标签修饰的内容进行更丰富的操作,就用到了标签的属性,通过修改标签属性的值,增加了更多的效果选择.
4. 属性与属性值之间用=号连接,属性值一般用""括在内部,也可以不写,但是通用的规范是用".如果在属性值中有'出
现,则一定要用""来括.
5. 标签的格式:
<标签名 属性名=属性值> 数据内容 </标签名>
<标签名 属性名 />
6. Html代码操作思想:
页面中有很多数据,由于要对数据进行样式的加载或者描述,这时候就需要用标签把这些数据封装在一起,标签这时
候就像容器一样,标签中的属性,就是可以用来改变标签内数据的样式或者显示效果的.
7. 字体
7.1 字体标签: <font>
<font>标签中的color属性,可以用三个十六进制数来表示.比如0xff0000-->表示红色 RGB
7.2 标题标签
<h1><h2><h3>...<h6>
(感觉就是显示加黑加粗的字体...)
7.3 转义字符
比如要在网页上显示'<',就要使用 < 因为'<'是html语言的标签开始符号,因此不能在页面上显示
< ==> <
> ==> >
==> 空格
& ==> &
© ==> ©
® ==> ®
" ==> "
™ ==>
8. Dreamweaver Cs3工具介绍
第二节:
//练习 6:37
1.列表
1.1 列表标签: <dl>: define list
确定好<dl>后,在内部有
<dt></dt>
<dd></dd>//带缩进
1.2 列表中,项目符号对应的标签
<ol> 数字标签 a A 1 i I
<ul> 符号标签 空心圆、实心圆、实心方框之类的
<li> 具体项目内容标签,此标签只在<ol><ul>中有效
通过type修改标签中的现实标签的具体现实方式
<ol type = "i" start="3"></ol> 从iii开始显示
1.3 注释方式
<!--- 注释的内容 --->
1.4 练习
<!---
1. 游戏名称
a. xxx
b. xxx
b. 游戏内容
1. xxx
2. xxx
--->
2. <hr coloer="" size="" /> 画一条直线
3. 图片标签 <img />
3.1 <img src="../Day23/1.jpg" alt="图片说明文字" heigth="33" weight="33" border="10"/>
3.2 图像地图
在Dreamweaver中切换到"设计视图"进行设计
比如在地图上,点击某个省,就会进入到那个省对应的界面,而这个省是地图中的一部分.
4. 表格标签:<table>
表格、行、单元格(没有列)
<table></table>表示表格..
<tr></tr>表示行
<td></td>表示单元格
<th></th>表头标签 就是td设置完 居中属性,再对内容进行加粗后的效果
<caption></caption> 表格标题 会随着表格进行移动的标题
<td></td>和<th></th> 有个colspan="n",可以合并一行中的列
rowspan="n",可以合并一列中的两行
<tbody></tbody>分体标签 当从服务器中读取完整个<tbody></tbody>中的内容后,浏览器就在显示器上显示内容.
每个<table></table>中,默认都有一个<tbody></tbody>,也就是说,写一个<table></table>时,默认都会如下的,不管你写不写<tbody>
<table>
<tbody>
</tbody>
</table>
每个表格<table>可以有一个<THEAD> 表头、一个<TFOOT> 表尾和多个<TBODY> 表体
border属性: 表格的边框长度
cellpadding属性:单元格中的内容和边框的距离...内边距
cellspacing属性:单元格之间的距离
width="70%"浏览器大小的70%
表格用于格式化数据
5. 超链接 <a></a>
<a href="http://www.sina.com.cn" target="_blank">新浪网站</a>//在新建窗口打开连接
当在浏览器中,点击"新浪网站"链接后,浏览器的执行流程如下:
首先获取href中的链接的协议信息:http
因为是http协议,所以开始找本地的hosts文件
在host协议中,如果没有www.sina.com.cn对应的ip地址,
就回去DNS服务器,寻找对应的ip地址
从dns服务器返回ip地址后,再和新浪的服务器开始通信.
<a href="mailto:abc@sohu.com?subject=haha&cc=xxx@163.com">联系我们</a>
当在浏览器中,点击"联系我们"后,浏览器发现是mailto协议
因此会调用邮件管理程序,创建一封邮件
收件人是: abc@sohu.com
抄送至: xxx@163.com
主题是: haha
<a href="THUNDER://aldlfaklsdfkl">唐山大地震下载地址</a>
点击后会启动迅雷,然后下载对应连接中的内容.
<a href="http://www.sina.com.cn"><img src="xxx.jpg /></a>//带有超级连接的图片超级链接
有一个常见问题列表,当点击一个问题时,当前页面下滑到指定的内容.当前页面并没有刷新或者跳转.
<a name="top">顶部</a>//定义标记,专业一点叫"锚"
<a href="http://www.sina.com.cn">新浪网站</a>
.
.
.
<a href="#top">回到顶部</a>//注意#的标识符
第三节:
//练习
1. 表单标签<form>
1.1 表单标签是最常用的标签,用于与服务器端的交互
<input>:输入标签
type=:
text 文本框
password 密码框
//radio要把多个选项全部列在一个组中,通过name=""属性来标示所属的组..
//且同一个组中的radio,只能有一个被选中,a被选中,bcd就不能被选
radio 单选框
checkbox 复选框
file 上传文件
//hidden不是很了解,毕老师说hidden的value,是通过页面计算出来的
//<input type="hidden" name="id" value="<%=new Date" />
hidden 隐藏属性
button 按钮
image//我没记住的 这会在页面显示一个图片,点击这个图片,和submit是一样的功能
submit 提交按钮//一个按钮,复位输入框中内容的同时,向服务器发送数据
reset 复位按钮
输入框中,有name属性的内容,会被发送到服务端,服务端也可以通过这个name来获得数据
保单中最好都加入name 和 value
1.2 下拉菜单:
<select name="country" multiple="multiple(这个可以实现下拉框中列出多行的值)" size="2"(只列出两个)>
<option>中国</option>
</select>
1.3 <textarea cols="" rows=""></textarea> 文本区域
1.4 练习: 17:52 写一个表单
finished..见FromDemo.html
1.5 Get提交和Post提交的区别
get 会将提交的内容显示在浏览器地址栏
post 不会将提交的内容显示在浏览器地址栏
get 提交的数据的大小会受地址栏的限制
post 提交的数据不会受地址栏限制
get 提交敏感数据时不安全
post 提交敏感数据时更安全
get 提交的数据会封装在请求行,也就是http消息头之前//出现编写时error,自己没能记不住
post 提交的数据封装在数据体中,也就是http消息头之后
对服务端而言:
表单提交尽量用post,因为涉及编码问题
对于post提交的中文,在服务端可以直接使用setCharacterEncoding("gbk")就可以解决
对于get提交的中文,在tomcat服务端就只能使用ISO8859-1将数据编码一次,再通过制定的编码
表,如GBK解码
使用表单的组件,不一定要定义form标签..比如button按钮,点击按钮后弹出一个对话框,并不需
要和服务器通信..<form>主要是有一个action动作,可以将数据发送到服务器.
1.6 用超链接,也可以和服务器通信
<a href="http://192.168.1.254:10009?user=zs&psw=123&repsw=1234&sex=nan&country=jp">提交数据</a>
直接在浏览器输入:http://192.168.1.100:10000?user=zs&psw=123&repsw=1234&sex=nan&country=jp,也可以
因此,既然用户可以跳过客户端完成和服务器的通信,所以,在服务端和客户端两端,都要对用户输入
的信息进行校验...否则,假设用户自己使用超链接的方式往服务器发送数据,服务器又不进行判断,
则数据库里会出现异常的数据...
客户端的校验是为了提高用户体验.
第四节:
1. Label标签
用于给各个元素定义快捷键
for属性:for="标签的ID"
accesskey属性:accesskey="快捷键的名称:如U--u键"//按下alt+u会跳到当前标签
2. <pre>标签
让所有的数据原样的表现在页面上
3. <p>标签
让数据按照段落的形式表现在页面上,会在尾巴添加一个空行
4. <b>加粗 <strong>加粗
<i>斜体
<u>下划线
<sub>2</sub>下标2,二氧化碳的2...
<sup>2</sup>上标2,x平方的2
5. <marquee>标签
direction属性:left,从右往左飞
6. 头标签:头标签都放在<head></head>之间
<title>标签 <base>标签 <meta>标签 <link>标签
<base href="c:\abc\" />//添加了这句后,如果在c:\abc\没有请求的页面时,就会报错
<meta name="keyword" content="关键字" />//以前的百度和谷歌是收录meta里,名为keyword的content内容
<meta http-equiv="refresh" content="3,url=http://sina.com.cn" />//加入该句的<head>所在页面,会在
该页出现3秒后跳转到新浪页面
<link rel="stylesheet" href="1.css" media="print" /> //将1.css中的内容效果显示在打印机上
<link rel="stylesheet" href="1.css" media="print, screen" /> //将1.css中的内容效果显示在打印机和屏幕上
7. xhtml xml
<html xmlns="http://www.w3.org/1999/xhtml"> xmlns:ns代表namespace
这样如果自定义了<html>标签,如果没有添加xml命名空间的话,就会造成html混乱
如果添加了xml命名空间后,网页就能区分到底是那个<html>
<table xmlns="http://www.huyouni.com/mytable">
html的标签是固定的,而xml可以对标签进行自定义,xml只对数据进行描述
第五节: JavaScript视频教程_Html回顾
第六节: JavaScript视频教程_Html回顾02
1. <a href="http://www.sina.com.cn" target="_blank" title="这跟新闻奖的是一段非常长的文章讲述了非常长的单词的由来并可以通过鼠标悬浮在链接上不点击的方式得以显示."
第七节: JavaScript视频教程_CSS回顾
1. CSS层叠样式表
将网页中的样式分离出来,完全由CSS来控制
增强样式的复用性及可扩展性.
格式:
<style type="text/css">
选择器
{
属性名:属性值;
属性名:属性值;
}
</style>
2. CSS和HTML代码相结合的四种方式
2.1 每一个HTML标签都有一个style属性
2.2 当页面有多个标签具有相同样式时,可以进行复用
<style>
css代码
</sytle>
2.3 当有多个页面中的标签的样式相同时,还可以将标签样式单独封装成一个.css文件
通过在每个页面中定义
<style>
@import url(1.css) ;
</style>
2.4 通过html中head标签中link标签链接一个css文件
<link rel="stylesheet" href="1.css" media="print, screen" />
第三种方式和第四种方式的区别:
第三种用的是css代码,第四种用的是html代码
技巧:
为了提高相同样式的复用性以及可扩展性,可以将多个标签样式进行单独定义,并封装成css文件
p.css div.css...
在一个css文件中使用css的import将多个标签样式文件导入
然后在html页面上,使用<link>标签,将这个总的css文件导入
1.css
@import url("p.css") ;
@import url("div.css") ;
<link rel="stylesheet" href="1.css" media="print, screen" />
3. 选择器:其实就是样式要作用的标签容器
当样式分离后,html作用在于用标签封装数据,然后将css加载到指定标签上.
4. 选择器的基本分类
4.1 标签选择器
其实就是HTML语言中的每一个标签名
4.2 类选择器
其实就是每一个标签中的class属性...但是类选择器的表示方式比较特别
使用.a{}来表示
只用来给css所使用,可以对不同标签进行相同样式设定
4.3 ID选择器
其实就是每一个标签的ID属性,但是要保证ID唯一性,用#来标识
ID不仅可以被CSS所使用,还可以被javaScript所使用
5. 选择器的优先级:
ID > CLASS > 标签
扩展选择器:
5.1 关联选择器:
其实就是对标签中的标签进行样式定义. 也就是 "选择器 选择器{}"
比如:DIV中的<b>标签... "DIV选择器 <b>选择器{}"
<style type="">
div b
{
}
.z
{
}
.z b
{
}
</style>
5.2 组合选择器:
对多个组合器进行相同进行相同样式定义..将多个选择器用","隔开的形式
.z,p b //<!对.z选择器,p选择器中的b元素进行限定>
{
}
5.3 伪元素选择器:其实就是元素的一种状态.
a:link: 超链被点击之前
a:visited 超链被点击之后
a:hover 鼠标悬停在超链之上时
a:active 鼠标点击下去时
如果四个状态都定义了,则有一个顺序:
L V H A
p:first-letter
p:first-line
:focus 很遗憾,IE6不支持.但是FF支持
6. CSS滤镜:其实通过一些代码完成丰富了样式
当使用到CSS的更多属性时,还需要查阅CSS的API
现在做网页设计时,使用DIV+CSS
div: 行级区域
span:块级区域
p: 行级区域..P中不要嵌套div
第八节: javaScript
1. JavaScript概述
JavaScript是基于对象和事件的脚本语言(事件驱动)
JavaScript特点:
1.1 安全性(不允许直接访问本地硬盘),它可以做的就是信息的动态交互
1.2 跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)
JavaScript运行在客户端
2. JavaScript与Java的不同
2.1 JS是NetScape公司的铲平,Java是Sun公司的产品
2.2 Js是基于对象的,而Java是面向对象的
2.3 Js只需要被浏览器中的Java引擎就可以解释执行,Java需要先编译成字节码文件,再执行
2.4 Js是弱类型语言,而Java是强类型的..
比如,在Js中,var value ;定义一个value变量,
value=3;//ok
value="abc";//没问题!
也就是说,Js中,一个变量可以存储任意类型的数据。
3. JavaScript与Html的结合方式
要想将JS代码融入到Html中,都是以标签的形式.
3.1 JS代码存在在标签对<script>...</script>中
3.2 使用script标签的src属性,可以引入一个js文件.(方便后期维护,扩展)
例如:
<script type="text/javascript" src="arrayTool.js"></script>
注: 规范中,script标签中必须加入type属性
4. 变量的定义:使用var关键字
var value ;//定义一个变量,名称为value
value=3 ;
value="abc";
value='aaa' ;//ok的
value y ;//此时y的值为undefined
value=3250 ;
value=3250/1000*1000 ;结果为3250
5. JavaScript的语句
if语句:
var x = 3 ;
if (x == 3)
"yes"//输出
else
"no" ;
if (x = 3)
"yes"//输出
if (x = 0)//if的判断条件,如果表达式值为0,则为假
"yes"
else
"no"//输出
if (null)//表达式,值为null,则为假
"yes"
else
"no"//输出
if ("abc")
"yes"//输出
所以一般写成
if (3 == x)
"yes"
如果写成if (3 = x) ;在浏览器页面左下角,就会出现错误提示.
在JavaScript链接表达式或者布尔表达式时,要使用&&或者||
alert(true+1)//输出2
switch语句:
var x = 3 ;
switch(x)
{
case "abc" ;
....
break ;
case "aa" ;
...
break ;
default:
...
break ;
}
JavaScript的switch语句和Java的swtich语句的区别在于:
java只支持四种基本数据.而JavaScript因为没有类型的概念
所以都可以
while和do..while语句以及fors
do..while语句,不论如何,都会执行一次
for (int x = 0 ; x < 3 ; x++)//error....定义变量用var...
{
}
/*
var sum = 0 ;
for (var i = 0 ; i < 10 ; i++)
{
sum += i ;
}
alert(sum) ;//输出55
*/
/*
var sum = "" ;
for (var i = 1 ; i <= 3 ; i++)
{
if (i != 4)
sum += "x = " + x + ", " ;
else
sum += "x = " + x ;
}
alert(sum) ;//输出x = 1, x = 2, x = 3
document.write("<font color = "red" size = "7">" + sum + "</font>") ;
*/
//练习: 写一个99乘法表(擦肩99Chengfabiao.html文件)
6. 数组
var arr = ["abc", 2, true, 6, 8, 1] ;
arr[7] = "over" ;
for (var i = 0 ; i < arr.length ; i++)
{
//Ok,成功输出
//在输出1之后,会输出undefined,然后再输出"over"
//因为在javaScript中,数组就是一个容器,是可变长度的.
//当index扩展到7时,由于6index没有指定数据,所以变成undefined
alert(arr[i]) ;
}
var arrNull = new Array() ;
建议在使用数组时,往数组中存放相同的数据类型.
/*
对数组进行排序,请参见99Chengfabiao.html
*/
定义二维数组:
var arr = [[3, 1, 6], [2, 3, 4]] ;
7.函数
使用function关键字来定义
function show()
{
alert("show run") ;
}
show() ;
定义在函数外部的叫做JavaScript全局变量
function show1(x, y)
{
alert(x + "," + y) ;
}
show1(3, 5) ;//输出3,5
show1(3) ;//输出3,undefined
show(1, 3, 5, 5,2) ;//输出show run
//show函数内部有个arguments数组,接受了所有的参数.
//alert(arguments.length) 输出5
var x = show() ;
alert(x) ;//会把show中的所有源代码都打印
动态函数:
var show = new Function("x", "y", "var sum = 0 ; sum = x + y ; return sum ;")
alert(show(3, 7)) ;输出10
匿名函数:
var show = function()
{
.
.
.
}
//匿名函数往往作为事件驱动的事件处理行为出现
window.onload = function()
{}
函数在使用时要注意的部分:
function show()
{
return "show run" ;
}
var method = show ;
var method = show() ;
两句代码都是正确的
第一句表示的是将show指向的对象的地址值赋给method.那么method也指向了该对象.
也就是method(),也返回"show run" ;
第二句表示的是show方法运行后的结果复制给method变量. method就等于"show run"
8. 对象
8.1 对数据的封装,使用函数完成
function Person()
{
alert("Person Init") ;
}
var p = new Person() ;//跳出 Person Init对话框
p.name = "zhangshan" ;
p.age = 30 ;
p.chifan = function()
{
alert("chifan") ;
}
p.chifan() ;//跳出 chifan
/*
可将Person对象修改为:
function Person(name, age)
{
this.name = name ;
this.age = age ;
}
p = new Person("zhangshan", 30) ;
alert(p["name"] + "..." + p.age) ;//输出 zhangshan...30
*/
/*
可以将 functon Person()的内容放到另一个person.js文件中侯哥.
并且在person.js中定义一个p. var p = new Person("zhangshan", 30) ;
p.getName = function()
{
return name ;
}
通过<script type="" src="person.js"></script>
alert(p["name"] + "..." + p.age) ;//zhangshan...30
p = new Person("lisi---", 22) ;
alert(p["name"] + "..." + p.age) ;//输出 lisi---...22
p.getName() ;//报错
*/
8.2 With 语句
var p = new Person("zhaoliu---", 30) ;
with(p)
{
alert(p["name"] + "..." + age) ;//在with语句内,不需要写对象名
}
8.3 for...in语句
var p = new Person("wangwu------", 22) ;
//for (var s : p).....不是冒号,是in...
for (var s in p)
{
alert(s + " : " + p.s) ;//输出name:undefined
//age:undefined
}
//for (var s : p)
for (var s in p)
{
alert(s + " : " + p[s]) ;//输出name:wangwu age:22
}
var arr = [2, 1, 6, 3] ;
//for (var s : arr)
for (var s in arr)
{
alert(s) ;//s是arr的index角标
alert(arr[s]) ;//输出arr对应s角标的值
}
9. JavaScript手册,看JavaScript为我们已经提供的对象.
8.1 Object对象
obj = new Object() ;
obj.name = "";
obj.age = ;//ok的
8.2 String对象
var s = new String("") ;
var s1 = "" ;//ok
str.charAt(index) ;//返回index角标的字符
str.bold() ;//返回一个带<b>标签的字符串
str.fontColor(colorVal) ;//返回一个带font+color标签的字符串
str.link(url) ;//str.link("http://www.huyouni.com") ;
//返回一个"<a href='http://www.huyouni.com'>"+str+"</a>"
str.substring(start, end) ;
str.substr(start, length) ;//如果从start的index开始,没有length长度的字符个数,就截取剩余的所有字符
//且length是可以不传的
8.3 Math对象
for (var i = 0 ; i < 10 ; i++)
{
var d = Math.random() * 10 + 1 ;
document.write(d + "<br />") ;//输出的值不是单个字符的
}
在Global对象中,有一个parseInt(numString, [radix])方法
parseInt("abc") ; //返回NaN
parseInt("12abc") ;//返回12 一般用正则去判断是不是全数字再使用
var num = parseInt("110", 2) ;
alert(num) ;//输出6
var x = 6 ;
alert(x.toString(2)) ;//输出110
for (var i = 0 ; i < 10 ; i++)
{
var d = parseInt(Math.random() * 10 + 1) ;
document.write(d + "<br />") ;
}
var num = parseInt("110", 2) ;//num为6
var num1 = pareseInt("1a", 16) ;//num为26
var num2 = 6.toString(10) ;//error,不能用6.toString() ;
var x = 6 ;
var num3 = x.toString(2) ;
8.4 Date对象
var d = new Date() ;
with(d)
{
var month = d.getMonth() + 1 ;
month = (month > 9)?month:"0" + month ;
alert(getYear() + "年" + month + "月" + getDate() + "日 星期" + getDay()) ;
}
8.5 prototype属性
function getMax()
{
var max = this[0] ;
for (var i = 0 ; i < this.length ; i++)
{
if (max < this[i])
{
var temp = this[i] ;
this[i] = max ;
max = this[i] ;
}
}
}
Array.prototype.getZuiDa = getMax ;
var arr = [3, 2, 1, 6, 5] ;
alert(arr.getZuiDa()) ;//输出6
第十一节: Dom编程
1. DOM: document object model 文档对象模型
为了方便操作标记型文档,就将标记型文档的所有标签封装成对象. 而封装的动作就是由DOM完成的
标记型文档本身就是一个对象,再将文档里的标签本身都封装成对象,这就是文档对象模型所做的事.
为什么要这么做呢?
如果把文档中的标签封装成对象后,就可以在对象中定义很多属性和行为,这样就可以由用户动态的
添加和删除一些标签..并可以结合CSS完成一些效果.
DOM共有3层模型:
DOM1: 将HTML文档封装成对象
DOM2: 将XML文档封装成对象
DOM3: 将XML文档封装成对象
DOM将文档封装成对象后,就会在内存中出现一个DOM树..
Window
Document
Html
|--head
|--title
|--meta
|--link
|--base
|style
|script
|--body
|--table
|--tr
|--td
|--th
|--form
|--input
|--select
|--
|--div
|--a
当获得到DOM树时,就可以在树上添加新的节点,还可以修改节点对象的属性值.以完成页面的动态显示.
DHTML: 动态HTML...这是多种技术的综合体
html css dom javascript
html: 将数据进行封装
css: 负责标签中数据的样式
dom: 将标签封装成对象
javascript: 将三个进行融合,通过程序设计方式来完成效果的操作
在动态的基础上,添加xmlHttpRequest --形成了--> AJAX(多项技术的融合体,独立语言javascript)
AJAX让前台展现出现里程碑的进步
AJAX没有一项新的技术,只是之前技术的融合
第十二节: JavaScript回顾
1. JavaScript中已定义好的一些对象
这些对象都有一个属性叫做prototype原型.
prototype可以获取指定的对象引用
可以通过该引用给已有的对象赋予一些新的功能
那么在使用该对象时,就可以直接调用定义好的功能
function getMax()
{
.
.
.
}
var arr[1, 4, 2] ;
Array.prototype.getMax = getMax ;
alert(arr.getMax()) ;//输出4 如果没有之前Array.prototype.getMax = getMax ;
//则arr中没有getMax()这个功能
2. JavaScript需要被浏览器所解释执行,就必须要结合HTML代码执行
结合的方式是怎么样的呢?
2.1 通过定义<script>标签将js代码存入其中,并制定type属性.方便浏览器识别并启动制定的解析引擎
2.2 通过<script>标签,使用src属性制定链接一个js文件进来
第十三节: DOM详解
1. DOM Document Object Model
其实就是将一些标记型文档以及文档中的内容当成对象..把这些对象链接起来并建立联系,就形成了模型.
为什么要将这些文档以及其中的标签封装成对象呢?
因为可以在对象中定义其属性和行为,可以方便操纵这些对象.
<input type=""/> type就是一属性.
DOM在封装标记型文档时,有三层模型
DOM1: 针对HTML文档
DOM2: 针对XML文档
DOM3: 针对XML文档
DHTML:
1.1 HTML XHTML XML 这些都是标记型文档
DHTML: 是多个技术的综合体,叫做动态HTML
1.2 html:负责将数据进行标签的封装
css:负责标签的样式
dom:负责将标签以及标签中的数据封装成对象
javascript:负责通过程序设计方式来操作这些对象
2. 标签之间存在层次关系
html
|--head
|--title
|--base
|--meta
|--link
|--script
|--style
|-body
|--div
|--form
|--input
|--select
|--span
|--a
|--table
|--tbody
|--tr
|--td
|--th
|--dl
|--dt
|--dd
通过上面这个标签层次,可以形象的看成是一个树形结构.
那么我们也称标记型文档,加载进内存的是一棵DOM树
所有的标签以及标签内的数据,都是这棵树上的节点.
当标记型文档加载进内存,那么内存中就有了一个对应的DOM树.
DOM对于标记型文档的解析有一个弊端就是文档过大,相对消耗资源
如果DOM树非常大的话,就会暂用非常多的内存...因为DOM会将整个HTML页面作为文档生成DOM树
对于大型文档可以使用SAX这种解析方式
XML文档学习的就是解析方式,如何将文档中的数据获取出来.
3. 节点类型:
标签行节点: 类型 1
文本型节点: 类型 3
节点的关系:
父节点
子节点
兄弟节点
上一个兄弟节点 previousSibling
//如果该节点标签之上有个空行,则会返回一个text节点,节点的value为" "
var priviousBrother = node.previousSibling ;
下一个兄弟节点 nextSibling
4. 获取父节点
var parent = node.parentNode ;
var childs = node.childNodes ;
文本节点是有VALUE值的
6.
获取节点可以通过节点层次关系来完成
也可以通过document对象来完成
getElementById() ;//如果有多个ID相同的标签,返回的是第一个ID所对应的标签对象
//尽量保证ID唯一性,返回的是一个对象
getElementsByTagName();
//通过标签的name属性值获取对象.返回的是一堆对象.其实是一个对象数组
//比如radio...或者checkbox...里面多个标签对象,对应的name都是相同的.
getElementsByName() ;
//既没有ID,也没有name时,可以通过标签名来获取节点对象
//返回的其实是一堆对象,其实是一个对象数组
//大多容器性标签都具备该方法
//如div就有
document.all ;//获取document中所有标签对象的数组
//文本,节点间的空白文本不拿
document.all(7) ;//获取all中的第七个
7. 按照节点的层次关系,打印节点信息
参见NodeList.html文档
8. 获取指定标签下的所有属性
var objDiv = getElementById("divId")
var atts = objDiv.attributes ;//获取指定div里所有的属性
9. window
9.1 在浏览器中有菜单,地址栏,菜单,这个浏览器的窗体本身就是一个对象.
9.2 在划分层次的时候,其实是这样的
window
docuemnt
|--html
|--head
|--body
9.3 window代表浏览器中一个打开的窗口
9.4 window里的对象
window.navigator对象
window.navigator.appName
window.navigator.appVersion
window.location对象
window.location.href
alert(location.href) ;//打印地址栏里的地址
window.location.href="http://sina.com.cn" ;//转到这个url
9.5 window里的方法
window.confirm("确定你是猪的话,就点确定,否则取消") ;
window.moveBy(x, y) ;//移动多少
window.moveTo(x, y) ;//移动到
window.resizeBy() ;
window.resizeTo() ;
var text = window.prompt("我是对话框","你要对我说什么") ;
window.open(地址, 打开方式, 功能, x) ;
window.setTimeout("函数功能", 时间/毫秒) ;//多少时间后,执行指定函数内容
iTimerId = window.setInterval("函数功能", 时间/毫秒) ;//m每隔一段时间执行
clearInterval(iTimerId) ;
window.onload() = function()
{
}
window.onunload() = function()
{
关闭浏览器之后执行这里
}
window.onbeforeunload() = function()
{
点下关闭,在浏览器关闭之前执行这里的函数
}
window.focus() ;//让当前页面变成焦点
window.event.keyCode ;获取当前输入的ascii码的值
window.event.returnValue ;
window.event.srcElement ;
第十六节:
1. 通过点击实现一个展开闭合效果
overflow的使用
类选择器的比较
2. 获取事件源对象的两种方式
2.1 通过event对象的srcElement属性
2.2 将事件源对象通过this传入
第十八节: 表格操作
---------------------- android培训、java培训、期待与您交流！
----------------------
----------------------
第一节:
1. Html基本内容
1.1 Html是超文本标记语言的简写,是最基础的网页语言
1.2 Html是通过标签来定义的语言,代码都是由标签所组成.
1.3 Html代码不区分大小写
1.4 Html代码由<html>开始,由</html>结束.在这之间由头部分<head></head>和体部分<body></body>两部份组成
1.5 头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载.
1.6 体部分是真正存放页面数据的地方
2.
2.1 多数标签都有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容,这样的标签一
般都是在标签内部自动结束.比如:
<br /> 换行标签
<img src="" /> 图片标签
<input type="" />组件标签
<hr />画一条直线
3. 想要对被标签修饰的内容进行更丰富的操作,就用到了标签的属性,通过修改标签属性的值,增加了更多的效果选择.
4. 属性与属性值之间用=号连接,属性值一般用""括在内部,也可以不写,但是通用的规范是用".如果在属性值中有'出
现,则一定要用""来括.
5. 标签的格式:
<标签名 属性名=属性值> 数据内容 </标签名>
<标签名 属性名 />
6. Html代码操作思想:
页面中有很多数据,由于要对数据进行样式的加载或者描述,这时候就需要用标签把这些数据封装在一起,标签这时
候就像容器一样,标签中的属性,就是可以用来改变标签内数据的样式或者显示效果的.
7. 字体
7.1 字体标签: <font>
<font>标签中的color属性,可以用三个十六进制数来表示.比如0xff0000-->表示红色 RGB
7.2 标题标签
<h1><h2><h3>...<h6>
(感觉就是显示加黑加粗的字体...)
7.3 转义字符
比如要在网页上显示'<',就要使用 < 因为'<'是html语言的标签开始符号,因此不能在页面上显示
< ==> <
> ==> >
==> 空格
& ==> &
© ==> ©
® ==> ®
" ==> "
™ ==>
8. Dreamweaver Cs3工具介绍
第二节:
//练习 6:37
1.列表
1.1 列表标签: <dl>: define list
确定好<dl>后,在内部有
<dt></dt>
<dd></dd>//带缩进
1.2 列表中,项目符号对应的标签
<ol> 数字标签 a A 1 i I
<ul> 符号标签 空心圆、实心圆、实心方框之类的
<li> 具体项目内容标签,此标签只在<ol><ul>中有效
通过type修改标签中的现实标签的具体现实方式
<ol type = "i" start="3"></ol> 从iii开始显示
1.3 注释方式
<!--- 注释的内容 --->
1.4 练习
<!---
1. 游戏名称
a. xxx
b. xxx
b. 游戏内容
1. xxx
2. xxx
--->
2. <hr coloer="" size="" /> 画一条直线
3. 图片标签 <img />
3.1 <img src="../Day23/1.jpg" alt="图片说明文字" heigth="33" weight="33" border="10"/>
3.2 图像地图
在Dreamweaver中切换到"设计视图"进行设计
比如在地图上,点击某个省,就会进入到那个省对应的界面,而这个省是地图中的一部分.
4. 表格标签:<table>
表格、行、单元格(没有列)
<table></table>表示表格..
<tr></tr>表示行
<td></td>表示单元格
<th></th>表头标签 就是td设置完 居中属性,再对内容进行加粗后的效果
<caption></caption> 表格标题 会随着表格进行移动的标题
<td></td>和<th></th> 有个colspan="n",可以合并一行中的列
rowspan="n",可以合并一列中的两行
<tbody></tbody>分体标签 当从服务器中读取完整个<tbody></tbody>中的内容后,浏览器就在显示器上显示内容.
每个<table></table>中,默认都有一个<tbody></tbody>,也就是说,写一个<table></table>时,默认都会如下的,不管你写不写<tbody>
<table>
<tbody>
</tbody>
</table>
每个表格<table>可以有一个<THEAD> 表头、一个<TFOOT> 表尾和多个<TBODY> 表体
border属性: 表格的边框长度
cellpadding属性:单元格中的内容和边框的距离...内边距
cellspacing属性:单元格之间的距离
width="70%"浏览器大小的70%
表格用于格式化数据
5. 超链接 <a></a>
<a href="http://www.sina.com.cn" target="_blank">新浪网站</a>//在新建窗口打开连接
当在浏览器中,点击"新浪网站"链接后,浏览器的执行流程如下:
首先获取href中的链接的协议信息:http
因为是http协议,所以开始找本地的hosts文件
在host协议中,如果没有www.sina.com.cn对应的ip地址,
就回去DNS服务器,寻找对应的ip地址
从dns服务器返回ip地址后,再和新浪的服务器开始通信.
<a href="mailto:abc@sohu.com?subject=haha&cc=xxx@163.com">联系我们</a>
当在浏览器中,点击"联系我们"后,浏览器发现是mailto协议
因此会调用邮件管理程序,创建一封邮件
收件人是: abc@sohu.com
抄送至: xxx@163.com
主题是: haha
<a href="THUNDER://aldlfaklsdfkl">唐山大地震下载地址</a>
点击后会启动迅雷,然后下载对应连接中的内容.
<a href="http://www.sina.com.cn"><img src="xxx.jpg /></a>//带有超级连接的图片超级链接
有一个常见问题列表,当点击一个问题时,当前页面下滑到指定的内容.当前页面并没有刷新或者跳转.
<a name="top">顶部</a>//定义标记,专业一点叫"锚"
<a href="http://www.sina.com.cn">新浪网站</a>
.
.
.
<a href="#top">回到顶部</a>//注意#的标识符
第三节:
//练习
1. 表单标签<form>
1.1 表单标签是最常用的标签,用于与服务器端的交互
<input>:输入标签
type=:
text 文本框
password 密码框
//radio要把多个选项全部列在一个组中,通过name=""属性来标示所属的组..
//且同一个组中的radio,只能有一个被选中,a被选中,bcd就不能被选
radio 单选框
checkbox 复选框
file 上传文件
//hidden不是很了解,毕老师说hidden的value,是通过页面计算出来的
//<input type="hidden" name="id" value="<%=new Date" />
hidden 隐藏属性
button 按钮
image//我没记住的 这会在页面显示一个图片,点击这个图片,和submit是一样的功能
submit 提交按钮//一个按钮,复位输入框中内容的同时,向服务器发送数据
reset 复位按钮
输入框中,有name属性的内容,会被发送到服务端,服务端也可以通过这个name来获得数据
保单中最好都加入name 和 value
1.2 下拉菜单:
<select name="country" multiple="multiple(这个可以实现下拉框中列出多行的值)" size="2"(只列出两个)>
<option>中国</option>
</select>
1.3 <textarea cols="" rows=""></textarea> 文本区域
1.4 练习: 17:52 写一个表单
finished..见FromDemo.html
1.5 Get提交和Post提交的区别
get 会将提交的内容显示在浏览器地址栏
post 不会将提交的内容显示在浏览器地址栏
get 提交的数据的大小会受地址栏的限制
post 提交的数据不会受地址栏限制
get 提交敏感数据时不安全
post 提交敏感数据时更安全
get 提交的数据会封装在请求行,也就是http消息头之前//出现编写时error,自己没能记不住
post 提交的数据封装在数据体中,也就是http消息头之后
对服务端而言:
表单提交尽量用post,因为涉及编码问题
对于post提交的中文,在服务端可以直接使用setCharacterEncoding("gbk")就可以解决
对于get提交的中文,在tomcat服务端就只能使用ISO8859-1将数据编码一次,再通过制定的编码
表,如GBK解码
使用表单的组件,不一定要定义form标签..比如button按钮,点击按钮后弹出一个对话框,并不需
要和服务器通信..<form>主要是有一个action动作,可以将数据发送到服务器.
1.6 用超链接,也可以和服务器通信
<a href="http://192.168.1.254:10009?user=zs&psw=123&repsw=1234&sex=nan&country=jp">提交数据</a>
直接在浏览器输入:http://192.168.1.100:10000?user=zs&psw=123&repsw=1234&sex=nan&country=jp,也可以
因此,既然用户可以跳过客户端完成和服务器的通信,所以,在服务端和客户端两端,都要对用户输入
的信息进行校验...否则,假设用户自己使用超链接的方式往服务器发送数据,服务器又不进行判断,
则数据库里会出现异常的数据...
客户端的校验是为了提高用户体验.
第四节:
1. Label标签
用于给各个元素定义快捷键
for属性:for="标签的ID"
accesskey属性:accesskey="快捷键的名称:如U--u键"//按下alt+u会跳到当前标签
2. <pre>标签
让所有的数据原样的表现在页面上
3. <p>标签
让数据按照段落的形式表现在页面上,会在尾巴添加一个空行
4. <b>加粗 <strong>加粗
<i>斜体
<u>下划线
<sub>2</sub>下标2,二氧化碳的2...
<sup>2</sup>上标2,x平方的2
5. <marquee>标签
direction属性:left,从右往左飞
6. 头标签:头标签都放在<head></head>之间
<title>标签 <base>标签 <meta>标签 <link>标签
<base href="c:\abc\" />//添加了这句后,如果在c:\abc\没有请求的页面时,就会报错
<meta name="keyword" content="关键字" />//以前的百度和谷歌是收录meta里,名为keyword的content内容
<meta http-equiv="refresh" content="3,url=http://sina.com.cn" />//加入该句的<head>所在页面,会在
该页出现3秒后跳转到新浪页面
<link rel="stylesheet" href="1.css" media="print" /> //将1.css中的内容效果显示在打印机上
<link rel="stylesheet" href="1.css" media="print, screen" /> //将1.css中的内容效果显示在打印机和屏幕上
7. xhtml xml
<html xmlns="http://www.w3.org/1999/xhtml"> xmlns:ns代表namespace
这样如果自定义了<html>标签,如果没有添加xml命名空间的话,就会造成html混乱
如果添加了xml命名空间后,网页就能区分到底是那个<html>
<table xmlns="http://www.huyouni.com/mytable">
html的标签是固定的,而xml可以对标签进行自定义,xml只对数据进行描述
第五节: JavaScript视频教程_Html回顾
第六节: JavaScript视频教程_Html回顾02
1. <a href="http://www.sina.com.cn" target="_blank" title="这跟新闻奖的是一段非常长的文章讲述了非常长的单词的由来并可以通过鼠标悬浮在链接上不点击的方式得以显示."
第七节: JavaScript视频教程_CSS回顾
1. CSS层叠样式表
将网页中的样式分离出来,完全由CSS来控制
增强样式的复用性及可扩展性.
格式:
<style type="text/css">
选择器
{
属性名:属性值;
属性名:属性值;
}
</style>
2. CSS和HTML代码相结合的四种方式
2.1 每一个HTML标签都有一个style属性
2.2 当页面有多个标签具有相同样式时,可以进行复用
<style>
css代码
</sytle>
2.3 当有多个页面中的标签的样式相同时,还可以将标签样式单独封装成一个.css文件
通过在每个页面中定义
<style>
@import url(1.css) ;
</style>
2.4 通过html中head标签中link标签链接一个css文件
<link rel="stylesheet" href="1.css" media="print, screen" />
第三种方式和第四种方式的区别:
第三种用的是css代码,第四种用的是html代码
技巧:
为了提高相同样式的复用性以及可扩展性,可以将多个标签样式进行单独定义,并封装成css文件
p.css div.css...
在一个css文件中使用css的import将多个标签样式文件导入
然后在html页面上,使用<link>标签,将这个总的css文件导入
1.css
@import url("p.css") ;
@import url("div.css") ;
<link rel="stylesheet" href="1.css" media="print, screen" />
3. 选择器:其实就是样式要作用的标签容器
当样式分离后,html作用在于用标签封装数据,然后将css加载到指定标签上.
4. 选择器的基本分类
4.1 标签选择器
其实就是HTML语言中的每一个标签名
4.2 类选择器
其实就是每一个标签中的class属性...但是类选择器的表示方式比较特别
使用.a{}来表示
只用来给css所使用,可以对不同标签进行相同样式设定
4.3 ID选择器
其实就是每一个标签的ID属性,但是要保证ID唯一性,用#来标识
ID不仅可以被CSS所使用,还可以被javaScript所使用
5. 选择器的优先级:
ID > CLASS > 标签
扩展选择器:
5.1 关联选择器:
其实就是对标签中的标签进行样式定义. 也就是 "选择器 选择器{}"
比如:DIV中的<b>标签... "DIV选择器 <b>选择器{}"
<style type="">
div b
{
}
.z
{
}
.z b
{
}
</style>
5.2 组合选择器:
对多个组合器进行相同进行相同样式定义..将多个选择器用","隔开的形式
.z,p b //<!对.z选择器,p选择器中的b元素进行限定>
{
}
5.3 伪元素选择器:其实就是元素的一种状态.
a:link: 超链被点击之前
a:visited 超链被点击之后
a:hover 鼠标悬停在超链之上时
a:active 鼠标点击下去时
如果四个状态都定义了,则有一个顺序:
L V H A
p:first-letter
p:first-line
:focus 很遗憾,IE6不支持.但是FF支持
6. CSS滤镜:其实通过一些代码完成丰富了样式
当使用到CSS的更多属性时,还需要查阅CSS的API
现在做网页设计时,使用DIV+CSS
div: 行级区域
span:块级区域
p: 行级区域..P中不要嵌套div
第八节: javaScript
1. JavaScript概述
JavaScript是基于对象和事件的脚本语言(事件驱动)
JavaScript特点:
1.1 安全性(不允许直接访问本地硬盘),它可以做的就是信息的动态交互
1.2 跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)
JavaScript运行在客户端
2. JavaScript与Java的不同
2.1 JS是NetScape公司的铲平,Java是Sun公司的产品
2.2 Js是基于对象的,而Java是面向对象的
2.3 Js只需要被浏览器中的Java引擎就可以解释执行,Java需要先编译成字节码文件,再执行
2.4 Js是弱类型语言,而Java是强类型的..
比如,在Js中,var value ;定义一个value变量,
value=3;//ok
value="abc";//没问题!
也就是说,Js中,一个变量可以存储任意类型的数据。
3. JavaScript与Html的结合方式
要想将JS代码融入到Html中,都是以标签的形式.
3.1 JS代码存在在标签对<script>...</script>中
3.2 使用script标签的src属性,可以引入一个js文件.(方便后期维护,扩展)
例如:
<script type="text/javascript" src="arrayTool.js"></script>
注: 规范中,script标签中必须加入type属性
4. 变量的定义:使用var关键字
var value ;//定义一个变量,名称为value
value=3 ;
value="abc";
value='aaa' ;//ok的
value y ;//此时y的值为undefined
value=3250 ;
value=3250/1000*1000 ;结果为3250
5. JavaScript的语句
if语句:
var x = 3 ;
if (x == 3)
"yes"//输出
else
"no" ;
if (x = 3)
"yes"//输出
if (x = 0)//if的判断条件,如果表达式值为0,则为假
"yes"
else
"no"//输出
if (null)//表达式,值为null,则为假
"yes"
else
"no"//输出
if ("abc")
"yes"//输出
所以一般写成
if (3 == x)
"yes"
如果写成if (3 = x) ;在浏览器页面左下角,就会出现错误提示.
在JavaScript链接表达式或者布尔表达式时,要使用&&或者||
alert(true+1)//输出2
switch语句:
var x = 3 ;
switch(x)
{
case "abc" ;
....
break ;
case "aa" ;
...
break ;
default:
...
break ;
}
JavaScript的switch语句和Java的swtich语句的区别在于:
java只支持四种基本数据.而JavaScript因为没有类型的概念
所以都可以
while和do..while语句以及fors
do..while语句,不论如何,都会执行一次
for (int x = 0 ; x < 3 ; x++)//error....定义变量用var...
{
}
/*
var sum = 0 ;
for (var i = 0 ; i < 10 ; i++)
{
sum += i ;
}
alert(sum) ;//输出55
*/
/*
var sum = "" ;
for (var i = 1 ; i <= 3 ; i++)
{
if (i != 4)
sum += "x = " + x + ", " ;
else
sum += "x = " + x ;
}
alert(sum) ;//输出x = 1, x = 2, x = 3
document.write("<font color = "red" size = "7">" + sum + "</font>") ;
*/
//练习: 写一个99乘法表(擦肩99Chengfabiao.html文件)
6. 数组
var arr = ["abc", 2, true, 6, 8, 1] ;
arr[7] = "over" ;
for (var i = 0 ; i < arr.length ; i++)
{
//Ok,成功输出
//在输出1之后,会输出undefined,然后再输出"over"
//因为在javaScript中,数组就是一个容器,是可变长度的.
//当index扩展到7时,由于6index没有指定数据,所以变成undefined
alert(arr[i]) ;
}
var arrNull = new Array() ;
建议在使用数组时,往数组中存放相同的数据类型.
/*
对数组进行排序,请参见99Chengfabiao.html
*/
定义二维数组:
var arr = [[3, 1, 6], [2, 3, 4]] ;
7.函数
使用function关键字来定义
function show()
{
alert("show run") ;
}
show() ;
定义在函数外部的叫做JavaScript全局变量
function show1(x, y)
{
alert(x + "," + y) ;
}
show1(3, 5) ;//输出3,5
show1(3) ;//输出3,undefined
show(1, 3, 5, 5,2) ;//输出show run
//show函数内部有个arguments数组,接受了所有的参数.
//alert(arguments.length) 输出5
var x = show() ;
alert(x) ;//会把show中的所有源代码都打印
动态函数:
var show = new Function("x", "y", "var sum = 0 ; sum = x + y ; return sum ;")
alert(show(3, 7)) ;输出10
匿名函数:
var show = function()
{
.
.
.
}
//匿名函数往往作为事件驱动的事件处理行为出现
window.onload = function()
{}
函数在使用时要注意的部分:
function show()
{
return "show run" ;
}
var method = show ;
var method = show() ;
两句代码都是正确的
第一句表示的是将show指向的对象的地址值赋给method.那么method也指向了该对象.
也就是method(),也返回"show run" ;
第二句表示的是show方法运行后的结果复制给method变量. method就等于"show run"
8. 对象
8.1 对数据的封装,使用函数完成
function Person()
{
alert("Person Init") ;
}
var p = new Person() ;//跳出 Person Init对话框
p.name = "zhangshan" ;
p.age = 30 ;
p.chifan = function()
{
alert("chifan") ;
}
p.chifan() ;//跳出 chifan
/*
可将Person对象修改为:
function Person(name, age)
{
this.name = name ;
this.age = age ;
}
p = new Person("zhangshan", 30) ;
alert(p["name"] + "..." + p.age) ;//输出 zhangshan...30
*/
/*
可以将 functon Person()的内容放到另一个person.js文件中侯哥.
并且在person.js中定义一个p. var p = new Person("zhangshan", 30) ;
p.getName = function()
{
return name ;
}
通过<script type="" src="person.js"></script>
alert(p["name"] + "..." + p.age) ;//zhangshan...30
p = new Person("lisi---", 22) ;
alert(p["name"] + "..." + p.age) ;//输出 lisi---...22
p.getName() ;//报错
*/
8.2 With 语句
var p = new Person("zhaoliu---", 30) ;
with(p)
{
alert(p["name"] + "..." + age) ;//在with语句内,不需要写对象名
}
8.3 for...in语句
var p = new Person("wangwu------", 22) ;
//for (var s : p).....不是冒号,是in...
for (var s in p)
{
alert(s + " : " + p.s) ;//输出name:undefined
//age:undefined
}
//for (var s : p)
for (var s in p)
{
alert(s + " : " + p[s]) ;//输出name:wangwu age:22
}
var arr = [2, 1, 6, 3] ;
//for (var s : arr)
for (var s in arr)
{
alert(s) ;//s是arr的index角标
alert(arr[s]) ;//输出arr对应s角标的值
}
9. JavaScript手册,看JavaScript为我们已经提供的对象.
8.1 Object对象
obj = new Object() ;
obj.name = "";
obj.age = ;//ok的
8.2 String对象
var s = new String("") ;
var s1 = "" ;//ok
str.charAt(index) ;//返回index角标的字符
str.bold() ;//返回一个带<b>标签的字符串
str.fontColor(colorVal) ;//返回一个带font+color标签的字符串
str.link(url) ;//str.link("http://www.huyouni.com") ;
//返回一个"<a href='http://www.huyouni.com'>"+str+"</a>"
str.substring(start, end) ;
str.substr(start, length) ;//如果从start的index开始,没有length长度的字符个数,就截取剩余的所有字符
//且length是可以不传的
8.3 Math对象
for (var i = 0 ; i < 10 ; i++)
{
var d = Math.random() * 10 + 1 ;
document.write(d + "<br />") ;//输出的值不是单个字符的
}
在Global对象中,有一个parseInt(numString, [radix])方法
parseInt("abc") ; //返回NaN
parseInt("12abc") ;//返回12 一般用正则去判断是不是全数字再使用
var num = parseInt("110", 2) ;
alert(num) ;//输出6
var x = 6 ;
alert(x.toString(2)) ;//输出110
for (var i = 0 ; i < 10 ; i++)
{
var d = parseInt(Math.random() * 10 + 1) ;
document.write(d + "<br />") ;
}
var num = parseInt("110", 2) ;//num为6
var num1 = pareseInt("1a", 16) ;//num为26
var num2 = 6.toString(10) ;//error,不能用6.toString() ;
var x = 6 ;
var num3 = x.toString(2) ;
8.4 Date对象
var d = new Date() ;
with(d)
{
var month = d.getMonth() + 1 ;
month = (month > 9)?month:"0" + month ;
alert(getYear() + "年" + month + "月" + getDate() + "日 星期" + getDay()) ;
}
8.5 prototype属性
function getMax()
{
var max = this[0] ;
for (var i = 0 ; i < this.length ; i++)
{
if (max < this[i])
{
var temp = this[i] ;
this[i] = max ;
max = this[i] ;
}
}
}
Array.prototype.getZuiDa = getMax ;
var arr = [3, 2, 1, 6, 5] ;
alert(arr.getZuiDa()) ;//输出6
第十一节: Dom编程
1. DOM: document object model 文档对象模型
为了方便操作标记型文档,就将标记型文档的所有标签封装成对象. 而封装的动作就是由DOM完成的
标记型文档本身就是一个对象,再将文档里的标签本身都封装成对象,这就是文档对象模型所做的事.
为什么要这么做呢?
如果把文档中的标签封装成对象后,就可以在对象中定义很多属性和行为,这样就可以由用户动态的
添加和删除一些标签..并可以结合CSS完成一些效果.
DOM共有3层模型:
DOM1: 将HTML文档封装成对象
DOM2: 将XML文档封装成对象
DOM3: 将XML文档封装成对象
DOM将文档封装成对象后,就会在内存中出现一个DOM树..
Window
Document
Html
|--head
|--title
|--meta
|--link
|--base
|style
|script
|--body
|--table
|--tr
|--td
|--th
|--form
|--input
|--select
|--
|--div
|--a
当获得到DOM树时,就可以在树上添加新的节点,还可以修改节点对象的属性值.以完成页面的动态显示.
DHTML: 动态HTML...这是多种技术的综合体
html css dom javascript
html: 将数据进行封装
css: 负责标签中数据的样式
dom: 将标签封装成对象
javascript: 将三个进行融合,通过程序设计方式来完成效果的操作
在动态的基础上,添加xmlHttpRequest --形成了--> AJAX(多项技术的融合体,独立语言javascript)
AJAX让前台展现出现里程碑的进步
AJAX没有一项新的技术,只是之前技术的融合
第十二节: JavaScript回顾
1. JavaScript中已定义好的一些对象
这些对象都有一个属性叫做prototype原型.
prototype可以获取指定的对象引用
可以通过该引用给已有的对象赋予一些新的功能
那么在使用该对象时,就可以直接调用定义好的功能
function getMax()
{
.
.
.
}
var arr[1, 4, 2] ;
Array.prototype.getMax = getMax ;
alert(arr.getMax()) ;//输出4 如果没有之前Array.prototype.getMax = getMax ;
//则arr中没有getMax()这个功能
2. JavaScript需要被浏览器所解释执行,就必须要结合HTML代码执行
结合的方式是怎么样的呢?
2.1 通过定义<script>标签将js代码存入其中,并制定type属性.方便浏览器识别并启动制定的解析引擎
2.2 通过<script>标签,使用src属性制定链接一个js文件进来
第十三节: DOM详解
1. DOM Document Object Model
其实就是将一些标记型文档以及文档中的内容当成对象..把这些对象链接起来并建立联系,就形成了模型.
为什么要将这些文档以及其中的标签封装成对象呢?
因为可以在对象中定义其属性和行为,可以方便操纵这些对象.
<input type=""/> type就是一属性.
DOM在封装标记型文档时,有三层模型
DOM1: 针对HTML文档
DOM2: 针对XML文档
DOM3: 针对XML文档
DHTML:
1.1 HTML XHTML XML 这些都是标记型文档
DHTML: 是多个技术的综合体,叫做动态HTML
1.2 html:负责将数据进行标签的封装
css:负责标签的样式
dom:负责将标签以及标签中的数据封装成对象
javascript:负责通过程序设计方式来操作这些对象
2. 标签之间存在层次关系
html
|--head
|--title
|--base
|--meta
|--link
|--script
|--style
|-body
|--div
|--form
|--input
|--select
|--span
|--a
|--table
|--tbody
|--tr
|--td
|--th
|--dl
|--dt
|--dd
通过上面这个标签层次,可以形象的看成是一个树形结构.
那么我们也称标记型文档,加载进内存的是一棵DOM树
所有的标签以及标签内的数据,都是这棵树上的节点.
当标记型文档加载进内存,那么内存中就有了一个对应的DOM树.
DOM对于标记型文档的解析有一个弊端就是文档过大,相对消耗资源
如果DOM树非常大的话,就会暂用非常多的内存...因为DOM会将整个HTML页面作为文档生成DOM树
对于大型文档可以使用SAX这种解析方式
XML文档学习的就是解析方式,如何将文档中的数据获取出来.
3. 节点类型:
标签行节点: 类型 1
文本型节点: 类型 3
节点的关系:
父节点
子节点
兄弟节点
上一个兄弟节点 previousSibling
//如果该节点标签之上有个空行,则会返回一个text节点,节点的value为" "
var priviousBrother = node.previousSibling ;
下一个兄弟节点 nextSibling
4. 获取父节点
var parent = node.parentNode ;
var childs = node.childNodes ;
文本节点是有VALUE值的
6.
获取节点可以通过节点层次关系来完成
也可以通过document对象来完成
getElementById() ;//如果有多个ID相同的标签,返回的是第一个ID所对应的标签对象
//尽量保证ID唯一性,返回的是一个对象
getElementsByTagName();
//通过标签的name属性值获取对象.返回的是一堆对象.其实是一个对象数组
//比如radio...或者checkbox...里面多个标签对象,对应的name都是相同的.
getElementsByName() ;
//既没有ID,也没有name时,可以通过标签名来获取节点对象
//返回的其实是一堆对象,其实是一个对象数组
//大多容器性标签都具备该方法
//如div就有
document.all ;//获取document中所有标签对象的数组
//文本,节点间的空白文本不拿
document.all(7) ;//获取all中的第七个
7. 按照节点的层次关系,打印节点信息
参见NodeList.html文档
8. 获取指定标签下的所有属性
var objDiv = getElementById("divId")
var atts = objDiv.attributes ;//获取指定div里所有的属性
9. window
9.1 在浏览器中有菜单,地址栏,菜单,这个浏览器的窗体本身就是一个对象.
9.2 在划分层次的时候,其实是这样的
window
docuemnt
|--html
|--head
|--body
9.3 window代表浏览器中一个打开的窗口
9.4 window里的对象
window.navigator对象
window.navigator.appName
window.navigator.appVersion
window.location对象
window.location.href
alert(location.href) ;//打印地址栏里的地址
window.location.href="http://sina.com.cn" ;//转到这个url
9.5 window里的方法
window.confirm("确定你是猪的话,就点确定,否则取消") ;
window.moveBy(x, y) ;//移动多少
window.moveTo(x, y) ;//移动到
window.resizeBy() ;
window.resizeTo() ;
var text = window.prompt("我是对话框","你要对我说什么") ;
window.open(地址, 打开方式, 功能, x) ;
window.setTimeout("函数功能", 时间/毫秒) ;//多少时间后,执行指定函数内容
iTimerId = window.setInterval("函数功能", 时间/毫秒) ;//m每隔一段时间执行
clearInterval(iTimerId) ;
window.onload() = function()
{
}
window.onunload() = function()
{
关闭浏览器之后执行这里
}
window.onbeforeunload() = function()
{
点下关闭,在浏览器关闭之前执行这里的函数
}
window.focus() ;//让当前页面变成焦点
window.event.keyCode ;获取当前输入的ascii码的值
window.event.returnValue ;
window.event.srcElement ;
第十六节:
1. 通过点击实现一个展开闭合效果
overflow的使用
类选择器的比较
2. 获取事件源对象的两种方式
2.1 通过event对象的srcElement属性
2.2 将事件源对象通过this传入
第十八节: 表格操作
---------------------- android培训、java培训、期待与您交流！
----------------------
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 黑马程序员_毕向东_Java基础视频教程学习笔记（十五）
- 黑马程序员_毕向东_Java基础视频教程第十八天-IO流---学习笔记
- 黑马程序员_毕向东_Java基础视频教程学习笔记（七）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（十四）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（八）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（十二）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（十八）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（二十二）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（二十三）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（十一）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（二十）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（十九）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（五）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（六）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（四）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（十）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（十三）
- 黑马程序员_毕向东_Java基础视频教程学习笔记(十六)
- 黑马程序员_毕向东_Java基础视频教程学习笔记（二）
- 黑马程序员_毕向东_Java基础视频教程学习笔记（十七）