js02

发布时间：2023-09-06 01:40责任编辑：赖小花关键词：js

事件与函数的关系:
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
事件句柄：
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。

事件中如果有this.value
eg:onclick=checkName(this.value)
这个this.value中的value来源于表单项input的value值，并且是当前被选中的value传递的值！！

js表单想要提交数据到后台的话，input中是一定要有name属性的, 发送到后台的是name中的value值
<input type="" name=value>

js的change事件
change
onchange 句柄

问：change事件是在什么时候发生的?
下拉列表中的选项发生改变的时候，change事件发生。
此时注册在onchange事件句柄后的js代码会自动执行。

完整列子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
testFun = function(coursename){ ?//传进来的值是你选中的那个value的值
alert(coursename);
/*
if("java" == coursename){
//dosome...
}else if("js" == coursename){
//dosome...
}else...

*/
}
</script>
</head>
<body>
<select name="course" onchange="testFun(this.value)">
<option>--请选择--</option>
<option value="java">java</option>
<option ?value="js">js</option>
<option ?value="oracle">oracle</option>
<option ?value="spring">spring</option>
</select>
</body>
</html>

js中通过DOM创建元素、节点
createElement() 创建节点
appendChild() ??追加节点

eg:完整的列子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
addElt = function(){
//alert("aa");
//向div追加一个子节点font
//1.先获得div节点
var myDiv = document.getElementById("myDiv");

//2.创建font节点
var fontt = document.createElement("font");
fontt.innerHTML="测试"; ??//往节点里添加内容
fontt.color="red";

//3.将font节点加div节点中
myDiv.appendChild(fontt);
}
</script>
</head>
<body>
<input type="button" value="给div添加font标签" onclick="addElt();"/>
<div id="myDiv"></div>
</body>
</html>

问：innerHTML 和innerText的区别？
eg:
??innerHTML="<font color=‘red‘>测试1</font>" ???//控制台显示结果为： ???<font color=‘red‘>测试1</font>
????innerText="<font color=‘red‘>测试2</font>" ????//控制台显示结果为： ??测试2
从这个列子可以看出来，innerHTML会把里面的所有全部都打印出来，innerText是标签不会打印出来只打印内容

js中的window——弹框
window是BOM内置对象
BOM全拼Browser Object Model
window代表整个浏览器窗口

window.alert("消息"); ?????????????????????????????//弹出消息框
?var ok = window.confirm("亲，你确认删除吗?"); ????//弹出确认框,并且得到一个结果
?删除数据的时候，数据无价，需要给用户提示，待用户确认删除数据，才敢删除数据哦。

完整的列子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
deleteData = function(){
var a = window.confirm("您确定要删除吗？");
if(a){
alert("正在删除数据请稍后...");
/*}else{
alert("取消"); */
}
}
</script>
</head>
<body>
<input type="button" value="删除" onclick="deleteData();"/>
</body>
</html>

js中的window——跳转
location 单词的意思为：位置

列子：跳到百度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
goBaibu = function(){
//window.location.href="http://www.baidu.com"; ??//这个三个注释掉的都可以完成请求的发送，都能跳到百度
//window.location="http://www.baidu.com";
???//document.location.href="http://www.baidu.com";
?document.location="http://www.baidu.com";
}
</script>
</head>
<body>
?
<input type="button" value="百度" onclick="goBaibu();"/>
</body>
</html>

js中的window——后退到上一步
window.history.back();
window.history.go()
eg:
<input type="button" value="后退" onclick="window.history.back();"./> ?//有点问题

js中的全局变量和全局函数
在js中，全局变量和全局函数都可以用window对象来调用，而且，window还可以省略！！

eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
//全局变量
var ename="smisi";
//访问全局变量
alert("ename="+ename);
//在js中全局变量和全局函数都是window对象的属性
alert("ename2"+window.ename);

function sayHello(){
alert("我是全局函数啦");
}
sayHello();
window.sayHello();
</script>
</head>
<body>

</body>
</html>

eg:下拉列表添加选项
思路：

　　1.先获取课程名称
　　2.获取下拉列表对象
　　3.创建新的选项节点
　　4.将选项节点加入下拉列表中去

js中的 void运算符
href="javascript:void(0)"
固定写法!!!只执行一段js代码，不进行页面跳转，还想保留超链接的样式，应用场景：在本页面里面统计啊，查找啊，不跳转

eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>

</script>
</head>

<body>
<br><br><br><br><br><br><br>
<a href="javascript:void(0)" onclick="alert(‘执行到这里‘);">只执行一段js代码，不进行页面跳转，还想保留超链接的样式</a>
</body>
</html>

