一、基础语法
1、变量
1)、规则
存储某种/某些数值的存储器,可把变量看成一个盒子。
盒子需要名字,所以。字母、下划线、$、数字组成变量,数字不能开头。
变量区分大小写。
不能用关键字、保留字做变量。
2)、变量声明
用盒子装东西,就得先找到盒子,所以变量需要声明。
var 变量名
- 变量可不声明,直接用,but为了规范,先声明后使用。
3)、变量赋值
= 赋值。
可声明同时赋值,var a=1;
先声明后赋值,var a;a=1;
2、运算符
- 算数运算符 其中+也可以表示连接字符串。
- 自增、自减
- a++ b-- 表示 先执行表达式,后进行自增、减。
- ++a --b表示 先进行自增、减,后执行表达式。
- 比较运算符 结果为布尔值。
- 逻辑运算符 结果为布尔值。
- 与&&
- 或||
- 非!
- 优先级
- 算数>比较>逻辑>赋值运算符
二、数组
1、创建数组
var myarray=new Array();
创建一个新数组存储在myarray变量中。其中数组长度可指定。
var myarray=new Array(8); //创建数组,存储8个数据。
- 新数组是空数组,无值,但有输出,undefined。
- 指定了长度,但可以将元素存储在规定长度外。实际数组是变长的。
2、数组赋值
myarray[0]="xxx";
var myarr=new Array(60,70,80,90,100); //创建数组同时赋值
var myarr=[60,70,80,90,100]; //直接输入一个数组,称之为字面量数组
3、数组加新元素
myarr[新下标]="xxx";
4、调用
myarr[下标];
//注意下:
a[0]=1;a[2]=2;
跳过了a[1]的赋值,若调用则显示undefined
5、数组长度
myarr.length; //获取数组myarr的长度
数组上下限为0~length-1
JS的数组长度可变,如myarr.length=10;就变为了10。
或随着数组元素的增加,也会改变长度, myarr[15]=“xx”;其长度就变为了16。
6、二维数组
myarr[] []
//定义二维数组
var myarr=new Array(); //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值,每个数组元素的值为i+j
}
}
//或
var a=[[0,1,2],[1,2,3]]; //a[1][2]=3
//赋值
a[0][1]=5; 第一行第二列赋值为5
a=[1,2];
b[0]=a;
alert(b[0][1]) //为2
三、流程控制语句
1、if语句
if—else—if—else
2、switch语句
3、for循环
4、while循环
do—while
5、break
退出循环(当前循环),直接执行该循环后面代码。循环,不是判断语句。
6、continue
仅跳过本次循环,而整个循环仍会执行。
四、函数
即可写一次代码多次重复使用。
1、定义函数
function 函数名(){
函数体;
}
2、函数调用
-
在script内调用, 直接写函数名 add2();
-
在HTML中调用
<input type="button" value="click it" οnclick="add2()"> //按钮,onclick点击事件,直接写函数名
3、有参数的函数
function 函数名(参数1,参数2){
函数体;
}
4、返回值函数
return sum; return后面的值叫做返回值。
可通过变量存储调用函数的返回值。 result = sum(2,4);
函数中参数和返回值不只是数字,也可以是字符串等其他类型。
五、事件
事件就是可以被js侦测到的行为。网页的每个元素都可以产生触发js函数或程序的事件。
1、onclick事件
鼠标点击就会触发事件,同时onclick事件调用的程序块会被执行,一般和按钮一起用。
<input name="button" type="button" value="点击提交" οnclick="add2()" />
在网页中,如果使用事件,就在该元素中设置事件属性。
2、onmouseover事件
鼠标经过事件,和onclick方法一样。
<input name="确定" type="button" value="确定" onmouseover="message()"/>
3、onmouseout事件
鼠标移开事件,鼠标移开时,调用。
4、onfocus事件
当网页中的对象获得聚点时,执行onfocus调用的程序。
5、onblur事件
失焦事件,与onfocus相对。
6、onselect事件
内容被选中事件。文本框或文本域中的文字被选中时触发。
7、onchange事件
内容被改变事件。
8、onload事件
加载事件。事件在页面加载完成时触发事件。可理解为加载新页面。
- 加载页面时,触发onload事件,事件写在body内
<body onload="函数名()">
9、onunload事件
卸载事件。当用户退出页面时,页面退出/刷新页面…触发onunload事件
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗?");
}
暂存
获取元素的值设置和获取方法为:例:赋值:document.getElementById(“id”).value = 1;
取值:var = document.getElementById(“id”).value;
使用parseInt()函数可解析一个字符串,并返回一个整数。
六、JS内置对象
1、对象
js中所有事物都是对象,对象包括属性和方法。
- 属性: 对象的特定性质,如字符串长度,图像长度。
- 方法:能在对象上执行的操作,如表单的提交,时间的获取等。
JS内置了一些,如array、date、string
使用对象前要先定义。
var objectName=new array();
或var objectName=[];
访问对象属性
objectName.propertyName
如
var myarray=new Array(6); //定义数组对象
var my1=myarray.length; //访问数组的长度length属性 my1的值为6
访问对象方法 objectName.methodName()
如: 用string对象的toUpperCase()将文本转为大写
var mystr = “hello”; //创建一个字符串
var request = mystr.toUpperCase(); //使用字符串对象的方法
2、Date日期对象
创建Date对象 var udate = new Date(); 使用new关键字,Date首字母大写
此时udate有初始值,即电脑的系统时间。 若自定义,则
var d = new(2020,4,15);
var d = new(“Apr 1 , 2020”); //2020.04.01
- 语法 <日期对象>.<方法>
1)、返回/设置年份方法
get/setFullYear() 四位数表示。
格式:星期、月、日、年、时、分、秒、时区
不同的浏览器格式不一样。myadte.setFullYear(年份);
2)、返回星期方法
getDay() 返回的是0~6之间的数字,0表示星期日。
<script type="text/javascript">
var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中
document.write(mydate.getDay());//输出getDay()获取值
document.write("今天是:"+ weekday[mynum]);//输出星期几
</script>
3)、设置/返回时间的方法
get/setTime() 返回/设置时间。 单位是ms,计算从1970.01.01到时间对象的ms数。
//推迟时间方法。
var mydate=new Date();
document.write("当前时间:"+mydate+"<br>");
mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
document.write("推迟一小时时间:" + mydate);
3、string对象
定义字符串的方法就是直接赋值。
var str = “hello”; 定义str字符串后,就可以直接访问它的属性和方法。
str.length; 返回str的长度
访问对象的方法,str.toUpperCase(); 转大写。
- 返回指定位置的字符,返回的字符是长度为1的字符串。
obj.charAt(index)
index 表示字符串中某位置的数字,即字符在字符串中的下标。
若index不在区间内,返回一个空字符串。 空格也算字符
-
返回指定字符串首次出现的位置。
- ==indexOf()==可以完成
- obj.indexOf(subString,startpos)
- subString必需,规定需要检索的字符串值。
- startpos可选的整数参数,规定在字符串中开始检索的位置。若忽略,则从开始检索
- 这种方法区分大小写,若要检查的东西无,返回-1
-
字符串分割
-
==split()==将字符串分割为字符串数组,并返回此数组。
-
obj.split(separator,limit)
-
separator 必需,从该参数指定的地方分割obj。 若为"",则obj的每个字符都会被分割。
-
limit 可选,分割次数,没有则无限割
-
var mystr = "www.imooc.com"; document.write(mystr.split(".")+"<br>"); //www,imooc,com document.write(mystr.split(".", 2)+"<br>"); //www,imooc
-
-
提取字符串
- substring()用于提取字符串中介于两个指定下标的字符
- obj.substring(start,stop)
- start 必需,一个非负的整数,开始位置。
- stop 非必需,一个非负的整数,结束位置。若无,则直接到结尾。
- 返回的是从start开始,到stop-1的所有字符,长度stop-start
- 若start==stop,则返回空串。
- start大于stop,则提取子串之前都会交换两个参数。
-
提取指定数目的字符
- substr()从字符串中提取从strat开始的固定数目的字符串。
- obj.substr(start,length)
- start 必需,提取的子串起始位置,必须是数值。
- 为负数,则从尾部开始,-1表示倒数第一个字符。
- length 可选,若省略,返回从开始到结束的串。
4、Math对象
提供对数字的科学计算。math对象是固有对象,无需创建,直接把math对象使用就可以调用所有属性和方法可调用其所有属性和方法,所以与string、date有些不同
-
对象属性
-
对象方法
1)、向上取整
ceil()可对数向上取整。
math.ceil(x); x必须为数值。
document.write(Math.ceil(-5.9)) //-5
document.write(Math.ceil(6.3)) //7
2)、向下取整
floor()可以。
math.floor(x); x为数值。
3)、四舍五入
round()可以。
math.round(x); 数值。
如果为对左右两侧的值的距离相等,则结果靠近+∞, 如-5.5 结果为-5。
4)、随机数
random()返回一个介于0~1之间的随机数(大于等于0,小于1)
Math.random();
获取0~10之间的可以这样做------Math.random()*10。
5、Array对象
1)、基础
定义空数组 var 数组名 = new Array();
含有n个空元素的数值 var 数组名 = new Array(n);
定义时,直接初始化数据 var 数组名 = [<元素1>,<2>,…];
数组元素的使用------数组名[下标]=值;
数组属性-----length 数组对象.length------返回长度
数组方法
2)、数组连接
concat()-----用于连接2个或多个数组,此方法返回一个新数组,不改变原来的数组。
obj.concat(arr1,arr2,arr3…)
mya=[1,2];
mya.concat(3,4); /*结果为1,2,3,4*/
3)、指定分隔符连接数组元素
join()把数组的所有元素放入一字符串,元素通过指定的分隔符进行分割。
obj.join(分隔符); separactor----可选,指定要使用的分隔符,若省略,则用逗号做分隔符。
返回一个字符串,该字符串把数组中的各个元素串起来,用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。
<script type="text/javascript">
var myarr = new Array(3);
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join()); //I,love,JavaScript
document.write(myarr.join(".")); //I.love.JavaScript
</script>
4)、颠倒数组元素位置
reverse()
obj.reverse(); //此方法不创建新数组,会改变原数组。
5)、选定元素
==slice()==从已知数组返回选定的元素。
obj.slice(start,end);
- start—必需,若为负数,则从数组尾部开始算起的位置。-1指最后一个元素。
- end—可选,若为负数,则从尾部开始的,不包括end。
此方法不会修改原数组,仅返回子数组
String.slice()与Array.slice()类似。
可用负数从数组尾部开始。
6)、数组排序
==sort();==使元素按一定的规则排序
obj.sort(方法函数);
方法函数可选,规定排序顺序,必须为函数。
- 不指定函数,按Unicode排序。
该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
若返回值<=-1,则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1,则表示 A 和 B 具有相同的排序顺序。
若返回值>=1,则表示 A 在排序后的序列中出现在 B 之后。
七、BOM
1、window对象
window对象是BOM的核心,指当前浏览器窗口。
2、计时器
- 一次性计时器,仅在指定的延迟时间后触发一次。
- 间隔性计时器,每隔一定时间间隔就触发一次。
方法 | 说明 |
---|---|
setTimeout() | 指定的延迟时间后执行代码 |
clearTimeout() | 取消setTimeout()设置 |
setInterval() | 每隔指定的时间执行代码 |
clearInterval() | 取消setInterval()设置 |
-
setInterval(代码,交互时间);
-
代码:要调用的函数或要执行的代码串。
-
时间:周期性执行或调用表达式之间的间隔,以毫秒计。
-
返回值:==clearInterval()==从而取消对代码的周期性执行的值。
-
setInterval("clock()",1000) 或 setInterval(clock,1000)
-
-
clearInterval(id_of_setInterval)
-
id…由setInterval()返回的ID值。
-
/*每隔100ms调用clock函数,并且将返回值赋给i*/ var i = setInterval(clock,100); <input type="button" value="Stop" onclick="clearInterval(i)"/>//点击按钮,停止计时器。
-
-
setTimeout(代码,延迟时间)
- 仅执行一次。
-
clearTimeout(id_of_setTimeout)
- 由setTimeout返回的ID值,该值标识要取消的延迟执行代码块。
3、history对象
标识历史浏览页面,与浏览器后退前进类似。
窗口被打开开始记录,每个浏览器窗口,标签页、框架都有自己的history对象与特定的history对象关联。
window.history.[属性|方法]
window可省略。
-
history属性,length-------返回浏览器历史列表中的url数量。
-
方法
- back()——加载history列表中的前一个URL
- window.history.back();
- forward()——加载下一个URL
- window.history.forward();
- go()——加载history列表中的某个具体页面
- window.history.go(number);
- back()——加载history列表中的前一个URL
back==go(-1), forward() ==go(1)。
4、location对象
用于获取或设置窗体的URL,并且可以用于解析URL。
location.[属性|方法]
属性
方法
属性 | 描述 |
---|---|
assign() | 加载新文档 |
reload() | 重新加载当前文档 |
replace() | 用新文档替换当前文档 |
5、navigator对象
包含浏览器的信息,通常用于检测浏览器与操作系统的版本。
- 对象的属性
属性 | 描述 |
---|---|
appCodeName | 浏览器代码名的字符串表示 |
appName | 返回浏览器的名称 |
appVersion | 返回浏览器的平台和版本信息 |
platform | 返回运行浏览器的操作平台系统 |
userAgent | 返回由客户机发送服务器的user-agent头部的值 |
- userAgent——返回用户代理头的字符串表示(就是包括浏览器版本信息等字符串)
navigator.userAgent
6、screen对象
用于获取用户的屏幕信息
window.screen.属性
screen.height 返回屏幕分辨率的高
screen.width 返回屏幕分辨率的宽
screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如任务栏。
screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如任务栏。
八、DOM
文档对象模型,定义访问和处理HTML文档的标准方法。
DOM将HTML呈现为带有元素、属性、文本和树结构(节点树)
DOM由节点构成的集合,DOM节点有:
- 元素节点:标签,html、head、p…
- 文本节点:可向用户展示的,如< li > < /li>中的js、dom、css等文本。
- 属性节点:元素属性,如a标签链接属性href=“xxx”
节点属性
遍历节点树
DOM操作
前两个为document方法。
1、getElementsByName()
返回带有指定名称的节点对象的集合。
document.getElementsByName(name)
与byid不同,这是通过name属性查找。
- 文档中name属性不唯一,所有的通过此方法返回的是元素的数组,不是一个元素。
- 和数组类似,有length属性,可像访问数组一样,从0开始。
2、getElementsByTagName()
返回带指定标签名的节点对象集合,返回元素的顺序是他们在文档中的顺序。
document.getElementsByTagName(TagName);
标签的名称,如p、a、img…
和数组属性一致有length属性。
byid|byname|bytagname区别
以人为例
id及身份证,唯一;name可以重复,所以不唯一;tagname可看作相同一类人的集合,如小孩这类人。即某类。
<input type="checkbox" name="hobby" id="hobby1"> 音乐
类 名字 身份证
3、getAttribute()
elementNode.getAttribute(name)
- node通过byname或tagname等方法获得。获取元素节点
- 要查询的元素节点的属性名
<li title="xxx">html</li>
var con=document.getElementByName("li");
var a = con.getAttribute("title"); //xxx
4、setAttribute()
增加一个指定名称和值的新属性,或把一个现有的属性设为指定的值。
elementNode.setAttribute(name,value)
- name——要设置的属性名
- value——要设置的属性值
只能通过元素节点对象调用的函数。
5、节点属性
在DOM中,每个节点都是一个对象,DOM节点有三个属性
- nodeName:节点的名称
- nodeValue:节点的值
- nodeType:节点的类型
一、nodeName 属性: 节点的名称,是只读的。
\1. 元素节点的 nodeName 与标签名相同
\2. 属性节点的 nodeName 是属性的名称
\3. 文本节点的 nodeName 永远是 #text
\4. 文档节点的 nodeName 永远是 #document**二、nodeValue 属性:**节点的值
\1. 元素节点的 nodeValue 是 undefined 或 null
\2. 文本节点的 nodeValue 是文本自身
\3. 属性节点的 nodeValue 是属性的值三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
1)、访问子节点childNodes
访问选定元素节点下的所有子节点的列表,返回的值可看作是一数组,具有length属性。
elementNode.childNodes
若不含子节点,则该属性返回不含节点的nodelist
空白节点也算,在IE不算。
*访问子节点的最后和第一项。
- firstChild属性返回childNodes的数组第一个子节点,若无,返回NULL
node.firstChild
elementNode.chileNodes[0]是同样效果
- lastChild返回最后一个
node.lastChild
与elementNode.childNodes[elementNode.childNodes.length-1]效果一样
2)、访问父节点 parentNode
获取指定节点的父节点
elementNode.parentNode
父节点只能有一个
- 访问祖节点
elementNode.parentNode.parentNode
3)、访问兄弟节点
nextSibling属性可返回某节点之后紧跟的节点(在同一树等级中的)
nodeObject.nextSibling 若无此节点,返回NULL
previousSibling返回某节点之前紧跟的节点
4)、插入节点
在指定节点的最后一个子节点列表之后加一个新的子节点
appendChild(newnode)
var otest = document.getElementById("test");
var newnode = document.createElement("li");
newnode.innerHTML="newnode";
otest.appendChild(newnode);
insertBefore()在已有的子节点前面插入一个新节点。
insertBefore(newnode,node);
insertBefore(newnode,xx.childNodes[0]);
5)、删除节点
removeChild()从子节点列表中删除,成功返回被删除的节点,失败则NULL
nodeObject.removeChild(node);
function clearText() {
var content=document.getElementById("content");
for(var i=content.childNodes.length-1;i>=0;i--){
var childNode = content.childNodes[i];
content.removeChild(childNode);
}
}
6)、替换元素节点
replaceChild()实现子节点(对象)的替换,返回被替换的对象的引用
node.replaceChild(newnode,oldnode);
new必须先建立,old被替换时,所有与之相关的属性内容都被移除
7)、创建元素节点
createElement(),返回一个Element对象。
document.createElement(tagName);
tagName字符串值,此串用来指明创建元素的类型。
与insertBefore()或者appendChild()连用
8)、创建文本节点
creatTextNode()创建新文本节点,返回新创建的Text节点。
document.createTextNode(data)
data----字符串值,可规定此节点的文本。
6、浏览器窗口可视化
window.innerHeight-------窗口内部高度
window.innerWidth-------窗口内部宽度
document.documentElement.clientHeight------HTML文档所在窗口的当前高度
document.documentElement.clientWidth------HTML文档所在窗口的当前宽度
或者document对象的body属性对应的HTML的body标签
document.body.clientHeight
document.body.clientWidth
1)、网页尺寸----scroll
scrollHeight 和 scrollWidth,获取网页内容高度和宽度
可小于client
2)、网页尺寸----offest
offestHeight和offestWidth,获取网页内容高度和宽度,包括滚动条等边线,会随窗口的显示大小改变。
offestHeight=clientHeight+滚动条+ 边框
3)、网页卷去的距离和偏移量
**scrollLeft:**设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。
**scrollTop:**设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。
**offsetLeft:**获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
**offsetTop:**获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
区分大小写
offsetParent:布局中设置postion属性(Relative、Absolute、fixed)的父容器,从最近的父节点开始,一层层向上找,直到HTML的body。