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

概览

• 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的方法。