一.JavaScript简介
1.JavaScript是一种弱类型的脚本编程语言
2.JavaScript是由三部分组成:ECMAScript、DOM、BOM。
3.ECMAScript规定了JavaScript的基础语法、数据类型。
4.DOM(Document Object Model)文档对象模型,主要用于操作HTML元素。
5.BOM(Browser Object Model)浏览器对象模型,用于与浏览器进行操作。
6.引入方式:
(1)在HTML内部的中编写js代码
(2)引入外部js文件:
二.JavaScript的数据类型与变量
1.数据类型:String,boolean,number,null,undefined,Object;
2.JavaScript的变量是弱类型的
3.声明变量的方式:
4.判断变量的数据类型:typeof(变量名)
5.注意:判断数据类型时typeof并不是总有效,还可以使用instanceof关键字判断
例1(定义变量并判断其类型):
........................................
三.函数
1.自定义函数声明:
例2:(函数的建立)
注意:js在调用一个函数时,如果这个函数有参数,我们在调用时可以不传参,少传参,多传参,语法上不会报错,arguments属性可以接收传过来的参数,以数组形式保存
例3(arguments属性的使用):
主要代码:
function argumentsShow(){
var sum=arguments[0]+arguments[1]+arguments[2];
alert(arguments.length)
alert(sum)
}
argumentsShow(10,20,23,54,54,65,7,89)
运行结果:
四.DOM操作HTML
可以通过document获取HTML里的元素节点(html标签),称为DOM对象;
1.document常用的方法:
(1)getElementById(“id值”)通过元素的ID获取DOM对象
(2)getElementsByName("name值") 通过元素的name属性值获取一组元素
(3)getElementsByTagName("tag名") 通过元素的标签名获取一组元素
2.DOM对象的常用方法:
(1)setAttribute("属性名","属性值"); // 设置DOM对象的属性
(2)getAttribute("属性名");
3.DOM对象的属性:
(1)DOM对象的innerHTML属性代表对应的html元素中包含的html内容
(2)DOM对象的其他属性与html元素中的属性对应
例4(DOM操作HTML:复选框函数):
请选择你曾经工作过的公司
京东
谷歌
阿里巴巴
腾讯
百度
360
小米
全选/全不选
手动全选:
全不选:
五.BOM操作浏览器
1.window对象是BOM的顶级对象(代表浏览器)
2.Location代表地址栏
(1)常用属性:location.herf=”要跳转的地址”;
(2)常用方法:location.reload()刷新页面;
3.history代表浏览器历史列表:
常用方法:
(1)history.back();//后退到上一个浏览页面;
(2)History.go(n);//n可以为正数或者负数;
例4(BOM操作浏览器展示):
BOM实现自动开关灯
利用BOM实现自动开关灯
例5(BOM中的location的使用):
运行结果:
........................
例6(BOM历史记录的操作):
六.JavaScript改变CSS样式
1.语法:
DOM对象.style.样式属性名=样式属性值
2.例:
(1)DOM.style.Visibility=”hidden”隐藏元素;
(2)DOM.style.visibility=”visible”显示元素;
例7(利用js改变CSS样式):
外部CSS代码:
#wai{
width: 590px;
margin-left: 370px;
height: 470px;
border: 1px solid darkgray;
}
#shi{
width: 590px;
height: 180px;
border: 0px solid black;
text-align: center;
font-size: 14px;
}
#tu{
width: 590px;
border: 0px solid black;
height: 270px;
background-image:url(../img/u=331322561,735315717&fm=27&gp=0.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.anniu{
width: 590px;
margin-left: 370px;
height: 40px;
border: 0px solid black;
text-align: right;
}
input{
margin-top: 15px;
}
img{
display: none;
}
#shi1{
width: 590px;
height: 210px;
border: 0px solid black;
text-align: center;
font-size: 14px;
}
#tu1{
width: 590px;
border: 0px solid black;
height: 240px;
background-image: url(../img/u=1873429136,1954675529&fm=27&gp=0.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
body{
background-image: url(../img/u=2026787301,2338968328&fm=27&gp=0.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
外部Js代码:
//切换图片
var falg1=true;
function nexttu(){
if(falg1){
var tu= document.getElementById("tu");
tu.style.backgroundImage="url(img/timg.jpg)"
falg1=false;
}else{
var tu= document.getElementById("tu");
tu.style.backgroundImage="url(img/u=331322561,735315717&fm=27&gp=0.jpg)"
falg1=true;
}
}
//显示元素
function jsVisible(){
var aVisible=document.getElementById("tu");
aVisible.style.visibility="visible";
}
//显示元素2
function jsVisible1(){
var aVisible=document.getElementById("tu1");
aVisible.style.visibility="visible";
}
//隐藏元素
function jsHidden(){
var aVisible=document.getElementById("tu");
var img=document.getElementsByTagName("img");
aVisible.style.visibility="hidden";
img.style.display="block";
}
//隐藏元素2
function jsHidden1(){
var aVisible=document.getElementById("tu1");
var img=document.getElementsByTagName("img");
aVisible.style.visibility="hidden";
img.style.display="block";
}
Html代码1:
JS操作CSS样式
古诗文欣赏
春望
国破山河在,城春草木深。
感时花溅泪,恨别鸟惊心。
烽火连三月,家书抵万金。
白头搔更短,浑欲不胜簪。
Html代码2:
JS操作CSS样式
古诗文欣赏
饮酒
结庐在人境,而无车马喧。
问君何能尔?心远地自偏。
采菊东篱下,悠然见南山。
山气日夕佳,飞鸟相与还。
此中有真意,欲辨已忘言。
运行结果:
点击切换配图:
点击隐藏配图:
点击显示配图:
后续操作不再展示
七.JavaScript自定义对象
1.方式一:通过Object的构造函数从无到有地构建一个对象(“空手套白狼的”的方式)
格式语法:
例8(自定义构造函数):
运行结果:
2.方式二:通过定义一个函数作为“模板”,实例化一个对象:
3.方式三:通过“字面量”方式定义对象:
var 对象名={key1:value1,key2:value2...};
如何遍历对象?
for...in语法糖
for(var key in per){
alert(key+"======>"+per[key]);
}
【本次总结完毕】