• 笔记
  • 好文
  • 工具
  • 关于
    • |
    主题设置

    卡片式面板通常用于非白色背景色的主体内

    DOM 事件

    DOM 事件指的是在文档对象模型（DOM）中发生的各种事件，例如点击、滚动、键盘输入等。

    点击事件

    body

    // 点击按钮，实现网页开关灯(变黑变白)
document.getElementById("btn").onclick = function(){
	// 获取 body 标签
	document.body.className = document.body.className != "cls" ? "cls" : "";	// 用 cls 样式赋给 body 的 class 属性，从而改变样式（不等就赋值，相等就取消）
}

// 点击按钮，替换背景图片
document.getElementById("btn").onclick = function(){
	// 用 css 设置背景图片，必须用 url() 的方式
	document.body.style.backgroundImage = "url(" + this.src + ")";
}

    button

    // 点击按钮，弹出对话框
var btnClick = document.getElementById("btn");	// 通过 document.getElementById() 方法返回一个 document 对象，getElementById("btn") 的作用是找到值为 btn 的 id
btnClick.onclick = function(){	// 定义一个点击事件
	alert("hello world!");	// 弹出框
}

// 点击按钮，通过标签 id，和 this 关键字，改变按钮的内容
document.getElementById("btn").onclick = function(){
	this.value = "点击";
}

    div

    // 点击按钮，通过标签 id，设置 div 中的文本内容
document.getElementById("btn").onclick = function(){
	document.getElementById("dv").innerText = "你好，世界";
}

// 点击按钮，设置 div 中的文本内容
// 上面的写法不好，因为可能有些浏览器不支持 innerText，而支持 textContent，所以需要用下面的方法
document.getElementById("btn").onclick = function(){
	// setInnerText 是封装的函数（见“获取元素”篇）
	setInnerText(document.getElementById("div1"),"我是 div1 里面的内容");
}

// 点击按钮，给 div 里面添加 html 标签（innerHTML）
// innerHTML 不仅仅可以添加标签，也可以像 innerText 一样，仅仅添加无标签的内容，并且在所有浏览器中都通用，不需要像 innerText 一样用函数去判断下
document.getElementById("btn").onclick = function(){
	document.getElementById("div2").innerHTML = "<p>这是一个p标签</p>";
}

// 点击按钮，获取 div 里面的内容（innerHTML）
document.getElementById("btn").onclick = function(){
	// innerHTML 不仅仅可以获取 div 里的文本内容，还可以获取 div 里嵌套的所有 html 标签及标签里的内容，而 innerText 只能获取文本内容
	console.log(document.getElementById("div3").innerHTML);
}
		
// 点击按钮，通过标签 id，改变 div 标签的样式
document.getElementById("btn").onclick=function(){
	//第1种方法
	var obj = document.getElementById("dv");
	obj.style.width = "300px";	// 因为这里设置的是 css，所以需要加单位 px
	obj.style.height = "300px";
	obj.style.backgroundColor = "#000";	// #000 是黑色（凡是在 CSS 中多单词的属性，比如 background-color，在 js 中需要将横杠去掉，然后将后面的单词的首字母大写）
	obj.style.marginTop = "20px";	// 设置 div 上边距为 20px

	// 第2种方法（通过将标签的 class 属性，改成 style 里面的类选择器名）
	obj.className = "dvClass";	// 这里可以同时赋多个 className ，用空格分隔，比如 obj.className = "dvClass dvClass2";
}
				
// 点击两个按钮，显示和隐藏 div
document.getElementById("hide").onclick = function(){
	document.getElementById("dv2").style.display = "none";
}
document.getElementById("show").onclick = function(){
	document.getElementById("dv2").style.display = "block";
}

// 点击一个按钮，显示和隐藏 div
document.getElementById("showAndHide").onclick = function(){
	if(this.value == "隐藏"){
		document.getElementById("dv2").style.display = "none";
		this.value = "显示";
	}else if(this.value == "显示"){
		document.getElementById("dv2").style.display = "block";
		this.value = "隐藏";
	}
}

    img

    // 点击按钮，通过标签 id，在 img 标签里，显示图片，并设置图片的宽和高
document.getElementById("btn").onclick = function(){
	var imgObj = document.getElementById("picture");
	imgObj.src = "desk.jpg";
	imgObj.width = 300;	// 因为这里是通过 html 属性设置的，所以不需要加 px（CSS 才需要加 px）
	imgObj.height = 200;
}

// 点击按钮，改变第一个 img 的 alt、title 属性
document.getElementById("btn").onclick = function(){
	var imgObjs = document.getElementsByTagName("img");
	imgObjs[0].alt = "改变了";	// imgObjs[0] 表示数组中的第一个元素
	imgObjs[0].title = "改好了";
}

