js笔记汇总持续更新中

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、基本类型: number , string , booLean, null, undefined二、引用类型: object, array, function1、数组

const arr =[数组成员，可以是任意类型]

const arr = [1，’admin’, true ]

console. Log(arr)
console. table(arr)
consoLe.log(arr[0]，arr[1], arr[2] )
consoLe.log(typeof arr)
console.log(Array. isArray(arr) )判断是否是数组

2、对象2.0、创建对象有三种方法

●利用字面量创建对象
●利用new Object创建对象
●利用构造函数创建对象

2.0.1、利用字面量创建对象
  2. // var obj = {};  // 创建了一个空的对象 
  3.         var obj = {
  4.                 uname: '张三疯',
  5.                 age: 18,
  6.                 sex: '男',
  7.                 sayHi: function() {
  8.                     console.log('hi~');
  10.                 }
  11.             }
  13.             // 使用对象 调用对象的属性两种方法
  14.         console.log(obj.uname);
  16.         console.log(obj['age']);
  18.         obj.sayHi();
2.0.2、利用new Object创建对象
  2.     <script>
  4.         var obj = new Object(); 
  5.         obj.uname = '张三疯';
  6.         obj.age = 18;
  7.         obj.sex = '男';
  8.         obj.sayHi = function() {
  9.                 console.log('hi~');
  11.             }
  13.         console.log(obj.uname);
  14.         console.log(obj['sex']);
  15.         obj.sayHi();
  16.     </script>
2.0.3、利用构造函数创建对象构造函数是泛指某一大类，相当于java中的类（class），创建对象时候用new。构造函数不需要return

我们为什么需要使用构造函数，就是因我们前面两种创建对象的方式一次只能创建一个对象。
因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制 ，因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数，又因为这个函数不一样，里面封装的不是普通代码，而是 对象 ，构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

  2.   <script>
  3.         // 利用构造函数创建对象
  4.         // 我们需要创建四大天王的对象  相同的属性： 名字 年龄 性别  相同的方法： 唱歌
  5.         // 构造函数的语法格式
  6.         // function 构造函数名() {
  7.         //     this.属性 = 值;
  8.         //     this.方法 = function() {}
  9.         // }
  10.         // new 构造函数名();
  11.         function Star(uname, age, sex) {
  12.             this.name = uname;
  13.             this.age = age;
  14.             this.sex = sex;
  15.             this.sing = function(sang) {
  16.                 console.log(sang);
  18.             }
  19.         }
  20.         var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
  21.         // console.log(typeof ldh);
  22.         console.log(ldh.name);
  23.         console.log(ldh['sex']);
  24.         ldh.sing('冰雨');
  25.         var zxy = new Star('张学友', 19, '男');
  26.         console.log(zxy.name);
  27.         console.log(zxy.age);
  28.         zxy.sing('李香兰')
  32.         // 1. 构造函数名字首字母要大写
  33.         // 2. 我们构造函数不需要return 就可以返回结果
  34.         // 3. 我们调用构造函数 必须使用 new
  35.         // 4. 我们只要new Star() 调用函数就创建一个对象 ldh  {}
  36.         // 5. 我们的属性和方法前面必须添加 this
  37.     </script>
2.1、遍历对象
  1.     <script>
  2.         // 遍历对象 
  3.         var obj = {
  4.                 name: 'pink老师',
  5.                 age: 18,
  6.                 sex: '男',
  7.                 fn: function() {}
  8.             }
  9.             // console.log(obj.name);
  10.             // console.log(obj.age);
  11.             // console.log(obj.sex);
  12.             // for in 遍历我们的对象
  13.             // for (变量 in 对象) {
  15.         // }
  16.         for (var k in obj) {
  17.             console.log(k); // k 变量 输出  得到的是 属性名
  18.      console.log(obj[k]); // obj[k] 得到是 属性值
  20.         }
  21.         // 我们使用 for in 里面的变量 我们喜欢写 k  或者  key
  22.     </script>

m
const arr =
{
id: 1,
uname: ‘ admin’,
isMarried: true ,
}

console.log(user.id,user.uname,user.isMarried)}
属性名是非法标识符时,用数组索引方式访问
console. Log(user[ ‘my email’ ])

