JS样式
1、行内样式
写在开始标签中
<div onclick="alert('hello’)"></div>
2、内部样式
写在页面中的任何位置都是可以的,一般写在head标签或者body标签中,紧挨着head或body的结束标签
<script> JS代码</script>
3、外部样式
创建一个扩展名为.js的文件,使用script标签的属性src
按照路径去找外部的js
<script src="js文件路径"></script>
【注】:在外部的js文件中,不需要使用script标签
4、伪协议
若是通过js控制超链接进行跳转,则必须使用伪协议
只针对于超链接的,在超链接的href属性的引号里面写入javascript:;
<a href="javascript:;" id="a">点我</a>
<script>
document.getElementById('a').onclick = function(){
alert('超链接伪协议')
}
</script>
JS注释
1、ctrl + / : 单行注释,被注释掉的代码,在页面中不执行
2、多行注释:shift + ctrl + a
修改注释快捷键
文件 - 首选项 - 键盘快捷方式 - 搜索 “注释”
修改:同时按住需要设置的快捷键
JS事件
经过触发之后,元素执行的一些列动作。
onclick | 点击事件 |
---|---|
ondblclick | 双击事件 |
onmousedown | 鼠标的按下事件 |
onmouseup | 鼠标抬起事件 |
onmouseover | 鼠标的经过事件 |
onmouseout | 鼠标的离开事件 |
onmouseenter | 鼠标经过事件 |
onmouseleave | 鼠标的离开事件 |
oncontextmenu | 鼠标的右键事件 |
onmousemove | 鼠标的拖拽事件 |
JS变量
用于存储数据的容器,使用时通过变量名获取变量所代表的值,用关键字 var 来定义变量,使用变量前一定要先声明(定义和赋值)
声明变量方式
1、声明一个变量并赋值
var a = 5;
2、声明多个变量,同时赋值,每个变量之间用逗号隔开
var a = 5,
b = 7,
c = 10,
d = 13;
console.log(a,b,c,d);
3、同时声明多个变量,分开赋值
var num1, num2, num3, num4;
num1 = 12;
num2 = 22;
num3 = 23;
num4 = 34;
变量命名规则
1、使用字母、下划线、$开头
2、由字母、下划线、$、数字组成
3、不能使用关键字(var、if 、else)和保留字
4、使用驼峰命名法(当变量名由两个或两个以上的单词组成时,从第二个单词开始,首字母大写)
5、起名要有语义化(见名知意)
操作标签内容
1、双标签的内容操作
获取内容
元素.innerHTML
元素.innerText
设置内容
元素.innerHTML = ‘新内容’
元素.innerText =‘新内容’
innerHTML和innerText的区别:
innerHTML是可以识别标签的,innerText是不可以识别标签的
2、单标签内容操作
单标签主要是针对的是input标签
获取内容
元素.value
设置内容
元素.value =‘新内容’
操作标签属性
获取属性
元素.属性名
img.src = '';
当一个属性名赋值给一个变量时,要把操作属性的方式由.
的方式改为[]
的方式
var a = 'id';
console.log(spec.id);
console.log(spec[a]);
【注】:class是一个保留字,使用.
的方式,不能获取以及设置类名
操作class使用className
获取class
元素.className
设置class
元素.className = ‘新的class名’
【注】:使用新的class名称,会覆盖前面所有的class
样式操作
1、使用单行操作方式
元素.style.样式名 = ’样式值’
box.style.backgroundColor = 'red';
【注】:
①一次只能设置一个样式,js中不识别-
,若遇到使用驼峰命名法
②js操作的样式都是行内样式
2、组合书写样式
元素.style.cssText = '样式名:样式值;样式名:样式值;…'
box.style.cssText='width: 200px;height: 200px;background-color: red;'
【注】:后面的样式会覆盖前面的样式
解决覆盖: 在等号前面加一个 +
;
解决非标准浏览器:在书写样式的引号里面,接一个;