层叠样式表,用来美化html页面
这三个标签都可以看作容器,用来包裹其他html内容,被包裹的内容可以统一通过css来设置样式
div:独占一行
span:可以同行显示
p:独占一行,但是在其上下留有一些空白,是段落标签
(1)在标签上添加style属性引入css
这种方式不推荐大量使用,会造成页面的混乱
(2)通过style标签引入css样式
在head中添加style标签,来引入css,这种方式初步实现了html代码和css代码的分离
(3)引入外部的css文件
通过link标签引入外部的css文件,真正实现了css代码和html代码的分离
标签名选择器:通过标签的名称选中元素,格式:标签名{}
类选择器:通过标签上的class值选中元素,格式:.类名{}
id选择器:通过标签上的id值选中元素,格式:#id值{}
后代选择器:通过父元素选中后代元素,格式:父选择器 后代选择器{}
子元素选择器:通过父元素选中子元素,格式:父选择器>子选择器{}
分组选择器:将多个选择器选中的元素一起修饰,格式:选择器1,选择器2,…{}
属性选择器:根据元素的属性选中元素,格式:选择器[属性]{}
相邻兄弟选择器:根据前面的元素选中后面紧邻的兄弟元素,格式:大哥+小弟{}
伪元素选择器:不仅可以选中元素本身,还可以选中元素的状态
伪元素选择器状态分为:
:link 表示元素未点击时状态
:hover 表示鼠标悬停时状态
:active 表示元素被点击时状态
:visited 表示元素被点击后状态
边框:border
外边距:margin
内边距:padding
元素类型:
块级元素:独占一行,如div、p、h1-h6、br,块级元素设置的属性都生效,块级元素中可以包含任意元素;
行内元素:同行显示,如span、font、img,行内元素设置的宽、高、上下外边距不生效,行内元素只能包含行内元素.
display属性:设置元素显示方式
block:块级元素的默认值
inline:行内元素默认值
inline-block:兼顾块级元素和行内元素,即可以设置所有属性,也可以同行显示
none:隐藏元素
text-align:设置文本的位置
font-size:字体大小
font-familly:字体样式
font-weight:字体加粗
color:颜色
text-decoration:下划线
font-style:斜体
text-indent:缩进
background-color:背景颜色
background-image:背景图片
background-position:背景图片位置
background-repeat:背景图片铺排方式
vertical-align:多个元素上下对齐方式
width:宽
height:高
指定网页的行为.
1995年5月,网景公司,10天时间开发出LiveScript;
1995年12月,改名为JavaScript
脚本语言,无需编译;
基于对象,弱类型语言;
交互性,可以与用户交互;
安全性,只能在浏览器内运行;
跨平台,只要有浏览器即可,与平台无关.
(1)通过script标签引入js
(2)引入外部的js文件
通过script标签引入外部的js文件,注意,此标签不要自闭,也不要写其他js内容
// 单行注释
/* 多行注释 */
基本数据类型
数值类型(number)
在js中,所有的数值底层都是浮点型,在需要时,整型和浮点型会自动转换. 例如:2.4+3.6=6
NaN(not a number)非数字,NaN和任何值都不相等,可以通过isNaN(xxx)判断是否为非数字
提供了包装类型Number
字符串类型(string)
字符串时基本数据类型,通常用单引号或者双引号引起来
提供了包装类型String
布尔类型(boolean):值为true和false,提供了包装类型Boolean
undefined
未定义,如果声明了一个变量,但是没有初始化,该变量就是undefined
null:表示空,通常作为返回值使用
在js中,变量不区分类型,所有的变量都是通过var关键字声明,因此,js是一门弱类型语言
js的大部分运算符和java类似
不同之处:
比较运算符:"==" 和 "==="
"==":在比较时,如果两端数据类型不同,则先转换数据类型再比较
"===":在比较时,如果两端数据类型不同,则直接返回false
typeof:判断变量的数据类型
delete:删除数组中的元素或者对象的属性
js语句和java基本一致
if条件语句
循环语句:while()、do{}while()、for(){},注意,js不支持增强for循环
函数的定义:
function 函数名(形参列表){
函数体
}
==函数的调用:== 函数名(实参列表)
创建:
var arr1 = new Array(10) //表示创建一个长度为10的空数组
var arr2 = [“abc”,123,true] //创建一个指定初始值的数组
注意:
(1)数组可以存放任意类型的数据
(2)如果一个位置没有元素,该位置的值为undefined
(3)数组的长度可以任意改变
String对象
match(regexp):返回正则表达式匹配的值
replace(regexp,replaceStr):根据正则表达式匹配并替换
search(regexp):查找第一次匹配到正则的位置
正则对象
创建:
var reg1 = new RegExp("java","ig")
var reg2 = /java/ig
标识符:
i:ignoreCase,忽略大小写
g:global,全局查找
^:从头匹配
$:从尾部匹配
方法:
test(str):检查字符串是否匹配正则,返回boolean
Array对象
length属性:返回或设置数组的长度
sort()排序:字典排序
Date对象
创建:
var date1 = new Date() //创建当前时间
var date2 = new Date(年,月,日,时,分,秒) //指定时间
例如:var date = new Date(2008,7,8,20,0,0) //2008年8月8日晚上8点
Math对象
Math对象无需创建,可以直接调用身上的方法
ceil():向上取整
floor():向下取整
random():生成0-1的随机数
round():四舍五入
全局对象
全局对象没有语法,直接调用方法即可
isNaN(xxx):判断是否为非数字
eval(codeStr):可以执行一个字符串类型的代码
格式:
var person = {
"name":"zhangsan",
"age":18,
…}
对象中取值:person.name 或者 person["name"]
DHTML:动态的html
DHTML并非一门新技术,而是将现有的html、css、js整合再一起,形成的技术
DHTML分为BOM、DOM
BOM:浏览器对象模型,将浏览器看作是对象
DOM:文档对象模型
window对象
window对象是全局对象,即方法可以直接调用
事件:
onclick:点击事件
onfocus:获得焦点事件
onblur:失去焦点事件
onload:文档就绪事件,整个html加载完之后触发
方法:
alert():弹出提示框
confirm():弹出确认框,返回boolean
获取元素
getElementById("id值") :根据元素的id值获取元素
getElementsByName("name属性值") :根据元素的name属性值返回多个元素组成的数组
getElementsByTagName("元素名") :根据元素的名称获取多个元素组成的数组
value属性:获取或者设置元素的属性
innerText:(部分浏览器不支持)获取或者设置元素的文本内容
innerHTML:获取或者设置元素的html内容
元素的增删改
createElement("div") :创建一个指定名称的元素
appendChild(newDiv):追加子元素
removeChild(ele):删除子元素
replaceChild(newDiv,oldDiv):替换子元素
insertBefore(newDiv,oldDiv):插入新元素
cloneNode([boolean]):克隆元素,参数默认为false,表示只克隆元素本身,如果为true,则会连同子元素一起克隆