user =
{
id: 5，
uname :张老师’
//如果属性的值是一个函数声明，这个属性就叫:方法
show: function () {
return、 id=${this. id} , uname=$ {this.uname
}

}
console. Log(user.show())

2.1、对象,数组的应用场景2.1.1、多维数组

let arr=[1,’手机’，5000]
arr=[
[1,’手机’，5000]，
[1,’手机’，5000]，
[1,’手机’，5000]，

]

console.table(arr)
console.log(arr[1])
console.log(arr[1][1])

2.1.2、对象数组

2.1.3、类数组

2.1.4、作用域

1、块作用域
2、函数作用域
3、全局作用域

2.1.5、流程控制

单分支
多分支

3、面向对象编程

●面向过程编程
●面向对象编程

3.1、面向过程

3.2、面向对象

面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。
举个栗子:将大象装进冰箱,面向对象做法。
先找出对象,并写出这些对象的功能:
1.大象对象
●进去
2.冰箱对象
●打开
●关闭
3.使用大象和冰箱的功能
在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工。

3.3、面向对象面向对象总结

面向对象三个特点：封装、继承、多态

三、 类与 DOM 操作-11. 构造函数
  1. 功能: 创建对象
  2. 声明: 属性/方法/静态
  3. 调用: new
  4. 原型与继承: prototype
2. 类
  1. 声明: class
  2. 属性:constructor()
  3. 方法: method(){}简写
  4. 访问器: get method()/set method()
  5. 静态: static
  6. 继承: extends / super
  1. <script>
  2.       class User {
  3.         // 1. 属性
  4.         // 构造方法: new的时候(实例时)自动调用
  5.         constructor(uname, email) {
  6.           this.uname = uname
  7.           this.email = email
  8.         }
  10.         // 2. 方法
  11.         // 自动创建到原型中, 必须用方法简写
  12.         say() {
  13.           return `${this.uname}: ( ${this.email} )`
  14.         }
  16.         // 3. 静态成员
  17.         static nation = 'CHINA'
  18.       }
  20.       let user = new User('金莲', 'jl@qq.com')
  21.       console.log(user.say())
  22.       console.log(User.nation)
  23.       // 继承
  24.       // 创建子类是为了扩展父类的功能
  25.       class Child extends User {
  26.         constructor(uname, email, age) {
  27.           super(uname, email)
  28.           //    constructor(uname, email) {
  29.           //   this.uname = uname
  30.           //   this.email = email
  31.           // }
  32.           // 子类扩展的自有属性
  33.           this.age = age
  34.         }
  36.         // * 访问器属性
  37.         // get age() {
  38.         //   return this.age
  39.         // }
  41.         // set age(age) {
  42.         //   if (age >= 60 || age < 18) {
  43.         //     console.error('NO')
  44.         //   } else {
  45.         //     this.age = age
  46.         //   }
  47.         // }
  49.         say() {
  50.           //   return `${this.uname}: ( ${this.email} )`
  51.           return `${super.say()}, ${this.age} 岁`
  52.         }
  53.       }
  55.       let child = new Child('武松', 'ws@qq.com', 40)
  56.       console.log(child.say())
  57.     </script>
3. 浏览器中的 JS
  1. 行内脚本: 事件属性,当前元素
  2. 文档脚本: script 标签, 当前文档
  3. 外部脚本: script.src 属性, 引用文档
  1.  DOM: Document Object Model 文档对象模型
  2. 文档: html
  3.  对象: html以及内部的所有元素,都可以抽象成一个对象
  4.  模型: 对现实世界的描述
  1.  <script>
  2.       // DOM: Document Object Model 文档对象模型
  3.       // 文档: html
  4.       // 对象: html以及内部的所有元素,都可以抽象成一个对象
  5.       // 模型: 对现实世界的描述
  7.       /**
  8.        * 1. 行内js
  9.        * 2. 文档js
  10.        * 3. 外部js
  11.        */
  12.     </script>
  13.     <!-- 1. 行内js: 写到事件属性中 -->
  14.     <button onclick="alert('登录成功')">登录</button>
  16.     <!-- 2. 文档js: 写到当前的html中的script标签中 -->
  17.     <script>
  18.       document.body.style.backgroundColor = 'yellow'
  19.     </script>
  21.     <!-- 3. 外部js: 可以被多个html共享 -->
  22.     <button onclick="like(this)">点赞+ <span>200</span></button>
  23.     <script src="funcs.js"></script>
4. 获取 DOM 元素
  1. 一组: querySelectorAll()
  2. 一个: querySelector()
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>获取DOM元素</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li>item1</li>
  12.       <li>item2</li>
  13.       <li>item3</li>
  14.       <li>item4</li>
  15.       <li>item5</li>
  16.       <li>item6</li>
  17.     </ul>
  18.     <script>
  19.       // 1. 一组: querySelectorAll(selector)
  20.       // 参数是css选择器
  21.       const items = document.querySelectorAll('.list > li')
  22.       console.log(items) // 类数组
  23.       console.log(Array.isArray(items))
  24.       // NodeList对象,定义了一个forEach接口,可以直接遍历
  25.       items.forEach(item => console.log(item.textContent))
  26.       //   也可以用Array.form 或 ...rest 将类数组转为真正的数组用
  27.       //   Array.from(items).forEach(item => console.log(item.textContent))
  28.       //   ;[...items].forEach(item => console.log(item.textContent))
  30.       // 2. 一个,其实是集合中满足条件的第一个
  31.       //   let first = items[0]
  32.       let first = document.querySelector('.list > li')
  33.       console.log(first) 
  34.        //以下都不用了
  35.       // document.getElementById
  36.       // document.getElementsByClassName
  37.       // document.getElementsByName
  38.       // document.getElementsByTagName
  39.       // ...
  40.     </script>
  41.   </body>
  42. </html>
5. 获取表单数据
  1. 表单: docment.forms.id
  2. 控件: form.name/id
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>表单元素的获取</title>
  8.   </head>
  9.   <body>
  10.     <form action="login.php" method="post" id="login">
  11.       <fieldset class="login" style="display: inline-grid; gap: 10px">
  12.         <legend>用户登录</legend>
  13.         <div>
  14.           <label for="email">邮箱:</label>
  15.           <input type="email" name="email" id="email" value="admin@php.cn" autofocus />
  16.         </div>
  17.         <div>
  18.           <label for="password">密码:</label>
  19.           <input type="password" name="password" id="password" value="123456" />
  20.         </div>
  21.         <button>提交</button>
  22.       </fieldset>
  23.     </form>
  25.     <script>
  26.       // 1.获取表单form
  27.       //   const form = document.querySelector('#login')
  28.       //   console.log(form)
  29.       // 2. 获取控件的值
  30.       //   const email = form.querySelector('#email')
  31.       //   console.log(email)
  32.       //   console.log(email.value)
  34.       // 1. 获取表单： forms.id
  35.       //   const form = document.forms.login
  36.       //   console.log(form)
  37.       // 2.获取控件: name / id
  38.       //   const email = form.email.value
  39.       //   console.log(email)
  41.       /**
  42.        * 前后端分离场景下
  43.        * 前端 -> JSON -> 服务器
  44.        * 先将表单数据封装成一个json数据包
  45.        */
  47.       // 1. 获取邮箱和密码
  48.       //   let form = document.forms.login
  49.       //   let email = form.email.value
  50.       //   let password = form.password.value
  51.       //   console.log(email, password)
  53.       // 2. 数据封装->对象
  54.       //   let user = { email: email, password: password }
  55.       //   let user = { email, password }
  57.       // 3. 转换json并发送
  58.       //   let json = JSON.stringify(user, null, 4)
  59.       //   console.log(json)
  61.       // body
  62.       console.log(document.body)
  63.       // head
  64.       console.log(document.head)
  65.       // title
  66.       console.log(document.title)
  67.       // url
  68.       console.log(document.URL)
  69.       // html
  70.       console.log(document.documentElement)
  71.       // window
  72.       console.log(document.defaultView)
  73.     </script>
  74.   </body>
  75. </html>
6. 快捷方法
  1. body : document.body
  2. head : document.head
  3. title : document.title
  4. html : document.documentElement
  5. url : document.URL
  6. window : document.defaultView
  7. cookie : document.cookie
  8. script : document.scripts
  9. styleSheets: document.styleSheets
7. 遍历 DOM
  1. children: 元素类型子节点
  2. firstElementChild: 第一个子元素
  3. lastElementChild: 最后一个子元素
  4. nextElementSibling: 下一个兄弟元素
  5. previousElementSibling: 前一个兄弟元素
  6. parentElement: 父元素
  7. contains(): 是否是后代
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>DOM中的遍历</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li>item1</li>
  12.       <li>item2</li>
  13.       <li>item3</li>
  14.       <li>item4</li>
  15.       <li>item5</li>
  16.       <li>item6</li>
  17.     </ul>
  18.     <script>
  19.       /**
  20.        * * 节点类型(12个,常用3个)
  21.        * * 1. document: 文档类型, 9
  22.        * * 2. element: 元素类型, 1
  23.        * * 3. text: 文本类型, 3
  24.        */
  25.       let list = document.querySelector('.list')
  26.       // console.log(list.nodeType)
  28.       // 1. 所有子节点(不区分类型,包括元素,文本)
  29.       // let items = list.childNodes
  30.       // items.forEach(item => console.log(item))
  31.       // filter 数组过滤器
  33.       // [...items] // 转为真数组
  34.       // let res = [...items].filter(item => item.nodeType === 1)
  35.       // console.log(res)
  36.       // console.log(items)
  37.       items = list.children
  38.       console.log(items)
  40.       // 第一个子元素
  41.       // console.log(items[0])
  42.       console.log(list.firstElementChild)
  44.       // 下一个
  45.       let first = list.firstElementChild
  46.       let second = first.nextElementSibling
  47.       console.log(second)
  49.       // 最后一个
  50.       console.log(list.lastElementChild)
  52.       // 前一步
  53.       let last = list.lastElementChild
  54.       let prev = last.previousElementSibling
  55.       console.log(prev)
  57.       // 父节点
  58.       let parent = last.parentNode
  59.       console.log(parent)
  61.       // 如果你省了语句结束的分号, [],{},()之前必须加上分号
  62.       // NodeList可以用forEach,但它不是真数组,如果想使用更多数组方法,请转换
  63.       // 将"类数组"转为"真数组"有二种: Array.from(), [...value]
  64.     </script>
  65.   </body>
  66. </html>
【文章原创作者：阿里云代理 http://www.558idc.com/aliyun.html 复制请保留原URL】
更多阅读