Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素

2023-09-05 阅读 60 评论 0

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

Web API介绍

API的概念

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

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

Web API的概念

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

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

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

MDN-Web API

JavaScript的组成

在这里插入图片描述

ECMAScript - JavaScript的核心

定义了javascript的语法规范

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

BOM - 浏览器对象模型

一套操作浏览器功能的API

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

DOM - 文档对象模型

一套操作页面元素的API

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

BOM

BOM的概念

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等

BOM的顶级对象window

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window
注意：window下一个特殊的属性 window.name

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><style>body{height: 2000px;}</style><script>/** JavaScript分三个部分:* 1. ECMAScript标准---基本语法* 2. DOM--->Document Object Model 文档对象模型,操作页面元素的* 3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的** 浏览器中有个顶级对象:window----皇上* 页面中顶级对象:document-----总管太监* 页面中所有的内容都是属于浏览器的,页面中的内容也都是window的** 变量是window的*** *///    var num=100;
//    console.log(window.num);//    function f1() {
//      console.log("小苏我也从了");
//    }
//    window.f1();//因为页面中的所有内容都是window的,window是可以省略的.//window.document.write("哈哈");//    var name="您好";
//    console.log(window.name);//    console.log(top);
//    console.log(window);</script>
</head>
<body></body>
</html>

对话框

alert()
prompt()
confirm()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script>//window.alert("您好啊");//以后不用,测试的时候使用//window.prompt("请输入帐号");
//    var result=window.confirm("您确定退出吗");
//    console.log(result);</script>
</head>
<body>
<p>这是一个P</p></body>
</html>

页面加载事件

onload

window.onload = function () {// 当页面加载完成执行// 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}

onunload

window.onunload = function () {// 当用户退出页面时执行
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script>//页面加载的时候,按钮还没出现,页面没有加载完毕//页面加载完毕了,再获取按钮//只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件
//    window.onload=function () {
//      document.getElementById("btn").onclick=function () {
//        alert("您好");
//      };
//    };//很重要
//    onload=function () {
//      document.getElementById("btn").onclick=function () {
//        alert("您好");
//      };
//    };//扩展的事件---页面关闭后才触发的事件
//    window.onunload=function () {
//
//    };//扩展事件---页面关闭之前触发的
//    window.onbeforeunload=function () {
//      alert("哈哈");
//    };</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
</body>
</html>

定时器

setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数，只执行一次

// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {console.log('Hello World');
}, 1000);// 取消定时器的执行
clearTimeout(timerId);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script>//常用的,反复的执行
//    window.setInterval(function () {
//      alert("哈哈");
//    },1000);//window.clearInterval(定时器id);//清理定时器//另一个定时器-------一次性的定时/** 参数1:函数* 参数2:时间---1000毫秒---1秒* 返回值:该定时器的id*** */// window.setTimeout(函数,时间);//页面加载后window.onload=function () {//一次性的定时器var timeId=window.setTimeout(function () {alert("您好");},1000);//点击这个按钮,停止这个一次性的定时器document.getElementById("btn").onclick=function () {clearTimeout(timeId);};};</script>
</head>
<body>
<input type="button" value="停下" id="btn"/>
<script></script>
</body>
</html>

setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

// 创建一个定时器，每隔1秒调用一次
var timerId = setInterval(function () {var date = new Date();console.log(date.toLocaleTimeString());
}, 1000);// 取消定时器的执行
clearInterval(timerId);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script>//BOM中有两个定时器---计时器</script>
</head>
<body>
<input type="button" value="停止" id="btn"/>
<script>//定时器//参数1:函数//参数2:时间---毫秒---1000毫秒--1秒//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....//返回值就是定时器的id值var timeId = setInterval(function () {alert("hello");//断言}, 1000);document.getElementById("btn").onclick = function () {//点击按钮,停止定时器//参数:要清理的定时的id的值window.clearInterval(timeId);};
</script></body>
</html>

location对象

