天天看点
返回

JS笔记之第七天

API的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

  • 任何开发语言都有自己的API
  • API的特征输入和输出(I/O)
  • API的使用方法(console.log())

Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的教程中有其它含义

常见的浏览器提供的API的调用方式

https://developer.mozilla.org/zh-CN/docs/Web/API

JavaScript的组成

ECMAScript - JavaScript的核心

定义了javascript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM又称为文档树模型

  • 文档（document）：一个页面可以称为文档（把一个HTML文件看成是一个文档，由于万物皆对象，所以把这个文档看成是一个对象。XML文件也可以看成是一个文档）
  • 根元素：HTML页面中都有一个根标签---HTML，又叫根元素
  • 节点（node）：页面中所有内容都是节点（标签、属性、文本、注释等）
  • 元素（element）：网页中的标签（页面中的每个标签都是一个元素，每个元素都可以看成是一个对象，标签可以嵌套，标签中有标签，又叫元素中有元素，）
  • 属性：标签的属性
  • 根（root）

可以这么理解：页面中有一个根元素（HTML），里面有很多元素（有很多的标签，有很多的对象））

文档>节点>元素>属性

（学习DOM就是在操作文档里面的标签、属性等）

由文档及文档中的所有的元素（标签）组成的一个树形结构图，叫树状图（DOM树）

模拟文档树结构

DOM经常进行的操作（作用）

  • 获取元素
  • 动态创建元素
  • 对元素进行操作(设置其属性或调用其方法)
  • 事件(什么时机做相应的操作)

用案例的方式进入DOM世界

小案例：点击按钮弹出对话框

可以把下面的案例复制到编辑器打开先体验体验

<body>
<input type="button" value="按钮" id="btn" />
<script>
//点击按钮弹出对话框
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
    alert("弹框");
};
</script>
</body>

点击按钮弹出对话框

点击是一个行为，是一个操作。在HTML它是一个事件。

事件是什么呢？事件指的是一件事。

事件应该有事件源、触发和响应

按钮被点击弹出对话框

在操作的过程中，按钮是被点了才会弹出对话框。

按钮指的是：事件源

点击指的是：事件（可以叫做事件的名字）

被点击：指的是触发了

弹框：指的是响应

<input type="button" value="按钮" id="btn" />这是一个按钮，里面应该要有事件，事件里面写的代码就是响应之后的内容

onclick 点击事件。凡是看到on开头的，都可以把它当成是一个事件。

推论:

第一种方式：

<input type="button" value="显示效果" onclick="alert('第一个弹框')" />

在HTML代码里面嵌入了js的代码。缺陷：不方便后期的修改和维护

第二种方式：

<script>
    function f1() {
        alert("弹框");
    }
</script>
<input type="button" value="显示效果" onclick="f1()" />

（函数里面可以写很多的代码）在script里面调用函数，给HTML代码onclick这个变量调用此时并未做到真正的html和JS代码的分离

<input type="button" value="显示效果" onclick="f1()" />

onclick="f1()";f1()函数的调用，页面加载完之后不会出现弹框，需要点击之后才出现弹框

"f1()"；这里的双引号是把它当成字符串了，相当于页面加载完之后给onclick这个变量赋了一个值，里面存的是一个函数，它是在双引号里面的，当我去点击按钮的时候，从script里面找到f1这个函数直接调用。虽然"f1()"；是函数的调用，但是它是不会执行的，只会在点击的时候执行。

第三种方式：

HTML和JS代码分离

<script>
function f1() {
    alert("点击之后出现弹框")
}
<script>
<input type="button" value="显示效果" id="btn" />

id="btn"；id是属性的名字，btn是值

HTML标签中的id属性中存储的值是唯一的，id属性就像人的身份证号码一样，不能重复，它是页面中的唯一的标识

（虽然在html里面可以写两个一样的id名，在页面中有时也会执行，但是请不要这样写，id是唯一的，这样写不规范的，有时也会出错，页面可以有很多个id属性，但是值（名字）要不同。）

从文档中找到id值为btn的这个标签（元素）

document.getElementById("btn");（在文档中获取元素根据id名）

document 文档   get 获取   Element 元素   By 根据    Id("")；双引号写入id的值