js中的json
json：全拼 javaScript Object Notation
json对象使用{} 进行创建，这种语法可以创建一种无类型的javascript对象
json通常使用在语言之间进行数据交换的时候充当数据交换格式
java可以在后台拼接json字符串，将json字符串发送给浏览器，浏览器中的js程序。
可以解析json格式的字符串。这样java和js就完成了通信
json是一种数据传送格式，是一套标准的简单的轻量级的数据传送格式
任何一个编程语言都可以在后台拼接json格式的字符串，发送给前端
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

a.什么是json?
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言 *
JSON 易于理解。

b.json的语法规则
数据为键/值对，并且对象中的key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
数据由逗号分隔
大括号保持对象
方括号保存数组

c.
创建对象的格式： ?var user={ ??
"usercode":9527, ????????//对象可以保存多个键/值对,用逗号隔开
"username":"hongyy",
"age":23
};
//访问对象中的属性
alert(user.usercode);
alert(user.username);
alert(user.age);

创建数组的格式：
JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象!!!!!!!
"sites":[
???{"name":"Runoob", "url":"www.runoob.com"},
???{"name":"Google", "url":"www.google.com"},
???{"name":"Taobao", "url":"www.taobao.com"}
]

d.JSON 值
JSON 值可以是：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false） ??eg:{ "flag":true }
数组（在中括号中）
对象（在大括号中）
null ??????????????????????eg:{ "runoob":null }

e.访问对象的值（掌握）
1.可以用对象.属性
var user={ ??
"usercode":9527
}
var x = user.usercode; ???//常用 ?alert(x); ?--9527

2.可以使用中括号[]来访问对象的值
var user={ ??
"usercode":9527
}
var x= user["usercode"]; // ?alert(x); ??--9527

f:循环对象的属性
可以用for-in
在使用for遍历时，只能通过 myObj[x] 来获取相应属性的值，而不能使用 myObj.x
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：</p>
<p id="demo"></p>
<script>
var myObj = { "name":"李银河", " age":17, "site":null };
for (x in myObj) {
???document.getElementById("demo").innerHTML += myObj[x] + "<br>"; ??//在使用for遍历时，只能通过 myObj[x] 来获取相应属性的值，而不能使用 myObj.x
}
</script>
</body>
</html>

g:嵌套 JSON 对象
对象既可以嵌套对象，又可以嵌套数组
eg:
<script>
myObj = {
???"name":"runoob",
???"alexa":10000,
???"sites": {
???????"site1":"www.runoob.com",
???????"site2":"m.runoob.com",
???????"site3":"c.runoob.com"
???}
}
????x1 = myObj.sites.site1;
alert(x1); ???--www.runoob.com
// 或者
x = myObj.sites["site2"];
alert(x); ????--m.runoob.com
</script>

h:json.parse()
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
语法:
JSON.parse(text[,reviver])
eg:
<body>
<h2>从 JSON 对象中创建 JavaScript 对象</h2>
<p id="demo"></p>

i:无聊写个列子
eg:从以上json对象中获取每一个学生的学号或者是姓名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
//在js中[]表示数组对象，{}表示对象
var stus={
"total":5,
"data":[
{"sno":66,"sname":"胖大海"},
{"sno":77,"sname":"李银河"},
{"sno":88,"sname":"王小波"},
{"sno":99,"sname":"洪杨洋"},
{"sno":100,"sname":"易冰冰"}
]
};
//从以上json对象中获取每一个学生的学号
//alert(stus.total); ?????//total ???对象.total
//alert(stus.data); ???????????//这样不行，因为data是一个数组，必须遍历
for(var i=0;i<stus.data.length;i++){
//var stu = stus.data[i];
//alert(stu.sno);
?//alert(stus.data[i].sno); ??//也可以的啦
?alert(stus.data[i].sname);
?alert(stus.data[0].sno); ???//这个是只取第一个sno,取的是下标
}
</script>
</head>
<body>

</body>
</html>

js中的eval
eval函数的作用：将普通字符串当做js代码解释执行
eg:
<script>
window.eval("var i = 100;");
alert(i); ???//结果为：100
</script>

eval重点补充:java程序连接数据库之后，查询数据
然后拼接成一个json格式的字符串发送给浏览器
浏览器只是接收到一个普通的json格式的字符串，然后在js中使用eval函数
将json格式的字符串转换成json对象

js事件

事件事件句柄

bluronBlur ???????失去焦点
changeonChange下拉框改变事件
clickonClick鼠标单击
dbiclickonDbiClick ???鼠标双击
focusonfocuswindow,frame,form的input,frameset 获取焦点事件
keydownonKdyDowm ????键盘按下键
load onload ???????页面加载完毕马上发生
mousedown ??onMouseDown ??按下鼠标
resetonRest ???????重置form
submitonSubmit提交form (return true/false)
......

欢迎大家指出错误 /比心哟

js02

原文地址：https://www.cnblogs.com/PinkPink/p/8386035.html

js02

知识推荐