// 点击图片，通过 this 关键字，改变 img 标签里，图片的宽、高
document.getElementById("picture2").onclick = function(){
	this.width = "300";	// 因为这里是通过 html 属性设置的，所以不需要加 px（CSS 才需要加 px）
	this.height = "300";
}

// 点击每个图片，弹出对话框
var imgObjs = document.getElementsByTagName("img");
for(int i=0; i<imgObjs.length; i++){
	imgObjs[i].onclick = function(){
		alert("图片被点击了");
	}
}

    p

    // 点击按钮，设置 p 标签里的内容
document.getElementById("btn").onclick = function(){
	document.getElementById("p1").innerText = "我是一个p标签";	// 建议用设置文本的封装函数，否则可能有些浏览器不支持 innerText
}

// 点击按钮，通过标签名字，获取到所有 p 标签（返回一个数组）
document.getElementById("btn").onclick = function(){
	var pObjs = document.getElementsByTagName("p");	// 因为标签可能重复，所以通过标签名字获取到的是数组形式
	for(var i=0; i<pObjs.length; i++){
		pObjs[i].innerText = "我们都是 p";	// 建议用设置文本的封装函数，否则可能有些浏览器不支持 innerText
	}
}

// 点击按钮，通过标签名字，获取到 div1 里的所有 p 标签（先获取到 div1，再找里面的 p）
document.getElementById("btn").onclick = function(){
	var pObjs = document.getElementById("div1").getElementsByTagName("p");
	for(var i=0; i<pObjs.length; i++){
		pObjs[i].innerText = "我们都是 div1 里面的 p";	// 建议用设置文本的封装函数，否则可能有些浏览器不支持 innerText
	}
}

// 点击按钮，获取所有类名为 aaa 的 p 标签，将背景改为红色
myGetById("btn").onclick = function(){
	// 根据类名来获取元素
	var pObjs = document.getelementsByClassName("aaa");
	for(var i=0; i<pObjs.length; i++){
		pObjs[i].style.backgroundColor = "red";
	}
}

    a

    // 点击按钮，修改 a 标签的地址和文字
document.getElementById("btn").onclick = function(){
	var aObj = document.getElementById("a1");
	aObj.href = "https://wwww.bjbcode.com";
	aObj.innerText = "百度";
}

// 点击超链接，禁止跳转到链接的界面
document.getElementById("a1").onclick = function(){
	return false;	// 这句是禁止跳转的功能
}

// 点击图片，设置图片的 src 变为 a 标签里 href 链接到的图片（小图变大图）
<a id="a1" href="images/1.jpg"><img src="images/1-small.jpg" alt="" id="img1"></a>     
document.getElementById("img1").onclick = function(){
	this.src = document.getElementById("a1").href;
	return false;	// 必须有这个，否则图片会在新标签页打开
}

// 点击超链接，使图片不在新页面打开，而在当前页面打开（小图变大图）
document.getElementById("a1").onclick = function(){
	document.getElementById("img1").src = this.href;
	return false;	// 必须要有这个，否则图片会在新标签页打开
}

// 点击小图，展示大图
// 点击 a 标签，把 a 标签中的 href 属性的值给 id 为 image 的图像的 src 属性
// 把 a 的 title 属性的值给 id 为 des 的 p 标签
/*
<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>
*/
<!-- 显示大图的 img 标签 -->
<img id="image" src="images/placeholder.png" alt="" width="450" />
<p id="des">选择一个图片</p>
// 从 ul 中获取获取所有的 a 标签
var aObjs = document.getElementById("imageGallery").getElementsByTagName("a");
// 循环遍历所有的 a 标签
for (var i = 0; i < aObjs.length; i++) {
	// 为每个 a 标签注册点击事件
	aObjs[i].onclick = function(){
		// 给 id 为 image 的图像标签的 src 属性赋值
		document.getElementById("image").src = this.href;
		// 为 p 标签赋值
		document.getElementById("des").innerText = this.title;
		// 阻止超链接默认的跳转
		return false;
	};
}

    input

    // 点击“只读”按钮，让文本框不可编辑(禁用)
document.getElementById("btn1").onclick = function(){
	document.getElementById("txt").disabled = true;
}

// 点击按钮修改所有文本框的值
document.getElementById("btn").onclick = function(){
	var inputObjs = document.getElementsByTagName("input");
	for(var i=0; i<inputObjs.length; i++){
		// 判断这个元素是不是文本框
		if(inputObjs[i].type == "text"){
			inputObjs[i].value = "我是被改变内容的文本框";
		}
	}
}
		
