javaScript入门

阿无，

已于 2024-05-09 17:51:43 修改

阅读量289

点赞数

分类专栏： web 文章标签： javascript

于 2020-04-04 21:34:10 首次发布

本文链接：https://blog.csdn.net/weixin_44431371/article/details/105315552

版权

web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JavaScript是web上一种功能强大的编程语言，用于开发交互式的web页面。它不需要进行编译，而是直接嵌入在 HTML页面中，由浏览器执行。

JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

JavaScript的组成

ECMAScript：语法，语句.
BOM:浏览器对象
DOM:Document Object Model.操作文档中的元素和内容.

javaScript的作用

使用JavaScript添加页面动画效果，提供用户操作体验。主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。

javaScript引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 在HTML文件中引入JavaScript有两种方式，
			一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式，
			另一种是 链接外部JavaScript脚本文件，称为外联式。 -->
			
		<script type="text/javascript"> //此处为JavaScript代码 </script>
		
		<script src="1.js" type="text/javascript" ></script>
	</body>
</html>

基本语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1. 在使用JavaScript时，需要遵循以下命名规范： 
				必须以字母或下划线开头，中间可以是数字、字符或下划线 
				变量名不能包含空格等符号 
				不能使用JavaScript关键字作为变量名，如：function JavaScript
				严格区分大小写。 -->
				
		<!-- JavaScript变量可以不声明，直接使用。默认值：undefined -->
		var 变量名; 
		
		<!-- JavaScript变量是弱类型，及同一个变量可以存放不同类型的数据 -->
		var 变量名 = 值; 
		
		
		<!-- 数据类型 -->
		<!-- 基本类型 -->
		<!-- Undefined ,Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。 -->
		<!-- Null ,只有一个专用值 null，表示空，一个占位符。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。 -->
		<!-- alert(null == undefined); //输出 "true"，尽管这两个值相等，但它们的含义不同。 -->
		<!-- Boolean，有两个值 true 和 false -->
		<!-- Number，表示任意数字 -->
		<!-- String，字符串由双引号（"）或单引号（'）声明的。JavaScript 没有字符类型 -->
		
		<!-- 引用类型 -->
		<!-- 引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。 -->
		<!-- JavaScript是基于对象而不是面向对象。 -->
		<!-- JavaScript提供众多预定义引用类型（内置对象）。 -->
		<script type="text/javascript">
			var obj = new Object();
			var str = new String();
			var date = new Date();
		</script>
		 
		 <!-- JavaScript运算符与Java运算符基本一致
			跟java一样，js也存在if、if-else、for、switch等逻辑语句，与java使用方式一致
		  -->
		 
		 <!-- boolean运算
			undefined false
			Null false
			Number 如果参数为0或NaN，则结果为false，其余为true
			String 如果参数为空字符串，则结果为false
			Object true
		  -->
		  
		  
		  
		
		<script type="text/javascript">
			// <!-- 函数 -->
			// <!-- 普通函数 -->
			function add(a,b){
				alert(a+b)
			}
			
			add(5,10)
			
			// 匿名函数
			//定义匿名函数也就是没有名字的函数
			// 有返回值就写return，没有就不写
			function(参数列表){ js逻辑代码 }
			
			// 匿名函数没有办法直接调用，一般情况下匿名函数有两种使用场景： 
				// 第一种：将匿名函数赋值给一个变量，使用变量调用函数
				var fn = function(参数列表){ js逻辑代码 }
				//调用函数：fn(实际参数);
				
				// 第二种：匿名函数直接作为某个函数实际参数
				function xxx(数字类型参数，字符串类型的参数，函数类型的参数){ 
					//js逻辑代码 
					}
					//调用该函数： 
					xxx(100,”abc”,function(){})
		</script>
	</body>
</html>

全局函数


		<!-- 
			内置函数的重要转换: 字符串转成数字
			parseInt \ parseFloat
			是全局函数，不属于任何对象
			该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数 字返回该数字，而不是作为字符串。
		 -->

==与===的区别

<script type="text/javascript">
	var a = 5;
	var b = "5"
	// true
	alert(a==b)
	// false
	alert(a===b)
</script>

Nan的含义

<script type="text/javascript">
	var b = "a5"
	var a = parseInt(b);
	// Number
	alert(typeof a)
	// NaN
	alert(a)
	// javascript nan是代表非数字值的特殊值，该属性用于指示某个值不是数字
	// 就是这一个意思，没有其他更宽泛的意思
