一．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]);
}

                                                                                                                【本次总结完毕】