JavaScript_基础简介8

myzbx 2024-12-13 15:04 56 浏览

1.JavaScript Browser BOM
BOM—浏览器对象模型
1.1 JavaScript Window 对象
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				document.getElementById("but").onclick=function(){
					alert("按钮点击事件");
				}
			}
		</script>
	</head>
	<body>
		<input id="but" type="button" value="测试按钮的点击事件" />
	</body>
</html>

? window.open() - 打开新窗口
window.open(URL,name,specs,replace)

URL可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口name可选。指定target属性或窗口的名称。支持以下值：
_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称specs可选。一个逗号分隔的项目列表。支持以下值：channelmode=yes\no\1\0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器directories=yes\no\1\0 是否添加目录按钮。默认是肯定的。仅限IE浏览器fullscreen=yes\no\1\0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器height=pixels窗口的高度。最小.值为100left=pixels该窗口的左侧位置location=yes\no\1\0是否显示地址字段.默认值是yesmenubar =yes\no\1\0是否显示菜单栏.默认值是yesresizable=yes\no\1\0是否可调整窗口大小.默认值是yesscrollbars=yes\no\1\0是否显示滚动条.默认值是yesstatus=yes\no\1\0是否要添加一个状态栏.默认值是yestitlebar=yes\no\1\0是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yestoolbar=yes\no\1\0是否显示浏览器工具栏.默认值是yestop=pixels窗口顶部的位置.仅限IE浏览器width=pixels窗口的宽度.最小.值为100replaceOptional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
? true - URL 替换浏览历史中的当前条目。
? false - URL 在浏览历史中创建新的条目。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				document.getElementById("but").onclick=function(){
					//打开一个新窗口
					//window.open(); //空白窗口
					//window.open("https://www.baidu.com"); //打开百度对应的窗口
					//window.open("https://www.baidu.com","_self");
					window.open("https://www.baidu.com","_blank","width=200,height=200",false);
				}
			}
		</script>
	</head>
	<body>
		<input id="but" type="button" value="测试按钮的点击事件" />
	</body>
</html>

?	window.close() - 关闭当前窗口
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				document.getElementById("but1").onclick=function(){
					//打开一个新窗口
					window.open("https://www.baidu.com","_blank","width=200,height=200",false);	
				}
				document.getElementById("but2").onclick=function(){
					//关闭当前窗口
					window.close();
				}
			}
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="打开新窗口" /><br>
		<input id="but2" type="button" value="关闭打开的新窗口" /><br>
	</body>
</html>

alert()显示带有一段消息和一个确认按钮的警告框。confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。

Location 对象

search返回一个URL的查询部分

History 对象

back()加载 history 列表中的前一个 URLforward()加载 history 列表中的下一个 URLgo()加载 history 列表中的某个具体页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				document.getElementById("but5").onclick=function(){
					window.open("javascript2.html?name=zhangsan&age=23","_self");
				}
			}
		</script>
	</head>
	<body>
		<input id="but5" type="button" value="测试Location的search属性" /><br>
		<a href="javascript2.html?name=zhangsan&age=23">跳转到javascript2.html</a>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var testvalu=window.location.search;
				//testvalu--->?name=zhangsan&age=23
				var strarray=testvalu.split("&");
				var info="";
				for(var i=0;i<strarray.length;i++){
					info=info+strarray[i].split("=")[1]+",";
				}
				info=info.slice(0,info.length-1);
				document.getElementsByTagName("h2")[0].innerHTML=info;
				
				document.getElementById("but1").onclick=function(){
					//window.history.back();
					window.history.go(-1);
				}
			}
		</script>
	</head>
	<body>
		<h1>测试Location的search属性</h1>
		<h2></h2>
		<input id="but1" type="button" value="测试History 的back()" /><br>
	</body>
</html>

2.JSON 简介
JSON: JavaScript Object Notation（JavaScript 对象标记法）。
JSON 是一种存储和交换数据的语法【文本形式】。
交换数据
当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。
JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。
我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。
JSON数据的组成

JSON对象
通过”{}包围,在里面提供键值对数据形式【键:值】，可以出现多个，中间用”,”分割。
{ name:“Bill Gates”, age:62, city:“Seattle” }
JSON数组
通过”[]”包围，在里面提供JSON对象