document.getElementById("id属性的值")；===>返回的是一个元素对象

定义变量接收，根据id获取这个标签（元素）：

var btnObj=document.getElementById("btn");

为按钮注册点击事件：btnObj.onclick=f1;不加括号

为按钮注册点击事件：btnObj.onclick=f1();

f1()调用了，打开页面直接弹框，如果这么写，那么页面加载完，f1()这个函数就直接调用了，

f1里面的函数代码直接就执行了，我们需要的是点击的时候才调用f1函数里面的代码，所以onclick里面需要的是函数的代码，点击的时候才执行函数里面的代码，才调用f1里面的代码。最终需要把f1的括号去掉，使得onclick点击的时候才调用f1里面的代码。

缺陷：btnObj.onclick=f1；btnObj.onclick给它的是一个函数，这个函数有名字（f1）；如果要是不小心在f1这个函数的下面

有些了一个和函数名为f1的，或者从其他的script调用的时候出现了函数重名，重名的时候会发生前面的代码被后面的重名的代码

给覆盖执行了（为什么会覆盖呢？代码是从上到下执行的，名字一样则执行后面的重名的代码）

所以这种写法也是不推荐不建议使用的

最终的方式：

<body>
<input type="button" value="显示效果" id="btn" />

<script>
//根据id属性的值从整个文档中获取这个元素（标签）
var btnObj=document.getElementById("btn");
//为该元素注册点击事件
obj.onclick=function () {
    //响应做的事情
    alert("最终版本");
};
匿名函数也是函数，这样就不会出现重名的函数了
var btnObj等于 btnObj.onclick,所以也可以这么写：
document.getElementById("btn").onclick=function (){
    alert("最终版本");
};
</script>
</body>

var btnObj=document.getElementById("btn");btnObj.onclick=function (){alert("第一个在页面显示的教程操作");};

document.getElementById("btn").onclick=function () {alert("第一个在页面显示的教程操作");};

这个两种写法唯一的差别是：

用变量的方式，虽然有两段代码，但是看起来更清晰；一段代码虽然看起来简单，但是看起来不清晰。具体看自己的选择

最终的方式会出现一个问题：如果script代码写在head里面，那么打开页面会出现报错，也不能说是报错，只能说它报的错误是错的，报错的信息不准确。代码在执行的时候没有找到这个按钮或者是没有这个id名，没有还要给他加上属性，所以就会出现报错。

解决方式：1.把script放在input标签的下面，这样就会执行

          2.学BOM的时候可以解决，后面涉及

这个案例做出来的步骤或者是思路：

先有按钮，才能获取，获取之后才能注册这个事件

根据id属性的值从文档中获取这个元素

为当前的这个按钮元素（对象），注册点击事件，添加事件处理函数（匿名函数），响应做的事情

 案例

1-案例点击按钮显示图片

2-案例点击按钮修改p标签的内容

3-案例点击按钮修改a标签的地址和热点文字

4-案例点击按钮修改多个p标签的文字内容

5-案例点击按钮修改图片的alt和title属性

6-案例点击按钮修改所有文本框的值

7-案例点击每个图片弹出对话框

8-案例点击按钮修改按钮的value的属性

9-案例点击图片修改自身的宽和高

10-案例排它功能

11-案例点击超链接切换图片

12-案例点击按钮修改图片

13-点击按钮修改性别和兴趣

14-案例点击按钮选择菜单

15-案例点击按钮设置div的宽和高和背景颜色

16-案例点击按钮设置div的样式

17-案例点击按钮显示和隐藏div

18-案例网页开关灯

案例1：点击按钮显示图片

点击按钮显示图片：点击按钮的时候设置img标签的src属性里有一个图片的路径

思路：根据id获取按钮，为按钮注册点击事件，添加事件处理函数，在事件处理函数里面根据id获取图片的标签，设置图片的src(图片的地址)属性值，

    点属性，设置图片的地址（也可以点出宽和高，但是需要注意的是，点出来的宽和高不需要加px，直接写数字就行了）

<body>
<input type="button" value="点击" id="btn" />
<img src="" alt="" id="im" />
<script>
/*如果想显示图片，需要用img标签。<img src="" alt="" id="im" />如果想要显示图片，需要src=""里面的值。
案例就是点击按钮的时候设置img标签的src属性里有一个图片的路径*/