</script>

null与undefined的区别

1、首先看一个判断题：null和undefined 是否相等

console.log(null==undefined)//true
console.log(null===undefined)//false

观察可以发现：null和undefined 两者相等，但是当两者做全等比较时，两者又不等。

原因：null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。

undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。

实际上，undefined值是派生自null值的，ECMAScript标准规定对二者进行相等性测试要返回true，

那到底什么时候是null,什么时候是undefined呢？

null表示"没有对象"，即该处不应该有值。典型用法是：

（1）作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

逻辑布尔

0、“”、null都是逻辑的false
1是逻辑的true
NaN和任何比都是false

事件

事件源：被监听的html元素
事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
事件与事件源的绑定：在事件源上注册上某事件
事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装

DOM对象

DOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（HTML）的方式。

创建的结构化文档：html、xml 等
DOM包括：核心DOM、HTML DOM、XML DOM。通常情况下HTML DOM 和XML DOM是可以相互使用的。

HTML DOM 将整个HTML文档呈现成一颗DOM树，树中有元素、属性、文本等成员。

在这里插入图片描述
DOM
document object model
文档对象模型。
文档就是整个HTML。结构化文档。

对象：就是将整个文档当作一个对象
整个HTML document对象
标签(元素) element对象
属性 attribute对象
文本 text

有对象就会提供属性和方法，通过事件结合，要达到动态操作HTML

javaScript操作DOM树的函数

<script type="text/javascript">
// 浏览器加载整个HTML文档形成Document 对象，Document 对象可以访问和操作HTML文档中的所有元素。
	// 标签元素的操作
	// 获得元素对象
	// 根据id获得一个元素
	// getElementById(id属性值) 
	// 根据标签名称获得多个元素
	getElementsByTagName(标签名称) 
	// 根据class属性获得多个元素
	getElementsByClassName(class的属性值) 
	// 根据name属性获得多个元素
	getElementsByName(name属性值) 
	
	// 创建一个新元素
	createElement() 
	// 将元素放到某个父元素的内部
	appendChild()
	// 该标签是否有子节点
	hasChildNodes()
	// 删除子节点
	removeChild()
	// 替换子节点，两个参数都是element
	replaceChild()
	// 标签体的获取与设置
	innerHTML

	// 如果元素/标签是一定会有某些属性的（即使你不写），js提供了一个便捷操作
	// 直接 元素对象.属性名
</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>



		<input type="text" name="work" value="东风破" id="tid">
		<input type="text" name="author" value="周杰伦" id="tid">

		<div id="animal"></div>

		<select id="citySelect">
			<option id="bj" value="bj">北京</option>
			<option id="sh" value="sh">上海</option>
			<option id="gz" value="gz">广州</option>
			<option id="sz" value="sz">深圳</option>
		</select>

	</body>
	<script type="text/javascript">
		console.log("===========测试getElementById=================")
		var element = document.getElementById("tid");
		// 东风破
		console.log(element.value)
		console.log(element.getAttribute("value"))
		console.log(element.setAttribute("value", "青花瓷"))
		// text
		console.log(element.type)

		element.onchange = function() {
			console.log(element.value)
		}


		console.log("===========测试getElementsByTagName=================")
		var inputList = document.getElementsByTagName("input")
		console.log("inputList的长度为：" + inputList.length)

		for (var i = 0; i < inputList.length; i++) {
			console.log(inputList[i].value)
		}


		console.log("================测试select和getAttribute====================")
		var optionList = document.getElementById("citySelect").getElementsByTagName("option");
		for (var i = 0; i < optionList.length; i++) {

			var item = optionList[i];

			if (item.selected) {
				console.log(item.value)

			}

		}


		console.log("================测试innerHTML=================")
		var animal = document.getElementById("animal");
		// <div id="animal"></div>
		console.log(animal)

		animal.innerHTML = "<h1>狗</h1>"
		// 狗
		console.log(animal.innerText)



		console.log("==================测试ChildNodes====================")
		var cityList = document.getElementById("citySelect")
		console.log(cityList.hasChildNodes())

		var cityBj = document.getElementById("bj")
		cityList.removeChild(cityBj)

		var cityGz = document.getElementById("gz")
		var citySz = document.getElementById("sz")
		cityList.replaceChild(citySz, cityGz)


		var tjElement = document.createElement("option");
		tjElement.innerHTML = "天津";
		tjElement.setAttribute("id", "tj");
		tjElement.setAttribute("value", "tianjin");
		cityList.appendChild(tjElement);
		
		var cqElement = document.createElement("option");
		cqElement.innerHTML = "重庆";
		cqElement.setAttribute("id", "cq");
		cqElement.setAttribute("value", "cq");
		cityList.insertBefore(cqElement,document.getElementById("sh"));
		
	</script>
