JavaScript

最新推荐文章于 2024-04-28 11:43:36 发布

黄油^小饼干

最新推荐文章于 2024-04-28 11:43:36 发布

阅读量218

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Napom/article/details/106372484

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Function：函数对象

1、创建：
<script>
	//1.创建方式1（不常用）
	var fun1 = new Function("a", "b", "document.write((a + b) + '<br>');");
	fun1(2, 6);
	//2.创建方式2
	function fun2(a, b) {
		document.write((a + b) + "<br>");
	}
	fun2(3, 4);
	//3.创建方式3
	var fun3 = function(a, b) {
		document.write((a + b) + "<br>");
	}
	fun3(1, 2);
</script>
2、属性：length属性代表形参个数。
document.write(fun1.length + "<br>");
3、特点：

①方法定义时，形参的类型不用写，返回值类型也不写。

②方法是一个对象，如果定义名称相同的方法，会覆盖。

③在JS中，方法的调用只与方法的名称有关，与参数列表无关。

④在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数。例如：求任意个数的和。
function add() {
	var sum = 0;
	for(var i = 0; i < arguments.length; i++) {
		sum += arguments[i];
	}
	return sum;
}
var sum = add(1, 2, 3, 4, 5);
document.write(sum + "<br>");

Array：数组对象

1、创建：
var arr1 = new Array(1, 2, 3);
var arr2 = new Array(2); // 如果只有一个数，则代表数组长度
var arr3 = new Array();
var arr4 = [1, 2, 3, 4];
2、属性：length代表数组长度。
document.write(arr5.length);
3、方法：

①join(参数)：将数组中的元素按照指定的分隔符拼接为字符串。
var arr4 = [1, 2, 3, 4];
document.write(arr4.join("++"));
结果：

②push()：向数组的末尾添加一个或更多元素，并返回数组长度。

4、特点：

①JS中，数组元素的类型可变。

②JS中，数组长度可变。
var arr5 = [1, "abc", true];
document.write(arr5 + "<br>");
arr5[8] = 25;
document.write(arr5 + "<br>");
结果：

Date：日期对象

<script>
	//创建
	var date = new Date();
	document.write(date + "<br>");
	//根据本地时间格式，把Date对象转换为字符串
	document.write(date.toLocaleString() + "<br>");
	//返回1970年1月1日至今的毫秒数
	document.write(date.getTime() + "<br>");
</script>

RegExp：正则表达式对象

//  \w：[0-9],[a-z],[A-Z],_
var reg1 = new RegExp("\\w{6,12}");
var reg2 = /\w{6,12}/;
document.write(reg1 + "<br>");
document.write(reg2 + "<br>");
			
var username = "zhangsan";
var flag1 = reg1.test(username);
var flag2 = reg2.test(username);
document.write(flag1 + "<br>");
document.write(flag2 + "<br>");

Global

<script>
	var str1 = "无情哈拉少";
	var encode = encodeURI(str1);
	document.write(encode + "<br>");
	var str2 = decodeURI(encode);
	document.write(str2 + "<br>" + "<br>");
			
	var str3 = "http://www.baidu.com?wd=无情哈拉少";
	var en1 = encodeURI(str3);
	var en2 = encodeURIComponent(str3); // 编码的字符更多
	document.write(en1 + "<br>");
	document.write(en2 + "<br>" + "<br>");
			
	// parseInt():将字符串转换为数字
	// 逐一判断每一个字符是不是数字，直到不是数字为止，将前边数字部分转为number
	var str4 = "123abc";
	var num1 = parseInt(str4);
	document.write(num1 + 1 + "<br>");
			
	var str5 = "a12bc";
	var num2 = parseInt(str5);
	document.write(num2 + 1 + "<br>" + "<br>");
			
	// eval()：将JS字符串转换为脚本代码来执行
	var jscode = "document.write('hello world')";
	document.write(jscode + "<br>");
	eval(jscode);
</script>

结果：

BOM

1、概念

Browser Object Model 浏览器对象模型。将浏览器的各个组成部分封装成对象。

2、组成

(1)Window：窗口对象

①特点：

