js的笔记梳理
2021/10/21 23:13:43
本文主要是介绍js的笔记梳理，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
一.JS的组成
ECMAScript(核心):是JS的基本语法规范。
BOM：浏览器对象模型，提供了与浏览器进行交互的方法。
DOM：文档对象模型，提供了操作网页的方法。
二.js的引入方式
1.内部引入方式（内嵌式）
2.外部引入方式（外联式）
三.Js的定义
Js在6以后定义变量从var变成了let，但是由于其兼容性的问题，所以用var定义也是可以的。
四.JS的五种原始数据类型(重要)
| 数据类型 | 描述 | 示例 |
|---|---|---|
| number | 数值类型 | 1，2，3，3.14 |
| boolean | 布尔类型 | true,false |
| string | 字符串类型 | “hello”,‘hello’ |
| object | 对象类型 | new Date(),null |
| undefined | 未定义类型 | var a; |
五.typeof操作符
- 作用:用来判断变量是什么类型
- 写法:typeof(变量名)或typeof 变量名
- null与underfined的区别：
null:对象类型，已经知道了对象类型，但对象为空。
underfined:未定义的类型，并不知道是什么数据类型。
6.JS中与=之间的区别
==比较的是数值
===比较的是数值与类型
7.Js函数(重要)
8.Js常用事件的介绍(重要)
<title>Js的常用事件的介绍</title>
</head>
<body>
<input type="text" onfocus="display()" onblur="noplay()" />
<script>
function display() {
console.log("获取焦点...");
}
function noplay() {
console.log("失去焦点")
}
// 以上的方式是普通方式绑定，也可以通过匿名方式绑定。
</script>
以上是普通方式的获取焦点和失去焦点的方式。
<input type="text" id="text1" />
<script>
document.getElementById("text1").onmouseover = function () {
console.log("鼠标移入");
}
document.getElementById("text1").onmouseout = function () {
console.log("鼠标移出");
}
// 以上是通过匿名方式进行绑定鼠标移入移出事件
<select onchange="change1()">
]<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<script>
function change1() {
document.write("内容改变了。。。")
}
以上这个是内容改变事件
9.Js的正则表达(了解)
<title>Js正则表达式对象</title>
</head>
<body>
<script>
//目标:校验一个字符串是否由三个数字组成
// var reg = /\d{3}/;模糊匹配：只要被匹配的字符串中有一段能够匹配上正则表达式，即为true
var reg = /^\d{3}$/;//精确匹配：以^开头，以$结尾，指定匹配的开头和结尾。
var str = "1234b";
console.log(reg.test(str));
</script>
10.Js数组常用方法(了解)
<title>Js的数组对象</title>
</head>
<body>
<script>
var arr1 = [1, 2, "wei", "hello"];
var arr2 = [3, 4, "ji", "3014"];
console.log(arr1.concat(arr2));//将arr1与arr2合并，合并成一个新的数组
console.log(arr1.join(arr2));//将arr1与arr2合并，合并成一个新的字符串
console.log(arr2.reverse());//反转数组
</script>
11.Js的BOM（重点）
- window窗体（重点）
- navigater浏览器信息
- Screen屏幕信息
- history历史信息
- location当前路径信息（重点）
windows对象的常用方法
<title>window对象的三种弹框</title>
</head>
<body>
<script>
// alert("nihao");
// var result = confirm("确定删除吗？");确定为true取消为false
// prompt("请输入你的年龄");prompt是一个输入框
</script>
<title>windows对象两种定时器</title>
</head>
<body>
<script>
//1.规定时间之后完成某件事2.每隔一段时间完成一项工作
//第一种定时器setTimeout只执行一次的定时器，该方法的第一个参数是定时执行的任务，第二个参数是定时时间，单位是毫秒
// setTimeout(() => {
// document.write("testing")
// }, 3000);
//第二种定时器setInterval，每隔一段时间执行函数,该方法的返回值就是定时器的id
setInterval(() => {
document.write("testing?")
}, 2000);
//清除循环定时器---》clearInterval(定时器id)
</script>
location对象
| 属性 | 作用 |
|---|---|
| host | 设置或返回主机名和当前URL的端口号 |
| href | 设置或返回完整的URL |
| port | 设置或返回当前URL的端口号 |
location.href;获得路径
location.href=“url”；设置路径，跳转路径。
12.Js思维导图
13.Js的小案例
1.完成查看密码案例
<body>
<input type="password" id="pwd" /><input type="button" value="查看密码" id="btn" />
<script>
document.getElementById("btn").onmousedown = function () {
document.getElementById("pwd").setAttribute("type", "text");//点击事件触发的时候修改密码框为文本框
}
document.getElementById("btn").onmouseup = function () {
document.getElementById("pwd").setAttribute("type", "password");//点击事件触发的时候修改密码框为文本框
}
</script>
</body>
2.表单校验案例
body>
<form action="#" method="post" id="myform" onsubmit="return checkForm()">
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="../img/logo.jpg" alt="logo" /><img src="../img/banner.jpg" alt="banner" /></td>
</tr>
<tr>
<td class="hr_1">新用户注册</td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">用户名：</td>
<td class="center">
<input id="username" name="user" type="text" class="in" onblur="u1()" />
<span id="usernamespan" style="color: red;"> </span>
</td>
</tr>
<tr>
<td class=" left">密码：
</td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in" />
</td>
</tr>
<tr>
<td class="left">确认密码：</td>
<td class="center">
<input id="repwd" name="repwd" type="password" class="in" />
</td>
</tr>
<tr>
<td class="left">电子邮箱：</td>
<td class="center">
<input id="email" name="email" type="text" class="in" />
</td>
</tr>
<tr>
<!-- 以1开头, 第二为是3,4,5,7,8的11位数字-->
<td class="left">手机号码：</td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in" />
<span id="mobilespan"></span>
</td>
</tr>
<tr>
<td class="left">生日：</td>
<td class="center">
<input id="birth" name="birth" type="text" class="in" />
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="center">
<input name="" type="image" src="../img/register.jpg" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<script>
// //1. 编写一个校验用户名的正则表达式
function u1() {
var re1 = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
//只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
//2. 使用正则表达式校验用户名输入框中的值
var result = document.getElementById("username").value;//用户名的值
// alert(result)
console.log(result);
if (re1.test(result)) {
document.getElementById("usernamespan").innerHTML = "<img src=\"../img/gou.png\" width=\"40\" height=\"20\">";
//
} else {
document.getElementById("usernamespan").innerHTML = "输入有问题";
}
}
</script>
</body>
3.轮播图案例
<title>轮播图</title>
</head>
<body>
<div style="text-align: center;" id="tp">
<img src="../img/banner_1.jpg" id="tp2" onm ouseover="stop()" onm ouseout="startMove()" />
</div>
<script>
var i = 0;
var tp1 = ["../img/banner_1.jpg", "../img/banner_2.jpg", "../img/banner_3.jpg"];
//每隔三秒钟切换一张轮播图
// var result = setInterval(() => {
// i++;
// if (i == 3) {
// i = 0
// }
// document.getElementById("tp2").setAttribute("src", tp1[i]);
// }, 1000);
var result;
function startMove() {
result = setInterval(() => {
i++;
if (i == 3) {
i = 0
}
document.getElementById("tp2").setAttribute("src", tp1[i]);
}, 1000);
}
//页面加载的时候调用一次
startMove();
function stop() {
clearInterval(result);//清除定时器
}
// function begin() {
// result = setInterval(() => {//注意局部变量
// i++;
// if (i == 3) {
// i = 0
// }
// document.getElementById("tp2").setAttribute("src", tp1[i]);
// }, 1000);
// }
//考虑到以上代码重复代码过多，考虑封装一个方法，将开始轮播与鼠标移出代码封装在一起。
</script>
</body>
4.省市二级联动案例
<title>省市二级联动</title>
</head>
<body>
<select id="provinceSelect">
<option value="0">请选择省份</option>
<option value="1">广东省</option>
<option value="2">湖南省</option>
<option value="3">湖北省</option>
</select>
<select id="citySelect">
<option>请选择城市</option>
</select>
<script>
//准备数据
var cities = [
[],
["广州", "深圳", "惠州", "东莞"],
["长沙", "岳阳", "常德", "衡阳"],
["武汉", "黄冈", "宜昌", "荆州"]
]
//省份的value刚好是对应城市的数组的下标
document.getElementById("provinceSelect").onchange = function () {
//遍历添加之前清除所有的城市
document.getElementById("citySelect").innerHTML = "<option>请选择城市</option>";
// console.log(this.value);this就是选择的城市，value就是对应的123
//获取当前城市的列表
console.log(cities[this.value]);
//遍历出每个城市
for (var i = 0; i < cities[this.value].length; i++) {
var CityName = cities[this.value][i]
// console.log(CityName)打印查看输出的城市名
//创建option标签
var optionElement = document.createElement("option");//<option></option>
//设置option里面的内容是cityName
optionElement.innerHTML = CityName;
//将option添加到城市下拉框中
document.getElementById("citySelect").appendChild(optionElement);
}
}
</script>
</body>
这篇关于js的笔记梳理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-15useCallback教程：React Hook入门与实践
- 2024-11-15React中使用useContext开发：初学者指南
- 2024-11-15拖拽排序js案例详解：新手入门教程
- 2024-11-15React中的自定义Hooks案例详解
- 2024-11-14受控组件项目实战：从零开始打造你的第一个React项目
- 2024-11-14React中useEffect开发入门教程
- 2024-11-14React中的useMemo教程：从入门到实践
- 2024-11-14useReducer开发入门教程：轻松掌握React中的useReducer
- 2024-11-14useRef开发入门教程：轻松掌握React中的useRef用法
- 2024-11-14useState开发：React中的状态管理入门教程
