JSD11072班web0205天串讲.docx
《JSD11072班web0205天串讲.docx》由会员分享，可在线阅读，更多相关《JSD11072班web0205天串讲.docx（17页珍藏版）》请在冰豆网上搜索。
JSD11072班web0205天串讲
JSD1107_2班web02_web05天串讲
串讲人：
刘鸽
1、css
（1）cascadingstylesheet级联样式表，
按照w3c的规范，页面的数据与结构由html来负责，
页面的外观（展现给用户的界面）由css来负责。
（2）css的基本语法
选择器名称{
属性：
属性值;
属性2：
属性值2;
}
比如
#d1{
font-size:
50px;
}
（3）施加样式（将样式施加到指定的html标签之上）
通过选择器来施加。
a,标签选择器
body{
font-size:
50px;
background-color:
#cccccc;
}
对具有相同标签名的所有标签起作用。
b,class选择器
.选择器的名称{
}
对标签class属性值和选择器名称相同的标签起
作用。
标签名.选择器的名称{
}
标签的class属性要与选择器名称相同，
并且标签名要一致。
c,id选择器
#选择器的名称{
}
标签的id属性要与选择器的名称相同。
d,选择器的分组
div,h1,p{
font-size:
120px;
}
表示对div,h1,p都施加该样式
e,选择器的派生
divp{
font-size:
150px;
}
（4）样式的继承
子标签会继承父标签的样式。
（5）样式的优先级
浏览器默认样式
外部样式:
使用link引入外部的.css文件。
内部样式：
使用style定义的样式
内联样式:
使用标签的style属性定义的样式
从上往向优先级增大。
（6）几个重要的属性
a,位置相关的属性
margin:
外边距
margin-left:
margin-right:
margin-top:
margin-bottom:
也可以简写为margin:
顶，右，底，左
margin:
0px;
margin:
20pxauto;左右居中，顶、底各20px;
padding:
内边距
padding-left:
padding-right:
padding-top:
padding-bottom:
也可以简写为padding:
顶，右，底，左
内边距在使用时，要注意，子标签会将标签
撑开。
b,边框
border:
宽度样式颜色;
border-left:
左边框
border-right:
border-bottom:
border-top:
c,背景
background-color:
#cccccc;
background-image:
url（图片的地址）;
background-repeat:
no-repeat/repeat-x/repeat-y;
background-attachment:
fixed/scroll（默认）;
background-postion:
100px200px;
background:
背景图片平铺方式依附方式水平位置垂直位置
d,文字
font-size:
文字大小
font-weight:
粗细100-900
font-family:
字体
text-decoration:
none/underline下划线
cursor:
pointer/wait
text-align:
left/right/center
e,列表
list-style-type:
none;除掉小圆点
f,关键属性
float:
浮动left/right其作用：
取消块级标签的独占一行的特性。
clear:
取消浮动both;
（7）布局：
body,ul,li,img{
margin:
0px;
padding:
0px;
font-size:
12px;
}
（8）链接的伪样式
a:
link{color:
red}没有访问时
a:
visited{color:
blue}访问后
a:
active{color:
lime}鼠标点击但还没有放开时
a:
hover{color:
aqua}鼠标指向时
display属性：
block:
html标记以块标记的形式来显示
inline:
html标记以行内标记的形式来显示
none:
隐藏html标记
position属性：
static:
（默认值）浏览器默认将html标记按
从左到右，从上到下摆放。
absolute:
相对父标记偏移
relative:
先按照默认方式摆放，然后再偏移
1、javascript基础
（1）javascript是什么，能做什么？
是网景公司开发的一种用于与页面进行交互的
脚本语言。
javascript程序在浏览器端执行。
javascript程序可以写在.js结尾的文件里。
作用：
a,前端验证（就是对用户提交的表单中的
数据进行验证，比如验证用户名是否为空,
如果验证通不过，则浏览器不会将数据提交
给服务器）。
b,ajax核心技术之一，用于异步向服务器发送
请求并动态更新页面。
c,与页面进行交互，生成动态的效果。
d,获得浏览器相关的信息。
2、语法基础
（1）数据类型
a,基本数据类型
number:
数字类型
string:
字符串
boolean:
true/false布尔类型
null:
变量没有存放任何对象的地址
undefined:
未定义alert（a）;
b,引用类型变量
Object:
Array:
Date:
Math:
（2）变量
javascript是一种弱类型语言，变量的类型
在运行时确认，并且可以随时转换。
javascript大小写敏感。
标识符不能使用关键字和保留字
标识符首字母只能是A$_开头，首字母以外，可以包含
数字。
varf=1aberror!
varf=ab3;ok!
vars=_abok!
变量的作用域：
在函数内部，不使用var声明的变量是一个全局变量。
没有语句块作用域
（3）数组
a,特点：
js中的数组长度可变，存放的数据类型可以是任意的。
b,数组的创建：
vararr=newArray（）;
arr[0]=1;
arr[3]=2;
alert（arr.length）;
vararr=[1,2];
c,数组对象的常用方法和属性
length属性返回数组的长度
toString（）方法,返回数组的字符串表示
concat方法,用于连接两个数组
join（）方法，用于将数组中的各个元素连接成
字符串。
reverse（）方法，将数组反转
slice（）用于截取数组的一部分并以
数组的形式返回
sort（）排序，可通过如下形式来重新定义排序方式：
vararr4=arr3.sort（function（a1,a2）{
return-a1.length+a2.length;
}）;
d,数组可以当作堆栈和队列来使用
push（）;
pop（）;
shift（）;
（4）字符串的常用方法和属性
length属性返回字符串的长度
charAt（index）返回指定位置的字符
substring（from,to）返回子字符串
indexOf（str）指定字符串在原字符串中
第一次出现的位置
lastIndexOf（str）指定字符串在原字符串
中最后一次出现的的位置
match（regexp）返回匹配指定正则表达式的字符串
，返回的结果是一个数组:
varstr2='asd212abc345';
varreg2=/[0-9]+/g;global搜索全局
vararr=str2.match（reg2）;
search（regexp）返回按照正则表达式
检索到的字符串位置
str2.search（reg2）
toLowerCase/toUpperCase
返回小写/大写形式
replace（regexp,'abc'）;替换符合reg正则表达式规定的字符串
str2=str2.replace（reg2,'888'）;
split（','）:
分解,返回的是一个数组
3、DOM（DocumentObjectModel）
（1）什么是dom?
w3c定义了一套规则，由于将结构化的文档（XML/HTML）
转化为一棵树，目的是为了便于对结构化的文档
进行增删改查操作。
（2）w3cdom模型
a,继承关系图（了解）
Node
Document
HTMLDocument
HTMLBodyElement
Element
HTMLElement
HTMLFormElement
HTMLInputElement
HTMLSelectElement
HTMLOptionElement
HTMLDivElement
HTMLTableElement
HTMLTableCaptionElement
HTMLTableRowElement
HTMLTableCellElement
b,操作
查找：
方式一，使用id
document.getElementById（id）;
方式二，遍历（浏览器不兼容）
parentNodepreviousSiblingnextSiblingchildNodesfirstChildlastChild
getElementsByTagName（tagName）
创建
document.createElement（Tag）
添加
appendChild
insertBefore
replaceChild
删除
removeChild
样式操作：
方式一，通过设置className属性
方式二，通过修改style属性:
升级会员 