最近学习JS的笔记(一)

第一章:

编写JS流程:

1、 布局:HTML和CSS

2、 样式:修改页面元素样式,div的display样式

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

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

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

熟悉流程能事半功倍哦。

第二章:

Javascript基础:

。JS代码的引入:

1、外部链入式:

2、内部js:

。数据类型:

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、 局部变量:位于函数体中的变量,仅仅为其所在函数体中使用,其他函数定义相同的变量名不会冲突;

Fun

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

求余运算符:%

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数组;可以直接用下标调用

它,如arguments[0];

提取非行间样式[只能用id的方式]:

currentStyle为ie里面的

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

getComputedStyle 为firefox里面的

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

注:()里面只有第一个参数有意义,就是传一个对象,因为这个方法定义的时候是必须传两个参数的,所以第二个可以传任意参数,为了好看大家约好了传null或者false

数组基础:

、声明一个数组: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下的所有节点信息。

欢迎来指正与提问。

感谢 · 转发

欢迎留言

许来日方长,有几人来往

如果你也是只刺猬,请拥抱我

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180411G1V4IV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券