JavaScript
JavaScript
一. JavaScript
JavaScript::是基于对象与实践驱动的解释性脚本语言;
- 基于对象: js是一种基于对象的语言,这意味着他能运用自己已经创建的对象,因此,许多功能可以来自脚本环境中对象的方法与脚本的相互作用;
- 事件驱动:JavaScript可以直接对用户或者客户输入做出相应,无需经过web服务器,它对用户的响应,以时间驱动的方式进行;
- 解释性:浏览器可以直接识别和解析js代码;
二 . 引入方式
- 行间引入: <标签 属性名=“属性值”></标签>
- 内嵌:
<script></script>
script可以有多个,可以存放在任意位置,一般放在head标签中或者body的末尾,建议加在body的末尾;
执行顺序:从上外下执行,遇到script标签之后会暂停往下执行,先执行script标签中的内容,等script标签中的内容执行完之后,才会继续往下执行。 - 外链引入:
<script src="地址"></scrtipt>
三. 变量
- 变量:储存数据的容器;
- 声明方式:var 变量名 = 值;
- 命名规则:
- 只能以字母、_、$开头;
- 不能只用关键字和保留字;
- 见名之意,遵循驼峰标识;
- 不要重名;
四. 调试命令
- 调试:看出值的多少,值的变化;
alert():在页面弹,一次只能弹一个;
console.log():在控制台打印;
五. 使用方法
- 首先要找到谁:
document(在文档中).get(获取)Element(标签)By(通过)Id("id名");
- 添加什么事件:如:
onclick
,标签.事件; - 要做什么事情:标签.事件 = function(){要做的事情},
document.getElementByuId("id名").事件名(如:onclick) = function(){alert("这里是弹框");}
六. window.onload的作用
window.onload :等文档和资源都加载完成之后调用;
七. 鼠标事件
onclick:点击事件;
onmouseover:鼠标移入 / onmouseenter;
onmouseout : 鼠标移出 / onmouaeleave;
onmousemove : 鼠标移动;
onmousedown:鼠标按下;
onmouseup:鼠标抬起;
ondblclick:双击;
oncontextmenu:右击;
八. 操作标签样式
标签样式是指在style中书写的样式值,如width:100px;
语法:
获取:标签.style.属性名
设置:标签.style.属性名 = 属性值;
注意:所有的样式都是这个语法,但是有一个特殊,就是有"-"符的样式,例如:font-size,js中不允许出现-,使用驼峰标识fontSize;
var oDiv = document.getElementById("box");
oDiv.onmouseover = function () {
oDiv.style.background = "skyblue";
oDiv.style.width = "200px";
oDiv.style.fontSize = "26px";
}
九. cssText
相当于是一个style属性,设置cssText会覆盖掉之前行间的style属性
oDiv.style.cssText = "width:200px:background:red;font-size:16px;";