https://www.w3school.com.cn/js/index.asp
1.JavaScript事件
HTML事件是发生在HTML元素上的“事情”。
当在HTML页面中使用JavaScript时，JavaScript能够“应对”这些事件。
通过JavaScript代码，向HTML元素添加事件处理程序。
格式1：
<html 元素事件名称=”javascript代码对应事件的处理程序“>
<input type="button" balue="按钮”οnclick="alert('按钮的点击事件被触发');">
格式2:
<head>
<script>
function test1(){
alert("按钮的点击事件触发");
}
</script>
</head>
<input type="button" value="按钮" onlick="test();">
<!DOCTYPE html>
<html>
<head>
<meta charsef="utf-8">
<title></title>
<script>
function test1(){
alert("安装牛的点击事件被触发">
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="test1()"><br>
</body>
</html>常见的HTML事件
下面是一些常见的HTML事件
| 事件 | 描述 | |
| onchange | HTML 元素已被改变 | |
| onclick | 用户点击了 HTML 元素 | |
| onmouseover | 用户把鼠标移动到 HTML 元素上 | |
| onmouseout | 用户把鼠标移开 HTML 元素 | |
| onkeydown | 用户按下键盘按键 | |
| onload | 浏览器已经完成页面加载 | |
| 元素获得焦点。 | ||
| 元素失去焦点。 | ||
| onsubmit | 表单中的确认按钮[type=”submit”]被点击时发生 | |
on load--浏览器依据完成页面加载【页面初始化事件】
onclick--用户点击了HTML元素
onmousever--用户把鼠标移动到HTML元素上【鼠标进入】
onmouseout--用户把鼠标移开HTML元素【鼠标移出】
onchange--HTML元素获得焦点
onblur--元素失去焦点
onkeydown--用户按下键盘按键
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面初始化事件</title>
<script>
function test1(){
alert("页面初始化事件被触发");
}
function test2(){
alert("元素点击事件被触发");
}
function testover(){
document.getElementById("img1").width=document.getElementById("img1").width+100;
document.getElementById("img1").height=document.getElementById("img1").height+100;
}
function testout(){
document.getElementById("img1").width=100;
document.getElementById("img1").height=100;
}
function testchange(){
var inputvalue=document.getElementById("text1").value;
if(inputvalue==""){
alert("用户名不能为空");
}
if(inputvalue=="zhangsan"){
document.getElementById("span1").innerHTML="<font color='red'>该用户名已经存在请重写输入!</font>";
}
}
function testblur(){
var inputvalue=document.getElementById("text1").value;
if(inputvalue==""){
alert("用户名不能为空");
}
if(inputvalue=="zhangsan"){
document.getElementById("span1").innerHTML="<font color='red'>该用户名已经存在请重写输入!</font>";
}
}
function testfocus(){
document.getElementById("span1").innerHTML="";
document.getElementById("text1").value="";
}
function testkeydown(e){
if(e.keyCode==38 ){
alert("向上移动");
}
if(e.keyCode==37){
alert("向左移动");
}
if(e.keyCode==39){
alert("向右移动");
}
if(e.keyCode==40){
alert("向下移动");
}
if(e.keyCode==32){
alert("暂停");
}
}
</script>
</head>
<body onload="test1();" onkeydown="testkeydown(event);">
<img id="img1" src="avatar.png" width="100px" height="100px" onclick="test2();"
onmouseover="testover();" onmouseout="testout();"/><br>
<!--
<input id="text1" type="text" value="请输入用户名" onchange="testchange();"
onfocus="testfocus();"/>
<span id="span1"></span>
-->
<input id="text1" type="text" value="请输入用户名" onblur="testblur();"
onfocus="testfocus();"/>
<span id="span1"></span>
</body>
</html>
onsubmit---表单提交事件【作用在form表单上】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function testsubmit(){
var textvalue=document.getElementById("text1").value;
if(textvalue==""){
alert("用户名不能为空！");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="test" method="get" onsubmit="return testsubmit();">
<input id="text1" type="text" value="请输入用户名" /><br>
<input type="password" /><br>
<input type="submit" value="登陆" />
</form>
</body>
</html>1.onsubmit作用在form表单上 return javascript函数；
2.javascript函数的返回值return 的是false表示不会向form表单anction属性指定的后端处理程序提交表单数据，如果是true表示会向form表单anction属性指定的后端处理程序提交表单数据。
2.JavaScript 字符串
JavaScript 字符串是引号中的零个或多个字符。用于存储和操作文本。
var x = "Bill Gates"; //创建字符串变量【没有可供操作的的方法和属性】
var y=new String(“hello”); //创建字符串对象【可供操作的的方法和属性】
当创建的字符串变量调用提供的方法和属性的时候，字符串变量会被自动转换成字符串对象。
//创建字符串变量
var x = "Bill Gates";
x.substring(0,5); //此时x表示的字符串变量会被自动转换成字符串对象。
方法和属性
length 属性--返回字符串的长度
indexOf(string) 方法返回字符串中指定文本首次出现的索引（位置）
lastIndexOf(string) 方法返回指定文本在字符串中最后一次出现的索引
JavaScript 从零计算位置。
0 是字符串中的第一个位置，1 是第二个，2 是第三个 ...
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
slice(start,end) 方法提取字符串的某个部分并在新字符串中返回被提取的部分
参数为负数
substring(start, end)方法提取字符串的某个部分并在新字符串中返回被提取的部分
参数不能为负数
substr(start, length)方法提取字符串的某个部分并在新字符串中返回被提取的部分
第二参数是个数，不是结束位置。
replace(old,new) 方法用另一个值替换在字符串中指定的值
toUpperCase() 把字符串转换为大写：
toLowerCase() 把字符串转换为小写：
trim() 方法删除字符串两端的空白符：
charAt() 方法返回字符串中指定下标（位置）的字符串：
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：
split(op) 将字符串通过指定的分隔符号拆分成字符串数组：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function testString(){
//定义一个字符
var str1="Hello,World";
//length 属性--返回字符串的长度
//alert("length 属性=="+str1.length);
//indexOf(string) 方法返回字符串中指定文本首次出现的索引（位置）
//alert("indexOf('l')=="+str1.indexOf("l"));
//lastIndexOf(string) 方法返回指定文本在字符串中最后一次出现的索引
//alert("lastIndexOf('l')=="+str1.lastIndexOf("l"));
//slice(start,end) 方法提取字符串的某个部分并在新字符串中返回被提取的部分 参数为负数
//alert("slice(6,11)=="+str1.slice(6,11));
//substring(start, end)方法提取字符串的某个部分并在新字符串中返回被提取的部分 参数不能为负数
//alert("substring(6,11)=="+str1.substring(6,11));
//substr(start, length)方法提取字符串的某个部分并在新字符串中返回被提取的部分
//第二参数是个数，不是结束位置。
//alert("substr(6,5)=="+str1.substr(6,5));
//replace(old,new) 方法用另一个值替换在字符串中指定的值
//alert("replace('Hello','NiHao')=="+str1.replace("Hello","NiHao"));
//toUpperCase() 把字符串转换为大写：
//alert("toUpperCase()=="+str1.toUpperCase());
//toLowerCase() 把字符串转换为小写：
//alert("toLowerCase()=="+str1.toLowerCase());
//charAt(index) 方法返回字符串中指定下标（位置）的字符串：
//alert("charAt(4)=="+str1.charAt(4));
//charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：
//alert("charCodeAt(1)=="+str1.charCodeAt(1));
// split(op) 将字符串通过指定的分隔符号拆分成字符串数组：
var strarray=str1.split(",");
alert("strarray[0]=="+strarray[0]);
alert("strarray[1]=="+strarray[1]);
}
</script>
</head>
<body onload="testString();">
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