// 点击按钮，改变所有 name 属性为 abc 的文本框的 value 属性的值
document.getElementById("btn").onclick = function(){
	// 通过 name 属性的值获取元素（getElementsByName）
	var inputObjs = document.getElementsByName("abc");
	for(var i=0; i<inputObjs.length; i++){
		inputObjs[i].value = "根据 name 改变了 value";
	}
}
		
// 点击按钮，将按钮变成文本框
document.getElementById("btn").onclick = function(){
	this.type = "text";
}
				
// 点击按钮，选中单选框
document.getElementById("btn").onclick = function(){
	document.getElementById("radio1").checked = true;
}
				
// 点击按钮，选中几个复选框
document.getElementById("btn").onclick = function(){
	document.getElementById("checkbox1").checked = true;
	document.getElementById("checkbox2").checked = true;
	document.getElementById("checkbox3").checked = true;
}
						
// 排他功能（即点击按钮后，按钮内容改变，再点击其他按钮，已经改变的按钮内容恢复）
var arr = document.getElementsByTagName("input");	// 通过标签名字获取到的是数组，通过遍历分别注册点击事件
for(var i=0; i<arr.length; i++){
	arr[i].onclick = function(){	// 按钮被点击的时候，再循环一遍所有按钮，将内容都变成初始的
		for(var j=0; j<arr.length; j++){
			arr[j].value = "确定";
		}
		// 最后将当前按钮内容改变(这里必须用 this，不能用 arr[i]，因为外层循环在页面加载的时候就已经执行结束了，事件是点击的时候发生的，这时候访问不到外层循环的 arr[i])
		this.value = "点击";	
	}
}

    textarea

    // 点击按钮，修改文本域里的内容
document.getElementById("btn").onclick = function(){
	document.getElementById("textarea1").value = "用 value 改变 textarea 的内容";	// 推荐用 value
	document.getElementById("textarea2").innerText = "用 innerText 改变 textarea 的内容";
}

    ul

    // 点击按钮，让列表隔行变色
/*
<ul id="ul1">
	<li>卡卡西</li>
	<li>大蛇丸</li>
	<li>鸣人</li>
</ul>
*/
document.getElementById("btn2").onclick = function(){
	var arr = document.getElementById("ul1").getElementsByTagName("li");
	for(var i=0; i<arr.length; i++){
		if(i%2 == 0){
			arr[i].style.backgroundColor = "red";
		}else{
			arr[i].style.backgroundColoe = "yellow";
		}
	}
}
				
//点击按钮改变背景颜色
document.getElementById("btn").onclick = function(){
	document.getElementById("ul1").style.backgroundColor = "yellow";
}
						
//点击 li，显示每个 li 里自定义属性 score 里的存储的信息
/*
score 是自定义的属性，用来存储每个人的成绩
<ul id="uu">
	<li score="10">张三</li>
	<li score="10">李四</li>
	<li score="10">王五</li>
	<li score="10">麻子</li>
	<li score="10">瘸子</li>
	<li score="10">瞎子</li>
	<li score="10">聋子</li>
</ul>
*/
var liObjs = document.getElementsByTagName("li");
for(var i=0; i<liObjs.length; i++){
	liObjs[i].onclick = function(){
		//自定义的属性，不能通过 this.scroe 直接访问到，必须通过 getAttribute 去获取
		alert(this.getAttribute("score"));
	}
}
									
//点击 li，为每个 li 设置自定义属性和值
/*
score 是自定义的属性，用来存储每个人的成绩
<ul id="uu">
	<li>张三</li>
	<li>李四</li>
	<li>王五</li>
	<li>麻子</li>
	<li>瘸子</li>
	<li>瞎子</li>
	<li>聋子</li>
</ul>
*/
var liObjs = document.getElementById("uu").getElementsByTagName("li");
for(var i=0; i<liObjs.length; i++){
	liObjs[i].onclick = function(){
		//为每个里添加自定义属性和值
		this.setAttribute("score",10);
	}
}
												
//点击 li，移除 li 的自定义属性（也可以移除标签自带的属性）
/*
score 是自定义的属性，用来存储每个人的成绩
<ul id="uu">
	<li score="10">张三</li>
	<li score="10">李四</li>
	<li score="10">王五</li>
	<li score="10">麻子</li>
	<li score="10">瘸子</li>
	<li score="10">瞎子</li>
	<li score="10">聋子</li>
</ul>
*/
var liObjs = document.getElementById("uu").getElementsByTagName("li");
for(var i=0; i<liObjs.length; i++){
	liObjs[i].onclick = function(){
		// 移除自定义属性（也可以移除标签自带的属性）
		this.removeAttribute("score");
	}
}

    select

    // 点击按钮，选中下拉选项中的一个
document.getElementById("btn").onclick = function(){
	document.getElementById("option1").selected = true;
}

    鼠标事件

    滑过和离开

    // div 边框高亮显示
