JavaScript 知识点总结

最新推荐文章于 2022-08-16 19:57:58 发布

MnLa

最新推荐文章于 2022-08-16 19:57:58 发布

阅读量159

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52033344/article/details/116173666

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、快速入门

JavaScript 快速入门

二、数据类型

2.1 字符串

正常使用单引号’ '或双引号" "包裹
转义字符
- \'表示单引号’
- \t表示 tab 键

多行字符串——使用 ` 号包裹

  var msg = `hello
                 world!`

模板字符串

  let name = "MnLa";
  let msg = `你好，${name}`;

长度：str.length
字符串不可变，通过元素的下标索引：indexOf()
截取字符串（左闭右开）：str.substring()

2.2 数组

可以包含任意数据类型

  var arr = [1,2,'hello',null,true];

长度： arr.length
通过元素的下标索引：indexOf()
截取数组：slice()
排序：sort()
压入、弹出：
- 尾部：push、unshift
- 头部：pop、shift
连接数组：concat 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本

2.3 对象

  var 对象名 = {
       属性名:属性值，
       属性名:属性值          // 属性名为字符串，属性值可以为任何数据类型
    }

赋值：person.name = "MnLa";
使用一个不存在的对象属性，不会报错，而会认作为 undefined
动态添加、删减
- 添加或更改：person.ha = "ha";
- 删减：delete person.name;
判断属性名是否在对象中：'age' in person;

2.4 流程控制

if、while、for等都与Java相同

forEach循环

  arr.forEach(function (value){
          console.log(value)
        })

2.5 Map 和 Set

Map：

  // var names = ["tom","jack","mike"];
  // var scores = [100,90,80];              老方法

  var map = new Map([['tom',100],['jack',90],['mike',80]);
  var name = map.get('tom');
  map.set('admin',123456);   //添加或修改
  map.delete('tom');    //删除
  console.log(name);

Set：无序不重复的集合

  var set = nre Set([3,1,1,1]);    //set可以去重  [3,1]
  set.add(2);    //添加
  set.delete(1);     //删除
  console.log(set.has(3));    //true 是否包含

2.6 iterator 遍历

遍历数组：

  var arr = [3,4,5];
  for (var x of arr){
      console.log(x);
    }

遍历Map：

  var map = new Map(...)
  for (let x of map){
      console.log(x);
    }

三、函数

3.1 定义函数

  function abs(x){
      if (x>=0){return x; }
        else { return -x;}
     }

一旦执行到 return 代表函数结束，返回结果
如果没有执行到 return，则函数执行完返回 undefined

调用函数：abs(10)

参数问题：JavaScript中的函数可以传人一个参数，也可以不传

var abs = function(x){
   //手动抛出异常来判断参数是否为空
   if(typeof x!==='number'){
     throw 'Not a Number';
     }
  ...
  }

arguments：代表传递进来的所有参数，它是一个数组

  var A = function(x){
    for (var i=0;i<arguments.length;i++){
      console.log(arguments[i];  // 打印传递进来的所有参数
     }
 }    //例如A(1,2,4,7,40)，则会依次打印1、2、4、7、40这些数字

rest：获取已经定义之外的所有参数 与Java的不定参数类似

  function A(a,b, ...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
  }    //rest参数只能写在最后面，用...标识

3.2 变量的作用域

在 JavaScript 中，var 定义变量实际是有作用域的。
在函数体中声明，它的作用域就只在函数内（除非使用闭包）。
JavaScript 中函数查找变量是由内向外的，内部会覆盖外部的重名变量。

  function A(){
    var x = 'a';
   	 function B(){
      var x = 'b';
      console.log('inner：'+x);    //inner：b
    }
    console.log('outer：'+x);    //outer：a
  }

书写规范：所有变量的定义都放在函数头部，便于代码的维护。

建议都使用 let 去定义局部作用域

常量：const

const PI = '3.14';
console.log(PI);
PI = '123';    //报错
console.log(PI);    //3.14

3.3 方法

定义方法：方法就是在对象中的函数

  var A = {
    name:'A',
    birth:2000,    //属性
    age:function(){
      var now = new Date().getFullYear();
      return now-this.birth;
    }    //方法
  }

this 默认指向调用它的那个对象

apply：在 JavaScript 中控制 this 的指向

 function getAge(){
   var now = new Date().getFullYear();
   return now-this.birth;
 }
 var A = {
   name:'A',
   birth:2000,
   age:getAge    //调用函数
 }
 getAge.apply(A,[])    //this指向了A，参数为空

四、内部对象

标准对象

  typeof 123    //"number"
  typeof NaN    //"number"
  typeof "123"    //"string"
  typeof true    //"boolean"
  typeof [ ]
  typeof { }    //"object"
  typeof Math.abs    //"function"
  typeof undefinded     //"undefined"

4.1 Date

基本使用

var now = new Date
now.getFullYear();    //年
now.getMonth();    //月  0~11月
now.getDate();    //日

now.getTime();    //时间戳  全世界统一
console.log(new Date(15...))    //时间戳转为时间

转换

  now = new Date(15...) ;   // 15...为时间戳
  now.toLocaleString();    //转为本地语言输出

4.2 JSON

JSON字符串和JS对象的转换

  var user = {
    name:"MnLa",
    age:20,
    sex:"男"
  }
  //对象转化为json字符串
  var jsonUser = JSON.stringify(user);
  //json字符串转化为对象，参数为json字符串
  var obj = JSON.parse('{"name":"MnLa","age":3,"sex":"男"}');

JSON字符串和JS对象的区别

  //JSON只是JS下的一种数据格式，而JS的对象则是表示类的实例。
  var obj = {a:'hello',b:'wordl'};    //对象
  var json = '{"a":"hello","b":"wordl"}';    //json字符串

4.3 Ajax

原生的js写法：xhr异步请求（很少用）
JQuery封装好的方法：$("#name").ajax()''
axios请求

五、面向对象编程

原型对象：

  var Student = {
    name:"MnLa",
    age:"18"
    run:function(){
      console.log(this.name + "is running...");
    }
  };
  var Tom = {
    name:"Tom"
  };
  //Tom的原型 是 Student
  Tom.__proto__ = Student;
  Tom.run();    //"Tom is running..."

class

class关键字是在ES6引入的

定义一个类，包括属性和方法

  class Student{
    coustructor(name){
      this.name = name;
    }
    hello(){
      alert('hello!');
    }
  }

  var Tom = new Student("Tom");
  var Jack = new Student("Student");
  Tom.hello();

继承——本质是设置对象原型

  class Pupil extends Student{
    constructor(name,grade){
      super(name);
      this.grade = grade;
    }
    myGrade(){
      alert('我是一名小学生!')
    }
  }

  var Mike = new pupil("Mike",1);

六、操作BOM对象（重点）

概念：Browser Object Model 浏览器对象模型：将浏览器的各个组成部分封装成对象。
组成
- Window： 浏览器窗口
- Navigator： 封装了浏览器的信息（不常用）
- Screen： 屏幕尺寸（不常用）
- Location： 当前页面的URL信息
- History： 历史记录（不建议使用）

Window对象——代表浏览器窗口

  window.alert(1)
  window.innerHeight    //内部窗口高度  258
  window.innerwidth    //内部窗口宽度  919
  window.close()    //关闭浏览器窗口

Location对象——代表当前页面的URL信息

  host:"www.baidu.com"
  href:"https://www.baidu.com/"
  protocol:"https"
  reload:f reload()    //刷新网页
  // 设置新的地址
  location.assign('hrrps://https://blog.csdn.net/weixin_52033344?spm=1000.2115.3001.5343')

History对象——代表浏览器的历史记录
- history对象只代表当前窗口（即Window对象）的历史记录，并不是浏览器的所有历史记录。
```
  history.back()    //后退
  history.forward()    //前进
  //尽管如此，并不推荐这样使用，Ajax有更好的代替方案。