[{ name:"Bill Gates", age:62, city:"Seattle" } ,
{ name:"Bill Gates", age:62, city:"Seattle" } ]
通常我们所接触json数据都是JSON对象中包含JSON数组，JSON数组包含JSON对象
0http://v.juhe.cn/weather/index?format=2&cityname=天津&key=1323523
{ "resultcode": "200", "reason": "查询成功!", "result": { "sk": { /*当前实况天气*/ "temp": "21", /*当前温度*/ "wind_direction": "西风", /*当前风向*/ "wind_strength": "2级", /*当前风力*/ "humidity": "4%", /*当前湿度*/ "time": "14:25" /*更新时间*/ }, "today": { "city": "天津", "date_y": "2014年03月21日", "week": "星期五", "temperature": "8℃~20℃", /*今日温度*/ "weather": "晴转霾", /*今日天气*/ "weather_id": { /*天气唯一标识*/ "fa": "00", /*天气标识00：晴*/ "fb": "53" /*天气标识53：霾 如果fa不等于fb，说明是组合天气*/ }, "wind": "西南风微风", "dressing_index": "较冷", /*穿衣指数*/ "dressing_advice": "建议着大衣、呢外套加毛衣、卫衣等服装。", /*穿衣建议*/ "uv_index": "中等", /*紫外线强度*/ "comfort_index": "",/*舒适度指数*/ "wash_index": "较适宜", /*洗车指数*/ "travel_index": "适宜", /*旅游指数*/ "exercise_index": "较适宜", /*晨练指数*/ "drying_index": ""/*干燥指数*/ }, "future": [ /*未来几天天气*/ { "temperature": "28℃~36℃", "weather": "晴转多云", "weather_id": { "fa": "00", "fb": "01" }, "wind": "南风3-4级", "week": "星期一", "date": "20140804" }, { "temperature": "28℃~36℃", "weather": "晴转多云", "weather_id": { "fa": "00", "fb": "01" }, "wind": "东南风3-4级", "week": "星期二", "date": "20140805" }, { "temperature": "27℃~35℃", "weather": "晴转多云", "weather_id": { "fa": "00", "fb": "01" }, "wind": "东南风3-4级", "week": "星期三", "date": "20140806" }, { "temperature": "27℃~34℃", "weather": "多云", "weather_id": { "fa": "01", "fb": "01" }, "wind": "东南风3-4级", "week": "星期四", "date": "20140807" }, { "temperature": "27℃~33℃", "weather": "多云", "weather_id": { "fa": "01", "fb": "01" }, "wind": "东北风4-5级", "week": "星期五", "date": "20140808" }, { "temperature": "26℃~33℃", "weather": "多云", "weather_id": { "fa": "01", "fb": "01" }, "wind": "北风4-5级", "week": "星期六", "date": "20140809" }, { "temperature": "26℃~33℃", "weather": "多云", "weather_id": { "fa": "01", "fb": "01" }, "wind": "北风4-5级", "week": "星期日", "date": "20140810" } ] }, "error_code": 0 }

我们通常要在提交/下载json数据之前/以后，要对json数据进行转换

json字符串转换成json对象
json对象转换json字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				document.getElementById("but1").onclick=function(){
					//创建一个json对象
					var myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
					alert(myObj);
					//将json对象转换成json字符串
					var jsonstring=JSON.stringify(myObj);
					alert(jsonstring);
				}
				document.getElementById("but2").onclick=function(){
					//创建json字符串
					var mystring ="{name:'Bill Gates', age:62,city:'Seattle'}";
					alert(mystring);
					var jsonobj = eval('(' + mystring + ')');
					alert(jsonobj.name+","+jsonobj.age+","+jsonobj.city);
				}
			}
		</script>
	</head>
	<body>
		<input  id="but1" type="button" value="json对象转换json字符串" /><br>
		<input  id="but2" type="button" value="json字符串转换json对象" /></br>
	</body>
</html>

测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--导入表jquery-->
		<script src="jquery-3.4.1.js"></script>
		<script>
			$(function(){
				$("#but1").click(function(){
					$.get("http://127.0.0.1:8080/testajax/getStudentAll",
					function(data){
						//var jsonobj = eval('(' + data + ')');
						var trvalue="";
						for(var i=0;i<data.length;i++){
							 trvalue=trvalue+"<tr><td>"+data[i].stuid+
							 				"</td><td>"+data[i].stuname+
							 				"</td><td>"+data[i].stuage+
							 				"</td><td>"+data[i].stuaddress+"</td></tr>";
						}
						document.getElementById("main").innerHTML=trvalue;
					},"json");
				});
			});
		</script>
	</head>
	<body>
		<center>
			<input id="but1" type="button" value="得到学生信息"/>
			<table id="main" border="1px"></table>
		</center>
	</body>
</html>

HTML 符号

上一篇：html网页源代码模板大全
下一篇：界面控件DevExpress WinForm——HTML-CSS感知控件介绍

JavaScript_基础简介8

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