JS笔记

JS笔记

js顺序

1，获取标签，元素

2，确定事件

3，具体操作

1， onmouseover="wenzi.style.display='block';"

on mouse over

onkeypress 在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。[响应一个键]

onkeyup 在用户放开任何先前按下的键盘键时发生。

onkeydown 在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。[响应几个键的组合]可以响应Ctrl、Alt、Shift等功能键和键的组合，而onkeypress不能

onfocusout 失去光标事件

onfocus 获得光标事件

onabort 图片下载被打断时

onblur 元素失去焦点时

onclick 鼠标点击

ondblclick 鼠标双击

onerror 加载文档或图片发生错误时

onmousedown 鼠标被按下时

onmousemove 鼠标被移动时

onmouseout 鼠标离开元素时

onmouseover 鼠标经过元素时

onmouseup 释放鼠标按键时

onunload 用户离开页面时

on操作：几乎每一个事件前面都要加上on

mouse:鼠标，表示这是一个鼠标事件

over：鼠标悬浮

out：鼠标离开

onclick  on+click  鼠标左击事件

click: 鼠标点击

js是一种基于事件驱动的语言。

事件：用户的操作还有其他的一些操作。

2. wenzi.style.display

id

. 相当于中文的“的”

点前面的是具有某个属性的集合或者叫做对象

点后面的是前面的对象的属性(特征)或者方法（行为）。

文字的style的display

面向对象：

var ergouzi = {};

ergouzi.height = 180;

ergouzi.age = 18;

ergouzi.eat=function(){

}

3. =的作用：

赋值号，将某个值赋值给某一个量。

4. ;的作用：

表示一条代码的结束，每一条完整的代码在结束的时候需要加上一个分号，让浏览器知道这个语句结束了。可以执行了。

需要注意的在JS里面分号之后如果其他代码是另起一行的话，这个分号是可以省略的，但是作为规范，我们每一句话后面都要自觉的加上分号。

以后再代码部署的时候有可能会压缩JS代码，也需要具有规范的代码格式。

oDiv.onclick = function(){

oDiv.style.display = 'block';

oDiv.style.height = '200px';

}

5. 函数：不是数学中的函数

计算机里面函数其实就是一堆代码的封装。对外就是某一个功能的实现，类似于机器上的按钮。

函数的格式

// function 是函数的关键字

// over 是函数名

// ( )  传递参数

// { }  里面去实现功能，类似于CSS的{}

function over(){

//代码实现

}

函数的使用

func_name();    函数名+();

6. 第一个兼容问题：

能否直接使用元素的ID来进行操作元素的属性。

需要获取出来这个元素。JS提供了一个方法。

document.getElementById('元素的id名称');

7. 变量：可以变化的量叫做变量。 var x = 4; 8+x

常量：不可以变化的量叫做常量。  4    9+4

变量也可以理解成一个容器。

var: 告诉浏览器，我后面的是一个变量。

8. document.getElementById('oDiv') 根据元素的id获取元素对象

JS的组成

ECMAScript 约等于JavaScript 语法核心

DOM： document object model  文档对象模型

BOM： browser object model  浏览器对象模型

get Element By Id  为了好记忆

获取  元素  根据  id

9. 注释

HTML的注释 <!-- 注释的内容 -->

CSS的注释  /* 注释的内容 */

JS的注释：

单行注释： // 注释的内容

多行注释： /*

注释的内容

注释的内容

*/

10. 驼峰命名法

大驼峰：

GetName    每一个单词的首字母都要大写。

一般命名对象以及类

小驼峰：

getElementByID 每一个单词的首字母大写，第一个单词除外。

一般命名变量以及函数

11. 下划线命名法

每一个单词之间使用下滑线连接。

例如：user_name

12. 标识符命名规则：也就是起名字的规则。

1.字母数字下划线$组成

2.一般是一字母或者$开头的。不能以数字开头

3.起名字尽量使用英文，可以使用中文或者汉字但是不推荐

4.要有意义，不要使用a,b,c单字母定义。

13. background-image:url();

如果要修改的属性是复合属性，那么要修改属性的名字，改为驼峰命名法。

obj.style.backgroundImage='url()';

14. true | false  布尔值 真和假

15. ==  判断是否相等

16.if判断

if(box.checked == true){

box.checked = false;

}else{

box.checked = true;

}

if(判断){

}

if(判断){

}else{

}

17.<a href="javascript:alert(1);">点击</a>

  a标签的href属性里面是可以实现js代码的。

18. 奇葩的class

一般来说我们操作标签的属性都是直接使用属性名进行操作。

如果遇到CSS里面的复合属性，我们把它改变成驼峰命名法

19. 操作属性的第二种方法

  第一种 obj.style.属性名 = 属性值

  第二种 obj.style[属性名]= 属性值

  区别：第二种是可以接受一个变量名为属性名

  但是如果接受的是一个具体的属性字符串，那么需要添加引号[]。

20. js的三种输出方式：

1.alert(); 提示窗口

2.console.log(); 在控制台输出

3.document.write();在文档调用本段js的地方输出

21.变量与字符串：

变量是一个容器，里面是用来存放东西的，可以使数字，也可以是字符串，也可以是对象，也可以是其他的东西，比如说布尔值。

字符串：一串字符

变量是可以接收字符串

也就是说在定义字符串的时候，可以使用单引号也可以使用双引号，

在代码中使用到字符串的时候必须要加上引号，使用变量的时候不需要（不能加）。

22.通过js的obj.style.样式操作的是元素的行间属性。

行间样式：直接写在HTML元素style属性中的样式

内部样式：写在HTML头部的style标签里面的样式

外部样式：通过link或者@import引入的外部样式

23优先级

如果样式没有冲突，那么所有的设置效果都会显示。

如果样式冲突 行间>所有。

外部样式与内部样式谁距离标签近，谁的优先级高

在操作元素样式的要统一，要不全部使用行间样式操作，要不全部统一为操作元素的类

24.js代码是按照从上到下的顺序加载的，执行也是从上到下的顺序。一行代码执行完之后，再加载下一行代码。一个页面中script标签有很多，他的执行也是从上到下。

25.匿名函数，当一个函数直接赋值的时候，这个时候函数不需要具有名字，类似的比如赋值事件，赋值给变量都不需要名字。

26.window.onload 页面加载事件，当整个页面所有的HTML标签加载完成的时候，会自动的触发这个事件，有了这个事件我们不需要考虑js的位置，写在onload事件函数里面的代码会在页面加载完成的时候执行。

27.js规范 自己写的js一般书写在body之前，所有的页面标签之后。

28.行间事件的提取 样式表现，行为与内容相分离。首先通过js获取出来要添加事件的标签，然后给这个标签添加指定的事件处理函数，最后实现函数。

29.页面添加js的方式

行间 a标签的href 行间事件

内部 写在script标签里

外部 通过script标签的src属性引入

30.一旦script标签通过src属性引入了外部的js文件，这个标签内部就不能写任何js代码。

31.document.getElementByTagName

获取的是一组数据，即便里面符合条件的只有一个，那么也是一组数据。

get  Element  s  By  Tag Name

获取 元素    们  根据  标签 名

32.document.getElementByClassName（他不会变色）

获取的是一组数据，即便里面符合条件的只有一个，那么也是一组数据。

get  Element  s  By  ClassName

获取 元素    们  根据  类名

33.while('条件'){

符合条件执行，如果一直符合，那就一直循环。

最后有一个改变条件，不然就是死循环。

}

34.if('条件'){

符合条件执行，只循环一次。

}