- HTML 文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 基础</title>
<!-- <script>
alert("这是 heade 区域的js代码");
</script> -->
<script src="../StudyJavaScript/js/Demo01.js"></script>
</head>
<body>
<!-- 执行的顺序是从上至下 -->
<!-- <script>
// 弹窗提示：alert();
alert("这是 body 区域的js代码");
</script> -->
<div id="id01" class="class01">我是div01</div>
<div id="id02" class="class01">我是div02</div>
<div id="id03" class="class01">我是div03</div>
<div id="id04" class="class01">我是div04</div>
<input type="text" name="txt01" id="txt001" value="我是输入框1">
<input type="text" name="txt02" id="txt002" value="我是输入框2">
<input type="text" name="txt01" id="" value="我是输入框3">
<br>
<!-- 像下面的 onclick 就类似于 C#、Delphi 中的事件。也可以把事件直接写在 js 中，下面有示例 -->
<!-- 【元素注册法】 -->
<input type="button" value="按钮" onclick="click01()">
<input type="button" value="点击改变输入框2中的内容" onclick="click02()">
</body>
<script>
// 闭包
// 目前可以简单的理解成字方法，可以使用父方法的变量即可（不建议使用闭包， 变量不易释放）
// 变量建议先去 var 它
// DOM（Document Object Model）文件对象模型
/**
* DOM 用于操作 HTML 文档，准确的是说操作 HTML标签 内的内容
* JavaScript 中将灭一个标签当做 对象 处理
* 在 HTML 中，每个标签都拥有自己的属性，比如 style、id、class等，也拥有触发时间、方法。同样在 js 中操作为对象处理的标签也拥有 属性、事件、方法 等成员
* 操作 DOM 对象，一般使用 document 关键字调用
*/
// JS 获取元素的方法
/**
* document.getElementById(id); 根据 id 获取元素节点
* document.getElementsByClassName(className); 根据 class 的值获取一组元素节点
* document.getElementsByName(name); 根据 name 获取一组元素节点
* document.getElementsByTagName(tag); 根据 标签名称 获取一组元素节点
*/
console.log(document.getElementById("id01"));
console.log("-----------------分割线--------------------");
console.log(document.getElementsByClassName("class01"));
console.log("-----------------分割线--------------------");
console.log(document.getElementsByName("txt01"));
console.log("-----------------分割线--------------------");
console.log(document.getElementsByTagName("div"));
console.log("-----------------分割线--------------------");
console.log(document.querySelector("#id01"));
console.log(document.querySelector(".class01")); // 当存在多个 class 为 class01 的时候，只显示第一个
console.log(document.querySelectorAll(".class01")); // 当存在多个 class 为 class01 的时候，显示全部
// 注册事件
// 方法有两种：方法一是上面的元素注册法、方法二是下面的对象注册法
function click01() {
// 需要注意执行的顺序。例如把下面的方法放在 Demo01.js 文件中，就不能获取到 input 的 value 属性值
console.log("我被点击了");
var txt1 = document.getElementById("txt001");
// 通过对象获取属性
console.log(txt1.value);
// 通过点击目标获取对象在通过该对象获取属性
console.log("我是button的文本：" + event.target.value);
}
function click02() {
document.getElementById("txt002").value = "我的内容被改变啦！！";
}
// 【对象注册法】
// 这个 onchange 事件是在输入框中输入参数后，在失去焦点才是 onchange 事件
// 建议使用这种方式来绑定事件
var change01 = function() {
console.log("我的内容被改变了，我也是第二种写事件的方式" + document.getElementById("txt002").value);
}
document.getElementById("txt002").onchange = change01;
</script>
</html>
- JS 文件内容：
// alert("这是外部文件的js代码");// 类似于 .net 中的 messagebox()
// console.log();// 输出在控制台显示
/**
* 测试方法注释，这地方是对方法的说明
* @param {string} ss 传进来需要输出的提示
*/
function xiaoYin01(ss) {
console.log(ss);
}
xiaoYin01("这就是提示信息啦");
console.log("-----------------分割线--------------------");
// 数据类型 方法：typeof()
var str = "我是什么类型的";
var stype = typeof(str)
console.log("类型为：" + stype);
console.log("-----------------分割线--------------------");
// 数组
var array1 = new Array();
array1[0] = "Hello";
array1[1] = "World";
array1[2] = 666;
console.log(array1)
console.log("-----------------分割线--------------------");
// 键值对【类似于 C# 中的字典】
var kv0 = {
key00: "value00", "key0": "value0" };
kv0["key1"] = "value1";
kv0["key2"] = "value2";
kv0.key3 = "value3";
kv0.key4 = "value4"
console.log(kv0)
var kv2 = kv0;
console.log(kv2);
console.log("-----------------分割线--------------------");
// 加引号和不加引号的区别【看输出的样子看不出啥】
var kv3 = {
key001: "value001", key002: "value002" }; // js 对象
console.log(kv3);
var kv4 = {
"key0001": "value0001", "key0002": "value0002" }; // json 格式对象
console.log(kv4);
console.log("-----------------分割线--------------------");
// json 格式的对象数组
var Arraykv0 = [{
"key01": "value01", "key02": "value02" }, {
"key001": "value001", "key002": "value002" }, {
"key0001": "value0001", "key0002": "value0002" }];
console.log(Arraykv0);
console.log("-----------------分割线--------------------");
// for循环
for (var i = 0; i < Arraykv0.length; i++) {
console.log(Arraykv0[i]);
};
console.log("-----------------分割线--------------------");
// 获取里面的值
for (const key in kv0) {
console.log("键：" + key);
console.log("值：" + kv0[key])
};
console.log("-----------------分割线--------------------");
for (const skv of Arraykv0) {
for (const key in skv) {
console.log("值：" + skv[key]);
}
};
console.log("-----------------分割线--------------------");
/**
* Array 对象方法
* concat() 连接两个或者更多的数组，并返回结果
* join() 把数字的所有元素放入一个字符串，元素通过指定的分隔符进行分隔
* push() 向数组的末尾添加一个或更多元素，并返回新的长度
* reverse() 颠倒数组中元素的顺序
* sort() 对数组的元素进行排序
* splice() 删除元素，并向数组添加新的元素
* */
// concat() 方法
var arr01 = [9, 5, 2, 7];
var arr02 = [8, 4, 1, 6];
// 连接两个或者更多的数组，并返回结果，不会改变原有的数组
var arr03 = arr01.concat(arr02);
console.log(arr01);
console.log(arr02);
console.log(arr03);
console.log("-----------------分割线--------------------");
// join() 方法
// 在字符串中间添加自定义的分隔符，并返回结果，不会改变原有的数组
var arr04 = arr03.join("|")
console.log(arr04);
console.log(arr03);
console.log("-----------------分割线--------------------");
// push() 方法
// 返回改变后的长度，并且会改变原有数组
var arrLenth = arr03.push(666);
console.log(arrLenth);
console.log(arr03);
console.log("-----------------分割线--------------------");
// reverse() 方法
// 颠倒数组中元素的顺序
arr03.reverse();
console.log(arr03);
console.log("-----------------分割线--------------------");
// sort() 方法
// 对数组的元素进行排序（默认升序，不是按照数字的大小）
arr03.sort();
console.log(arr03);
console.log("-----------------分割线--------------------");
// splice() 方法【一般有三个参数分别是：要删除的元素下标，要删几个元素(大于1代表删除后面几n-1个元素)，要插入的内容】
// 删除元素，并向数组添加新的元素
// 也可以再指定的地方插入参数或者数组等（插入的时候第2个参数为0即可，第1个参数为插入位置的下标）
// 1、删除元素可以只填前两个参数（如果只填1个参数，则包含下标参数及后面的所有参数都会被删除）
// 2、不删除，只添加参数：第1个参数表示为插入参数的下标，第2个参数为0，第3个参数为要插入的内容
// 3、替换某个元素（删除后再添加）：第1个参数为要替换的参数下标，第2个参数为1，第3个参数为替换后的内容
arr03.splice(0, 2, 3);
console.log(arr03);
arr03.splice(1, 0, [0, 10]);
console.log(arr03);
console.log("-----------------分割线--------------------");
// 类型转换 例如：一般为 parse+转换的类型(需要转换的数据);
var str01 = "9527";
var num01 = parseInt(str01);
console.log("原 str01 类型：" + typeof(str01));
console.log("修改后 str01 类型" + typeof(num01));
console.log("-----------------分割线--------------------");
// 方法
// return 也可以作为方法的中断操作，就是在 return 后面不写参数
function myFun01(num1, num2) {
return num1 + num2;
};
var ret01 = myFun01(10, 6);
console.log("我的方法myFun01的返回值：" + ret01);
console.log("-----------------分割线--------------------");
// 匿名方法
// 把一个匿名方法赋值给一个变量，把这种方式叫做委托
// 匿名方法一般常用的两种写法
// 方法一：这种方法可以吧匿名方法赋值给一个变量，调用这个变量即可使用该方法【类似 C# 中的委托】
var fun = function(p1) {
console.log(p1);
};
fun("Hello");
// 方法二：这种方法可以在定义匿名方法同时传参及调用
(function(p1) {
console.log(p1);
})("Hello World");
// 降序排列
var arr00 = [6, 5, 4, 9, 8, 7, 3, 2, 1];
arr00.sort(function(a, b) {
return b - a;
});
console.log(arr00);
console.log("-----------------分割线--------------------");
一点点笔记，以便以后翻阅。