//根据id获取按钮
var btnObj=document.getElementById("btn");
//为按钮注册点击事件，添加事件处理函数
btnObj.onclick=function () {
    //根据id获取图片的标签，设置图片的src(图片的地址)属性值
    var imObj=document.getElementById("im");
    //设置图片的大小
    imObj.src="images/1.jpg";//设置图片的src(图片的地址)属性值
    imObj.width="200";
    imObj.height="200";
};
/*注意：<img src="" alt="" id="im" />src=""和alt=""是这个标签（img）的属性，img标签可以看成是一个对象，对象可以点属性，
所以imObj可以点出src，width和height在img标签中是有的，也是可以通过点对象出来的。
*/
</script>
</body>

案例2：点击按钮修改p标签的内容

<body>

<input type="button" value="修改p标签的内容" id="btn" />
<p id="p1">这是个p标签，点击按钮要修改这个p标签的内容</p>

<script>
//案例：点击按钮，修改p标签的内容
//凡是成对的标签，中间的文本内容，设置的时候，都使用innerText这个属性的方式


//根据id获取按钮，为按钮注册点击事件，添加事件处理函数
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
    //获取id获取p标签，设置内容
    document.getElementById("p1").innerText="这段文字是替代p标签的文字";
};
</script>
</body>

案例3：点击按钮修改a标签里面的地址和热点文字

<body>
<input type="button" value="按钮" id="btn" />
<a id="ak" href="http://www.baidu.com">百度</a>
<!--a标签里面的文字就是热点文字-->
<script>
//点击按钮修改a标签里面的地址和热点文字
// 根据id获取按钮，注册点击事件，添加事件处理函数

/*这个写法有缺陷：
       document.getElementById("btn").onclick=function () {
           //根据id获取超链接
           document.getElementById("ak").href="http://www.itcast.cn";
           //根据id获取超链接，设置文字内容
           document.getElementById("ak").innerText="已改";
       };
   原因： document.getElementById("ak").href="http://www.itcast.cn";获取了一次
   document.getElementById("ak").innerText="已改";获取了一次
   一个元素在页面操作过程中操作了两次，等于为浏览器增加了负担
   */


//优化后的代码
document.getElementById("btn").onclick=function () {
    var akObj=document.getElementById("ak");
    //根据id获取超链接
    akObj.href="http://www.itcast.cn";
    //根据id获取超链接，设置文字内容
    akObj.innerText="已改";
};//获取一次，操作两次。
</script>
</body>

案例4：点击按钮设置多个p标签的文字内容

<body>

<input type="button" value="按钮" id="btn" /><br />

<div id="dv1">
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
    <p>要被修改的文字</p>
</div>

<div id="dv2">
    <p>不允许修改</p>
    <p>不允许修改</p>
    <p>不允许修改</p>
    <p>不允许修改</p>
    <p>不允许修改</p>
    <p>不允许修改</p>
    <p>不允许修改</p>
    <p>不允许修改</p>
</div>

<script>
    //案例：点击按钮设置多个p标签的文字内容
    //document.getElementsByTagName("标签的名字")，返回的是一个伪数组
    // Elements多个元素，Tag 标签，Name名字。
    //无论获取的是一个标签，还是多个标签，最终都是在数组中存储的，这行代码的返回值就是一个数组



    //根据id获取按钮，注册点击事件，添加事件处理函数
    document.getElementById("btn").onclick=function (){
        //根据标签文字获取标签
        var pObj=document.getElementsByTagName("p");
        //循环遍历这个数组
        for (var i=0;i<pObj.length;i++){//由多个p标签放到一个数组里面了
            //pObj[i]代表每个p标签，设置文字内容
            pObj[i].innerText="已修改";
        }
    }

    /*
    var pObj=document.getElementsByTagName("p");
    从整个文档获取所有的p标签，凡是有p标签的都会 被获取到，无论是否在div里面，哪怕div加了id下面的p标签也会被获取到
    缺点：某些标签不希望修改的，但是它也被修改了
 

    解决方式：可以分块，用id的方式获取下面的标签名（每一块都代表要修改的文字或者不被修改的文字）
     var pObj=document.getElementById("dv1").getElementsByTagName("p");
     document.getElementById("dv1")拿到了第一个div；.getElementsByTagName("p");获取div下面的所有元素
*/
</script>
</body>

