css与js基础知识

css

1.css概述

层叠样式表，用来美化html页面

2.div、span、p标签

这三个标签都可以看作容器，用来包裹其他html内容，被包裹的内容可以统一通过css来设置样式
div：独占一行
span：可以同行显示
p：独占一行，但是在其上下留有一些空白，是段落标签

3.在html种引入css

（1）在标签上添加style属性引入css
这种方式不推荐大量使用，会造成页面的混乱
（2）通过style标签引入css样式
在head中添加style标签，来引入css，这种方式初步实现了html代码和css代码的分离
（3）引入外部的css文件
通过link标签引入外部的css文件，真正实现了css代码和html代码的分离

4.选择器

4.1.基本选择器

标签名选择器：通过标签的名称选中元素，格式：标签名{}
类选择器：通过标签上的class值选中元素，格式：.类名{}
id选择器：通过标签上的id值选中元素，格式：#id值{}

4.2.扩展选择器

后代选择器：通过父元素选中后代元素，格式：父选择器 后代选择器{}
子元素选择器：通过父元素选中子元素，格式：父选择器>子选择器{}
分组选择器：将多个选择器选中的元素一起修饰，格式：选择器1，选择器2，…{}
属性选择器：根据元素的属性选中元素，格式：选择器[属性]{}
相邻兄弟选择器：根据前面的元素选中后面紧邻的兄弟元素，格式：大哥+小弟{}
伪元素选择器：不仅可以选中元素本身，还可以选中元素的状态

			伪元素选择器状态分为：
					:link    表示元素未点击时状态
					:hover    表示鼠标悬停时状态
					:active    表示元素被点击时状态
					:visited    表示元素被点击后状态

5.边框、边距

边框：border
外边距：margin
内边距：padding

6.常用css属性

元素类型：
块级元素：独占一行，如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：高

js

1.js概述

js是干什么的?

    指定网页的行为.

1.2.js历史

1995年5月，网景公司，10天时间开发出LiveScript;
1995年12月，改名为JavaScript

1.3.js特点

	脚本语言，无需编译;
	基于对象，弱类型语言;
	交互性，可以与用户交互;
	安全性，只能在浏览器内运行;
	跨平台，只要有浏览器即可，与平台无关.

2.html中引入js

（1）通过script标签引入js
（2）引入外部的js文件
通过script标签引入外部的js文件，注意，此标签不要自闭，也不要写其他js内容

3.语法

3.1.注释

// 单行注释
/* 多行注释 */

3.2.数据类型

基本数据类型

数值类型（number）
		在js中，所有的数值底层都是浮点型，在需要时，整型和浮点型会自动转换.     例如：2.4+3.6=6
		NaN（not a number）非数字，NaN和任何值都不相等，可以通过isNaN(xxx)判断是否为非数字
		提供了包装类型Number

字符串类型（string）
		字符串时基本数据类型，通常用单引号或者双引号引起来
		提供了包装类型String

布尔类型（boolean）:值为true和false,提供了包装类型Boolean
undefined
		未定义，如果声明了一个变量，但是没有初始化，该变量就是undefined
		
null:表示空，通常作为返回值使用

3.3.变量的定义

		在js中，变量不区分类型，所有的变量都是通过var关键字声明，因此，js是一门弱类型语言

3.4.运算符

js的大部分运算符和java类似
不同之处：
比较运算符："==" 和 "==="
"=="：在比较时，如果两端数据类型不同，则先转换数据类型再比较
"==="：在比较时，如果两端数据类型不同，则直接返回false

typeof：判断变量的数据类型
delete：删除数组中的元素或者对象的属性

3.5.语句

js语句和java基本一致
if条件语句
循环语句：while()、do{}while()、for(){}，注意，js不支持增强for循环

3.6.函数

函数的定义：

function 函数名(形参列表){
函数体
}
==函数的调用：== 函数名(实参列表)

3.7.数组

创建：
var arr1 = new Array(10) //表示创建一个长度为10的空数组
var arr2 = [“abc”,123,true] //创建一个指定初始值的数组

注意：

（1）数组可以存放任意类型的数据
（2）如果一个位置没有元素，该位置的值为undefined
（3）数组的长度可以任意改变

3.8.API

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)：可以执行一个字符串类型的代码

3.9.自定义对象

格式：
		var person = {
		"name":"zhangsan",
		"age":18,
		…}
对象中取值：person.name   或者  person["name"]

4.DHTML

4.1.DHTML概述

DHTML：动态的html
DHTML并非一门新技术，而是将现有的html、css、js整合再一起，形成的技术
DHTML分为BOM、DOM
BOM：浏览器对象模型，将浏览器看作是对象
DOM：文档对象模型

4.2.BOM

window对象
	window对象是全局对象，即方法可以直接调用
事件：
	onclick：点击事件
	onfocus：获得焦点事件
	onblur：失去焦点事件
	onload：文档就绪事件，整个html加载完之后触发

方法：
	alert()：弹出提示框
	confirm()：弹出确认框，返回boolean

4.3.DOM

获取元素

	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，则会连同子元素一起克隆