JavaScript基础学习02

最新推荐文章于 2021-12-02 17:42:04 发布
原创 最新推荐文章于 2021-12-02 17:42:04 发布 · 518 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文详细介绍了JavaScript中的DOM操作，包括DOM简介、查询、增删改、操作CSS以及事件对象和事件处理。讲解了如何获取和操作元素节点，如innerHTML、innerText属性，以及如何添加、删除和修改节点。此外，还探讨了事件处理，如onmousemove、onclick，以及事件冒泡、事件委派等概念。最后，提到了BOM中的window、navigator、location、history和screen对象，以及定时器的使用。

1 DOM

1.1 DOM简介

Document Object Module文档对象模型

JS中通过DOM对HTML文档进行操作

  • 文档表示的就是整个HTML网页文档
  • 对象表示将网页中的每一个部分都转换为了一个对象
  • 使用模型来表示对象之间的关系，这样方便我们获取对象

在这里插入图片描述

节点Node

构成网页的最基本的组成部分，网页中的每一个部分都是一个节点

  • 文档节点：整个HTML文档
  • 元素节点：HTML文档中的HTML标签
  • 属性节点：元素的属性
  • 文本节点：HTML标签中的文本内容

节点属性
在这里插入图片描述

DOM的使用

例：获取到button对象

  • 通过文档对象获取
  • 浏览器已经为我们提供文档节点对象，这个对象是window的属性
    • 可以在页面中直接使用，文档节点代表的是整个网页
<!DOCTYPE html>
<html>
	<body>
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			// console.log(document); 
			// 获取button对象
			var btn = document.getElementById("btn");
			console.log(btn); //<button id="btn">我是一个按钮</button>
			// 修改按钮的文字
			console.log(btn.innerHTML); //我是一个按钮
			btn.innerHTML = "I'm Button";
		</script>
	</body>
</html>

事件

用户和浏览器之间的交互行为，比如：点击按钮、鼠标移动、关闭窗口。

1.我们可以在事件对应的属性中设置一些js代码，当事件被触发，代码执行：

// 点击按钮，会有弹窗“点我干嘛？”
<button id="btn" onclick="alert('点我干嘛？')">我是一个按钮</button>

2.还可以为按钮的对应事件绑定处理函数的形式来响应事件：

当事件被触发时，其对应的函数将会被调用

<body>
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
	var btn = document.getElementById("btn");

	//绑定一个单击事件
	btn.onclick = function() {
		alert("你还点");
	};
</script>
</body>
onmousemove

鼠标被移动

onclick

鼠标点击某个对象

文档的加载

浏览器加载页面时按照自上向下的顺序加载，读取一行运行一行，所以script标签要按顺序写在body里

  • 页面加载之后执行相关事件（可以将script标签写到head标签里）
    • onload事件会在整个页面加载完成之后触发
    • 为window绑定一个onload事件
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var btn = document.getElementById("btn");
				//绑定一个单击事件
				btn.onclick = function() {
					alert("hello");
				};
			}
		</script>
	</head>
	<body>
		<button id="btn">我是一个按钮</button>
	</body>
</html>

1.2DOM查询

获取元素节点

通过document对象调用

  • getElementById()：通过id属性获取一个元素节点对象
  • getElementsByTagName()：通过标签名获取一组元素节点对象
    • 返回一个类数组对象，所以查询到的元素都会封装到对象中
  • getElementsByName()：通过name属性获取一组元素节点对象
  • document.body属性返回 body元素， document.documentElement 属性返回 html 元素。
innnerHTML

通过innerHTML属性可以获取到元素内部的html代码

  • 不能获取input标签内容，因为没有内部，是自闭和标签
  • 如果获取文本框中的内容(input的type=text)，就用input对象.value，value属性就是文本框内容
innerText

该属性可以获取到元素内部的文本内容

  • 与innerHTML类似，不同的是他会自动将标签去除
元素.属性名

如果需要读取元素节点的属性，直接用“元素.属性名”

  • 例如：元素.id，元素.name，元素.value
  • 注意：class属性不能采取这种方式，正确形式“元素.className”
练习：图片切换

获取元素节点的子节点