案例5：点击按钮修改图片的alt属性和title属性

<body>

<input type="button" value="按钮" id="btn" />
<img src="请找图片放进来" alt="图片显示不出" title="鼠标悬停显示的文字" /><!--第一个数组当中的元素-->
<img src="请找图片放进来" alt="图片显示不出" title="鼠标悬停显示的文字" /><!--第二个数组当中的元素-->
<img src="请找图片放进来" alt="图片显示不出" title="鼠标悬停显示的文字" /><!--第三个数组当中的元素-->
<img src="请找图片放进来" alt="图片显示不出" title="鼠标悬停显示的文字" /><!--第四个数组当中的元素-->
<img src="请找图片放进来" alt="图片显示不出" title="鼠标悬停显示的文字" /><!--第五个数组当中的元素-->
<script>


document.getElementById("btn").onclick=function () {
//返回的是一个伪数组
var imgObj=document.getElementsByTagName("img");
    //通过索引的方式获取
    imgObj[0].alt="图片显示不出的文字已被修改";
    imgObj[0].title="鼠标悬停显示的文字已被修改";
    imgObj[4].alt="图片显示不出的文字已被修改";
    imgObj[4].title="鼠标悬停显示的文字已被修改";
};

/*
<img src="images/boduo.jpg" alt="图片显示不出" title="鼠标悬停显示的文字" /><!--第一个数组当中的元素-->
<img src="images/boduo.jpg" alt="图片显示不出" title="鼠标悬停显示的文字" /><!--第二个数组当中的元素-->
<img src="images/boduo.jpg" alt="图片显示不出" title="鼠标悬停显示的文字" /><!--第三个数组当中的元素-->
<img src="images/boduo.jpg" alt="图片显示不出" title="鼠标悬停显示的文字" /><!--第四个数组当中的元素-->
<img src="images/boduo.jpg" alt="图片显示不出" title="鼠标悬停显示的文字" /><!--第五个数组当中的元素-->
document.getElementById("btn").onclick=function () {
     //返回的是一个伪数组
     var imgObj=document.getElementsByTagName("img");
     //通过索引的方式获取
     imgObj[0].alt="图片显示不出的文字已被修改";
     imgObj[0].title="鼠标悬停显示的文字已被修改";
     imgObj[3].alt="图片显示不出的文字已被修改";
     imgObj[3].title="鼠标悬停显示的文字已被修改";
};
*/
</script>
</body>

案例6：点击按钮修改所有文本框的值

<body>

<input type="button" value="修改文本框的值" id="btn" />
<input type="text" value=" " /><br />
<input type="text" value=" " /><br />
<input type="text" value=" " /><br />
<input type="text" value=" " /><br />
<input type="text" value=" " /><br />

<script>
    //根据id获取按钮，为按钮注册点击事件，添加事件处理函数
    document.getElementById("btn").onclick=function () {
        //获取所有的文本框
        var input=document.getElementsByTagName("input");
        //用循环的方式修改
        for (var i=0;i<input.length;i++){
            //判断这个元素是不是按钮，不是则执行代码
            if (input[i].type!="button"){
                input[i].value="已修改";
            }//end if
        }//end for
    };
//单个标签不能用innerText。
</script>
</body>

案例7：点击每个图片弹出对话框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<!--图片请自己找自己加进去看效果-->
<img src="图片位置" alt="">
<img src="图片位置" alt="">
<img src="图片位置" alt="">
<img src="图片位置" alt="">
<img src="图片位置" alt="">
<img src="图片位置" alt="">
<img src="图片位置" alt="">
<img src="图片位置" alt="">
<script>

    //获取所有的img标签
    var imgObj=document.getElementsByTagName("img");
    //循环遍历数组，获取每个图片标签，注册点击事件，添加事件处理函数
        for (var i=0;i<imgObj.length;i++){
            imgObj[i].onclick=function () {
                alert("点击之后就会弹框");
            }
        }
</script>
</body>

案例8：点击按钮修改按钮的value的属性