Window对象不需要创建可以直接使用（window）。例如：window.alter();

window也可以省略。例如：alter();

②方法：

* 与弹出框有关的方法：

alter()：显示带有一段消息和一个确认按钮的警告框。

comfirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。如果用户点击确认按钮，返回true，否则返回false。

prompt()：显示可提示用户输入的对话框。返回值：获取用户输入的值。

* 与打开关闭有关的方法：

open()：打开一个新的浏览器窗口，返回新的Window对象。

close()：关闭浏览器窗口，谁调用关谁。
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Window</title>
</head>
<body>
	<input id="openBtn" type="button" value="打开窗口">
	<input id="closeBtn" type="button" value="关闭窗口">
	
	<script>
		//打开窗口
		var openBtn = document.getElementById("openBtn");
		var newWindow;
		openBtn.onclick = function() {
			newWindow = open("https://www.baidu.com");
		}
		//关闭窗口
		var closeBtn = document.getElementById("closeBtn");
		closeBtn.onclick = function() {
			//要想关新打开的窗口，必须用新窗口的对象调用close()
			newWindow.close();
		}
	</script>
</body>
</html>
* 与定时器有关的方法：

setTimeout()：在指定的毫秒数后调用函数或计算表达式。参数：JS代码或者方法对象，毫秒值。返回值：唯一标识，用于取消定时器。

clearTimeout()：取消由setTimeout()方法设置的timeout。

setInterval()：按照指定的周期（毫秒）来调用函数或计算表达式。参数和返回值与setTimeout一样。

clearInterval()：取消由setInterval()设置的timeout。
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Window</title>
</head>
<body>
	<script>
		var id1 = setTimeout(fun,2000);
		clearTimeout(id1);
		
		var id2 = setInterval(fun,2000);
		clearInterval(id2);
		
		function fun() {
			alert('boom!');
		}
	</script>
</body>
</html>
例子：轮播图
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
</head>
<body>
	
	<img id="img" src="../img/zw1.jpg" width="80%">
	
	<script>
		var num = 1;
		function fun() {
			num++;
			if(num > 4) {
				num = 1;
			}
			var img = document.getElementById("img");
			img.src = "../img/zw" + num + ".jpg";
		}
		
		setInterval(fun,2000);
	</script>
</body>
</html>
③属性：

* 获取其他BOM对象：history，location，navigator，screen

* 获取DOM对象：document

(2)Location：地址栏对象
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Location</title>
</head>
<body>
	<input id="btn" type="button" value="刷新">
	<input id="bd" type="button" value="百度">
	
	<script>
		var btn = document.getElementById("btn");
		btn.onclick = function() {
			// 重新加载
			location.reload();
		}
		
		var bd = document.getElementById("bd");
		bd.onclick = function() {
			// 改变URL
			location.href = "https://www.baidu.com";
		}
	</script>
</body>
</html>
(3)History：历史记录对象

(4)Navigator：浏览器对象

(5)Screen：显示器屏幕对象

案例：自动跳转到首页

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>案例</title>
	<style type="text/css">
		p {
			text-align: center;
		}
		span {
			color: red;
		}
	</style>
</head>
<body>
	<p>
		<span id="time">5</span>秒之后，自动跳转到首页...
	</p>
	
	<script>
		var second = 5;
		var time = document.getElementById("time");
		function showTime() {
			second--;
			if(second <= 0) {
				location.href = "https://www.baidu.com";
			}
			time.innerHTML = second + "";
		}
		
		setInterval(showTime,1000);
	</script>
</body>
</html>

DOM

1、概念

Document Object Model 文档对象模型。将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行动态操作。

2、Document：文档对象

* 方法

①getElementById()：根据id属性值获取元素对象，id属性值一般唯一。

②getElementsByTagName()：根据元素名称获取元素对象，返回值是一个数组。

③getElementsByName()：根据name属性值获取元素对象，返回值是一个数组。

④getElementsByClassName()：根据class属性值获取元素对象，返回值是一个数组。
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<style>
		#p1 {
			color: red;
		}
		
		.cls {
			color: green;
		}
	</style>