通过元素节点调用

  • getElementsByTagName()：方法，返回当前节点的指定标签名后代节点
  • childNodes：属性，表示当前节点的所有子节点
    • 空白文本也算一个文本节点
  • children：属性，获取当前元素的所有子元素
    • 空白文白不是子元素
  • firstNodes：属性，表示当前节点的第一个子节点
  • firstElementChild：属性，表示当前元素的第一个子元素
    • 不支持IE8
  • lastNodes：属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点

通过具体的节点调用

  • parentNode：属性，表示当前节点的父节点
  • previousSibling：属性，表示当前节点的前一个兄弟节点
  • previousElementSibling：属性，表示当前节点的前一个兄弟元素（IE8及以下不兼容）
  • nextSibling：属性，表示当前节点的后一个兄弟节点
@CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
			// 定义一个函数，为指定元素绑定单击响应函数
			function myClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			window.onload = function() {
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function() {
					// 查找#bj节点
					var bj = document.getElementById("bj");
					alert(bj.innerHTML);
				};

				var btn02 = document.getElementById("btn02");
				btn02.onclick = function() {
					// 查找所有li节点
					var lis = document.getElementsByTagName("li");
					for (var i = 0; i < lis.length; i++) {
						alert(lis[i].innerHTML);
					}
				};

				var btn03 = document.getElementById("btn03");
				btn03.onclick = function() {
					// 查找name=gender的所有节点
					var ng = document.getElementsByName("gender");
					for (var j = 0; j < ng.length; j++) {
						alert(ng[j].className);
					}
				}

				var btn04 = document.getElementById("btn04");
				// 查找#city下所有li节点
				btn04.onclick = function() {
					var city = document.getElementById("city");
					var lis = city.getElementsByTagName("li");
					for (var i = 0; i < lis.length; i++) {
						alert(lis[i].innerHTML);
					}
				}
				var btn05 = document.getElementById("btn05");
				// 返回#city的所有子节点
				btn05.onclick = function() {
					var city = document.getElementById("city");
					var citys = city.children;
					for (var i = 0; i < citys.length; i++) {
						alert(citys[i].innerHTML);
					}
				}
				var btn06 = document.getElementById("btn06");
				// 返回#phone的第一个子节点
				btn06.onclick = function() {
					var phone = document.getElementById("phone");
					var p1 = phone.firstChild;
					alert(p1);
				}

				myClick("btn07", function() {
					// 返回#bj的父节点
					var bj = document.getElementById("bj");
					var bjp = bj.parentNode;
					alert(bjp.innerText);
				});

				myClick("btn08", function() {
					// 返回#android的前一个兄弟节点
					var android = document.getElementById("android");
					var ps = android.previousElementSibling;
					alert(ps.innerHTML);
				});

				myClick("btn09", function() {
					// 返回#username的value属性值
					var um = document.getElementById("username");
					alert(um.value);
				});

				myClick("btn10", function() {
					// 设置#username的value属性值
					var um = document.getElementById("username");
					um.value = "1234";
				});

				myClick("btn11", function() {
					// 返回#bj的文本值
					var bj = document.getElementById("bj");
					alert(bj.innerHTML);
					// 获取bj中的文本节点
					var fc = bj.firstChild;
					alert(fc.nodeValue);
					
					alert(bj.firstChild.nodeValue);
				});
			}
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone">
					<li>IOS</li><li id="android">Android</li><li>Windows Phone</li>
				</ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male" />
				Male
				<input class="hello" type="radio" name="gender" value="female" />
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde" />
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

全选练习

  • checked属性：设置或返回 checkbox 的选中状态

其他方法

document中的属性
  • document.body，在document中有一个属性body，它保存的是body的引用
  • document.documentElement，保存的是html根标签
  • document.all，代表页面中所有的元素
    • document.getElementsByTagName("*")，获取页面中的所有元素
document中的方法

  • getElementsByClassName()

    • 可以根据class属性值获取一组元素节点对象
    • IE9及以上的浏览器支持

  • querySelector()

    • 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
    • IE8及以上支持
    • 使用该方法总会返回唯一的元素，如果满足条件的元素有多个，只会返回第一个

  • querySelectorAll()

    • 将符合条件的元素封装到一个数组中返回
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				// 获取class为box1中的所有的div
				var div = document.querySelector(".box1 div");
				console.log(div.innerHTML); //我是box1中的div
			}
		</script>
	</head>
	<body>
		<div class="box1">
			<div>我是box1中的div</div>		
		</div>
		<div></div>
	</body>