var arr = document.getElementsByTagName("div");
for(var i=0; i<arr.length; i++){
	arr[i].onmouseover = function(){
		this.style.border = "1px solid red";
	}
	arr[i].onmouseout = function(){
		this.style.border = "1px solid #000";
	}
}
		
// 鼠标在列表上移动，列表背景变色
var liObjs = document.getElementById("ul1").getElementsByTagName("li");
for(var i=0; i<liObjs.length; i++){
	// 为 li 定义鼠标进入事件
	liObjs[i].onmouseover = function(){
		this.style.backgroundColor = "yellow";
	}
	// 为 li 定义鼠标离开事件
	liObjs[i].onmouseout = function(){
		// 设为空，则表示恢复原来的颜色
		this.style.backgroundColor = "";
	}
}

// 图片跟着鼠标移动（通过鼠标移动的横纵坐标）
document.onmousemove = function(e){
	// e.clientX 为鼠标当前横坐标
	document.getElementById("img1").style.left = e.clientX + "px";
	// e.clientY 为鼠标当前纵坐标
	document.getElementById("img1").style.top = e.clientY + "px";
}

    获取/失去焦点

    //获取到焦点（onfocus），使文本框内容消失
document.getElementById("txt").onfocus = function(){
	// 防止已经输入内容，再次修改时，内容被清空
	if(this.value == "请输入内容"){
		this.value = "";
	}
}

//失去焦点（onblur），使文本框内容恢复
document.getElementById("txt").onblur = function(){
	// 方法一
	// 避免输入内容后，失去焦点，输入的内容被清空
	if(this.value == ""){
		this.value = "请输入内容";
	}

	// 方法二
	// 建议使用这种方法判断文本框中有没有内容，因为判断长度更快
	if(this.value.length == 0){
		this.value="请输入内容";
	}
}

    键盘事件

    抬起事件

    // 模拟百度搜索框，输入后内容后下面出现提示信息
/*
<div id="box">
	<input type="text" id="txt" value="">
	<input type="button" value="搜索" id="btn">
</div>
*/
var keyWords = ["床前明月光", "小桥流水人家", "落霞与孤鹜齐飞", "莫愁前路无知己", "天苍苍野茫茫", "满船清梦压星河", "孤舟蓑笠翁", "牧童遥指杏花村"];
// 获取文本框，注册键盘抬起事件
document.getElementById("txt").onkeyup = function () {
	// 每一次的键盘抬起都判断页面中有没有这个 div，有就删除（比如删除掉文本框中的内容后，需要删除掉 div）
	if(document.getElementById("dv")){
		// 删除一次
		document.getElementById("box").removeChild(document.getElementById("dv"));
	}
	// 获取文本框输入的内容
	var text = this.value;
	// 创建临时数组---空数组------->存放对应上的数据
	var tempArr = [];
	// 把文本框输入的内容和原数组中的每个数据对比（不一样的增加到临时数组中进行展示）
	for (var i=0; i<keyWords.length; i++) {
		// 是否是最开始出现的
		if(keyWords[i].indexOf(text) == 0) {
			// 追加
			tempArr.push(keyWords[i]);
		}
	}
	// 如果文本框是空的，临时数组是空的，不用创建 div
	if (this.value.length == 0 || tempArr.length == 0) {
		// 如果页面中有这个 div,删除这个 div
		if (document.getElementById("dv")) {
			document.getElementById("box").removeChild(document.getElementById("dv"));
		}
		return;
	}
	// 创建 div，把创建的 div 加入 id 为 box 的 div 中
	var dvObj = document.createElement("div");
	document.getElementById("box").appendChild(dvObj);
	dvObj.id = "dv";
	dvObj.style.width = "350px";
	// 不需要设置 height，里面的内容会自动撑开盒子
	// dvObj.style.height="100px";
	dvObj.style.border = "1px solid green";
	// 循环遍历临时数组，创建对应的 p 标签
	for (var i=0; i<tempArr.length; i++) {
		// 创建 p 标签
		var pObj = document.createElement("p");
		//把 p 加到 div 中
		dvObj.appendChild(pObj);
		setInnerText(pObj, tempArr[i]);
		pObj.style.margin = 0;
		pObj.style.padding = 0;
		pObj.style.cursor = "pointer";
		pObj.style.marginTop = "5px";
		pObj.style.marginLeft = "5px";
		// 鼠标进入
		pObj.onmouseover = function () {
			this.style.backgroundColor = "yellow";
		}
		// 鼠标离开
		pObj.onmouseout = function () {
			this.style.backgroundColor = "";
		}
	}
}

    Copyright © 2023 Bjbcode All Rights Reserved.

    关于我们 联系我们 捐赠我们 免责声明

    沪ICP备2020027631号