JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
1:Js注意事项:
- 严重区分大小写
- 每段代码结束后需要添加分号(规范)
- 构造函数首字母大写,再驼峰原则
- 函数命名首字母小写,再驼峰原则
2:三种执行Js代码方法(个人推荐):
- 内连写法,再标签上执行js代码(非常古老 不建议使用 且不好管理)
- body > script
- 通过script 上面的src属性来引用js脚本文件(页面上加载,通常这个多)
<div class="box" onclick='alert(1);'>1111</div>
通常这个写法不建议使用,最好参照第三种写法
<script src="JavaScrip路径"></script>
3:获取节点元素:
document.getElementById("id名字"); #通过Id名字获取元素
document.getElementsByTagName("标签名");通过标签名获取元素
document.getElementByName("name属性名");通过name属性的值来获取元素 返回集合(表单较多) innerHTML属性(获取里面的内容)
document.getElementByName("name属性名");通过name属性的值来获取元素 返回集合(表单较多)
innerHTML属性(获取里面的内容)
value(获取默认value值)
4:变量:
- var 关键字 声明一个变量
- 严格模式下,强烈建议加var(不加也可以 可以试一下)
- 变量名定义:字母,数字,下划线,$,数字不能开头,keywor的关键字
- 没有被赋值的变量默认初始化undefined
var a;
var b = 1;
var response = document.getElementByName('id')[0];
response.innerHTML = '123'; (此时里面的内容就变为123);
5:六大数据类型:
- Number 数字
- String 字符串
- Boolean 布尔 true/false
- function 函数
- undefined 为定义
- Object 对象 只有对象才能去.方法.属性
function 函数名() { #函数
};
var obj = {
name:'your name', #object
'age':3
};
6:注册事件(绑定事件,事件监听):
onmouseenter / onmouseover 鼠标划入
onmouseleave / onmouseout 鼠标划出
onmousemove 鼠标移动
onclick 单击左键(使用较多)
ondblclick 双击左键
onkeydown 键盘按下某键
onkeyup 键盘抬起某键
onkeypress 按下键盘并抬起某件
onblur 失去焦点
onfocus 得到焦点
demo1
<div id="box" ></div>
var box = document.getElementById("box");
box.onclick = function(){
aler("点击之后弹出数据")
};
demo2
#box1 {
width: 100px;
height: 100px;
background: red;
}
#box2 {
width: 100px;
height: 100px;
background: pink;
}
<div id="box1"></div>
<button id='sub'>提交</button>
<script>
var btn = document.getElementById('box1');
var sub = document.getElementById('sub');
sub.onclick = function(){
if(btn.id == 'box1'){
btn.id = 'box2'
}else{
btn.id = 'box1'
}
};
</script>
demo3
更改样式
#box1 {
width: 100px;
height: 100px;
background: red;
}
#box2 {
width: 100px;
height: 100px;
background: skyblue;
}
var btn = document.getElementById('box1');
btn.style.width = '300px; #更改宽
btn.style.marginTop = '300px';
btn.style['margin-top'] = '300px';