一.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.声明变量的方式:
Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等

4.判断变量的数据类型:typeof(变量名)
5.注意:判断数据类型时typeof并不是总有效,还可以使用instanceof关键字判断
Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等

例1(定义变量并判断其类型):



    
        
        
    
    
        
    
    

运行结果:
Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第1张图片

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第2张图片

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第3张图片

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第4张图片

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第5张图片

........................................
三.函数
1.自定义函数声明:
Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等

例2:(函数的建立)



    
        
        
    
    
        
    
    

运行结果:
Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第6张图片

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第7张图片

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第8张图片

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第9张图片

注意: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)

运行结果:

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第10张图片

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第11张图片

四.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
小米

全选/全不选

运行结果:
单选:
Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第12张图片

手动全选:

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第13张图片
点击全选:

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第14张图片
全不选:
Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第15张图片
五.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实现自动开关灯

运行结果:
鼠标移上等后:
Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第16张图片
鼠标离开等后:

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第17张图片

例5(BOM中的location的使用):



    
        
        
    
    
    
    
        





运行结果:

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第18张图片
点击百度:

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等
........................
例6(BOM历史记录的操作):



    
        
        
    
    
    
        
        

       

运行结果:
Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等

返回点击下一个按钮:
Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等

六.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样式
    
    
    
    
        

古诗文欣赏

饮酒


结庐在人境,而无车马喧。

问君何能尔?心远地自偏。

采菊东篱下,悠然见南山。

山气日夕佳,飞鸟相与还。

此中有真意,欲辨已忘言。

运行结果:

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第19张图片

点击切换配图:

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第20张图片

点击隐藏配图:

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第21张图片

点击显示配图:

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第22张图片

点击下一首:
Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第23张图片

后续操作不再展示

七.JavaScript自定义对象
1.方式一:通过Object的构造函数从无到有地构建一个对象(“空手套白狼的”的方式)
格式语法:
Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第24张图片

例8(自定义构造函数):



    
        
        
        
    
    
    

运行结果:

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第25张图片

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第26张图片

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第27张图片

2.方式二:通过定义一个函数作为“模板”,实例化一个对象:

Java学习总计(二十五)——JavaScript:变量,函数,DOM,BOM,以及操作CSS等_第28张图片

3.方式三:通过“字面量”方式定义对象:
var 对象名={key1:value1,key2:value2...};
如何遍历对象?
for...in语法糖
for(var key in per){
alert(key+"======>"+per[key]);
}

                                                                                                                【本次总结完毕】