</head>
<body>
	<p id="p1">aaa</p>
	
	<div>div1</div>
	<div>div2</div>
	<div>div3</div>
	
	<input type="button" value="苹果" name="phone"><br>
	<input type="button" value="OPPO" name="phone"><br>
	<input type="button" value="Huawei" name="phone"><br>
	
	<div class="cls">div4</div>
	<div class="cls">div5</div>
	<div class="cls">div6</div>
	
	<script>
		// getElementById()
		var p1 = document.getElementById("p1");
		document.write(p1 + "<br>");
		
		// getElementsByTagName()
		var divs = document.getElementsByTagName("div");
		document.write(divs.length + "<br>");
		document.write(divs[0] + "<br>");
		document.write(divs.item(1) + "<br>");
		
		// getElementsByName()
		var btns = document.getElementsByName("phone");
		document.write(btns[0].value + "<br>");
		document.write(btns.item(1).value + "<br>");
		
		// getElementsByClassName()
		var ds = document.getElementsByClassName("cls");
		document.write(ds[0] + "<br>");
		document.write(ds.item(1) + "<br>");
	</script>
</body>
</html>
结果：

3、Element：元素对象

1、通过document来获取和创建。

2、方法

①removeAttribute()：删除属性

②setAttribute()：设置属性

4、Node：节点对象

(1)方法

①appendChild()：向节点的子节点列表的结尾添加新的子节点。

②removeChild()：删除（并返回）当前节点的子节点。
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>title</title>
	<style>
		div {
			border: red solid 2px;
		}
		
		#div1 {
			width: 200px;
			height: 200px;
		}
		
		#div2, #div3 {
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div id="div1">
		<div id="div2">
			div2
		</div>
		div1
	</div>
	<input type="button" id="del" value="删除子节点">
	<input type="button" id="add" value="添加子节点">
	
	<script>
		// 实现删除子节点
		var del = document.getElementById("del");
		del.onclick = function() {
			var div1 = document.getElementById("div1");
			var div2 = document.getElementById("div2");
			div1.removeChild(div2);
		}
		
		// 实现增加子节点
		var add = document.getElementById("add");
		add.onclick = function() {
			var div1 = document.getElementById("div1");
			var div3 = document.createElement("div");
			div3.setAttribute("id","div3");
			div1.appendChild(div3);
		}
	</script>
</body>
</html>
(2)属性

parentNode：返回节点的父节点。
var div2 = document.getElementById("div2");
var div1 = div2.parentNode;
document.write(div1);

事件

1、常见的事件

①点击事件：

* onclick：单击事件

* ondbclick：双击事件

②焦点事件：

* onblur：失去焦点

* onfocus：获得焦点

③加载事件：

* onload：一张页面或一幅图像完成加载

④鼠标事件：

* onmousedown：鼠标按钮被按下

* onmouseup：鼠标按键被松开

* onmousemove：鼠标被移动

* onmouseover：鼠标移到某元素之上

* onmouseout：鼠标从某元素移开

⑤键盘事件：

* onkeydown：某个键盘按键被按下

* onkeyup：某个键盘按键被松开

* onkeypress：某个键盘按键被按下并松开

⑥选中和改变：

* onchange：域的内容被改变

* onselect：文本被选中

⑦表单事件：

* onsubmit：确认按钮被点击

2、绑定事件的两种方式：
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>title</title>
</head>
<body>
	<img id="light1" src="../img/off.png" onclick="fun1()">
	<img id="light2" src="../img/off.png">
	
	<script>
		function fun1() {
			alert("我被点了");
		}
		
		function fun2() {
			alert("我又被点了");
		}
		var light2 = document.getElementById("light2");
		light2.onclick = fun2;
	</script>
</body>
</html>

简单案例

电灯开关：点一下图片，灯泡换一种状态。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>title</title>
</head>
<body>
	<img id="light" src="../img/off.png">
	
	<script>
		var light = document.getElementById("light");
		var flag = false;
		light.onclick = function() {
			if(flag) {
				light.src = "../img/off.png";
				flag = false;
			} else {
				light.src = "../img/on.png";
				flag = true;
			}
		}
	</script>
</body>
</html>