</html>

1.3 DOM增删改

  • appendChild()：把新的子节点添加到指定节点
    • 父节点.appendChild(子节点)
  • removeChild()：删除子节点
    • 父节点.removeChild(子节点);
    • 不知道父节点可以使用子节点.parentNode.removeChild(子节点)
  • replaceChild()：替换子节点
    • 父节点.replaceChild(新节点，旧结点)
  • insertBefore()：在指定的子节点前面插入新的子节点
    • 父节点.insertBefore(新的子节点，指定的子节点)
  • createElement()：创建元素节点
    • 需要一个标签名作为参数
  • createTextNode()：创建文本节点
    • 需要一个文本内容作为参数

使用innerHTML添加节点

例如：创建一个"广州"节点,添加到#city下

city.innerHTML += "<li>广州</li>";

@CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style/css2.css" />
		<script type="text/javascript">
			window.onload = function() {
				// 创建一个"广州"节点,添加到#city下
				myClick("btn01",function() {
					// <li>广州</li>
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					// li.innerHTML = "广州";
					li.appendChild(gzText);
					// 添加到#city下
					var city = document.getElementById("city");
					city.appendChild(li);
				});
				// 将"广州"节点插入到#bj前面
				myClick("btn02", function() {
					// <li>广州</li>
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					// 插入到#bj前面
					var bj = document.getElementById("bj");
					var city = document.getElementById("city");
					city.insertBefore(li,bj);
				});
				// 使用"广州"节点替换#bj节点
				myClick("btn03",function() {
					// <li>广州</li>
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					// 替换#bj节点
					var bj = document.getElementById("bj");
					var city = document.getElementById("city");
					city.replaceChild(li,bj);
				});
				// 删除#bj节点
				myClick("btn04",function(){
					var bj = document.getElementById("bj");
					var city = document.getElementById("city");
					city.removeChild(bj);
				});
				// 读取#city内的HTML代码
				myClick("btn05",function(){
					var city = document.getElementById("city");
					alert(city.innerHTML);
				});
				// 设置#bj内的HTML代码
				myClick("btn06",function(){
					var bj = document.getElementById("bj");
					bj.innerHTML = "昌平";
				});
				// 创建一个"广州"节点,添加到#city下,使用innerHTML
				myClick("btn07",function(){
					var city = document.getElementById("city");
					city.innerHTML += "<li>广州</li>";
				});
				
			};
			function myClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>

添加删除记录练习

  • 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为

    • 如果不希望跳转，可以通过在响应函数的最后return false来取消默认行为
    • 或者为超链接设置属性href="javascript:;"

  • confirm() ：显示带有一段消息以及确认按钮和取消按钮的对话框

    • 确认返回true，取消返回false

1.4 使用DOM操作CSS

操作内联样式

修改样式

通过JS修改元素的样式，语法：元素.style.样式名 = 样式值

  • 如果css样式名中有-，这种名称在js中不合法，比如background-color
  • 需要将这种样式名修改为驼峰命名法，修改之后backgroundColor

通过style属性设置的样式都是内联样式，优先级比较高所以通过js修改的样式往往会立即显示

  • 如果在样式中写了important，则此时样式会有最高的优先级
  • 即使通过js也不能覆盖样式
读取样式

语法：元素.style.样式名

  • 通过style属性读取的样式都是内联样式，无法读取样式表中的样式

获取元素的当前显示的样式

  • 语法：元素.currentStyle.样式名
  • 只有IE支持，没有设置此样式返回默认值
  • 在其他浏览器可以使用getComputedStyle()这个方法来获取元素当前的样式
    • 是window的方法，可以直接使用
    • （要获取样式的元素，伪元素或者null）
    • 返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式
    • 如果获取的样式没有设置，则会获取到真实的值而不是默认值
    • 不支持IE8及以下
var obj = getComputedStyle(box1,null);
alert(obj.width);

定义一个函数，用来获取指定元素当前的样式

/* 
	参数：obj 要获取样式的元素
		 name 要获取的样式名
 */
