Review word
1.新建 index.html
2.新建main.js
之后在 index 中引入main. js
引入的位置在</body>之前
在index 文件中添加
<h1></h1>
3.打开mian.js 敲入以下代码
var dom=document.querySelector('h1');
dom.innerText='Review word';
4.使用浏览器打开index页面。
整个过程可以简括为两布
var dom=document.querySelector('h1');
使用 querySelector 获取到 h1对象存放dom中,
dom.innerText='Review word';
使用innerText在 dom插入文字
其中 dom 可以称为一个变量
js 的变量有 字符、数字、数组、对象等并且任何的物体都可以存储在对象中
js 运算符
+ : 1+1、 'sss'+'ss'
- * / :减乘除
= :赋值
===: 判断是否相等
! 、 !== 非运算
test:
varmain_noodles='noodles';
if(main_noodles==='noodles'){
alert('eat noodles')
}else{
alert('eat nothing')
}
结果
对话框:使用了alert() 函数弹出计算后的结果,下面使用prompt 来获取输入的值
var name=prompt('input your name');
var namedom=document.querySelector('h3');
namedom.innerText=name;
获取到 输入的值 然后将它赋值为H3
如果你看到一些东西长得像变量名但是有括号 —()— 在后面,这可能就是一个函数。函数通常包括arguments— 一些必要的参数。它们在括号内部, 如果有一个以上参数则使用逗号分开。
使用localstorage and 方法
function useStorage(name) {
ocalStorage.setItem('name',name);
}
useStorage(name)
调用函数将name 存在localstorage 中 key 为‘name’
var resultname=localStorage.getItem('name');
namedom.innerText=resultname;
6.获取 属性
在index 中添加一张图片
<img src='jboox.jpg'/>
varimgdom=document.querySelector('img');
imgdom.onclick=function() {
varsrc=imgdom.getAttribute('src');
if(src==='jbook.jpg'){
imgdom.setAttribute('src','windows.jpg')
}else{
imgdom.setAttribute('src','jbook.jpg')
}
}
为 图片添加点击事件,判断src 属性,来进行图片替换。