<body>
<input type="button" value="按钮" id="btn">
<script>
    var btnObj=document.getElementById("btn");
    btnObj.onclick=function () {
        //修改按钮属性
        btnObj.value="文字被该了";
        btnObj.type="text";
        btnObj.id="btn1";
    };

    //在某个元素的事件中，自己的事件中的this就是当前的这个元素对象
    var btnObj=document.getElementById("btn");
    btnObj.onclick=function () {
        this.value="文字被该了";
        this.type="text";
        this.id="btn1";
    };
</script>
</body>

案例9：点击图片修改自身的宽和高

<body>
<img src="图片位置自己找图片加进来" alt="" id="im" />
<script>

    //根据id获取按钮
    var imgObj=document.getElementById("im");
    //为按钮添加点击事件
    imgObj.onclick=function () {//添加事件处理函数
        //修改自身的宽高
        this.which="200";
        this.height="200";
    };
</script>
</body>

案例10：排它功能   （所有的按钮都有可能被点击。所以当这一个按钮被点击之后，其他的按钮要恢复原样）

思路：1.先获取所有的按钮，分别注册点击事件

2.循环遍历所有的按钮

3.为每个按钮都要注册点击事件

在这里面做两件事：

（1）把所有的按钮的value值设置为默认的值：没怀孕

需要再来一次循环，

（2）当前被点击的按钮设置为：怀孕了

<body>

<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>

<script>
    //获取所有的按钮，分别注册点击事件
    var inObj = document.getElementsByTagName("input");
    for (var i = 0; i < inObj.length; i++) {
        //为每个按钮注册点击事件
        inObj[i].onclick = function () {
            //把所有的按钮的value值设置为默认的值：没怀孕
            for (var j = 0; j < inObj.length; j++) {
                inObj[j].value = "没怀孕";
            }
            //当前被点击的按钮设置为：怀孕了
            this.value = "怀孕了";
        };
    }
/*
this.value="怀孕了";不能写成btnObj[i].value="怀孕了";

原因：for循环是在页面加载的时候，执行加载完毕了
for (var k=0;k<5;k++){
     console.log(k);//0,1,2,3，4
    }
    console.log(k);//5。  因为当k++的时候，k等于4的时候，4小于5，直接for循环里面的代码回过头来执行k++了，所以4就变成了5，
       5不小于5，所以for循环解释之后，k的值是5，正好是小于后面的数字
 
    当循环的时候，不停的为每个按钮注册点击事件，事件在触发的时候执行。页面加载完毕之后，所有的按钮都有事件，因为循环的时候已经为
每个按钮注册事件了。循环结束之后，每个按钮都有事件，事件并未触发，需要点击的时候触发。
 
    页面加载完毕之后，循环已经结束了，当前这个按钮btnObj[i].onclick循环结束之后，每个按钮都有事件，点谁谁的值改变，
而不是点谁谁的中括号（btnObj[i]）i的值改变，所以不能用btnObj[i].value=的方式。
    */
</script>
</body>
      
案例11：点击超链接切换图片（写思路和注明return的原因）      
<body>
<a href="images/1.jpg" id="ah"><img src="images/1-small.jpg" alt="" id="im"></a>
<script>
    //点击图片标签，设置图片标签的src路径为超链接中大图的路径
    document.getElementById("im").onclick=function () {
        this.src=document.getElementById("ah").href;
        return false;
    }
</script>
</body>

案例12：点击按钮修改图片

封装id属性，用的时候引入调用就行

function my$(id){
        return document.getElementById(id);
    }
建个文件夹，后缀是.js。调用的名字可以自己取，但是要有意义。      
<body>

<input type="button" value="按钮" id="btn" />
<img src="图片位置自己找图片加进来" alt="" id="im">

<script>

    //封装id属性，用的时候调用就行
    function myScript(id){
        return document.getElementById(id);
    }
    myScript("btn").onclick=function () {
        myScript("im").src="images/1.jpg";
    };

