JavaScript_基础学习3

最新推荐文章于 2020-11-18 17:31:12 发布
最新推荐文章于 2020-11-18 17:31:12 发布
阅读量116 收藏
点赞数
分类专栏： JavaScript HTML 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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 js基础学习 示例代码
07-03
JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础...
JavaScript学习基础学习心得
10-24
JavaScript基础深度原理学习心得，从中可以领略到JavaScript比较有深度的知识理解 JavaScript基础深度原理学习心得，从中可以领略到JavaScript比较有深度的知识理解
JavaScript_学习云计算的基础知识.zip
最新发布
05-20
JavaScript的主要用途包括网页交互、数据处理、构建富互联网应用（RIA）以及，如标题所示，学习云计算的基础知识。 在学习云计算基础知识的过程中，JavaScript的作用主要体现在以下几个方面： 1. **Web界面交互**...
JavaScript学习帮助文档_JavaScript学习帮助文档_javascript_
09-29
这份"JavaScript学习帮助文档"是专为初学者设计的，旨在帮助他们掌握JavaScript的基础知识和实际应用技巧。 首先，JavaScript的基本语法是学习的起点。它是一种基于原型的、动态类型的、弱类型的脚本语言。这意味着...
Javascript基础_javascrip_castkmb_javascript_
10-01
总的来说，“Javascript基础_javascrip_castkmb_javascript_”这个教程将带你了解JavaScript的基本概念和常用技巧，通过学习，你将能够编写简单的交互式网页，并逐步掌握Web前端开发的核心技能。阅读《Javascript...
web表格制作
热门推荐
H_zhiyi的博客
08-20 1万+
1.表格的制作 1、表格元素–<table> 表格中的行–<tr> 表格中的列–<td> 表格中的表头–【居中/加粗】 table标记的边框–border table标记的宽度–width table标记的高度–height table标记的水平对齐方式–align table标记的表格背景色–bgcolor table标记的表格边框色–bordercolor table标记的表格中的内容与边框之间的距离–cellpadding table标记的表格中的边框与边框之间的距
HTML标签书写格式大全
H_zhiyi的博客
09-28 3591
一、常用浏览器与浏览器内核 1.常用浏览器 chromo(推荐谷歌) Firefox(火狐) IE浏览器 Opera浏览器 safari浏览器 2.浏览器内核 浏览器内核的主要组成部分： 渲染引擎（layout或engine）和JS引擎 渲染引擎：负责获取网页的内容（HTML.XML.图像等）、整理信息（加入CSS等），已经计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对网页的语法解释会有所不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序
查找字符串中所有某个字符出现的位置
H_zhiyi的博客
11-05 1355
//查找字符串中所有i出现的位置 function search(str){ //index 为 i出现的位置 var index = str.indexOf('i') //num为i出现的次数 var num = 0 while(index !== -1){ console.log(index); num ++ index += 1 index = st
HTML表单元素简介
H_zhiyi的博客
08-21 1118
1表单元素 input 文本框/密码框/单选按钮/复选框… 1.1文本框<input type=”text” name=”username” value=”初始值”></input> 属性type=”text”–表示文本框 属性name=”username”—告诉后台处理程序文本框中输入的数据值 属性value=”初始值”-------初始值 1.2密码框<input type=”password” name=”password” value=”初始密码”></
JavaScript中偏移量属性
H_zhiyi的博客
11-18 973
偏移量：获取在已定位的父级元素的子元素位置属性   offsetLeft  取正值从左向右偏移，取负值从右向左偏移   offsetTop  取值从上向下偏移，取负值从下向上偏移   offsetWidht  获取元素的宽度   offsetHeight  获取元素的高度   offsetParent  获取定位过的父元素，即有可能不是离得最近的父级元素 客户区大小：   clientLeft  离已定位的父级元素的左边距，包括自身左边框宽度   clientTop  离已定位的父级元素的上边距，包括自身上
使用JavaScript控制按钮点击触发的时间段
H_zhiyi的博客
11-18 777
话不多说 直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./addevent.js"></script> <title>D
JavaScript控制灯泡开关
H_zhiyi的博客
11-16 776
在html中使用<button>按钮去控制灯泡的开关。 首先写出HTML中的灯泡和开关按钮： HTML： <div id=""> <img src="guan.jpg" ><br> <button onclick="kaiGuan()" id="kg">开</button> </div> JS: //使用变量获取到html中的灯泡和按钮； var deng = document.getEl
CSS设置文本字体，链接，背景等
H_zhiyi的博客
09-25 611
一、CSS基础样式 1.CSS文本及字体设计 常用的应用文本的CSS样式 设置文字的颜色 color:red; 设置文字的大小 font-size:12px; 设置文字的字体 font-family:‘微软雅黑’; 设置字体不倾斜 font-style:‘normal’; 设置字体倾斜 font-style:‘italic’; 设置文字是否加粗 font-weight:bold; font-weight:normal 设置文字的行高 line-height:24px;
DOM增加元素属性/dom事件
H_zhiyi的博客
11-16 475
增: 元素(标签),节点 创建元素三种方法: 1 document.write(“html”); 2 元素对象.innerHTML = “html” 3 document.createElement(“标签名”); 创建元素对象,返回值 元素对象.appendChild(子元素对象); 添加 给body添加:document.body.appendChild(子元素对象); 注:建议使用第三方法,性能最好 元素对象.insertBefore(要插入的元素,已有元素); 在某元素之前插入元素 元素对
javascript关于for循环语句的使用方法
H_zhiyi的博客
10-27 445
for语句 whlie和do…whlie一般是用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便 for循环语法： // for循环的表达式之间用的是;号分隔的，千万不要写成, for (初始化表达式1; 判断表达式2; 自增表达式3) { // 循环体4 } 执行顺序：1243—243—243（直到循环条件变成flase） 1.初始化表达式 2.判断表达式 3.自增表达式 4.循环体 案例： 打印1-100之间所有数 <script> for(
HTML初学优选
H_zhiyi的博客
08-19 373
HTML 1.换行标记 2. HTML中的注释 注释–解释说明自己编写的html代码是什么含义 为了让被人能看懂 为了让以后的自己还能看懂 特征：不会被执行 可以利用注释不会被执行的特点来调试页面。 例如: 用法:一般写在html代码的上面，表示说明下面的代码还含义。 在调试页面的时候可以用来注释掉html代码。 注释是不能包含注释的。 3.align属性 默认的标题标记~/段落标记都是在左对齐， 如果我们需要设置标题标记~/段落标记水平对齐方式，需要使用align属性来设置水平对齐方式，这个属
JavaScript各类标签的使用
H_zhiyi的博客
11-04 359
内置对象： Date 创建日期对象： 1.Date（） 无参 2.Date（字符串） 3.Date（年，月，日） // 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数 var now = new Date(); console.log(now.valueOf()); // 获取距1970年1月1日（世界标准时间）起的毫秒数 Date构造函数的参数 1. 毫秒数 1498099000356 new Date(1498099000356
JavaScript的event常见属性&鼠标和键盘的事件
H_zhiyi的博客
11-18 348
event的常见属性   event.type 获取事件类型   event.clientX/clientY 获取当前事件源在浏览器窗口中的位置   event.pageX/pageY 获取当前事件源在页面中的位置   event.screenX/screenY获取当前事件源在屏幕中的位置   event.target ||event.srcElement 当前事件源   event.pr
解析查询字符串
H_zhiyi的博客
11-09 345
var queryStr = "https://www.baidu.com/s?wd=%E5%90%89%E5%B0%94%E6%8B%9C%E7%99%BB&rsv_spt=1&rsv_iqid=0x8918dabe0005151c&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ih_0&rsv_sug3=1&
"轻松入门JavaScript基础学习及用法
学习 JavaScript 的教材是非常重要的，因为它可以帮助你快速掌握基础知识并建立强大的基础。在学习 JavaScript 的过程中，你将会了解到什么是 JavaScript，如何在 HTML 页面中添加 JavaScript 代码，以及如何使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值