javaScript的总结
javaScript的总结
一、两种方式:
1、内部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script 标签内，写js代码-->
<script>
alert('hello,world');
</script>
<script src="../JS文件/ones.js"></script>
</head>
<body>
<!--也可以放在这里-->
</body>
</html>2、外部引入
html文件
<script src="../JS文件/ones.js"></script>JS文件
alert('hello,world');在浏览器控制台（console）可以编写js代码
alert(' ');//弹窗
console.log();//可以输出变量3、比较运算符
== 等于（类型不一样，值一样，也会判断为true）
===绝对等于（类型一样，值一样 结果为true）
注意：
-
NaN===NaN,这个与所有的数值都不相等，包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题：尽量避免使用浮点数进行运算，存在精度问题
4、数组和对象数组
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,,5,'hello');5、对象
对象是大括号，数组是中括号
var person = {
name:'da',
age:20,
tages:['js','java',1,2]
}取值
person.name
6、严格检查格式
use strict:严格检查模式，预防js的随意性导致产生的一些问题必须写在js代码的第一行
局部变量建议都使用let去定义
7、字符串长度
str.length
8、字符串的可变性，不可变（对其赋值不可改变原先字符串）
9、大小写转换
student.toUpperCase() 转为大写字符
student.toLowerCase() 转为小写字符
10、indexOf() 获取指定的下标
student.substring(1,3) 截取1-3的字符串
student.substring(1) 截取1后面的字符串
3、数组
在数组中截取可以用 slice( )来截取数组长度对应的数组
1、push() pop() 尾部
push(): 压入尾部
pop(): 弹出尾部的一个元素2、unshift()、shift() 头部
unshift():压入到头部
shift(): 弹出头部的一个元素3、排序
arr.sort();4、元素反转
arr.reverse();5、concat() 会产生一个新的数组不会改变原来的数组
["C","B","A"]
arr.concat([1,2,3])
["C","B","A",1,2,3]6、连接符join
["C","B","A"]
arr.join('-');
"C-B-A"7、多维数组
arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
44、对象（和c的结构体相似）
var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
}1、通过delete动态删减属性
delete student.name2、动态的添加属性的值
student.name="20kkk"3、判断属性值是否在这个对象中
'age' in student
返回布尔型变量4、判断一个属性是否是这个对象自身拥有的属性
student.hasOwnProperty('age');
student:对象 age：属性名5、forEach循环
var age = [12,3,12,3,4,5,6,78];
age.forEach(function (value) {
console.log(value)
})5、Map和Set
var map = new Map([['tom',100],['jack',90],['Danny',80]]);
var name = map.get('tom');
map.set('admin',1231);
console.log(name);Set ：无序不重复的集合
var set = new Set([3,1,1,1,1,1])//Set可以去重
set.add(2);//增加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素6、iterator
遍历数组
//通过for of具体的值 / for in 下标
var arr = [3,4,5]
for(var x of arr){
console.log(x);
}遍历map
var map = new Map([['tom',99],['jack',90],['Danny',90]]);
for(let x of map){
console.log(x)
}遍历set
var set = new Set([5,6,7]);
for(let x of set){
console.log(x)
}6、函数（js的函数和matlab里M文件相似）
6.1 绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}如果没有执行return，函数执行玩也会返回结果，结果就是undefine
定义方式2：
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}这是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数
function(x){...}7、变量的作用域
在js中，var的定义会有实际作用域
function abs(){
var x = 1;
x = x+1;
}
x = x + 2;//超出var的作用域- 如果两个函数使用了相同的变量名，在函数内部不会冲突
- 内部函数可以访问外部函数的成员，反之不行
- 函数重名的话，由内向外查找 相似于就近原则
8、全局对象 window
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
window.alert = function(){
};
window.alert(123);//alert失效了
//恢复
window.alert = old_alert;
window.alert(456);//控制端可以打印出456但是打印不出123规范
由于所有的全局变量都会绑定在window上面，如果不同的js文件，使用了相同的全局变量，会造成冲突
//唯一的全局变量
var BoApp = {};
//定义全局变量
BoApp.name = 'WPB';
BoApp.add = function(a,b){
return a + b;
}局部作用域 let
常量 const (ES6之前全部的大写字母组成的便是常量)
9、方法
就是把函数放在对象的内部，调用方法要带括号 bo.age(2022)
<script>
var bo = {
name:'weipengbo',
birth:2002,
age:function(){
var now = new Date().getFullYear();
return now - this.birth;
}
}
</script>10、apply 控制this指向
getAge.apply(对象,指向的数据)
getAge为函数11、Date日期
var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一的数据源
console.log(new Date(1659577997709))
// Thu Aug 04 2022 09:53:17 GMT+0800 (中国标准时间)
now.toLocaleString();//获得本地时间
'2022/8/4 09:56:07'12、JSON(数据交换格式类似于xml)
在js中一切皆为对象，任何js支持的类型都可以用JSON来表示；number、string...
- 对象都用{}
- 数组都用[]
- 所有的键值对 都是key：value
var user = {
naem:"wei",
sge:3,
sex :'男'
};
//对象转化为json字符串
// {"naem":"wei","sge":3,"sex":"男"}
var jsonuser = JSON.stringify(user);
//json字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"naem":"wei","sge":3,"sex":"男"}')JSON对象和JS对象的区别
var obj = {a:'hello',b:'wei'};
var json = '{"a":"hello","b":"www"}'//对象是字符串形式13、面向对象编程
var Student = {
name:"wei",
age:3,
run:function () {
console.log(this.name + "run....");
}
};
var xiaoming = {
name:"xiaoming"
};
//继承
xiaoming._proto_ = Student;最新的继承方式
<script>
class Student{
constructor(name) {
this.name =name;
}
hello(){
alert('hello');
}
}
class XiaoMing extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('大三了')
}
}
var xiaoming = new Student();
var Danny = new XiaoMing();
</script> 
14、操作BOM对象
BOM：操作浏览器对象模型
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");相同
document.getElementById("header");window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location.href="https://www.baidu.com";15、操作DOM对象
浏览器网页就是一个Dom树形结构
- 更新：更新Dom节点
- 遍历Dom节点：得到Dom节点
- 删除：删除一个新的Dom节点
- 添加：添加一个新的节点
要操作一个Dom节点，就必须先获取这个Dom节点
获得Dom节点
var h1 = document.getElementsByTagName('h1');16、操作表单
17、提交表单
这两个事件发生在表单对象<form>上，而不是发生在表单的成员上。
reset事件当表单重置（所有表单成员变回默认值）时触发。
submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是<form>元素，而不是<button>元素，因为提交的是表单，而不是按钮。
表单加密
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单绑定提交事件-->
<form action="http://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名：</span><input type="text" id = "username" required>
</p>
<p>
<span>密码：</span><input type="text" id = "input_password" required>
</p>
<input type="hidden" id="md5_password" name="password">
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa() {
var name = document.getElementById('username');
var pwd = document.getElementById('input_password');
var md5pwd = document.getElementById('md5_password');
console.log(name.value);
md5pwd.value = md5(pwd.value);
console.log(pwd.value);
//可以校验表单内容
return true;
}
</script>
</body>
</html>18、JQuery的基本操作
使用方法：$(selector).action()
可以使用下面的查看文档进行学习
jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)
浙公网安备 33010602011771号