JavaScript_基础学习3

最新推荐文章于 2022-11-23 17:32:46 发布

H之一

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量114

点赞数

分类专栏： JavaScript HTML 前端文章标签： javascript

本文链接：https://blog.csdn.net/H_zhiyi/article/details/108361567

版权

前端同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

27 篇文章 0 订阅

订阅专栏

HTML

11 篇文章 1 订阅

订阅专栏

https://www.w3school.com.cn/js/index.asp
1.JavaScript 事件
HTML事件是发生在HTML元素上的“事情”.
当在HTML页面中使用JavaScript时，JavaScript能够“应对”这些事件。
通过JavaScript代码，向HTML元素添加事件处理程序。
格式1：
<html 元素事件名称=“JavaScript代码对应时间的处理程序”>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test1(){
				alert("按钮的点击事件被触发")
			}
		</script>
	</head>
	<body>
		<input type="button" value="按钮" onclick="test1();"/>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test1(){
				alert("按钮的点击事件被触发")
			}
		</script>
	</head>
	<body>
		<input type="button"  value="按钮" onclick="('按钮的点击事件被处罚');" /><br>
		<h2>通常我们都是在对应事件的双引号中编写处理程序，处理程序中如果出现双引号改成单引号</h2>
		<input type="button"  value="按钮" onclick="test1()" /><br>
	</body>
</html>

在这里插入图片描述
常见的 HTML 事件
下面是一些常见的 HTML 事件：

onload–浏览器已经完成页面加载[页面初始化事件]
onclick–用户点击了 HTML 元素
onmouseover–用户把鼠标移动到 HTML 元素上[鼠标进入]
onmouseout–用户把鼠标移开 HTML 元素[鼠标移出]
onchange–HTML 元素已被改变
onfocus—元素获得焦点。
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(even);">
		<img id="img1" src="13.jpg" width="100px" height="100px" onclick="test2();"
		 onmouseover="testover();" onmouseout="textout();"
		 >
		<input id="text1" type="text" value="请输入用户名" onchange="testchange();" 
		 onfocus="testfocus();"/>
		 <span id="span1"></span>
		 -->
		 <input type="text"  id="text1" value="请输入用户名" onblur="testblur();"
		  onfocus="testfocus();"/>
		  <span id="span1">
		  	
		  </span>
	</body>
</html>

在这里插入图片描述
onsubmit—表单提交事件【作用在form表单上】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			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 type="text"  id="text1" value="请输入用户名" />
			<input type="password" />
			<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>

在这里插入图片描述

H之一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_基础学习3

https://www.w3school.com.cn/js/index.asp1.JavaScript 事件HTML事件是发生在HTML元素上的“事情”.当在HTML页面中使用JavaScript时，JavaScript能够“应对”这些事件。通过JavaScript代码，向HTML元素添加事件处理程序。格式1：<html 元素事件名称=“JavaScript代码对应时间的处理程序”><html> <head> <meta charset=
复制链接

扫一扫