getElementById
字面意思,分开四个单词。通过如下案例,可以改变HTML上的内容:
注意严格按照大小写
<p id="demo">改变 HTML 内容</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我</button>
按一下后(onclick)查找 id 为 demo 的HTML 元素,并把元素内容更改为(innerHTML) “Hello JavaScript!”
<button onclick="document.getElementById('Image').src=' ' ">点击我</button>
innerHTML 换为 src 将可以改变获取图片路径,即改变了 HTML 内 src 的属性值
<button type="button" onclick="document.getElementById('demo').style.fontSize='66px'">点击我</button>
指定CSS style 的 fontSize 属性进行改变其值
<button type="button" onclick="document.getElementById('demo').style.display='none'">点击我</button>
改变元素 display 属性值为 none 可使原本显示的指定元素隐藏
改变元素 display 属性值为 block 可使原本隐藏的指定元素显示
函数
JavaScript 代码像 CSS 一样需在特定标签内,CSS 为<style>
JavaScript 代码必须位于 <script>
与 </script>
标签之间,如:
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML = "这个段落已被更改";
}
</script>
</head>
<body>
<h2>JavaScript代码位置</h2>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">点击我</button>
</body>
function 定义一个函数myFunction,并在 HTML 内引用
代码亦可放在
<body>
元素内,但是建议把脚本置于 元素的底部,可改善显示速度,因为脚本编译会拖慢显示
外链 .js 文件
<script src="xxx.js"></script>
JavaScript 显示方案
- 使用 innerHTML 写入 HTML 元素
- 使用 document.write() 写入 HTML 输出
- 使用 window.alert() 写入警告框
- 使用 console.log() 写入浏览器控制台
- innerHTML 属性
该属性可以改变一个 HTML 元素内的内容
- document.write() 属性
<h1>一张网页</h1>
<p>一个段落</p>
<button onclick="document.write(5 + 6)">点击我</button>
由以上案例可以说明在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
- window.alert() 属性
使用警告框来显示数据
- console.log() 属性
使用 console.log() 方法来在控制台显示数据
JavaScript语句建议
以分号结束语句不是必需的,但仍然强烈建议这么做
在运算符旁边( = + - * / )添加空格是个好习惯
常把代码行控制在 80 个字符以内,如果 JavaScript 语句太长,对其进行折行的最佳位置是某个运算符
在脚本的开头声明所有变量是个好习惯
驼峰式大小写
使用驼峰式大小写将单词连接起来作为标识符,以小写字母开头的驼峰大小写
var x = "8" + 3 + 5;
x 值是 835
var x = 3 + 5 + "8";
x值是 88
如果对数字和字符串相加,结果将是字符串
typeof 运算符
typeof 运算符返回变量或表达式的类型
typeof 运算符对数组返回 “object”,因为在 JavaScript 中数组属于对象
布尔值 boolean;字符 string;数值 number;函数 function;
没有值的变量,其值是 undefined,任何变量均可通过设置值为 undefined 或 null 进行清空,因为在 JavaScript 中 null 的数据类型是对象,所以使用 null 清空的话值是 null 但是类型仍然是对象
Undefined 与 null 的值相等,但类型不相等
空值与 undefined 不是一回事,空的字符串变量既有值也有类型