JavaScript基础知识

基础语法

在head与body标签内可以调用执行JavaScript语言
调用使用方式如下所示：

<script src="xx.js">
	// JavaScript Codes
	// src调用外部js文件
</script>

变量的定义使用var关键字，分号";"结尾
变量区分大小写

DOM操作

DOM(Document Object Model)
document.getElementById("id属性的值"); 通过id的值获取元素，返回值为id所在的HTML代码
document.getElementsByTagName("标签名字"); 通过标签名获取元素，返回值为一个集合
document.getElementsByName("name属性的值"); 通过name属性的值获取元素
document.getElementsByClassName("类的名字"); 通过类的名字获取元素，返回值为一个集合
document.querySelector("选择器"); 获取单个选择器所在的HTML代码
document.querySelectorAll("选择器"); 获取多个选择器返回一个集合

var wrap = document.querySelector(".wrap");
wrap.onclick = function(){
	wrap.style.cssText = "width:500px; height:800px; background-color:red;")	
}
wrap.onmousemove = function(){} //鼠标滑动时出现效果
wrap.onkeydown = function(){} //键盘按压时出现效果

输出数据

document.write("xxx")
console.log() 控制台输出日志
window.alert("xxx") 弹窗

写入内容

innerHTML
innerText

var box = document.getElementsByTagName("div");
	box[0].innerHTML = "<p></p>";    //要注意box是一个集合
	box[0].innerText = "修改的内容";

两者的区别在于，HTML会将写入的标签进行解析，而Text则是以文本方式直接输出

函数

关键字：function
有名函数：

function name(){ 
	//codes 
	}
name()

函数表达式：

var test = function(){

}
test()

匿名函数：

function(){
	console.log("这是一个匿名函数")
}; // 该调用会报错

(function(){console.log("这是一个匿名函数") })(); //函数自执行
((function(){console.log("这是一个匿名函数") }));
!function(){console.log("这是一个匿名函数") }();
~function(){console.log("这是一个匿名函数") }();
-function(){console.log("这是一个匿名函数") }();
+function(){console.log("这是一个匿名函数") }();

形参/实参
return // 一般函数执行后返回undefined -> 未定义
arguments //可以用于获取参数的值

实用函数

在页面内点击按钮即可插入输入框输入数据

// 可以使用本地jquery，也可以采用cdn环境，确保src路径正确即可
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
function CreateInput(){
	var inputList = document.getElementById("inputList");
	var inputCount = inputList.getElementsByTagName('input').length;
	var newInput = `<form id="myForm">
						<div class="form-group">
							<th>
								<input class="form-control" id="inputText" name="inputText[${inputCount}]" type="text">
							</th>
							<th>
								<input class="form-control" id="inputDate" name="inputDate[${inputCount}]" type="date"> 
							</th>
							<th>
								<input class="form-check-input" id="inputCheck" name="inputCheck[${inputCount}]" type="checkbox">
							</th>
							<th>
								<button class="btn btn-success" id="button" name="btn_add" onclick="Add()">添加</button>
							</th>
						</div>
					</form>
					<br/>`;
	var element = document.createElement("thead");
	element.innerHTML = newInput;
	inputList.appendChild(element);
}

通过xhr或者ajax对数据进行Post方法操作

function Add(){
	var dataText = document.getElementById("inputText").value;
	var dataTime = document.getElementById("inputDate").value;
	var dataCheck = document.getElementById("inputCheck").checked;
	// 使用JSON格式进行数据传递
	var data = JSON.stringify({
		Item:dataText,
		CreateTime:dataTime,
		IsDone:dataCheck
	});

	// 方法一：
	var xhr = new XMLHttpRequest;
	xhr.open("POST","/Home/Create",true);  // POST所对应的后端Action的路由url
	xhr.setRequestHeader("Content-type","application/json");
	xhr.send(data);
	
	xhr.onreadystatechange = function () {
		if (xhr.readyState == 4 && xhr.status == 200) {
			// readyState有5种状态：
			//   0 - ajax开始初始化
			//   1 - 开始发送ajax请求
			//   2 - ajax请求发送完成
			//   3 - 开始解析响应的资源
			//   4 - ajax请求的步骤全部完成
			//var s = xhr.responseText;
			//document.getElementById("result").innerHTML = JSON.parse(s).result;
			window.location.reload();  // 需要加上window，否则不会刷新页面
			}
	}
	
	// 方法二：
	$.ajax({
	   url:"/Home/Create",
	   data:data,
	   contentType:"application/json",
	   type:"post",
	   cache:false,
	   datatype:"json",
	   success:function(data){alert("添加成功");location.reload()}, // ajax中使用location.reload()即可刷新页面
	   error:function(){alert("添加失败");}
	})
}

操作元素的自有属性

var old_img = document.querySelector("img");
var old_div = document.querySelector("div");
old_img.src = "test2.jpg";
old_div.className = "new_name";

通用获取方法：obj.getAttribute("name"), obj.setAttribute("name", "1"), obj.removeAttribute("name")
自定义属性获取方式采用通用获取方法即可

操作样式

行内样式（定义在标签内）

var box = document.querySelector(".box");
box.style.width = 500+"px"; //操作单个样式
box.style.cssText = "width:500px;height:500px;" //操作多个样式

内嵌样式（在style标签内）

var box = document.querySelector(".box");
box.getComputedStyle(box,null)["样式名"]

外部样式（外部的css文件），与内嵌相同

浏览器事件

BOM（Browser Object Model）
onload,onerror,onresize

window.onload = function(){
	console.log("页面已经加载完毕")
}
window.onreize = function(){
	console.log("页面窗口发生变化")
}
window.onscrool = function(){
	console.log("页面滚动条发生变化")
}

注意

若从页面中获取了日期文本，需要注意格式是否与后端相匹配，如不匹配需要对文本进行格式化处理

// 页面内获取的日期格式为：2023/12/15
// 后端内的日期格式为：2023-12-15
// 前后端不一致在.net core web mvc环境下会导致报错：视图页面不存在的错误
// 可以采用split分割后再使用join进行拼接处理
var date = document.getElementById('id').innerText.toString().split("/").join("-");

获取元素所对应的值

$('button[name=edit]').click(function(e)
{
	var x = $(e.target).attr("id");
	Edit(this,x);
})

修改输入框的内容，将不可编辑变成可编辑

$('.input_1').each(function()
{
	// 未修改前的文本内容 
	var old_value = $(this).html().trim(" "); 
	$(this).html("<input type='text' name=" + inputName + " class='form-control' value=" + old_value + " >");
})

// 获取修改后的文本内容
$('input[name='input']').each(function()
{ 	
	var new_value = $(this).parent('td').parent('tr').children().find('input').val(); 
})