JS笔记.docx
- 文档编号:6274422
- 上传时间:2023-01-05
- 格式:DOCX
- 页数:28
- 大小:33.81KB
JS笔记.docx
《JS笔记.docx》由会员分享,可在线阅读,更多相关《JS笔记.docx(28页珍藏版)》请在冰豆网上搜索。
JS笔记
第一章基础语法3
1在页面中使用js代码3
(1)直接使用:
标签中插入3
(2)在html中任意位置声明写入3
(3)导入js文件3
2语法规则4
3.常量4
4.变量4
5.命名规则:
4
6.注释:
5
7.数据类型5
(1)值类型:
5
(2)引用类型5
(3)获取变量类型函数5
(4)强制类型转换函数6
[1]parseInt()、parseFloat()和Number():
数值型强转函数6
[2]Boolean():
布尔型强转函数。
6
[3]String():
字符串强转函数6
8.运算符7
(1)算术运算符:
7
(2)自增/减运算符:
7
(3)比较运算符7
(4)赋值运算符7
(5)逻辑运算符7
第二章控制语句8
一、if条件语句8
1.if语句8
二、几个js中常用的函数9
三、switch语句9
四、while循环10
六for循环10
七、两个关键字10
第三章数组11
一、定义11
二、声明11
三、属性11
四、获取数组元素11
五、数组方法12
1.连接数组12
2.添加元素12
3.删除元素12
4.提取数组元素13
5.分隔符13
6.反转元素:
reverse():
将数组元素的全部位置左右反转。
13
7.数组元素排序:
sort([function(a,b){}])13
8.数组转换成字符串13
六、遍历数组14
第四章函数14
一、定义14
二、匿名函数15
三、全局变量和局部变量15
四、prototype16
五、JS的三种方法16
第五章常用对象17
一、Math对象17
二、Numbe对象18
三、document对象18
四、Date对象19
五.时间对象:
19
七.DOM对象20
1.把文档中标签转换DOM对象。
20
2.DOM对象的作用20
3.DOM对象的几个事件句柄:
21
4.DOM对象的offset相关属性22
八、自定义对象22
1定义方式22
六、String对象23
1.创建23
2.常用属性23
3.常用方法23
第六章节点处理25
一、定义和分类25
二、节点内容25
三、节点之间的关系26
四、节点的控制:
创建、添加、删除、插入、克隆、替换26
1.创建26
2.添加26
3.删除节点26
4.插入节点27
5.克隆节点:
相当于复制,但不会粘贴。
27
6.替换子节点27
7.节点应用知识:
27
第七章正则表达式29
一、定义29
二、正则表达式作用:
29
三、声明29
1.显示声明29
2.隐式声明29
3.模式修饰符29
四、正则表达式字符30
五正则常用方法31
六前瞻31
总结:
33
1.调用JS三种办法:
直接插入、声明写入、导入JS文件33
2.声明常量与变量:
const和var33
3.六大数据类型:
引用function,string,object和值类型:
number、undefined,boolean33
4.强制类型转换:
parseInt();parseFloat();Number();String();Boolean()。
33
5.逻辑运算:
a||b(a或b,trueafalseb)和a&&b33
6.js常用函数:
33
7.控制语句:
34
8.三元表达式:
a>b?
a:
b;34
9.声明数组和数组方法34
10两种函数声明方式(基本和引用),以及调用方法。
34
11.函数体中(有var声明)是局部变量,否则是全局变量34
12.常用对象和其方法34
13.DOM35
(1)获取和设置DOM对象35
(2)获取相关节点对象35
(3)控制节点对象35
第一章基础语法
1在页面中使用js代码
(1)直接使用:
标签中插入
(2)在html中任意位置声明写入
alert(11);
(3)导入js文件
2语法规则
执行顺序:
从上到下,从左到右。
每行结尾加分号。
3.常量
声明常量:
const常量名=值。
constAGE=’27岁’;
4.变量
[1]先声明再赋值:
varage;age=31;
[2]声明同时赋值:
varage=31;
[3]一个关键字声明多个变量:
vara,b,c;a=1;b=1;c=1;
vara=1,b=2,c=3;
5.命名规则:
常量:
用大写英文单词
变量:
①字母或下划线开头,数字/字母/下划线组成;
②不能使用关键字作为变量名;
③区分大小写;
6.注释:
//单行注释/*多行注释*/
7.数据类型
(1)值类型:
[1]number(数字型):
包括整数和浮点数
NaN非数字和Infinity无穷大是number型。
[2]undefined(未定义):
未声明的或未赋值的变量。
[3]boolean(布尔型):
true、false
(2)引用类型
[1]string(字符串):
单引号或双引号之间的所有字符。
单引号不能嵌套单引号,双引号不能嵌套双引号。
反斜杠可转义引号成字符。
[2]object(对象):
null空值是object型;
[3]function(函数):
(3)获取变量类型函数
typeof(varName);返回数据类型字符串。
返回值是小写字符串,如’string’
(4)非数字判断函数
isNaN(a):
判断a是否是一个非数字,是返回true;不是返回false。
(5)强制类型转换函数
[1]parseInt()、parseFloat()和Number():
数值型强转函数
①字符串类型:
parseInt()和parseFloat():
只有字符串中的第一个数字会被返回,若第一个字符不是数字则转成NaN。
Number():
字符串只能是数字字符,才能转为数字,否则为NaN
②未定义类型:
undefined->NaN:
③对象类型:
object->NaN;null->0
④布尔类型false->0;true->1;;
⑤程序发生数学运算时,程序将自动将运算符两边的值转换为number型。
[2]Boolean():
布尔型强转函数。
””/undefined/null/0和NAN:
五种->flase其他->true
[3]String():
字符串强转函数
undefined/null/true和false/NaN,0,数字转换成相对应的字符串
注:
对象用toString()方法转换成字符串:
对象若存在,则转成的字符串就是toString()返回的值;若不存在,则为undefined。
8.运算符
(1)算术运算符:
+加-减*乘/除%余
+两边有一边是字符串,则作为字符串连接符。
(2)自增/减运算符:
++i;--i;先自增/减,后赋值。
i++;i--;先赋值,后自增/减
(3)比较运算符
>大于>=大于等于
<小于<=小于等于
==等于===全等:
类型相同,值相等。
!
=不等!
==不全等。
(4)赋值运算符
=赋值
+=将左边的变量加上右边的变量,再赋给左边变量。
(5)逻辑运算符
[1]||或运算:
a||b;当a或b有一个为true,返回true。
如果a转换后为true,表达式的值就为a的值
如果a转换后为false,表达式的结果就为b;
[2]&&与运算:
a&&b;当a和b都为true的时候返回true,否则为false
a可能为数字、字符串、表达式
如果a转换后为true,表达式的值就为b的值。
如果a转换后为false,表达式的结果就为a;
[3]!
非运算:
取反。
a||b取值口诀:
//当a为true时取a和a为false时取b
a或b,trueafalseb
a与b,truebfalsea//与运算结果和或运算相反。
9.对话框函数
(1)confirm():
确认对话框,
确定按钮,返回true。
取消按钮,返回false。
例子:
varfan=confirm(‘确认吗’);
if(fan){
alert(你刚刚点击了确认按钮);
}else{
alert(‘你刚刚点击了取消按钮’);
}
(2)prompt(a[,b]):
输入对话框,
确定按钮,返回输入的值。
取消按钮,返回false。
参数a:
提示输入内容;b:
输入框默认值。
第二章控制语句
1.if语句
if(条件){}
if(条件){}else{}
if(){}elseif(){}elseif(){}elseif(){}else{}
2.switch语句
switch(变量a){
case值1:
语句块;break;
case值2:
语句块;break;
…
default:
语句块;}
变量a:
只能是一个数字,
当某个case中的值和switch中的变量值相等,那么就执行后边相应的代码块,如果所有case的值都不满足,那么就执行default中的内容。
如果没有break,那么程序在执行到相应的case后边的代码块之后,直接执行下一个代码块,并且不会对下一个case的值进行比较。
注:
break:
终止本循环。
continue:
结束本次循环,继续下一次循环。
3.while循环
初始值;
while(循环条件){
循环体;
}
循环条件为true,就循环执行循环体,直到循环条件为false,才跳出循环。
4.do{}while()语句
先执行do{},后判断while(条件)。
条件不满足则不再循环,所以至少能运行循环一次。
5.for循环
for(初始值;条件;步长值){循环体}
6.三元表达式
a>b?
a:
b;
条件?
结果a:
结果b;
条件为真时,返回结果a,假时返回结果b。
第三章数组
1.定义
数组:
用一个变量来存放多个有顺序条理的数据。
js数组中可以存放任意类型数据。
数组长度可变。
(可以删除数组元素)
数组的数据类型是object。
数组元素可以是表达式。
2.声明
(1)显示声明
vararr=newArray([数组元素]);
(2)隐式声明
vararr=[数组元素]
3.获取数组元素
数组下标从左到右,从arr[0]开始。
4.属性
(1)length:
返回数组长度值
varl=arr.length;
说明:
字符串也有length属性。
5.方法
(1)控制元素
[1]添加元素
.push(元素/数组):
向数组的末尾添加一个或更多元素,并返回新的长度。
.unshift(元素/数组)向数组的开头追加一个或多个元素,并返回新的长度。
添加多个元素时,元素之间逗号隔开;
如果添加的数组,原数组新的元素为一个数组,此时原数组变成二维数组。
[2]删除元素
.pop():
移除最后一个元素并返回该元素值。
.shift():
移除第一个元素并返回该元素值,数组中元素自动前移。
.splice(a[,b][,c]):
(删除元素开始下标,删除个数,替换内容);
返回删除元素组成的新数组。
①a表示删除下标为a的元素以及其后的元素。
②(a,b)表示从下标为a的元素开始,删除b个元素
③(a,b,c):
表示添加或替换,返回一个空数组。
(因为元素个数没减少,所以为空。
)
注:
(1)c可以是多个要添加的新元素:
(a,b,val1,val2,valn)。
(2)c可以是一个数组:
(a,b,arr)
(3)a:
表示新元素插入位置。
(4)b:
表示从下标为a的元素之前开始替换b个元素;
b为0时,表示在下标为a的元素之前,用c替换0个元素,即添加新元素;
c中新元素个数小于b时,删除未替换完的元素。
[3]提取数组元素
.slice(a[,b]):
提取从下标为a的元素到下标b的前一个元素。
不改变原数组。
如果b缺省,则提取a后面的所有元素。
如果b<=a,则提取空。
如果b>arr.length,等同于缺省。
[4]反转元素:
reverse():
将数组元素的全部位置左右反转。
[5]数组元素排序:
数组名.sort(自定义排序函数名);如arr.sort(zeng)
①自定义排序函数
functionzeng(a,b){returna-b}
functionjian(a,b){returnb-a}
②排序规则:
ASCII码顺序先排字符第一位,再比较字符第二位。
。
。
[6]遍历数组
for(vari(即数组下标)in数组名){循环体;}
i,初始值为0,每循环一次自动加1,循环次数由数组元素个数决定。
(2)控制数组
(1)连接多个数组
.concat(arr1,arr2,arrn):
连接两个或更多的数组,并返回连接后的新数组。
如:
vararr3=arr.concat(arr1);注:
顺序连接。
(2)将数组转换成字符串
[1]arr.toString():
将arr数组转换成字符串,字符之间用逗号连接。
[2]arr.join(@):
将数组arr中所有的元素用@连接成一个字符串。
[3]运算转换varstr=arr+’’:
将组数元素连接成字符串。
第四章函数
1.声明
(1)基本形式:
function函数名([形参列表]){函数体[return]}
(2)引用形式:
var函数名=function([形参列表]){函数体[return]}
(3)return说明:
一个函数只能有一个返回值,但想返回多个值可以返回一个数组。
return:
把函数产生的结果,返回给函数外部使用。
return只能在函数内部使用,且一个函数可以有多个return。
。
return具有终止函数继续向下执行的功能。
等价于break。
(4)两种声明函数方式的比较:
①以相同形式声明的同名函数,总是后声明的覆盖先声明。
②以基本形式声明的函数会提前加载到内存中;
以引用形式声明的函数,总是在代码执行到的时候才会加载。
于是,引用形式声明的同名函数,总是会覆盖以基本形式声明的同名函数。
③以基本形式声明的函数,可以在函数声明之前进行调用,但引用形式声明的函数只能在声明后调用。
2匿名函数
js中没有函数名的函数就是匿名函数。
(略)
3.函数调用:
函数名(实参列表);
①实参给形参赋值是,从左到右依次赋值。
②没有赋值的,其值为undefined。
③实参比形参多,多的实参不报错不影响。
④arguments(下标):
获取实参列表参数值。
⑤arguments.length:
获取参数列表个数。
4.全局变量和局部变量
①在函数内部:
有var声明的变量是局部变量;外部不能访问局部变量。
无var声明的变量是全局变量,哪怕没有在函数外声明。
②如果在函数内部有一个局部变量和全局变量同名,那么在函数内访问时,首先访问的局部变量;
如果要访问全局变量,则需要使用:
window.全局变量名获取
③在函数内部声明的局部变量会声明提前。
5.函数原型属性prototype
每一个构造函数都有一个属性叫做原型(prototype)。
prototype是一个对象,给prototype的属性添加属性或方法,这些属性或方法将会成为使用这个构造函数创建的对象的通用属性。
functionFish(name,color){
this.name=name;
this.color=color;
}
Fish.prototype.price=20;
Fish.prototype.getPrice=Function(){
returnthis.price;
}
varx=newFish();
alert(x.getPrice());
6.JS的三种方法
①对象方法
functionPeople(name){
this.name=name;
this.Introduce=function(){
alert("Mynameis"+this.name);
}
}
②类方法
People.Run=function(){
alert("Icanrun");
}
③原型方法
People.prototype.IntroduceChinese=function(){
alert("我的名字是"+this.name);
}
//测试
varp1=newPeople("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese();
第五章JS内置对象
1.Math对象
①max(a,b[,n])、.min(a,b[,n]):
返回所有数字中最大值或最小值。
②random():
返回0~1之间的随机数。
不包括0、1。
输出0~9的数:
document.write(Math.floor(Math.random()*10));
③ceil()、.floor():
对一个数进行向上/下取整。
④round():
四舍五入取整。
注:
Math对象的方法返回的数据类型都是Number型。
如Math.random()
2.Numbe对象
Number.toFixed(保留小数的位数)
例子:
varnum=13.37;
document.write(num.toFixed
(1));
3.Date对象
(1)创建当前时间的Date对象:
var变量名=newDate();
(2)常用方法
Date():
返回当天的日期和时间。
getDate():
返回月份的某一天。
getMonth():
返回表示月份的数字。
getDay():
返回表示星期的某一天的数字。
使用getHours(),getMinutes()以及getSeconds()来显示当前的时间。
(3)计时事件
[1]定义:
在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。
我们称之为计时事件。
[2]创建计时对象
var对象名=setTimeout("javascript语句",毫秒)
[3]清除计时对象
clearTimeout(对象名)
[4]应用
在函数内部调用计时事件,达到死循环效果。
functionfn(){
varsw=$('sp').offsetWidth;
varnum=Math.ceil(sw/pw*100)
if(sw $('sp').style.width=sw+2+'px'; $('sp1').innerHTML=num+'%' } setTimeout(fn,20); } [5]类似方法 setInterval(函数名/”js语句”,时间毫秒): 每隔多少时间之后执行函数或者JS语句一次。 clearInterval(时间对象): 清除setInterval时间对象。 4.String对象 (1)两种创建字符串方式的区别 varstr=”abc”;str数据类型是字符串,但也可以调用String对象的方法和属性。 var变量名=newString(“值”);变量名数据类型是对象 (2)属性 length: 返回字符串长度。 (3)方法 [1)改变字符: .sub(): 把字符串显示为下标; .sup(): 上标。 .toLowerCase(): 把字符串转换为小写。 .toUpperCase(): 大写。 replace(正则/子字符串,用于替换的字符串): 用字符串来替换子字符串或正则表达式匹配的字符串。 返回替换后的字符串。 [2]查找字符 charAt(index): 返回下标指定位置的字符。 超出则返回为空。 indexOf(substr[,index]): 返回String对象内第一次出现子字符串位置。 如果没有找到子字符串,则返回-1。 参数: substr子字符串;index开始下标,下标缺省则默认从0开始。 lastIndexOf(substr[,index]): 返回String对象中字符串最后出现的位置。 如果没有匹配到子字符串,则返回-1。 参数: substr子字符串;index结束下标,下标缺省则父字符串长度。 search(正则/子字符串): 返回与正则表达式查找内容匹配的第一个字符串的位置,或返回子字符串第一次出现位置。 如没找到,返回-1。 .match(正则/子字符串): 在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,如果是字符串搜索,返回找到子字符串,没找到返回空字符串。 如果是正则搜索,找到返回数组,没找到返回null。 [3]截取字符 slice(start[,end]): 提取起始到结束下标的子字符串。 substr(start[,length]): 返回指定位置开始的,提取指定长度的子字符串。 length缺省,则提取到末尾。 start可为负数。 子字符串查找,只替换第一次找到的字符串; 正则表达式查找,除非全局匹配,也只能替换第一次找到的字符串。 substring(x,y): 返回String对象中下标x,y之间的子字符串。 x,y哪个值小就是起始位置。 .split(正则/字符串): 取掉字符串或正则,把断开的原字符串分割为字符串数组。 5.document对象 1.属性: .title: 获取/设置文档标题; .bgColor: 获取/设置文档背景色; .fgColor: 获取/设置文档内容颜色。 2.方法 (1)输出方法 write()、writeln() (2)获取和控制节点对象 createElement(tag): 根据指定标记创建一个HTML标签 getElementById(id): 获得指定id的HTML元素 getElementByName: 获得指定名称的HTML元素的数组 getElementByTagName: 获得指定标签名称的HTML元素的数组 第六章节点对象(DOM) 1.定义 (1)DOM对象 DocumentObjectModel文档对象模型。 DOM对象,有时我们也叫DOM元素。 D即html、xml文档(标签); O即把文档中内容(标签),转换为Object对象; M即模型,程序设计一钟架构。 (2)节点定义和类型 HTMLDOM中,每个部分都是节点。 可分为: ①文档节点: 即文档本身; ②元素节点: 即: 所有HTML元素; ③属性节点: 所有HTML属性; ④文本节点: HTML元素内的文
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JS 笔记