location对象是window对象下的一个属性，时候的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script>//对象中的属性和方法//location对象//console.log(window.location);//    //地址栏上#及后面的内容
//    console.log(window.location.hash);
//    //主机名及端口号
//    console.log(window.location.host);
//    //主机名
//    console.log(window.location.hostname);
//    //文件的路径---相对路径
//    console.log(window.location.pathname);
//    //端口号
//    console.log(window.location.port);
//    //协议
//    console.log(window.location.protocol);
//    //搜索的内容
//    console.log(window.location.search);onload=function () {document.getElementById("btn").onclick=function () {//设置跳转的页面的地址//location.href="http://www.jd.com";//属性----------------->必须记住//location.assign("http://www.jd.com");//方法//location.reload();//重新加载--刷新//location.replace("http://www.jd.com");//没有历史记录};};</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/></body>
</html>

URL

统一资源定位符 (Uniform Resource Locator, URL)

URL的组成

scheme://host:port/path?query#fragment
scheme:通信协议常用的http,ftp,maito等
host:主机服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path:路径由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query:查询可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs
fragment:信息片断字符串，锚点.

location有哪些成员？

使用chrome的控制台查看
查MDN

MDN
成员
- assign()/reload()/replace()
- hash/host/hostname/search/href……

案例

解析URL中的query，并返回对象的形式

function getQuery(queryStr) {var query = {};if (queryStr.indexOf('?') > -1) {var index = queryStr.indexOf('?');queryStr = queryStr.substr(index + 1);var array = queryStr.split('&');for (var i = 0; i < array.length; i++) {var tmpArr = array[i].split('=');if (tmpArr.length === 2) {query[tmpArr[0]] = tmpArr[1];}}}return query;
}
console.log(getQuery(location.search));
console.log(getQuery(location.href));

history对象

back()
forward()
go()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title></head>
<body>
<input type="button" value="跳过去" id="btn1"/>
<input type="button" value="前进" id="btn2"/>
<script src="common.js"></script>
<script>//跳转的my$("btn1").onclick = function () {window.location.href = "15test.html";};//前进my$("btn2").onclick = function () {window.history.forward();};
</script>
</body>
</html>

navigator对象

userAgent

通过userAgent可以判断用户浏览器的类型

platform

通过platform可以判断浏览器所在的系统平台类型.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script>通过userAgent可以判断用户浏览器的类型console.log(window.navigator.userAgent);//通过platform可以判断浏览器所在的系统平台类型.//console.log(window.navigator.platform);</script>
</head>
<body></body>
</html>

DOM

DOM的概念

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

DOM又称为文档树模型

在这里插入图片描述

文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属性

模拟文档树结构

在这里插入图片描述

function Element(option) {this.id = option.id || '';this.nodeName = option.nodeName || '';this.nodeValue = option.nodeValue || '';this.nodeType = 1;this.children = option.children || [];
}var doc = new Element({nodeName: 'html'
});
var head = new Element({nodeName: 'head'
});
var body = new Element({nodeName: 'body'
})
doc.children.push(head);
doc.children.push(body);var div = new Element({nodeName: 'div',nodeValue: 'haha',
});var p = new Element({nodeName: 'p',nodeValue: '段落'
})
body.children.push(div);
body.children.push(p);function getChildren(ele) {for(var i = 0; i < ele.children.length; i++) {var child = ele.children[i];console.log(child.nodeName);getChildren(child);}
}
getChildren(doc);

DOM经常进行的操作

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

获取页面元素

为什么要获取页面元素

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

根据id获取元素

var div = document.getElementById('main');
console.log(div);// 获取到的数据类型 HTMLDivElement，对象都是有类型的
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

根据标签名获取元素

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {var div = divs[i];console.log(div);
}

根据name获取元素*

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {var input = inputs[i];console.log(input);
}

根据类名获取元素

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {var main = mains[i];console.log(main);
}

根据选择器获取元素

var text = document.querySelector('#text');
console.log(text);var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {var box = boxes[i];console.log(box);
}

总结

掌握getElementById()getElementsByTagName()
了解getElementsByName()getElementsByClassName()querySelector()querySelectorAll()

案例

