javaScript基础

什么是JavaScript？

• 是轻量级的面向对象的编程语言（脚本语言）
• 特点：面向对象、解释性、动态性、弱类型、跨平

JavaScript的组成？

• ECMAscript:是js的标准
• DOM（document  object  modul）：文档对象模型，定义操作html的属性和方法
• BOM（borwser  object  modul）:浏览器对象模型，定义了浏览器的属性和方法

ECMAscript 于JavaScript的关系？

• ECMAscript 是JavaScript的标准；
• JavaScript是ECMAscript 的一种体现

变量的命名规则

• 使用数字，字母，下划线和$符号
• 不能以数字开头；
• 不能使用关键字和保留字；
• 推荐使用驼峰命名法

文档就绪事件：

window.onload = function(){ 
      ...
    }

如果直接把js放入head中，会报错。因为页面时从上向下执行的，当运行到js代码时，页面的标签还没有加载出来，获取不到，所以要添加文档就绪事件，让页面加载完再执行js代码　

简单的一个交互思路：

var oBox = document.getElementById('box');

  - 绑定事件
    oBox.onclick = function(){ 
    }

  - 事件发生时做什么
    oBox.onclick = function(){ 
        //这里面写事件发生时要执行的所有操作
    }

js操作标签的样式：

    element.style.样式属性 = 值;
    oBox.style.backgroundColor = "red";
  
  * 样式属性名中带  '-'  ,都转换成驼峰命名  例如 font-size  --> fontSize

  - cssText 批量操作css样式  ,相当于设置标签上的style属性值
  
    oBox.style.cssText = "100px;height:100px;background-color:red;";

操作标签的内容：

  - 1-闭合标签
    - innerHTML : 设置或者获取标签之间的HTML代码
    - innerText : 设置或者获取标签之间的文本(不能识别标签)
    
    ```
      oBox.innerHTML = "<h1>hello</h1>";
       //浏览器显示：hello
      oBox.innerText = "<h1>hello</h1>";
       //浏览器显示：<h1>hello</h1>
    ```

  - 2- 表单元素的值
    - value : 获取或者设置表单元素的值

    ```
      oInp.value = "张三";
    ```

操作标签属性

``` 
    <div id="box" class="red">
    <img src="img/pic.jpg" alt="替换文字">
    <a href="" target="_blank">
    <form action="" method="">
    <input type="" name="" checked>
    <option seleted></option>
  ``` 
 - 标签上的属性大部分情况都是直接用元素 .属性名 ,比如 

  ```
    oBox.id = "box";
    oImg.src = "img/pic.jpg";
    oLink.href = "http://www.ujiuye.com";
  ```
 - class属性比较特殊 ,需要用className属性访问 (因为class是js中的关键字)
  
  ```
    oBox.className = "red"
  ```
  ```
    box.className = "box red";
  ```
 - 标签属性的值正常情况都是标签上怎么写的,获取回来就是什么,
   checked和selected属性使用 true 和 false 表示是否选中

 - 设置单选按钮复选框下拉列表选项选中状态也是使用true和false,true表示选中,false表示取消选中
   ```
      radio.checked = true;
   ```

常用的鼠标点击事件：

  - onclick  单击事件
  - ondblclick 双击事件
  - oncontextmenu  右键菜单事件
  - onmousedown  鼠标按键按下
  - onmouseup   鼠标按键抬起
  - onmouseover  移入事件
  - onmouseout   移出事件
  - onmouseenter   进入事件
  - onmouseleave   离开事件
  - onmousemove   移动事件
  
- onmouseover和onmouseenter区别: 鼠标从子元素上移入移出,会反复触发父元素的over事件
- onmouseout和onmouseleave区别: 鼠标从子元素上移入移出,会反复触发父元素的out事件