什么是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事件