JavaScript_基础简介8
myzbx 2024-12-13 15:04 36 浏览
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>
相关推荐
- 砌体植筋拉拔试验检验值到底是6.0KN，还是10.2KN，如何计算确定
-
砌体拉结筋植筋养护完成后，需对所植钢筋进行拉拔试验，以检验植筋的锚固强度是否满足设计要求。检测时，按照一定的抽样比例进行拉拔试验。根据《混凝土结构后锚固技术规程》JGJ145-2013，以同品种、同...
- 柴油机功率如何计算?计算柴油机功率需要哪些参数?
-
在汽车领域，对于柴油机功率的计算是一项重要的工作，它有助于我们更好地了解柴油机的性能和适用场景。下面我们就来详细探讨一下柴油机功率的计算方法以及所需的参数。首先，我们要了解计算柴油机功率常用的公式。在...
- 变压器短路阻抗的作用和计算方法（变压器短路阻抗的作用和计算方法是什么）
-
变压器短路阻抗的作用和计算方法短路阻抗是在负载试验中测量的一项数据，它是二次侧短接并流过额定电流时，一次侧施加的电压与额定电压的的百分数。那么测量变压器的短路阻抗有什么意义呢？其实变压器的阻抗电压乃是...
- 9.35m层高高支模支撑架计算书（支模架多高属于高支模）
-
某工厂新扩建的建筑面积为1989.2m^2，建筑物总体分为2层，但局部为4层。建筑物檐高19.4m，建筑物总高23m。建筑物呈长方形设置，长度为48.20m，宽度为23.88m，结构形式为框架结构...
- 吊篮(悬挂装置前梁加长)安全复核计算书
-
吊篮（悬挂装置前梁加长）安全复核计算书一种超常规搭设的高处作业吊篮，因使用要求将吊篮悬挂装置前梁加长设置，本计算书针对这种工况的校核，以作参考。计算依据：1、《高处作业吊篮》GB/T19155-...
- 电功率计算公式精编汇总（电功率计算视频讲解）
-
一、电功率计算公式：1在纯直流电路中：P=UIP=I2RP=U2/R式中：P---电功率（W），U---电压（V），I----电流（A），R---电阻（Ω)。2在单相交流电路中：P=UIcosφ...
- 灌注桩承载力检测方法及步骤（灌注桩承载力不够怎么办）
-
检测灌注桩的承载力是确保基础工程安全可靠的关键环节，检测结果的精细能准确为我们提供可靠的数据，让我们能准确判断桩基础的承载力，方便后续施工安排，同样也能让我们根据数据分辨出有问题桩基，采取可靠有效的措...
- 很哇塞的体积计算方法:向量叉乘 很哇塞的体积计算方法
-
高中数学必看：向量叉乘，体积的神。大家都知道a、b的向量是什么意思，但是a、b的向量又是什么？很多同学都不知道，向量的向量在高中阶段非常有用，虽然它是大学的知识，在高中阶段可以干两件事。·第一件事，表...
- 施工升降机基础(设置在地库顶板回顶)计算书
-
施工升降机基础（设置在地库顶板回顶）计算书计算依据：1、《施工现场设施安全设计计算手册》谢建民编著2、《建筑地基基础设计规范》GB50007-20113、《混凝土结构设计标准》GB/T50010-2...
- 剪力墙水平钢筋根数如何计算?（剪力墙水平钢筋绑扎搭接规范）
-
剪力墙水平钢筋根数的计算需综合考虑墙高、起步距离、间距及构造要求等因素，具体步骤如下及依据：1.基本计算公式水平钢筋根数计算公式为：根数=（墙高-起步距离）/间距（墙高-起步距离）/间距...
- 直流电路常用计算公式（直流电路常用计算公式有哪些）
-
1、电阻导体阻碍电流通过的能力叫做电阻，用字母R表示，单位欧(Ω)。R=ρl/s式中R-导体的电阻，欧(Ω)；ρ-导体的电阻率，欧·米(Ω·m)；l-导体的长度，米(m)；s-导体的截面积，平方米(m...
- 电气主电路图的绘制特点（电气原理图主电路）
-
1、电气主电路图中的电气设备、元件，如电源进线、变压器、隔离开关、断路器、熔断器、避雷器等都垂直绘制，而母线则水平绘制。电气主电路图除特殊情况外，几乎无一例外地画成单线图，并以母线为核心将各个项目(如...
- 中考总复习:物理专题 功和机械能 (功的计算、功率、动能、势能)
-
中考物理专题：功与机械能解析一、力学中的功——能量转化的桥梁功是力对物体能量变化的量度，需满足两要素：作用在物体上的力、物体沿力方向移动距离。例如推箱子时，若箱子未移动，推力不做功；若箱子滑动，推力做...
- 40亿QQ号，不超过1G内存，如何去重?
-
分享一道网上很火的面试题：40亿QQ号，不超过1G的内存，如何去重？这是一个非常经典的海量数据去重问题，并且做了内存限制，最多只能1GB，本文跟大家探讨一下~~一、常规思路我们日常开发中,如果谈到去重...
- 填充墙体拉结筋植筋深度、孔径、拉拔试验承载力计算!
-
今天分享下植筋间距及保护层要求：根据JGJ145-2013混凝土后锚固技术规程要求植筋与混凝土结构边缘不应小于5mm，植筋为两根及以上时水平间距为不应小于5d（d为钢筋直径）。根据混凝土结构后锚固技...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)