function getStyle(obj, name) {

	if (window.getComputedStyle) {
		// 正常浏览器的方式
		return getComputedStyle(obj, null)[name];
	} else {
		// IE8的方式
		return obj.currentStyle[name];
	}
}

其他样式相关的属性

返回不带px的数字，可以直接进行计算

element.clientHeight：返回元素的可见高度，element.clientWidth：返回元素的可见宽度

  • 获取的元素宽高，包括内容区和内边距
  • 只读，不能设置

element.offsetHeight返回元素的高度，element.offsetWidth返回元素的宽度

  • 获取元素的整个宽度和高度，包括内容区，内边距和边框

element.offsetParent返回元素的偏移容器

  • 用来获取当前元素的定位父元素
  • 会获取到离我们当前元素最近的开启了定位的祖先元素
  • 如果所有的祖先元素都没有开启定位，则返回body

element.offsetLeft返回元素的水平偏移位置

  • 当前元素相对于其定位父元素的水平偏移量

element.offsetTop返回元素的垂直偏移位置

  • 当前元素相对于其定位父元素的垂直偏移量

element.scrollLeft返回元素左边缘与视图之间的距离

  • 可以获取水平滚动条滚动的距离

element.scrollTop返回元素上边缘与视图之间的距离。

  • 可以获取垂直滚动条滚动的距离

element.scrollHeight返回元素的整体高度，
element.scrollWidth返回元素的整体宽度。

  • 获取元素整个滚动区域的高度和宽度

当满足scrollHeight - scrollTop == clientHeight说明垂直滚动条滚到底了
当满足scrollWidth - scrollLeft == clientWidth说明水平滚动条滚到底了

onscroll事件

该事件会在元素的滚动条滚动时触发

练习：允许用户注册
HTML DOM Checkbox 对象

要学会自己在W3Cshchhol查找对象及其属性

disabled属性：可设置或返回是否禁用 checkbox

2 Event事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

  • 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下，鼠标滚轮滚动的方向

属性：

  • clientX，clientY：返回当事件被触发时，鼠标指针的水平或者垂直坐标

在IE8中，响应被触发时，浏览器不会传递事件对象，而是将事件对象作为window对象的属性保存

 /* 当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标 */
 // 获取两个div
 var areaDiv = document.getElementById("areaDiv");
 var showMsg = document.getElementById("showMsg");
 // 鼠标移动事件
 areaDiv.onmousemove = function (event) {
     // 显示坐标
     var x = event.clientX;
     var y = event.clientY;
     showMsg.innerHTML = "x = " + x + ", y = " + y;
 };

练习：div跟随鼠标移动

  • clientX，clientY用于获取鼠标在当前的可见窗口的坐标
  • div的偏移量是相对于整个页面的
  • pageX，pageY用于获取鼠标在整个页面的坐标（不兼容IE8）
    在这里插入图片描述

事件冒泡Bubble

事件的向上传导，当后代元素上的事件被触发，其祖先元素的相同事件也会被触发

  • 在大部分情况中冒泡有用
  • 如果不希望发生事件冒泡，可以通过事件对象来取消冒泡
s1.onclick = function(event) {
	event = event || window.event;
	alert("我是span的单击响应函数");
	//取消冒泡
	event.cancelBubble = true;
	//s1元素的祖先元素的相同事件将不被触发
}

事件委派

将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

  • 通过委派可以减少事件绑定的次数

target：返回触发此事件的元素（事件的目标节点）。

  • event中的target表示的触发事件的对象
u1.onclick = function(event) {
	event = event || window.event;
	// 如果触发事件的对象是我们期望的元素则执行，否则不执行
	if (event.target.className == "link") {
		alert("ul");
	}
};

事件的绑定

使用对象.事件 = 函数的形式绑定响应函数

  • 它只能同时为一个元素的一个时间绑定一个响应函数
  • 不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

addEventListener()

  • 通过这个方法也可以为元素绑定响应事件，可以同时为一个元素的相同事件同时绑定多个响应函数，当事件被触发响应函数将按照函数的绑定顺序执行

  • 参数：

    • 事件的字符串，不要on
    • 回调函数，当事件触发该函数会被调用
    • 是否在捕获阶段触发事件，一般传false

  • IE8不支持此方法

    • attachEvent()：在IE8中可以使用此方法来绑定事件
    • 参数：事件的字符串，要on；回调函数
    • 注意：后绑定先执行