1.点击按钮弹出对话框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><script>//点击操作:------>事件:就是一件事,有触发和响应,事件源//按钮被点击,弹出对话框//按钮---->事件源//点击---->事件名字//被点了--->触发了//弹框了--->响应</script>
</head>
<body>
<!--第一个版本-->
<!--html代码,点击按钮弹出对话框,对话框:alert()====>js的代码-->
<!--html代码中嵌入了js的代码,不方便后期的修改和维护-->
<!--<input type="button" value="显示效果" onclick="alert('我被点了')" />--><!--最终的效果:应该把js代码和html分离--><!--第二个版本: js代码很多,但是没有分离html和js该怎么做-->
<script>function f1() {//函数中可以写很多的代码alert("这是一个对话框");}
</script>
<input type="button" value="显示效果" onclick="f1()"/><!--开始分离html和js--><input type="button" value="开始分离代码" id="btn" /><script>function f2() {alert("开发分离html和js代码");}function f2() {alert("嘎嘎");}//html标签中的id属性中存储的值是唯一的,//id属性就像人的身份证号码一样,不能重复,页面中的唯一的标识//从文档中找到id值为btn的这个标签(元素)//document.getElementById("id属性的值");======>返回的是一个元素对象//根据id获取这个标签(元素)var btnObj=document.getElementById("btn");//为按钮注册点击事件btnObj.onclick=f2;//不加括号
</script><!--最终的版本代码:-->
<input type="button" value="最终版" id="btn1"/>
<script>
//  //根据id属性的值从整个文档中获取这个元素(标签)var btnObj1=document.getElementById("btn1");//为该元素注册点击事件btnObj1.onclick=function () {alert("哦,这真是太好了");};//根据id属性的值从整个文档中获取这个元素(标签)
//为该元素注册点击事件
document.getElementById("btn1").onclick=function () {alert("哦,这真是太好了");
};
</script>
</body>
</html>

2.点击按钮修改超链接的地址和热点文字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="显示效果" id="btn"/>
<a id="ak" href="https://www.jiumodiary.com/">鸠摩搜书</a>
<script>//案例:点击按钮修改a标签的地址和热点文字//根据id获取按钮,注册点击事件,添加事件处理函数//  document.getElementById("btn").onclick = function () {//    //根据id获取超链接,设置href属性//    document.getElementById("ak").href = "http://www.itcast.cn";//    //根据id获取超链接,设置文字内容//    document.getElementById("ak").innerText = "传智播客";//  };//优化后的:document.getElementById("btn").onclick = function () {//根据id获取超链接,设置href属性var aObj = document.getElementById("ak");aObj.href = "http://www.itcast.cn";//根据id获取超链接,设置文字内容aObj.innerText = "传智播客";};</script></body>
</html>

3.点击(每个)图片弹出对话框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>img{width: 200px;height: 150px;}</style>
</head>
<body>
<img src="images/1.jpg" alt="" id="im1" />
<img src="images/2.jpg" alt="" id="im2" />
<img src="images/3.jpg" alt="" id="im3" />
<script>
//  document.getElementById("im1").onclick=function () {
//    alert("被点了");
//  };
//  document.getElementById("im2").onclick=function () {
//    alert("被点了");
//  };
//  document.getElementById("im3").onclick=function () {
//    alert("被点了");
//  };//根据标签的名字获取图片标签,分别注册点击事件var imgObjs=document.getElementsByTagName("img");//循环遍历数组,获取每个图片标签,注册点击事件,添加事件处理函数for(var i=0;i<imgObjs.length;i++){imgObjs[i].onclick=function () {alert("被点击了");};}
</script>
</body>
</html>

4.点击图片设置自身宽和高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="显示图片" id="btn"/>
<img src="" alt="" id="im" />
<script>//点击按钮显示图片:点击按钮的时候设置img标签的src属性有一个图片的路径//根据id获取按钮,var btnObj=document.getElementById("btn");//为按钮注册点击事件,添加事件处理函数btnObj.onclick=function () {//根据id获取图片的标签,设置图片的src属性值var imObj=document.getElementById("im");imObj.src="images/liuyan.jpg";//设置图片的大小imObj.width="300";imObj.height="400";};</script>
</body>
</html>

5.点击按钮修改每个图片的title属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="显示效果" id="btn"/>
<img src="images/cangjingkong.jpg" alt="哈哈" title="嘎嘎"/>
<script>document.getElementById("btn").onclick = function () {//返回的是一个伪数组var imgObjs = document.getElementsByTagName("img");imgObjs[0].alt = "改了";imgObjs[0].title = "现实吧";};
</script>
</body>
</html>

6.点击按钮显示哈哈(排他功能)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<script>//获取所有的按钮,分别注册点击事件var btnObjs = document.getElementsByTagName("input");//循环遍历所有的按钮for (var i = 0; i < btnObjs.length; i++) {//为每个按钮都要注册点击事件btnObjs[i].onclick = function () {//把所有的按钮的value值设置为默认的值:没怀孕for (var j = 0; j < btnObjs.length; j++) {btnObjs[j].value = "没怀孕";}//当前被点击的按钮设置为:怀孕了this.value = "怀孕了";};}//console.log(i);//6//for循环是在页面加载的时候,执行完毕了
//  for(var k=0;k<5;k++){
//
//  }
//  console.log(k);////事件是在触发的时候,执行的
</script>
</body>
</html>

7.点击按钮显示和隐藏div

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>div{width: 300px;height: 200px;background-color: darkmagenta;}</style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<input type="button" value="显示" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>//根据id获取按钮,注册点击事件,添加事件处理函数my$("btn").onclick=function () {my$("dv").style.display="none";};my$("btn2").onclick=function () {my$("dv").style.display="block";};
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>div {width: 300px;height: 200px;background-color: yellow;border: 2px solid red;}.cls {display: none;}</style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>//点击按钮,通过类样式的方式设置div的显示和隐藏my$("btn").onclick = function () {// console.log(my$("dv").className);//判断的是div是否应用了类样式if (my$("dv").className != "cls") {//现在是显示的,应该隐藏my$("dv").className = "cls";this.value = "显示";} else {//隐藏的状态----立刻显示my$("dv").className = "";this.value = "隐藏";}};
</script></body>
</html>

8.显示和隐藏二维码
9.点击按钮修改所有p标签内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv1"><p>哈哈,我又变帅了</p><p>哈哈,我又变帅了</p><p>哈哈,我又变帅了</p><p>哈哈,我又变帅了</p><p>哈哈,我又变帅了</p>
</div><div id="dv2"><p>嘎嘎</p><p>嘎嘎</p><p>嘎嘎</p><p>嘎嘎</p>
</div>
<script>//document.getElementsByTagName("标签的名字");返回的是一个伪数组,//无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组//案例:点击按钮设置多个p标签的文字内容//根据id获取按钮,注册点击事件,添加事件处理函数document.getElementById("btn").onclick=function () {//根据标签名字获取标签var pObjs= document.getElementsByTagName("p");//var pObjs=document.getElementById("dv1").getElementsByTagName("p");//循环遍历这个数组for(var i=0;i<pObjs.length;i++){//每个p标签,设置文字pObjs[i].innerText="我们都是p";}};</script></body>
</html>

10.点击按钮修改所有文本框内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="修改文本框的值" id="btn"/><br/>
<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/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script>//根据id获取按钮,为按钮注册点击事件,添加事件处理函数document.getElementById("btn").onclick = function () {//获取所有的文本框var inputs = document.getElementsByTagName("input");for (var i = 0; i < inputs.length; i++) {//判断这个元素是不是按钮if (inputs[i].type != "button") {inputs[i].value = "其实,助教喜欢小苏";}}};
</script>
</body>
</html>

11.点击按钮切换图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<a id="ak" href="images/1.jpg"><img src="images/1-small.jpg" alt="" id="im"></a>
<script>//点击图片标签,设置图片标签的src路径为超链接中大图的路径document.getElementById("im").onclick=function () {this.src=document.getElementById("ak").href;return false;};</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="显示大图" id="btn"/>
<img src="images/1-small.jpg" alt="" id="im">
<script>function my$(id) {return document.getElementById(id);}my$("btn").onclick=function () {my$("im").src="images/1.jpg";};
</script></body>
</html>

12.点击超链接停止跳转页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<script>//点击超链接弹出对话框//阻止超链接的默认的跳转:return false
</script>
<!--第一种写法:-->
<a href="http://www.baidu.com" onclick="alert('哎呀,我被点了'); return false">百度</a>
<br/><!--第二种写法-->
<script>function f1() {alert("哇塞,好漂亮哦");return false;}</script>
<a href="http://www.baidu.com" onclick="return f1()">百度</a><!--第三种写法:--><a href="http://www.baidu.com" id="ak">百度</a>
<script>document.getElementById("ak").onclick=function () {alert("嘎嘎");return false;};
</script>
</body>
</html>

13.点击小图显示大图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<a href="images/1.jpg" id="ak"><img src="images/1-small.jpg" alt=""></a>
<img src="" alt="" id="big">
<script src="common.js"></script>
<script>//点击小图,下面显示大图//点击超链接my$("ak").onclick=function () {my$("big").src=this.href;return false;};</script>
</body>
</html>

14.美女相册

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">body {font-family: "Helvetica", "Arial", serif;color: #333;background-color: #ccc;margin: 1em 10%;}h1 {color: #333;background-color: transparent;}a {color: #c60;background-color: transparent;font-weight: bold;text-decoration: none;}ul {padding: 0;}li {float: left;padding: 1em;list-style: none;}#imagegallery {list-style: none;}#imagegallery li {margin: 0px 20px 20px 0px;padding: 0px;display: inline;}#imagegallery li a img {border: 0;}</style>
</head>
<body><h2>美女画廊
</h2><ul id="imagegallery"><li><a href="images/1.jpg" title="美女A"><img src="images/1-small.jpg" width="100" alt="美女1"/></a></li><li><a href="images/2.jpg" title="美女B"><img src="images/2-small.jpg" width="100" alt="美女2"/></a></li><li><a href="images/3.jpg" title="美女C"><img src="images/3-small.jpg" width="100" alt="美女3"/></a></li><li><a href="images/4.jpg" title="美女D"><img src="images/4-small.jpg" width="100" alt="美女4"/></a></li>
</ul><div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script src="common.js"></script>
<script>//点击a标签,把a标签中的href的属性值给id为image的src属性//把a的title属性的值给id为des的p标签赋值//从ul中标签获取获取所有的a标签var aObjs=my$("imagegallery").getElementsByTagName("a");//循环遍历所有的a标签for(var i=0;i<aObjs.length;i++){//为每个a标签注册点击事件aObjs[i].onclick=function () {//为id为image的标签的src赋值my$("image").src=this.href;//为p标签赋值my$("des").innerText=this.title;//阻止超链接默认的跳转return false;};}</script></body>
</html>

15点击按钮选中性别和兴趣

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="修改性别" id="btn1"/>
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex" id="rad1"/>女
<input type="radio" value="3" name="sex"/>保密
<script>function my$(id) {return document.getElementById(id);}//规律:在表单标签中,如果属性和值只有一个,并且值是这个属性本身,那么//那么,那么,在写js代码,DOM操作的时候,这个属性值,是布尔类型就可以了my$("btn1").onclick = function () {my$("rad1").checked = true;};
</script>
<br /><input type="button" value="选择兴趣" id="btn2"/>
<input type="checkbox" value="1" name="xingqu" />吃饭
<input type="checkbox" value="2" name="xingqu" />睡觉
<input type="checkbox" value="3" name="xingqu" id="ck1" />打豆豆
<input type="checkbox" value="4" name="xingqu" />打篮球
<input type="checkbox" value="5" name="xingqu" />打足球
<input type="checkbox" value="6" name="xingqu" id="ck2" />打铅球
<script>my$("btn2").onclick=function () {my$("ck1").checked=true;my$("ck2").checked=true;};
</script>
</body>
</html>

原文链接：https://808629.com/891.html

上一篇：JavaScript事件添加定时器

下一篇：JavaScript中的对象

发表评论: