一、js概述
- javaScript十世界上最流行的脚本语言
二、js入门
三、js变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//定义变量:var 变量名=值 js里面没有数据类型 全部用var
var num=1;
var name="ddddd";
//控制结构:if else 和java一样 也可以嵌套
if(num>0){
alert("大于0");
}else{
alert("小于0")
}
</script>
</head>
<body>
</body>
</html>
- js调试方法:
四、基本数据类型入门
- Number:js中不区分小数和整数 都是number
123 //整数
123.3//小数
NaN //not a number
infinity //表示无限大
-100 //负数
1.123e3 //科学计数法
- 字符串
'abc' "abc"
- 布尔值
true false
- 逻辑运算符
&& 与
|| 或
! 非
- 比较运算符
= 赋值运算符
== 等于(类型不一致 数值一致 就相等)
=== 绝对等于类(型数值都一致 才想等)
//这是js的一个缺陷 坚持不要用==比较
NaN===NaN 结果是false NaN与所有的都不想等 包括自己
只能通过isNaN(NaN)来判断这个数是不是NaN
五、严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 严格检查模式:前提要设置成es 6
* 在开始加上'use strict';
* 局部变量建议使用let 定义 当然使用var 也是对的
* */
'use strict'
let i=1;
</script>
</head>
<body>
</body>
</html>
六、字符串类型
- 字符串用单引号或者双引号包裹起来
- 注意转义字符\
- 多行字符串编写
<script>
//多行字符串编写用tab键上面的``包裹
'use strict';
let msg=`
你好呀!
我叫某某某,
你叫什么名字呀
`
</script>
- 字符串模板
let name="dy";
let age=20;
//两种模板字符串 第一种是tab上面的`` 第二种是用+
let str=`你好!${name}`;
let msg="哈哈哈哈"+name;
-
字符串长度
-
js中字符串是不可变的
-
大小写转换
-
获取指定元素下标
-
分割字符串
s.substring(1):获取从第一个开始之后的所有
s.substring(1,4):获取从第一个开始到第四个(包头不包尾)
s.substring(0):获取所有
七、数组
八、对象类型
九、分支和循环
十、Map和Set
十、Iterator迭代
十一、函数
- 11.1 定义函数
- 11.2 作用域
- 11.3 方法的调用以及Apply
十二、Date日期对象
十三、JSON
十四、面向对象原型继承
- class继承
十五、操作BOM对象
注:服务器可以设置cookie为httpOnly
十六、操作Dom对象
-
更新Dom节点
-
删除Dom节点
-
创建和插入节点
十七、获得和操作表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
<p>
<span>姓名:</span><input type="text" id="username">
</p>
<p>
<span>性别:</span>
<input type="radio" value="boy" name="sex" id="boy">男
<input type="radio" value="girl" name="sex" id="girl">女
</p>
</form>
<script>
//锁定姓名框
var username= document.getElementById('username');
//获取姓名框中的值
username.value;
//修改姓名框中的值
username.value='scsd';
//锁定性别框
var boy=document.getElementById('boy');
var girl=document.getElementById('girl');
//单选框和多选框只能获得当前的值 而要想获得选定的值
// 需要用boy.checked 若为true 则表明选中,
// 同时也可为其赋值 girl.checked=true 使其选中
</script>
</body>
</html>
十八、提交表单验证和MD5加密
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="" method="post">
<p>
<span>姓名:</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span><input type="password" id="password" name="password">
</p>
<!--为提交按钮绑定事件οnclick="aaa()" -->
<button type="button" onclick="aaa()">提交</button>
</form>
<script>
function aaa() {
var username=document.getElementById('username');
var password=document.getElementById('password');
password.value=md5( password.value);//抓包后密码会加密 而不是直接显示 更具有安全性
}
</script>
</body>
</html>
十九、jQuery
jQuery库里面封装了许多js函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入jQuery-->
<script src="jQuery/lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="test">点我</a>
<script>
//jQuery公式:$(选择器).事件()
//选择器就是css选择器
$('#test').click(function () {
alert(1);
})
</script>
</body>
</html>
文档:https://jquery.cuishifeng.cn/element.html