事件的传播

  • 关于事件的传播网景公司和微软公司有不同的理解

  • 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

  • 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素

  • W3C综合了两个公司的方案，将事件传播分成了三个阶段

    • 捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
    • 目标阶段： 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
    • 冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

  • 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

鼠标事件

拖拽练习

return false; 取消默认行为

流程：

  1. 当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
  2. 当鼠标被移动时被拖拽元素跟随鼠标移动onmousemove
  3. 当鼠标松开时被拖拽元素固定在当前位置onmouseup
滚轮事件

onwheel事件在鼠标滚轮在元素上下滚动时触发

  • chrome和火狐支持，IE不支持
  • onmousewheel，IE支持

event.wheelData可以获取鼠标滚轮滚动的方向

  • 向上滚数值为正，向下滚数值为负
  • 火狐不支持，火狐使用event.detail来获取，向上滚为负，向下滚为正

键盘事件

一般绑定给可以获取到焦点的对象或者document

  • onkeydown：某个键盘按键被按下
    • 如果一直按着某个按键不松手，事件会一直被触发
    • 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一些，之后很快，这种设计是为了防止误操作的发生
  • onkeyup：某个键盘按键被松开
  • onkeypress:某个键盘按键被按下并松开

event.keyCode可以获取按键的编码

  • 判断哪个按键被按下

event.ctrlKey返回当事件被触发时，“CTRL” 键是否被按下（alt和shift同）

var input = document.getElementsByTagName("input")[0];
input.onkeypress = function(event) {
	enent = event || window.event;
	// console.log(event.keyCode);
	// 使文本框中不能输入数字
	if (event.keyCode >= 48 && event.keyCode <= 57) {
		// 取消默认行为，输入的内容不会出现在文本框中
		return false;
	}
};

3 BOM

浏览器对象模型：BOM提供了一组对象可以使我们通过JS操作浏览器

Browser对象

Navigator、Location、History、Screen都是window对象的属性

window

代表的是整个浏览器窗口，同时window也是网页中的全局对象

Navigator

代表当前浏览器的信息，通过该对象可以来识别不同的浏览器

  • appName：返回浏览器的名称
  • 由于历史原因，Navigator对象中的大部分属性已经不能帮助我们识别浏览器了
  • 一般我们会使用userAgent来判断浏览器的信息
    • userAgent：是一个字符串，字符串中包含有用来描述浏览器信息的内容
    • 不能判断IE10
var a = navigator.userAgent;
console.log(a);
if (/chrome/i.test(a)) {
	alert("你是chrome");
} else if (/firefox/i.test(a)) {
	alert("你是firefox");
}else if (/msie/i.test(a)) { // IE10及以下
	alert("你是IE"); 
}
  • 如果通过userAgent不能判断，还可以通过一些浏览器特有的对象，来判断浏览器的信息
    • 比如：ActiveXObjective，时window对象的属性
if("ActiveXObject" in window) {
	alert("你是IE11");
}

Location

代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

  • 如果直接打印location可以获取到地址栏的信息（当前页面的完整路径）
  • 如果直接将location属性修改为一个完整的路径或相对路径，则我们的页面会直接跳转，而且会生成相应的历史记录

方法：

  • assign()：加载新的文档，作用和修改location一样
  • reload()：重新加载当前文档
    • 没有参数，作用和刷新按钮一样
    • 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
  • replace()：用新的文档替换当前文档，不会在 History 对象中生成一个新的记录

History

代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录

  • 由于隐私的原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
  • 而且该操作只在当此访问时有效

属性：

  • length：返回浏览器历史列表中的 URL 数量

方法：

  • back()：加载 history 列表中的前一个 URL
  • forward()：加载 history 列表中的下一个 URL
  • go()：加载 history 列表中的某个具体页面

Screen

代表用户的屏幕的信息，通过该对象可以获取用户的显示器的相关信息

4 定时器

  • setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
    • 返回number类型的数据
    • 这个数字用来作为定时器的唯一标识
  • clearInterval()：取消由 setInterval() 设置的 定时器
    • 如果参数是由 setInterval() 返回的 标识，停止定时器
    • 如果参数不是有效标识，则什么也不做
