JavaScript8

最新推荐文章于 2022-05-01 04:13:21 发布
最新推荐文章于 2022-05-01 04:13:21 发布
阅读量126 收藏
点赞数
文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49344258/article/details/108501481
版权

https://www.w3school.com.cn/js/index.asp

1.JavaScript:Browser BOM

BOM--浏览器对象模型

1.1JavaScript  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,relace)

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

窗口的高度。最小.值为100

left=pixels

该窗口的左侧位置

location=yes|no|1|0

是否显示地址字段.默认值是yes

menubar=yes|no|1|0

是否显示菜单栏.默认值是yes

resizable=yes|no|1|0

是否可调整窗口大小.默认值是yes

scrollbars=yes|no|1|0

是否显示滚动条.默认值是yes

status=yes|no|1|0

是否要添加一个状态栏.默认值是yes

titlebar=yes|no|1|0

是否显示标题栏.被忽略，除非调用HTML应用程序或一个

值得信赖的对话框.默认值是yes

toolbar=yes|no|1|0

是否显示浏览器工具栏.默认值是yes

top=pixels

窗口顶部的位置.仅限IE浏览器

width=pixels

窗口的宽度.最小.值为100

 

replace

Optional.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.hao123.com");//打开导航对应的窗口
					//window.open("https://www.hao123.com","_self);
					
					window.open("https://www.hao123.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.hao123.com","_blank","width=300,height=300",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 列表中的前一个 URL

forward()

加载 history 列表中的下一个 URL

go()

加载 history 列表中的某个具体页面

 


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

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var testvalu=window.location.search;
				//testvalu=window.location.search;
				var strarray=testvalu.split("&");
				varinfo="";
				for(var i=0;i<strarray.length;i++){
					info=info+strarray[i].split("=")[1]+",";
				}
				info=info.slice(0,info,length-1);
				document.getElementById("but1").onclick=function(){
					//window.history.back();
					window.history(-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数据的组成

1.JSON对象

通过{}包围在里面提供键值对数据形式【键值】，可以出现多个，中间用","分割。

{name:"bill Gates,age:62,city:"Seattle"}

2.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数据进行转换

1.JSON字符串转换成JSON对象

2.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>

 

270年前
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js的事件以及window操作
weixin_30607659的博客
10-27 151
属性 当以下情况发生时，出现此事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfocus 元素获得焦点 onkeyd...
字符串
weixin_33713350的博客
06-19 79
正课:1. ***String 什么是:***内置对象:***包装类型: 字符串API1. 什么是: 多个字符组成的只读字符数组 vs 数组: 下标i length slice() concat 不同: 数组中凡是直接修改原数组的API，字符串都不能用！2. 内置对象: E...
javascript 8
weixin_41813800的博客
05-01 117
array method forEach const nums = [9, 8, 8, 7]; nums.forEach(function (n) { console.log(n * n) });//81,64,64,49 nums.forEach(function (el) { if (el % 2 === 0) { console.log(el) }//8,8 }) MAP Create a new array with the results of
JavaScript JavaScript JavaScript
06-26
JavaScript JavaScript JavaScript
JavaScript8_1
09-01
JavaScript8_1 基本代码 内包含三个现成小项目，可以参考
javascript CRC8校验
02-06
javascript CRC8校验
javascript - javascript tutorial
最新发布
07-03
PART 1: JAVASCRIPT BASICS 1 1. JAVASCRIPT – Overview2 What is JavaScript?2 Client-Side JavaScript2 Advantages of JavaScript3 Limitations of JavaScript3 JavaScript Development Tools3 Where is ...
javaScript api
11-03
JavaScript API 是一种重要的编程资源，它为开发者提供了与JavaScript语言交互的接口和工具。这个离线版的JavaScript API 指南，以CHM（Compiled Help Manual）格式提供，是开发者学习和查阅JavaScript相关功能和...
JavaScript事件，window的事件
小谭鸡米花的博客
01-20 2682
事件是发生后并得到处理的操作 一、页面相关的事件 window.onload；表示等页面所有内容（文档，图片，js，src等）加载完毕执行的代码 window.onscroll； window.onscroll = function（）{ Console.log（“滚动条滚动时触发的事件”）； } window.onresize； window.onresize= function（）{ Console.log（“窗口大小发生改变时触发的事件”）； } 二、鼠标事件
js window 事件
weixin_33743661的博客
04-19 268
window.onXX这个，在w3c规范中有专门的定义，叫DOM第0级事件模型。在当今所有的浏览器中都有实现。但是缺点是，只能绑定一个事件处理函数。且不具备多事件排程绑定的功能 addEventListener。在w3c标准中，叫DOM第2级事件模型。用来弥补window.onXX的不足。但是ie不支持，IE的多重事件绑 定方法是attachEvent。特别要说一下，attachEvent和...
javascript中的window事件
Confidence
09-13 668
本文转载自:点击打开链接 js-window对象的方法和属性资料 熟练window对象的open、close、alert、confirm、prompt、setTimeout、clearTimeout、 setInterval、clearInterval、moveBy、resizeBy、scrollBy方法的使用 掌握window对象的moveTo、resizeTo、scrol
JavaScript 8
fagdg的博客
04-11 1060
一、日期对象var mydate = new Date()： 1、获取： mydate.toLocaleDateString()根据本地时间把Date对象的日期部分转换为字符串，并返回结果 mydate.toLocaleTimeString()根据本地时间把Date对象的时间部分转换为字符串，并返回结果 mydate.toLocaleString()根据本地时间把Date对象的日期和时间部...
JavaScript中8个常见的陷阱
大灰狼的小绵羊哥哥的博客
06-29 450
1. 你是否尝试过对数组元素进行排序？ JavaScript默认使用字典序(alphanumeric)来排序。因此，[1,2,5,10].sort()的结果是[1, 10, 2, 5]。 如果你想正确的排序，应该这样做：[1,2,5,10].sort((a, b) => a - b) 2. new Date() 十分好用 new Date()的使用方法有：
轻松学习JavaScript八：JavaScript函数
life is wonderful
11-30 2669
函数是一组可以随时随地运行的语句，函数作为ECMAScript的核心是很重要的。函数是由事件驱动的或者当它被 调用时执行的可重复使用的代码块。也就是函数是定义一次但却可以调用或执行任意多次的一段JavaScript代码。函 数有时会有参数，即函数被调用时指定了值的局部变量。函数常常使用这些参数来计算一个返回值，这个值也成为函 数调用表达式的值。        一函数声明
1.17 JavaScript8：实战案例
尹成的技术博客
11-09 584
.for循环图片的应用 在页面上显示一个矩形，鼠标在这个矩形的某个地方划过，则在该位置以矩形的形式显示图片的一部分。 效果图：   鼠标滑过之后：      &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;for
每日JavaScript - 8
tcap99的博客
11-06 117
面向对象都有类的概念，而通过类可以创建多个具有相同属性和方法的对象。对于Java来说，就是一门彻底面向对象的语言，有着官方的类封装。 但在ES6之前，JavaScript是没有官方提供的类库。 下面我们来创建一个对象 let animal = { name: &quot;animal&quot;, // 注意不能使用箭头函数，它的this指向的window // eat: () =&amp;gt; console...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值