/*推论：
    document.getElementById("btn")返回的是一个对象，

    function (){
        return document.getElementById("btn");
    }   调用这个函数，可以返回一个按钮
 
    如果想获取一个图片标签，("btn")里面的值需要改为("im")，"im"和"btn"都是字符串，
    function (){
        var id="im";
        return document.getElementById("btn");
    }
var id="im";id是一个变量， return document.getElementById("btn");括号里面可以放一个变量return document.getElementById(id);
变为：function (){
        return document.getElementById(id);
    }

最终给函数起个名字：
    function my$(id){
        return document.getElementById(id);
    }  这个函数可以给我一个任何的id属性的值返回一个对象


既然如此：document.getElementById("btn").onclick=function () {
        document.getElementById("im").src="images/1.jpg";
    };

就可以改为：
 myScript("btn").onclick=function () {
        myScript("im").src="images/1.jpg";
    };
*/
</script>
</body>

点击13：点击按钮修改性别和兴趣

<body>

<input type="button" value="按钮" id="btn"/>
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex" id="rad1"/>女
<input type="radio" value="2" name="sex"/>保密

<script>
    function my$(id) {
        return document.getElementById(id);
    }
    //规律：在表单标签中，如果属性和值只有一个，并且值是这个属性本身，那么在写js代码DOM
    //操作的时候，这个属性值是布尔类型就可以了
 
    my$("btn").onclick = function () {
        my$("rad1").checked = true;
    }
 /*
  my$("rad1").checked = "checked";点击的时候也是可以选中的
  my$("rad1").checked = "false";点击的时候也是可以的选中的
  my$("rad1").checked = "saldhjcsijd";点击的时候也是可以的选中的
  原因："checked"、"false和"saldhjcsijd"，这是一个非空字符串，,非空字符串转布尔类型结果是true，
  所以my$("rad1").checked = true;默认给true就可以了
 * */

</script>
<br />

<input type="button" value="按钮" id="btn2" />
<input type="checkbox" value="1" name="xinqu" id="ck1"/>吃饭
<input type="checkbox" value="2" name="xinqu" />睡觉
<input type="checkbox" value="3" name="xinqu" />打豆豆
<input type="checkbox" value="4" name="xinqu" id="ck2"/>打游戏
<input type="checkbox" value="5" name="xinqu" />跑步
<input type="checkbox" value="6" name="xinqu" id="ck3"/>打羽毛球

<script>

    my$("btn2").onclick=function () {
      my$("ck1").checked=true;
      my$("ck2").checked=true;
      my$("ck3").checked=true;
    };
</script>
</body>

案例14：点击按钮选择菜单

<body>

<input type="button" value="点菜" id="btn1"/>
<select name="" id="sel">
    <option value="1">煎</option>
    <option value="2" id="opt2">炸</option>
    <option value="3">蒸</option>
    <option value="4">煮</option>
    <option value="5">炒</option>
    <option value="6">焖</option>
    <option value="7">焗</option>
</select>
<script src="common.js"></script>//这个就是自己取的js文件名称
<script>
    my$("btn1").onclick = function () {
        //点击按钮选择菜单
        my$("opt2").selected = true;
    };
</script>
<br/>
<br/>

<input type="button" value="按钮" id="btn2"/>
<textarea name="" cols="30" rows="10" id="tt" readonly>
    不允许修改以下内容，呈只读模式：
    毫无理想而又优柔寡断是一种可悲的心理。
    凡事要三思，但比三思更重要的是三思而行。
    生命是属于你的，你应该根据自己的愿望去生活。
    坚持，是生命的一种毅力;执行，是努力的一种坚持。
    当你的才华还撑不起你的野心时，那你就应该静下心来学习。
    命不能争，运可以造，弱者认命，强者抗命，能者求命，智者造命。
    在一条不适合自己的路上奔波，就如同穿上一双不合脚的鞋，会令你十分痛苦。
    很多时候，人并不是因为失败而烦恼；而是因为失败后找不到任何借口而烦恼。
</textarea>

<script>
    my$("btn2").onclick = function () {
        // my$("tt").value="已修改";推荐使用这个，因为看成了是表单的标签
        // my$("tt").innerText="已修改";
        my$("tt").readonly = true;
    };
/*
在标签中表示：
disabled 禁用
readonly 只读

html中属性和值是自己的，并且只有一个的，其实可以只写这个属性，不用赋值。
所有的表单标签将来要提交，都是放在form里面的
 
my$("tt").value="已修改";推荐使用这个
my$("tt").innerText="已修改";
value和innerText这个两个都可以修改，推荐使用value，因为看成了是表单的标签
innerText设置这个属性的话，在浏览器页面和f12的Element都可以看
 */