var count = document.getElementById("count"); //h1标题
var num = 1;
var timer = setInterval(function() {
	count.innerHTML = ++num;
	if(num == 11) {
		clearInterval(timer);
	}
},1000);

自动切换图片练习

移动div练习

轮播图

5 其他

类的操作

通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面。这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便

我们可以通过修改元素的class属性来间接的修改样式，这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步的分离

// 本来box的class属性值是box1
box.className = "b2";

定义了四个函数

  • addClass：定义一个函数，用来向一个元素中添加指定的class属性值
  • hasClass：判断一个元素是否含有指定的class值
  • removeClass：删除一个元素中指定的class
  • toggleClass：切换一个类，如果元素中具有该类，则删除；如果元素中没有该类，则添加

案例：二级菜单

JSON

  • JS中的对象只有JS自己认识，其他的语言都不认识
  • JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
var json = '{"name": "孙悟空","age": 18,"gender": "男"}';
// json转为js
var o = JSON.parse(json);
console.log(o.name);

var obj = {name: "孙悟空",age: 18,gender: "男"};
// js转为json
var j = JSON.stringify(obj);
console.log(j);
console.log(typeof j);

JavaScript Object Notation JS对象表示法：JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一致

  • JSON分类：

    • 对象 {}
    • 数组 []

  • JSON中允许的值：字符串、数值、布尔值、null、对象、数组

eval()

  • 这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回
  • 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块，如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
var str = '{"name": "孙悟空","age": 18,"gender": "男"}';	
var obj = eval("("+str+")");
  • eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码，但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患