</html>

this

在函数内部this表示：当前操作的元素（html标签）。

小案例之隔行换色和复选框全选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<!-- 
			js代码在<body>之前，不能获得<body>标签体中的内容，还没有加载到
			js代码好像也是瀑布流加载
			
		-->
		<script type="text/javascript">
			// 第一种方式
			// function init(){
			// 	var firstCheckbox = document.getElementById("firstCheckbox")
			// 	console.log(firstCheckbox.value)
			// }

			// 第二种方式
			window.onload = function() {
				var firstCheckbox = document.getElementById("firstCheckbox")
				console.log(firstCheckbox.value)
			}
		</script>
	</head>
	<!-- <body οnlοad="init()"> -->
	<body>
		<table border="1px">
			<tr>
				<th width="40px"><input onclick="selectAll(this)" type="checkbox" name="checkbox" id="firstCheckbox"
						value="value" /><label for=""></label></th>
				<th width="50px">id</th>
				<th width="90px">分类</th>
				<th width="150px">分类商品</th>
				<th width="90px">操作</th>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="" id="" value="" /><label for=""></label></td>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td align="center"><button>修改|删除</button></td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="" id="" value="" /><label for=""></label></td>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td align="center"><button>修改|删除</button></td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="" id="" value="" /><label for=""></label></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td align="center"><button>修改|删除</button></td>
			</tr>
			<tr>
				<td align="center"><input type="checkbox" name="" id="" value="" /><label for=""></label></td>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td align="center"><button>修改|删除</button></td>
			</tr>
		</table>

	</body>

	<script type="text/javascript">
		var trElementList = document.getElementsByTagName("tr")

		for (var i = 0; i < trElementList.length; i++) {

			// 隔行换色
			if (i % 2 != 0) {
				trElementList[i].style.background = "royalblue"
			}

			// 鼠标移入移除变色
			// 隔行换色用标签元素，鼠标移入用this，
			// 原因是鼠标移入是需要触发，谁触发，谁生效
			var color = ""
			trElementList[i].onmouseover = function() {
				color = this.style.background
				this.style.background = "yellow"
			}

			trElementList[i].onmouseout = function() {
				this.style.background = color
			}


		}


		// 复选框 全选全不选
		function selectAll(allCheck) {
			// check代表的是html传递的this，this又代表的是整个标签，所以也可以直接判断
			// var checkFlag = allCheck.checked;
			var inputList = document.getElementsByTagName("input")
			var input0 = inputList[0].checked

			for (var i = 0; i < inputList.length; i++) {

				if (input0) {
					inputList[i].checked = true
				} else {
					inputList[i].checked = false
				}
			}
		}
	</script>
</html>

用户名密码确认

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<title>注册页面</title>

	</head>
	<body>
		<div style="padding-left: 500px;" class="formId">
			<div class="formReg">
				<h3 style="margin-left: 15px;">用户注册&nbsp;<span>USERREGISTER</span></h3>
				<!-- 实际开发中应该用post，在这儿用get是为了请求行上可以看到传递的参数 -->
				
				<!-- 
					提交的时候检查非空
					return true 提交 false 不提交
				-->
				<form action="#" method="get" onsubmit="return checkNone()">
					<table width="500px">
						<tr>
							<td width="50px" align="left">用户名</td>
							<td>
								<input id="username" class="in" name="username" 
									placeholder="请输入用户名" type="text"></input>
								<span id="usernameSpan"></span>
							</td>
						</tr>
						
						
						<tr>
							<td width="50px" align="left">密码</td>
							<td>
								<input id="password" class="in" name="password" 
									placeholder="请输入密码" type="password"></input>
								<span id="passwordSpan"></span>
							</td>
						</tr>
						
						<tr>
							<td width="70px" align="left">确认密码</td>
							<td>
								<input id="checkPassword" class="in" name="checkPassword" 
									placeholder="请再次输入密码" type="password"></input>
								<span id="checkPasswordSpan" style="display: none;color: red;">两次密码输入不一致</span>
							</td>
						</tr>
						
						<tr>
							<td colspan="2" style="padding-left: 95px;padding-top: 5px;"><button>注册</button></td>
						</tr>


					</table>
				</form>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		function checkNone() {
			var username = document.getElementById("username").value;
			var password = document.getElementById("password").value;
			var checkPassword = document.getElementById("checkPassword").value;
			var checkPasswordSpan = document.getElementById("checkPasswordSpan");
			
			flag = false;
			
			

			if (username&&password&&checkPassword) {
				flag = true
			}else{
				alert("用户名或密码不能为空")
				flag = false
			}
			
			if (flag == true && password != checkPassword){
				checkPasswordSpan.style.display = 'inline'
				flag = false;
			}
			if(password == checkPassword){
				checkPasswordSpan.style.display = 'none'
			}
			
			return flag;
			
			
			
			
			
		}
	</script>
