1.javascript事件
HTML事件是发生在HTML元素上的“事情”。
当在HTML页面中使用javascript时，javascript能够“应对”这些事件。
通过javascript代码，向HTML元素添加事件处理程序。
格式1：
<html元素 事件名称="JavaScript代码对应事件的处理程序">
<input type=”button” value=”按钮” onclick=”alert(‘按钮的点击事件被触发’);”>
格式2：
<head>
<script>
function test1(){
alert(“按钮的点击事件被触发”);
}
</script>
</head>
<input type=”button” value=”按钮” onclick=”test1();”>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test1(){
alert("按钮的点击事件被触发");
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="alert('按钮的点击事件被触发');"><br>
<h2>通常我们都是在对应事件的双引号中编写处理程序，处理程序中如果出现双引号改成单引号</h2>
<input type="button" value="按钮" onclick="test1()"><br>
</body>
</html>
常见的HTML事件
下面是一些常见的HTML事件：
onchange---------HTML元素已被改变
onclick-------------用户点击了HTML元素
onmouseover------用户把鼠标移动到了HTML元素上
onmouseout-------用户把鼠标移开HTML元素
onkeydown---------用户按下键盘按键
onload-------------浏览器已完成页面加载
onfocus-----------元素获得焦点
onblur-------------元素失去焦点
onsubmit-------------表单中的确认按钮【type="submit"】被点击时发生
<!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表示不会向from表单anction属性指定的后端处理程序提交表单数据，如果是true表示会向from表单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）方法返回字符串中指定文本首次出现的索引（位置）
lastlndexof（string）方法返回指定文本在字符串中最后一次出现的索引
javascript从零计算位置。
0是字符串的第一个位置，1是第二个，2是第三个，...
如果未找到文本，indexof（）和lastlndexof（）均返回 -1。
slice（start，end）方法提取字符串的某个部分并在新字符串中返回被提取的部分
参数可以为负数
substring（start，end）方法提取字符串的某个部分并在新字符串中返回被提取的部分
参数不可以为负数
substr（start，length）方法提取字符串的某个部分并在新字符串中返回被提取的部分
第二参数是个数，不是结束位置。
replace（old，new）方法用另一个值替换在字符串中指定的值。
touppercase（）把字符串转化成大写。
tolowercase（）把字符串转化成小写。
trim（）方法删除字符串两端的空白符。
charat（）方法返回字符串中指定下标（位置）的字符串
charcodeat（）方法返回字符串中指定下标（位置）的字符串
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>
978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
