Javascript及JQuery视频教学-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_447/article/details/82122062

本文详细介绍了JavaScript的基础知识，包括变量类型、数组操作、日期对象、数学对象等，并结合实例展示了如何利用JavaScript实现动态网页交互。同时，文章还涵盖了CSS的基础应用，包括行内样式、内嵌式样式、链接式样式等，以及如何使用CSS设置文字和图片效果，页面背景设置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第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

CSS页面背景设置

(1) 设定背景颜色实现页面分块

参见 project CSS基础背景颜色实现页面分块.jsp

(2) 设定背景图片

参见 project CSS基础背景图片.jsp

(3) 设定超链接效果

参见 project CSS基础 设定超链接效果.jsp

第4讲 CSS进阶

1. <div>与<span>

<div>是段落标记

<span>是行标记

2. 盒子模型

content，border，padding和margin四个部分组成

浏览器兼容性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

IE：height+width指content + padding + border

Firefox：content

3. 元素的定位

float定位

float:left;

position定位 absolute 四个属性：left,rigth,top,bottom

position: absolute;

父块采用position时，则子块相对与父块

若子块采用position:relative，则父块设置的padding起作用

若不希望div大小充满屏幕，自己设置float或width

Z-index: 页面垂直管理

CSS排版观念

</div>