JS学习日记01

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;'

【注】：后面的样式会覆盖前面的样式
解决覆盖： 在等号前面加一个 +;
解决非标准浏览器：在书写样式的引号里面，接一个;