</script>
</body>

案例15：点击按钮设置div的宽和高和背景颜色

<body>
<input type="button" value="设置div的样式" id="btn">
<div id="dv"></div>

<script>
    //凡是css中这个属性是多个单词的写法，在js代码中DOM操作的时候，把-去掉。后面的单词的首字母大写即可

    //点击按钮修改div的宽、高、背景颜色
    document.getElementById("btn").onclick=function () {
        var dvObj=document.getElementById("dv");
        dvObj.style.width="200px";
        dvObj.style.height="200px";
        dvObj.style.backgroundColor="skyblue";
    };
</script>
</body>

案例16：点击按钮设置div的样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            border:3px solid orange;
        }
    </style>
</head>
<body>
<input type="button" value="隐藏div" id="btn">
<div id="dv" ></div>
<script>
   document.getElementById("btn").onclick=function () {
        document.getElementById("dv").className="cls";
    };

 /*
    可以这么写：
    document.getElementById("btn").onclick=function () {
        var dvObj=my$("dv")
        dvObj.style.width="200px";
        dvObj.style.height="200px";
        dvObj.style.backgroundColor="skyblue";
        dvObj.style.border="5px solid skyblue";
    }

    也可以封装，还可以连在一起写
    在css样式里面，class这个名字不要叫类，可以叫类样式，因为学习其他纯对象语言的时候有类这个概念

    document.getElementById("btn").onclick=function () {
        document.getElementById("dv").class="cls";
    };
    document.getElementById("dv").class="cls";这么写思路是对的，但是代码是错的，打开浏览器点击不出现效果，f12下面也没有报错。
    原因：
    在js代码中，class是个关键字， 点这个class相当于为这个div添加这个class的一个属性，
       但是这个属性和上面的class(<div id="dv" class="cls"></div>)不是一回事,不能当做是一样的。

    在js代码中DOM操作的时候，设置元素的类样式，不用class关键字，应该使用className
    document.getElementById("btn").onclick=function () {
        document.getElementById("dv").className="cls";
    };
 */
</script>

</body>      
document.getElementById("btn").onclick=function () {
        var dvObj=my$("dv")
        dvObj.style.width="200px";
        dvObj.style.height="200px";
        dvObj.style.backgroundColor="skyblue";
        dvObj.style.border="5px solid skyblue";
    }
    document.getElementById("btn").onclick=function () {
        document.getElementById("dv").className="cls";
    };
    下面的写法要好于上面的。
    一般情况下，上面的元素操作样式比较多，就用下面的，少的话就用上面（三条或者三条以上）      
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

        .cls{
            display: none;
        }
    </style>

</head>
<body>

<input type="button" value="按钮" id="btn" />
<div id="dv"></div>

<script>
    //点击按钮，通过类样式的方式设置div的显示和隐藏
    document.getElementById("btn").onclick=function () {
        //判断div是否应用了类样式
        var dvObj=document.getElementById("dv");
        if (dvObj.className!="cls"){
            //现在是显示状态，应该隐藏
            dvObj.className="cls";
            this.value="显示";
        }else {
            //隐藏的状态，应该立刻显示
            dvObj.className="";
            this.value="隐藏";
        }
    };
    /*
     dvObj.onclick=function () {
         console.log(dvObj.className);//div标签里面没有设置class样式，点击按钮，在浏览器f12的console里面显示的是空的
 //div标签里面设置了class样式，点击按钮，在浏览器f12的console里面有值了，显示的是的是cls
         有值的时候是隐藏了，没有值的时候是显示了
     };
 */
</script>
</body>

案例18：网页开关灯

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            background-color: skyblue;
        }
    </style>
</head>
<body>
<input type="button" value="开/关灯" id="btn" />
<script>
    document.getElementById("btn").onclick=function () {
        //获取body标签
        document.body.className=document.body.className!="cls"?"cls":"";
    }
</script>
</body>
上一篇: 构建自己的Docker基础镜像
下一篇: 航天联志:专注“定制化”