JS笔记（一）

第一章：

编写JS流程：

　　　　1、  布局：HTML和CSS

　　　　2、  样式：修改页面元素样式，div的display样式

　　　　3、  事件：确定用户做什么操作，onclick(鼠标点击事件)、onmouseover(鼠标悬停)、onmouseout(鼠标移出)

　　　　4、  编写JS：在事件中，用JS来修改页面元素样式

　　　　5、  原理：响应用户的操作，对页面元素进行样式修改

第二章：

Javascript基础：

JS代码的引入：

外部链入式：

<script type=”text/javascript” src=”js文件路径”></script>

内部js:

<script>js代码</script>

数据类型：

var a=12;

数值类型number

alert(typeof a);

字符串string

a="hello";

alert(typeof a);

布尔类型boolean

a=true;

alert(typeof a);

函数类型function

a=function(){};

alert(typeof a);

对象object

a=document;

alert(typeof a);

没有定义的类型undefined

alert(typeof a);

• 变量名的命名规则：不以数字开头大小写字母、数字、下划线命名；（区分大小写）；常用命名规则：驼峰命名法，首字母小写后面单词首字母大写开头；如：getDingShiQi
• 变量的转换：

parseInt(值);   将一个值转换为Int数据类型

parseFloat(值); 将一个值转换为float数据类型

隐式转换：

Var a=5, b=”5”, c=”2”;

先转换类型，再比较:

a==b;

不转换类型，直接比较

a===b;

不转换类型，+为连接符

a+b;

先转换类型，再进行运算,+为运算符

a+b;

• 变量的作用域：

　　　　　　1、  全局变量：位于函数体外部的变量，所有函数均可调用与赋值；

　　　　　　2、  局部变量：位于函数体中的变量，仅仅为其所在函数体中使用，其他函数定义相同的变量名不会冲突；

• 闭包：子函数可以使用父函数里定义的函数

• 求余运算符：%                var a=34; var c = a%10;  c为4；

• 判断语句   Switch 语句：

语法：

switch(值或者变量)

{

case 值:

语句块；

break;

case 值:

语句块；

break;

default:

语句块；

}

判断switch括号里面的值与case的值是否相等、相等则执行case 里的语句块，遇到break;则结束，否则继续执行下面的其他case里面的语句块直至遇到break; 跳出。若判断case里面没有相符合的，则执行default 下的语句块，这里的default相当于else

• break,continue的区别： 一般在循环体中使用这两；break;跳出全部循环；continue; 跳出本次循环
• 真假：为boolean数据类型；

　　　　1、  非0的数字为真，0为假；

　　　　2、  非空字符串为真，空字符串为假；

　　　　3、  非空对象为真，空对象为假；

　　　　4、  Undefined为假；

• 可变参arguments 调用函数时传递多个参数形成一个arguments数组；可以直接用下标调用

它，如arguments[0];

• 提取非行间样式[只能用id的方式]：currentStyle为ie里面的

语法：document.getElementById("div1").currentStyle.width;

getComputedStyle 为firefox里面的

语法：window.getComputedStyle(oBj,null).width;

• 数组基础：

声明一个数组：var Arr = new Array();

声明并初始化：var Arr = [1,2,3,4,5];

Arr.push();        在数组尾部添加一个或者多个元素，并返回一个新的长度；

Arr.pop();          在数组尾部删除并返回最后一个元素；

Arr.unshift();    在数组头部添加一个或者多个元素，并返回一个新的长度；

Arr.shift();         在数组头部删除并返回第一个元素；

Arr.sort();           对数组进行排序；按照默认顺序排序；

Arr.join(“,”);      在数组原有元素间插入元素”,”

Arr.concat(Brr);        连接Arr和Brr数组返回新的数组

第三章：

定时器：var 定时器名=setInterval(tick, 1000);      设置定时器，每隔1000毫秒调用tick函数构建图片的src属性值

Var 定时器名=setTimeout(tick, 1000);  设置定时器，隔1000毫秒调用tick函数构建图片的src属性值

清除定时器：

clearTimeout(定时器名);

clearInterval(定时器名);

第四章：

offsetLeft();   语法：oBj.offsetLeft(); 返回当前元素距离父元素左边缘的距离；

第五章:

InnerHTML       语法：oBj.innerHTML;     innerHTML具有双向功能，通过它可以获取标签元素内容与设置标签元素内容；

• 子节点和父节点：

　　　　　　childNodes获取子节点   childNodes返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。childNodes.length获取长度

利用children来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

　　　　firstChild来获取第一个子元素

　　　　使用firstElementChild来获取第一个子元素的时候，会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。

　　　　 parentNode获取父节点

　　　　parentElement和parentNode一样，只是parentElement是ie的标准。

　　　　offsetParent获取所有父节点

