Javascript及JQuery视频教学

第0讲 内容概述

Javascript有以下三部分组成：

?? ECMAScript (Flash:actionscript, Silverlight)

?? DOM

?? BOM

?

document.getElementById('mydiv').style.left

?

第1讲 JavaScript背景知识

结构(Structure)???????????????? HTML XHTML

表现(Presentation)???????????CSS

行为(Behavior)????????????????? ECMAScript, DOM, BOM

?

第2讲 JavaScript基础

Camel标记法

Pascal标记法

匈牙利标记法

数组：? a

布尔值： b

浮点数： f

函数：????fn

整数：??? i

对象：??? o

正则表达式： re

字符串：??? s

变型：?????? v

?

未定义： Undefined

空：?????? Null

对象：??? Object

?

1. 字符串函数（String）：

length属性

charAt(i)

indexOf()

lastIndexOf()????????? 找不到返回-1

?

?

slice, substring, substr

slice支持负数，并且支持数组操作

substring可以倒置序号，负数为0

substr起始位置，长度

?

document.write可以直接写html网页

?

2. 数值型（Number)

?

9e5 科学计数法

toExponential（）

?

3. 布尔型 （Boolean）

true，false

typeof(true)

?

数值类型转换为字符串，可以用toString（2，8，16）进行进制转换。

?

boolean
number
string
object

?

4. 数组

var arr = new Array(1,"1",true);

var arr = [1,2,3];

?

join（）方法，改变连接数组项的“，”分隔符

split（）方法，字符串风格成数组

reverse（）方法，数组反序，可以用来进行字符串反转

sort（）方法，数组元素排序

push（），pop实现栈的功能

?

var iNumber = Number(prompt("请输入一个数字", ""));
if (isNaN(iNumber)) {
}

?

日期对象

var myDate = new Date();

date1 - date2 毫秒数

?

new Date("month dd,yyyy hh:mm:ss")

new Date("month dd,yyyy")

new Date(yyyy,mth,dd,hh,mm,ss);

new Date(yyyy,mth,dd);

new Date(ms);

?

Math Object

ceil() floor(), round()

?

Math.floor(Match.random()*total + firstnumber)

?

Window对象

var win?= window.open(url,"_blank","height=300,width=400,resizable=yes");

?

oWin.close();

oWin.opener

?

if (window.confirm("xxx")) {}

?

document Object

anchors

applets

embeds

forms

images

links

?

Location Object

location.href = url

location.replace(url)? 不可以使用后退

location.reload(true,false)?????? 默认是false

?

Navigator 对象

userAgent属性可以检测浏览器版本及操作系统版本

?

Screen 对象

window.moveTo(0,0);

window.resize(screen.availWidth,screen.availHeight);

?

?

第3讲 CSS基础

?

行内样式? style

内嵌式?? <style></style>

链接式

导入式 @import url(1.css);

?

标记选择器??? <p>

类别选择器

?.class

?

ID选择器

#id

?

p b {}?? b标记嵌套p才有效

?

子选择器??? ul.myList > li > a

属性选择器?? a[title=CSS] {};

?

CSS设置文字效果

（1）文字样式

font-family??? 字体

font-size?????? 字号

color

font-weight??粗细

font-style?????斜体

text-decoration???? 下划线，删除线，顶划线

（2）段落文字

（3）首字放大

?

参见?project CSS基础?? 首字放大.jsp

?

?CSS设置图片效果

（1）图片的边框???????????

参见?project CSS基础?? 图片的边框样式.jsp

（2）图文混排

参见?project CSS基础?? 图文混排.jsp