认真！看清哪个函数哪个参数是否带引号！不要忘了写分号！

概览

css
选择器
布局
JavaScript
语法
对象和API
BOM 浏览器对象模型
DOM 文档对象模式

1、css和HTML的四种结合方式

第一种是最基本的，直接在html标签中用style定义。
在head标签中定义一个style标签，在style中写div{。。。}
引入外部文件：@import url（“ ”）-->升级版：将所有外部css路径放入新的css文件中（称为管理文件），在html中引用该新的外部文件；好处：以后再添加css直接加在管理css文件中就可。
link。。。
属性必须写到style内部，因为style是css的解析器，放其他地方无法解析。

2、css优先级和规范

3、CSS选择器

基本选择器+扩展选择器

基本选择器
- 标签名选择器
  div{ } 、span{ }
- 类选择器---标签中的class属性名称自己可以随意定义。
  .class的名称
- ID选择器
  格式：#id名称---功能与类选择器类似，一般给js语言使用。

ps：①标签名选择器可和类选择器搭配着用，如 div 。 haha{ }----仅div标签中的haha class起作用；
。haha h1{ } ---haha class下的h1标签起作用。
②优先级：标签名选择器<类选择器<ID选择器<style属性

扩展选择器

伪元素选择器：最基本的动态效果
关联选择器
div font{ } div标签下的font起作用。
组合选择器
如： #haha，.hehe{ } 中间用逗号分隔，两者效果相同，相当于#haha{ } + .hehe{ }
伪元素选择器
用于实现一些最基本的动态效果，html中已定义好，可以直接用。如
- 输入伪元素选择器-input：FOCUS{ background-color：red}//当把光标点到该输入框时，输入框北京会变为红色。
- 超链接伪元素选择器 a，使用顺序：LVHA-link、visited、hover、active
  a：link{text-decoration：noe；//无下划线 color：blue；}
  a:hover{ color:red;font-size:25px;}鼠标悬停时变红且字体变为25px。
  具体样式可以自己设置。

4、css的布局：即用css+div进行布局

div是块级元素，每个div后都会跟一个换行；span则不会，多个span会在一个行。如：

可以在id中定义float：left、right，表示某个div会浮动在左侧或右侧。
如div1为float：left，则：
①div2会被漂浮的div1覆盖
②仅当div为float时，其中的文字才会跟着一起浮动，若是因其他div的浮动产生补位，文字会在原位置不动。
③若三个均为float：left，则会在第一排按顺序出现。
可给div指定绝对位置

JavaScript

1、JavaScript概述

弱类型：在内存中声明了一种类型后，还可以存放其它类型，如int a=10；a=“ss”；即弱类型。
JavaScript的组成：
ECAMScript 标准（js的语法，函数，变量）
BOM
DOM

2、js和HTML结合的两种方式

script标签,可以放在任意位置。
<script type="text/javascript">...<script>
引入外部js文件的方式。
<script src="引入的js文件" type="text/javascript"></script>

ps:<script>标签可以放在任意位置，推荐放在body后。因有可能js文件中会引用其他标签的内容，当被引用的内容在<script>之后时可能会出错。

如

3、js语法

(1)

关键字---var 声明变量
标示符---和java一样
注释--和java一样
变量---- 声明变量，只使用一个关键字 var num = 12; var str = "abc";
5种基本数据类型
- Undefined、Null、Boolean、Number 和 String
- String 字符串类型
- js中双引号和单引号都代表的是字符串
- Number 数字类型- 【不区分整数和小数】
- Boolean 布尔类型
- Null 空，给引用赋值的
- Undefined 未定义（声明变量，没有赋值）
typeof() 判断当前变量是什么类型的数据

(2)运算符

算术运算符
- 0或者null是false，非0或者非null是true，默认用1表示。true和false可参加运算。
  var num = 3710;
  alert(num/1000*1000);=3710 不区分整数和小数
赋值运算符: 和java是一样的
比较运算符
== 比较值是否相同
=== 比较值和类型是否相同
逻辑运算符-- 和java中一样
三元运算符-----条件?值1:值2

(3)语句
if、else、for等与Java中一样
可以向叶面输出文本内容：document.write（“文本内容”）;文本内容可以使html代码(也要放在引号内)。每向页面输出一个i=*就换一次行：

（4） js数组

js的数组：区别于java中： java String [] str = {};

（5） js函数+变量

function 方法名称(参数列表) {
方法体;
return;
}
参数列表：不能使用var关键字
返回值：可写可不写的，如果有写返回值，如果没有，返回值可以省略不写。
动态函数和匿名函数
- 动态函数
  Function （“参数列表”，“方法体”）；如：
- 匿名函数
  function（参数）{ }；分号！！既没有函数名
全局变量、局部变量
全局：在<script>标签内部定义的变量。
局部：在函数的内部定义的变量，不管是在函数参数列表还是方法体中定义的。ps：即便该函数在<script>中，也是局部变量。

4、js中的对象

String、Date、Math、Array、正则表达式等对象
参考地址：http://www.runoob.com/jsref/jsref-tutorial.html

String对象

Paste_Image.png

所有方法调用时不要忘记用对象来调用！！！
和java中String对象类似的：

和HTML相关的方法（书写没有提示的）：

Array对象
声明数组的两种方式
var arr = [12,33];
var arr = new Array(4,4);

ps：concat连接的可以使数组和数组，也可以使数组和元素。
Date日期对象----仅列举部分方法，详细定义或方法可去文档查看。
var date = new Date(); 当前的日期
toLocaleString() 转换本地的日期格式
toLocaleDateString() 只包含日期
toLocaleTimeString() 只包含时间
getDate() 返回一个月中的某一天（1-31）
getDay() 返回一周中的某一天(0-6)
getMonth() 返回月份（0-11） +1
getFullYear() 返回年份
getTime() 返回毫秒数
setTime() 通过毫秒数获取日期
parse(str) 解析字符串，返回毫秒数---静态方法！
Date.parse(str);
str：
2014-11-14 解析不了
11/14/2014 可以解析
2014,11,14 可以解析
Math对象（静态的方法）--Math.round(x)
- ceil(x) 上舍入
- floor(x) 下舍入
- round(x) 四舍五入
- random() 0-1的随机数
RegExp对象
应用：编写注册的表单，对表单输入的内容进行校验。
var reg = new RegExp("表达式");（开发中不经常使用）
var reg = /表达式/ 开发中经常使用
** var reg = /^表达式$/ 开发中经常使用。/^表示开始，$/结束**
** 校验：**
exec(string) 不经常使用
如果匹配，返回匹配的结果
** test(string) 经常使用**
如果匹配，返回是true，如果不匹配，返回是false
if(reg.test("abc")){
// 匹配上了
}else{
}
全局函数
使用全局函数，不需要任何的对象。
全局函数可以拿过来使用。
global帮着管理全局函数。
- eval() 可以解析字符串，执行字符串中间的js代码，如
  <script type="text/javascript"> var str = "alert('哈哈')"; eval(str);</script>
  注意，哈哈是用单引号括起来的。
- isNaN() 判断是否是非数字值
- parseInt() 解析字符串，返回整数
- encodeURI() 进行编码--针对中文
- decodeURI() 解析解码
- encodeURIComponent()
- decodeURIComponent()
- escape()
- unescape()

5、BOM对象--浏览器对象模型，每个对象都有自己的方法、属性。

Window-Navigator-Screen-History-Location

事件：onclick，点击事件，可以加在某个按钮上，按钮被点击时调用该方法。

Window 窗口对象（重要）：属性和方法
* alert() 弹出提示框
* confirm("参数") 询问框
* 提供俩按钮，确定和取消
* 如果点击是确定，返回true，如果点击取消，返回false

          * moveBy()          移动浏览器
              
          * setInterval("函数",毫秒值)     定时相关的
              * 每隔毫秒值执行一次函数
              * 返回唯一的id值
              
          * setTimeout("函数",毫秒值)      
              * 到了毫秒值后执行一次函数
              * 返回唯一的id值
              
          * 清除定时
              clearInterval(id的值)     
              clearTimeout()
              
          * close()   关闭浏览器的窗口，用window（表示当前窗口）调用
          * open()    打开浏览器窗口
          
          * 属性：
              * opener 返回对创建此窗口的窗口的引用，即返回源窗口。 
              * win  open()   弹出baidu的窗口
                  
                  在baidu窗口中  baidu.opener 得到了win的引用。

document属性：
document.getElementById("nameId"); 获取到是input标签的对象，然后我们可以通过该对象给该标签做重新赋值等操作：

Navigator 和浏览器版本相关的对象（**）
- userAgent 获取浏览器的相关的信息
- window.navigator.userAgent window可以省略不写
Screen: 和屏幕相关的对象（-*）
History 和浏览器历史相关
back（）返回上一个页面
forward（）去下一个页面
- 可以用go（代替）
  - history.go(1) 等于forward
  - history.go(-1) 等于forward
Location 和浏览器地址相关的对象，调用时用小写调用，location，以上几个对象也是。
href属性：获取和设置浏览器的路径，也可以自己赋值为其他地址，然后点击某按钮时会调用方法，跳到其他网址。
<body><input type="button" value="1号" onclick="run()"/></body><script type="text/javascript"> function run () { alert(location.href="http://www.baidu.com"); }</script></html>
案例：图片移动
onload=“方法” ，作用在<body>标签中，可以在一打开页面时就调用onload的方法。

一、css和js