Java Script基础
Java Script是脚本语言
JavaScript 是面向对象的语言,但 JavaScript 不使用类。
在 JavaScript 中,不会创建类,也不会通过类来创建对象
document.getElementById("XXXX");获取ID为XXX的元素
可以改变其内容或者元素样式甚者可以是图片。
x=document.getElementById("XXXX");
x.innerHTML="Hello JavaScript"; //改变内容
x.style.color="#ff0000"; //改变样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.gif"; } else { element.src="/images/pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
JS也可以验证输入
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var x=document.getElementById("demo").value;//获取ID为demo的元素值 if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){ alert("不是数字"); }
Java Script可以在head中也可以在body中
也可以保存在外部文件中 扩展名是.JS
如果使用外部文件. src属性设置.JS文件
<script src="myScript.js"></script>
PS:外部脚本不能包含 <script> 标签
Java Script没有打印和输出语句
可以通过不同的方式来输出数据
常用的window.alert(); document.write(); innerHTML修改内容 console.log();
变量用Var定义
局部变量在函数内,函数外定义的是全局变量,HTML中全局变量为window对象
函数function定义
Java Script语句是发给浏览器的命令
Java Script可以创建对象 有属性也可以有方法 调用和C#一样 person.属性 person.方法()
例如:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var person={ firstname : "John", lastname : "Doe", id : 5566 fullName : function() { return this.firstName + " " + this.lastName; } };
在字符串中添加转义字符来使用引号 例如:
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符
JS可以先使用变量在定义变量。
严格模式,可以消除一些不合理,不严谨的地方,列如上面没有变量定义却可以使用。
使用"use strict"
变量名推荐使用驼峰法来命名(camelCase)
JS HTML DOM 文档对象模型
JS通过documen对象操作 可以改内容 改CSS
点击事件功能也可以通过JS函数来操作
addEventListener() 方法用于向指定元素添加事件句柄。
语法:element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
一个元素可以添加多个句柄。
事件传递有两种方式:冒泡与捕获。
在冒泡中,内部元素的事件会先被触发,然后再触发外部元素。
在捕获中,外部元素的事件会先被触发,然后才会触发内部元素的事件。
addEventListener(event, function, useCapture);
useCapture默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
移除句柄
element.removeEventListener("mousemove", myFunction);