</html>

js内置对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>

	<script type="text/javascript">
		/*String对象 */

		var str = "abc" // typeof 输出string
		var str2 = new String(str); //typeof 输出 object 
		// 为字符串添加超链接
		str.link("http://www.baidu.com")
		//以上定义方式,都可以使用String对象的方法 

		var s = "a‐b‐c‐de‐FG";

		//字符串的长度 
		console.log(s.length)
		//指定索引找字符 
		console.log(s.charAt(1));
		//字符第一次出现的索引 
		console.log(s.indexOf("c"));
		// 字符最后一次出现的索引 
		console.log(s.lastIndexOf("c"));
		//切割字符串 
		var strArr = s.split("‐");
		for (var i = 0; i < strArr.length; i++) {
			console.log(strArr[i]);
		}
		// 获取索引之间的字符，包头不包尾
		console.log(s.substring(1, 3));
		//获取索引开始到长度的字符 
		console.log(s.substr(1, 3));
		// 如果没有找到任何匹配的子串，则返回 -1
		console.log(s.search("h"))




		// Date 对象会自动把当前日期和时间保存为其初始值。

		/** Data对象 * 创建方式直接new */
		var date = new Date();
		//拼接年月日 
		console.log(date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日");
		//获取毫秒值 
		console.log(date.getTime());
		//根据本地时间格式，把 Date 对象转换为字符串。 
		console.log(date.toLocaleString());








		/*Math对象:直接调用 */
		//向上取整 
		console.log(Math.ceil(3.14));
		//向下取整 
		console.log(Math.floor(3.14));
		//四舍五入取整 
		console.log(Math.round(3.14));













		// Array 对象，就是JS数组，用于存储多个值，存储的元素类型可以是任意类型。
		// new Array();
		// new Array(size);
		// new Array(element0, element0, ..., elementn);

		//定义数组对象 
		var arr1 = new Array();
		arr1[0] = 1;
		arr1[1] = "a";
		arr1[2] = 2.2;

		console.log(arr1);

		//定义数组对象 
		var arr2 = new Array(3);
		//打印数组长度 
		console.log(arr2.length);

		//定义数组对象 
		var arr3 = new Array(3, 4, 5, "a", true);
		console.log(arr3);

		//开发中最常用方式 
		var arr4 = [1, 2, 3, 4, "a", "b", "c"];
		for (var i = 0; i < arr4.length; i++) {
			console.log(arr4[i]);
		}

		//定义二位数组 
		var arr5 = [
			[1, 2, 3],
			["a", 4, "b"],
			[true, 5, false]
		];
		//打印3 
		console.log(arr5[0][2]);
		//打印a 
		console.log(arr5[1][0]);
		//打印false 
		console.log(arr5[2][2]);










		// RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
		// var reg = /pattern/; //返回一个新的 RegExp 对象
		// var reg = new RegExp(pattern); //返回一个新的 RegExp 对象
		/*正则表达式定义 
			1. new RegExp对象 
			2. 正则被定义在俩个//内 
				[0‐9][a‐z][A‐Z]{5} 
				^匹配开头 $匹配结尾 */
		var reg = new RegExp("^[0‐9]{5}$");
		//正则对象方法test,测试与字符串是否匹配 
		var flag = reg.test("a2345");
		console.log(flag);
		var reg1 = /^[0‐9]{5}$/;
		flag = reg1.test("6789 ");
		console.log(flag);
	</script>
</html>

js使用正则表达式

match（）与test（）函数的区别？

test是RegExp的方法，参数是字符串，返回值是boolean类型。
match是String的方法，参数是正则表达式，返回值是数组。

//判断日期类型是否为YYYY-MM-DD格式的类型    
function IsDate(){     
	var str = document.getElementById('str').value.trim();    
	if(str.length!=0){    
	var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;     
	var r = str.match(reg);     
	if(r==null)    
		alert('对不起，您输入的日期格式不正确!'); //请将“日期”改成你需要验证的属性名称!    
	}    
}   
//判断输入的字符是否为中文    
function IsChinese() {     
	var str = document.getElementById('str').value.trim();    
	if(str.length!=0){    
	reg=/^[\u0391-\uFFE5]+$/;    
	if(!reg.test(str)){    
		alert("对不起，您输入的字符串类型格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称！    
		}    
	}    
}

BOM对象

BOM（Browser Object Mode），浏览器对象模型(将客户端的浏览器抽象成一类对象)，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。

例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。在例如，浏览器中的前进和后退按钮，我们可以使用history对象模拟。
在这里插入图片描述

js的BOM对象

Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。
Window对象（重点），Window 对象表示一个浏览器窗口或一个框架。
Navigator对象，包含的属性描述了正在使用的浏览器
History对象，其实就是来保存浏览器历史记录信息。
Location对象（重点），Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

Window对象

所有浏览器都支持 Window对象。Window 对象表示浏览器中打开的窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<input type="button" name="" id="" value="Display timed alertbox!" onclick="timedMsg()" />
		</form>
		<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>
	</body>
	<script type="text/javascript">
		// window中三种弹窗方法
		// 由于整个页面都是window，所以我们一般写window的时候将window省略了

		// 做一些提示用
		// alert("test alert")

		// 确认框，做友情提示 确认操作
		// 确认是true 取消是false
		// var confirmVal = confirm("您确认要删除么？")
		// console.log(confirmVal)


		// 提示框 返回值为文本框录入的内容
		// var val = prompt("请您录入英雄的名字","比如孙悟空")
		// document.write(val)
		// param1 要调用的函数后要执行的 JavaScript 代码串
		// param2 在执行代码前需等待的毫秒数。两个参数都是必须的
		function timedMsg() {
			var t = setTimeout("alert('5 seconds!')", 5000)
		}
		// setTimeout() 只执行 code 一次。
		// 如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

		// 可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，
		// 直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用 作 clearInterval() 方法的参数。
		// param1 要调用的函数或要执行的代码串。
		// param2周期性执行或调用 code 之间的时间间隔，以毫秒计。两个参数都为必须
		
		var id = window.setInterval(function() {
			alert("3秒")
		}, 3000);

		function fnClear() {
			window.clearInterval(id);
		}
	</script>
</html>

Location对象

<html>
	<body>
		<script type="text/javascript">
			// href是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL
			location.href = "https://www.baidu.com"
			console.log(location.href)
			document.write(location.href);


			// search 属性是一个可读可写的字符串，
			// 可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
			location.search
		</script>
	</body>
</html>

轮播图案例

<html>
	<body>
		<div align="center" id="">
			<img id="imgId" src="./img/1.jpg">
		</div>
	</body>

	<script type="text/javascript">
		var i = 1
		setInterval(function() {
			var big_img = document.getElementById("imgId")

			if (i < 3) {
				i++;
			} else {
				i = 1
			}

			big_img.src = "./img/" + i + ".jpg "

		}, 2000)
	</script>
</html>

target

target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。

event.target

关于转码

base64

base64利用js转码详细解释
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。
Base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。采用Base64编码具有不可读性，需要解码后才能阅读。

canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

toDataURL(type?: string, ...args: any[]): string;

// 实例
var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
var base64url = cas.toDataURL('image/jpeg'); //转换为base64地址形式
// $("#finalImg").prop("src",base64url);//显示为图片的形式

部分内容引用自：
https://www.cnblogs.com/calvin-dong/p/11217880.html
https://www.imooc.com/qadetail/177265

她们本能地防备男性。可是眼前的人，年纪似乎已经过了需要守备的界限。

房思琪的初恋乐园
林奕含

阿无，

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javaScript入门

javaScript引入基本数据类型javaScript的基本数据类型是这些，但是定义的时候都用var，使用 typeof 变量可以获取变量的类型引用类型Nan的含义与=的区别boolean的逻辑js函数var a = function(){}事件名DOMjs方法获取标签的方法及创建标签获取标签中的属性innerHtml...
复制链接

扫一扫

专栏目录