JavaScript进阶：事件和事件处理
XSL_HR的博客
09-17 1626
关于JavaScript事件的基础知识整理
《前端》自动触发点击事件
BelleDiao的博客
05-07 8819
1、 //自动点击的方法 clickId 点击事件的id属性值 字符串类型 function autoClick(clickId) { // IE if (document.all) { document.getElementById(clickId).click(); } // 其它浏览器 else { var e =...
script text html 参数,<script type="text/html"></script> js模版使用
weixin_39887961的博客
06-11 2010
12341.首先这种写，在页面渲染的时候，浏览器不会读取script标签中的html代码2.外面不能获取到里面的div节点所以：在使用时，要在script标签上加个ID可以供我们找到它，即然做模版用，且里面的html代码不会被渲染读取，则需在外面再新建一个div来当容器，装下这些html代码，即我们可以通过var _html=document.getElementById('javascript_...
script type="text/html",<script type="text/html" id="">js模版引擎内运行js脚本
weixin_35127842的博客
07-15 4933
用户提问需求是这样的，当浏览器解析生成html部分的时候运行一个脚本程序动态控制其样式，比如代码1:{{data.title}}{{data.content}}代码1在浏览器内被解析后：Title 部分正问部分我是想在《 正问部分 》部分内容生成的时候运行一些脚本，动态控制其内文字数或这本分的大小随窗口大小而自适应等，如在：常规的方法是下面这个方法就可以的。但是在上面的代码1中不能嵌套下面的代码...
script type=“text/html“
weixin_37203411的博客
09-18 490
https://blog.csdn.net/qq_37796475/article/details/79342234
【译】使用 JavaScript 创建图
weixin_34290631的博客
05-14 147
图是由具有边的节点集合组成的数据结构。图可以是有向的或者是无向的。 有向图包含功能类似于单行道的边。边缘从一个节点流向另一个节点。 比如，你可能有一个（关于）人物和电影的图表，其中每个人可以有多个喜欢的电影，但是电影没有喜欢的人。 无向图包含双向流动的边缘，类似于双向道路，两个方向都有交通。 比如，你可能有一个宠物图表，其中每只宠物都有一个所有者，每个所有者都有一只宠物。 备注：（下面）双向...
js DOM
qq_36146167的博客
02-06 598
HTML DOM Document Object Model 文档对象模型，通过DOM可以来任意来修改网页中各个内容 文档 文档指的是网页，一个网页就是一个文档 对象 对象指将网页中的每一个节点都转换为对象 转换完对象以后，就可以以一种纯面向对象的形式来操作网页了 模型 模型用来表示节点和节点之间的关系，方便操作页面 节点（Node） ​ 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点 ​ 虽然都是节点，但是节点的类型却是不同的，所以属性和方法也都不尽相同 常用的节点 文档节点
JavaScript基础学习
07-10
JavaScript基础学习
HTML CSS and Javascript 基础学习代码.zip
最新发布
12-24
HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 ...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册六：JS条件语句
01-20
JavaScript是Web前端开发的核心语言之一，它为网页和应用程序提供了动态交互的能力。在JavaScript中，条件语句是...在头歌教学实践平台的Web前端开发课程中，这些基础知识的学习和实践将为你的编程技能打下坚实的基础。
JavaScript js基础学习 示例代码
07-03
JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础...
pythonspiit函数_python 闭包
weixin_39966765的博客
12-05 147
python 闭包1.什么是闭包如果在一个内部函数里，对在外部作用域(但不是在全局作用域)的变量进行引用，那么[内部函数和该变量]就构成了闭包(closure)。def out(x):def inner():print(x)return innerinner 和 x构成一个闭包2.闭包使用中的坑闭包中不能直接修改外部函数的局部变量(如果使用类似x = x + 1修改x的值,会直接报错Unbound...
document对象的方法、属性和事件
weixin_33796205的博客
05-03 244
<body> 1.在浏览器对象中，document文档对象是核心，表示整个网页文档中的实际内容。使用document对象可以访问HTML文档中的基本元素，并可以对元素进行编程，设置元素的属性。<br /> 2.在document对象中，包含links对象/anchor对象/form对象/p_w_picpaths对象等。<br /> 3...
js中click事件，事件名(函数名)不能为click，myclick,onclick等保留名称
qq_34057640的博客
10-27 3664
菜鸟教程(runoob.com) function onclick(){ alert(11) } function myclick(){ alter(11) } function dianji(){   alert(11) } 此时只有dianji()函数名时才能触发
Js-三大事件（鼠标事件、键盘事件、html事件）
热门推荐
qwer_df_b的博客
08-23 9万+
鼠标事件、键盘事件、html事件
单调栈和单调队列
qq_40474548的博客
09-17 124
单调栈和单调队列 最近又在重新刷题，又看到了单调栈和单调队列的题目，发现当时也就是背一背就过了，没有领会到精髓，这次看了几位前辈写的心得，感觉理解深了一些。 单调队列: 传送门 关键：用单调队列来解决问题，一般都是需要得到当前的某个范围内的最小值或最大值。 就比如滑动窗口中的最大值问题(eg:[1,[1,2,3,4],5,6,7,7,9]), 如果入队的元素比队首的要大，则将队首的去掉直至满足递减条件，跟单调栈的一个区别在于队尾因为位置问题(划出窗口)需要更新。 单调栈: 传送门 关键：需要找列表中某个元素
前端学习笔记之——使用 Document 对象
前尘忆梦的博客
06-30 1465
使用 Document 对象 1、使用 Document 元数据 Document 对象的用途之一是向你提供关于文档的信息，下表介绍了用来获取文档元数据的属性。 属性 说明 返回 characterSet 返回文档的字符集编码。这是一个只读属性 字符串 charset 获取或设置文档的字符集编码 字符串 compatMode 获取文档的兼容性模式 字符串 cookie 获取或设置当前文档的 cookie 字符串 defaultCharset 获取浏览器所使用的默认字符编码 字
JavaScript的使用
maduan12的博客
12-02 898
1、介绍 js是一种基于对象和事件驱动、并且具有相对安全性的客户端脚本语言，是一种弱语言 js的主要目的是验证发往服务器端的数据、增加web互动、加强用户体验度等。 组成部分 ECMAScript(基础语法) ECMAScript定义的只是这门语言的基础，与web浏览器没有依赖关系 javascript的核心语法ECMAscript描述了该语言的语法和基本对象 DOM（文档对象模型） 描述了处理网页内容的方法和接口 DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间
深入学习JavaScript：基础教程第8版要点解析
总结来说，《JavaScript基础教程(第8版)》是一本适合初学者的全面的JavaScript学习书籍，从基础语法到高级应用，以及项目实践，都有详尽的讲解和示例，非常适合有志于从事Web开发的读者学习和使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值