　　　　其实这个是于位置有关的上下级 ，直接能够获取到所有父亲节点， 这个对应的值是body下的所有节点信息。

欢迎来指正与提问。

第一章：

编写JS流程：

1、  布局：HTML和CSS

2、  样式：修改页面元素样式，div的display样式

3、  事件：确定用户做什么操作，onclick(鼠标点击事件)、onmouseover(鼠标悬停)、onmouseout(鼠标移出)

4、  编写JS：在事件中，用JS来修改页面元素样式

5、  原理：响应用户的操作，对页面元素进行样式修改

第二章：

Javascript基础：

JS代码的引入：

外部链入式：

<script type=”text/javascript” src=”js文件路径”></script>

内部js:

<script>js代码</script>

数据类型：

var a=12;

数值类型number

alert(typeof a);

字符串string

a="hello";

alert(typeof a);

布尔类型boolean

a=true;

alert(typeof a);

函数类型function

a=function(){};

alert(typeof a);

对象object

a=document;

alert(typeof a);

没有定义的类型undefined

alert(typeof a);

变量名的命名规则：不以数字开头大小写字母、数字、下划线命名；（区分大小写）；常用命名规则：驼峰命名法，首字母小写后面单词首字母大写开头；如：getDingShiQi

变量的转换：

parseInt(值);   将一个值转换为Int数据类型

parseFloat(值); 将一个值转换为float数据类型

隐式转换：

Var a=5, b=”5”, c=”2”;

先转换类型，再比较:

a==b;

不转换类型，直接比较

a===b;

不转换类型，+为连接符

a+b;

先转换类型，再进行运算,+为运算符

a+b;

变量的作用域：

1、  全局变量：位于函数体外部的变量，所有函数均可调用与赋值；

2、  局部变量：位于函数体中的变量，仅仅为其所在函数体中使用，其他函数定义相同的变量名不会冲突；

3、 

闭包：子函数可以使用父函数里定义的函数

求余运算符：%                var a=34; var c = a%10;  c为4；

判断语句   Switch 语句：

语法：

switch(值或者变量)

{

case 值:

语句块；

break;

case 值:

语句块；

break;

default:

语句块；

}

判断switch括号里面的值与case的值是否相等、相等则执行case 里的语句块，遇到break;则结束，否则继续执行下面的其他case里面的语句块直至遇到break; 跳出。若判断case里面没有相符合的，则执行default 下的语句块，这里的default相当于else

break,continue的区别： 一般在循环体中使用这两；break;跳出全部循环；continue; 跳出本次循环

真假：为boolean数据类型；

1、  非0的数字为真，0为假；

2、  非空字符串为真，空字符串为假；

3、  非空对象为真，空对象为假；

4、  Undefined为假；

可变参arguments 调用函数时传递多个参数形成一个arguments数组；可以直接用下标调用

它，如arguments[0];

提取非行间样式[只能用id的方式]：currentStyle为ie里面的

语法：document.getElementById("div1").currentStyle.width;

getComputedStyle 为firefox里面的

语法：window.getComputedStyle(oBj,null).width;

数组基础：

声明一个数组：var Arr = new Array();

声明并初始化：var Arr = [1,2,3,4,5];

Arr.push();        在数组尾部添加一个或者多个元素，并返回一个新的长度；

Arr.pop();          在数组尾部删除并返回最后一个元素；

Arr.unshift();    在数组头部添加一个或者多个元素，并返回一个新的长度；

Arr.shift();         在数组头部删除并返回第一个元素；

Arr.sort();           对数组进行排序；按照默认顺序排序；

Arr.join(“,”);      在数组原有元素间插入元素”,”

Arr.concat(Brr);        连接Arr和Brr数组返回新的数组

第三章：

定时器：var 定时器名=setInterval(tick, 1000);      设置定时器，每隔1000毫秒调用tick函数构建图片的src属性值

Var 定时器名=setTimeout(tick, 1000);  设置定时器，隔1000毫秒调用tick函数构建图片的src属性值

清除定时器：

clearTimeout(定时器名);

clearInterval(定时器名);

第四章：

offsetLeft();   语法：oBj.offsetLeft(); 返回当前元素距离父元素左边缘的距离；

第五章:

InnerHTML       语法：oBj.innerHTML;     innerHTML具有双向功能，通过它可以获取标签元素内容与设置标签元素内容；

子节点和父节点：

childNodes获取子节点   childNodes返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。childNodes.length获取长度

利用children来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

firstChild来获取第一个子元素

使用firstElementChild来获取第一个子元素的时候，会获取到父元素第一个子元素的节点这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。

parentNode获取父节点

parentElement和parentNode一样，只是parentElement是ie的标准。

offsetParent获取所有父节点

其实这个是于位置有关的上下级，直接能够获取到所有父亲节点，这个对应的值是body下的所有节点信息。