```

七、操作DOM对象（重点）

7.1 核心

浏览器网页就是一个 Dom 树形结构

添加： 添加一个新的 Dom 节点
删除： 删除一个 Dom 节点
修改： 更新 Dom 节点
遍历Dom结点： 得到 Dom 节点

要操作一个 Dom 节点，就必须要先得到这个 Dom 节点

7.2 获得Dom节点

  //对应 css 选择器
  var h1 = document.getElementsByTagName('h1');    //标签名
  var p1 = document.gatElementById('p1');    //Id名
  var p2 = document.getElementsByClassName('p2');    //类名
  var father = document.getElementById('father');

  var children = father.children;    //获取父节点下的所有子节点
  //father.firsrchild
  //father.lastchild

这是原生代码，之后尽量使用JQuery();

7.3 更新Dom节点

  <div id = "id1">
  </div>
  
  <script>
    var id1 = document.getElementById("id1");
  </script>

操作文本
- id1.innerText = '123' 修改文本的值
- id1.innerHTML = '<strong>456</strong> 可以解析HTML的文本标签

操作 CSS

 id1.style.color = 'yellow';    //属性使用单引号或双引号包裹
 id1.style.fontsize = '20px';    // - 转 驼峰命名
 id1.style.padding = '2em';

7.4 删除Dom节点

步骤：先获取父节点，再通过父节点删除自己

  <div id = "father">
    <h1>标题一</h1>
    <p id = "p1">p1</p>
    <p class = "p2">p2</p>
  </div>
  <script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removechild(self)

    //删除是一个动态的过程
    father.removechild(father.children[0])
    father.removechild(father.children[1])
    father.removechild(father.children[2])
    //删除多个接电的时候，children是在时刻变化的
  </script>

7.5 插入Dom节点

我们获取了某个Dom节点之后，假设这个Dom节点是空的，我们通过innerHTML就可以增加一个元素，但如果这个Dom节点已经存在元素了，则会发生覆盖。

  <!--追加-->
  <p id="js">JavaScript</p>
  <div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
  </div>

  <script>
    var js = document.getElementById('js");
    var list = document.getElementById('list');
    list.appendeChilde(js);    //追加到后面
  </script>

效果：
追加效果

7.6 创建一个新的标签，实现插入

  var js = document.getElemById('js');    //已经存在的节点
  var list = document.getElementById('list');
  
  //通过JS创建一个新的节点
  var newP = document.createElement('p');    //创建一个p标签
  newP.id = 'newP';
  newP.innerText = "Hello,Mnla';
  
  //创建一个style节点
  var mystyle = document.createElement('style');    //创建了一个空style标签
  mystyle.setAttribute('type','text/css'); 
  mystyle.innerHTML = 'body{backgroud-color:blue;}';    //设置标签内容

  document.getElementsByTagName('head')[0].appendChild(mystyle);

insertBefore 从前面插入

  var ee =doucument.getElementById('ee');
  var js =doucument.getElementById('js');
  var list =doucument.getElementById('list');
  //要包含的节点.insertBefore(newNode,targetNode)
  list.insertBefore(js,ee);

八、操作表单

表单的目的：提交信息

8.1 获取要提交的信息

  <form action="post">
    <p>
      <span>用户名：</span>  <input type="text" id="username">
    </p>

    <!--多选框的值，就是定义好的value -->
    <p>
      <span>性别：</span>
      <input type="radio" name="sex" value="man" id="boy"> 男
      <input type="radio" name="sex" value="woman" id="girl"> 女
    </p>
  </form>

  <script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_raido = document.getElementById('girl');

    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value = '123'

    //对于单选框、多选框等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;  //查看返回的结果。如果为true,则被选中。
    girl_radio.checked = true;    //赋值
  </script>

8.2 提交表单、md5加密密码、表单优化

  <!--
  表单绑定提交实践
  οnsubmit= 绑定一个提交检测的函数：return {true ,false}
  将这个结果返回给表单，使用 onsubmit 接收
  οnsubmit="return aaa()"
  -->
  <form action="http://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
      <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <p>
      <span>密码：</span> <input type="password" id="input-password">
    </p>

    <input type="hidden" id="md5-password" name="password">

    <!--绑定事件 onclick 被点击-->
    <button type="submit">提交</button>
  </form>

  <script>
    function aaa(){
      alert("方法被调用了");
      var uname = doucument.getElementById('username');
      var pwd = document.getElementById('input-password');
      var md5pwd = document.getElementById('md5-password');

      md5pwd.value = md5(pwd.value);
      //可以检验判断表单内容，true就是通过提交，false是阻止提交
      return true;
    }
  </script>

九、jQuery

文档工具站：https://jquery.cuishifeng.cn/

9.1 介绍

jQuery 是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。
使用 jQ使用jQuery 一定要引入 jQuery 库

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  </head>
  <body>
  
  </body>
  </html>

9.2 核心函数

$(selector).action()

selector：选择器
action()：事件
若 selector 和 action() 都为空，即$()，则表示为页面加载完成之后所要完成的动作，相当于 wondow.onload = function(){}

9.3 选择器

  //原生js，选择器少，麻烦不好记
  //标签
  document.getElementByTagName();
  //id
  document.getElementById();
  //类
  document.getElementByClassName();

  //jQuery css中的选择器它都能使用
  $('p').click();    //标签选择器
  $('#id').click();    //id选择器
  $('.calss'),click();    //class选择器

9.4 事件

鼠标事件

   <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
      #divMove{
        width:500px;
        height:500px;
        border:1px solid red;
      }
    </style>
  </head>
  <body>
    <!--获取鼠标当前的坐标-->
    mouse：<span id="mouseMove"></span>
    <div id="divMove">
    在这里移动鼠标试试
    </div>
  
    <script>
      //当网页元素加载完毕之后，响应事件
      $(function(){
        $('#divMove').mousemove(function(e){
          $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
        })
      });
    </script>
  </body>
  </html>

效果：
部分效果截图

操作Dom

节点文本操作

  $('#test-ul li[name=python]').text();    //获得值
  $('#test-ul li[name=python]').text('Python');    //设置值
  $('#test-ul').html();    //获得值
  $('#test-ul').html('<strong>123</strong>');    //设置值

css操作

  $('#test-ul li[name=python]').css({"color","red"})

元素的显示与隐藏：本质 display:none

  $('#test-ul li[name=python]').show()
  $('#test-ul li[name=python]').hide()

MnLa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 知识点总结

一、快速入门JavaScript 快速入门二、数据类型2.1 字符串正常使用单引号’ '或双引号" "包裹转义字符\'表示单引号’\t表示 tab 键多行字符串——使用 ` 号包裹 var msg = `hello world!`模板字符串 let name = "MnLa"; let msg = `你好，${name}`;长度：str.length字符串不可变，通过元素的下标索引：indexOf()截取字符串（左闭右开）：s
复制链接

扫一扫