javaScript的总结

1|0javaScript的总结

一、两种方式:

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]
4

4、对象（和c的结构体相似）

var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
}

1、通过delete动态删减属性

delete student.name

2、动态的添加属性的值

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)

__EOF__

本文作者：userName
本文链接：https://www.cnblogs.com/20kkk/p/16546926.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！