js笔记汇总持续更新中 - - php中文网博客

首页 > 博客列表 > js笔记汇总持续更新中

博主信息

博文 21

粉丝 0

访问量 16514

专题推荐

更多>

一、基本类型: number , string , booLean, null, undefined

二、引用类型: object, array, function

1、数组

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、利用字面量创建对象


// var obj = {};  // 创建了一个空的对象 
        var obj = {
                uname: '张三疯',
                age: 18,
                sex: '男',
                sayHi: function() {
                    console.log('hi~');
                }
            }
            // 使用对象 调用对象的属性两种方法
        console.log(obj.uname);
        console.log(obj['age']);
        obj.sayHi();

2.0.2、利用new Object创建对象


    <script>
        var obj = new Object(); 
        obj.uname = '张三疯';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
                console.log('hi~');
            }
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
    </script>

2.0.3、利用构造函数创建对象

构造函数是泛指某一大类，相当于java中的类（class），创建对象时候用new。构造函数不需要return

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


  <script>
        // 利用构造函数创建对象
        // 我们需要创建四大天王的对象  相同的属性： 名字 年龄 性别  相同的方法： 唱歌
        // 构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {}
        // }
        // new 构造函数名();
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);
            }
        }
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        // console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
        var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('李香兰')
        // 1. 构造函数名字首字母要大写
        // 2. 我们构造函数不需要return 就可以返回结果
        // 3. 我们调用构造函数 必须使用 new
        // 4. 我们只要new Star() 调用函数就创建一个对象 ldh  {}
        // 5. 我们的属性和方法前面必须添加 this
    </script>

2.1、遍历对象

    <script>
        // 遍历对象 
        var obj = {
                name: 'pink老师',
                age: 18,
                sex: '男',
                fn: function() {}
            }
            // console.log(obj.name);
            // console.log(obj.age);
            // console.log(obj.sex);
            // for in 遍历我们的对象
            // for (变量 in 对象) {
        // }
        for (var k in obj) {
            console.log(k); // k 变量 输出  得到的是 属性名
     console.log(obj[k]); // obj[k] 得到是 属性值
        }
        // 我们使用 for in 里面的变量 我们喜欢写 k  或者  key
    </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 操作-1

1. 构造函数

功能: 创建对象
声明: 属性/方法/静态
调用: new
原型与继承: prototype

2. 类

声明: class
属性:constructor()
方法: method(){}简写
访问器: get method()/set method()
静态: static
继承: extends / super

<script>
      class User {
        // 1. 属性
        // 构造方法: new的时候(实例时)自动调用
        constructor(uname, email) {
          this.uname = uname
          this.email = email
        }
        // 2. 方法
        // 自动创建到原型中, 必须用方法简写
        say() {
          return `${this.uname}: ( ${this.email} )`
        }
        // 3. 静态成员
        static nation = 'CHINA'
      }
      let user = new User('金莲', 'jl@qq.com')
      console.log(user.say())
      console.log(User.nation)
      // 继承
      // 创建子类是为了扩展父类的功能
      class Child extends User {
        constructor(uname, email, age) {
          super(uname, email)
          //    constructor(uname, email) {
          //   this.uname = uname
          //   this.email = email
          // }
          // 子类扩展的自有属性
          this.age = age
        }
        // * 访问器属性
        // get age() {
        //   return this.age
        // }
        // set age(age) {
        //   if (age >= 60 || age < 18) {
        //     console.error('NO')
        //   } else {
        //     this.age = age
        //   }
        // }
        say() {
          //   return `${this.uname}: ( ${this.email} )`
          return `${super.say()}, ${this.age} 岁`
        }
      }
      let child = new Child('武松', 'ws@qq.com', 40)
      console.log(child.say())
    </script>

3. 浏览器中的 JS

行内脚本: 事件属性,当前元素
文档脚本: script 标签, 当前文档
外部脚本: script.src 属性, 引用文档

 DOM: Document Object Model 文档对象模型
文档: html
 对象: html以及内部的所有元素,都可以抽象成一个对象
 模型: 对现实世界的描述

 <script>
      // DOM: Document Object Model 文档对象模型
      // 文档: html
      // 对象: html以及内部的所有元素,都可以抽象成一个对象
      // 模型: 对现实世界的描述
      /**
       * 1. 行内js
       * 2. 文档js
       * 3. 外部js
       */
    </script>
    <!-- 1. 行内js: 写到事件属性中 -->
    <button onclick="alert('登录成功')">登录</button>
    <!-- 2. 文档js: 写到当前的html中的script标签中 -->
    <script>
      document.body.style.backgroundColor = 'yellow'
    </script>
    <!-- 3. 外部js: 可以被多个html共享 -->
    <button onclick="like(this)">点赞+ <span>200</span></button>
    <script src="funcs.js"></script>

4. 获取 DOM 元素

一组: querySelectorAll()
一个: querySelector()

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取DOM元素</title>
  </head>
  <body>
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
    </ul>
    <script>
      // 1. 一组: querySelectorAll(selector)
      // 参数是css选择器
      const items = document.querySelectorAll('.list > li')
      console.log(items) // 类数组
      console.log(Array.isArray(items))
      // NodeList对象,定义了一个forEach接口,可以直接遍历
      items.forEach(item => console.log(item.textContent))
      //   也可以用Array.form 或 ...rest 将类数组转为真正的数组用
      //   Array.from(items).forEach(item => console.log(item.textContent))
      //   ;[...items].forEach(item => console.log(item.textContent))
      // 2. 一个,其实是集合中满足条件的第一个
      //   let first = items[0]
      let first = document.querySelector('.list > li')
      console.log(first) 
       //以下都不用了
      // document.getElementById
      // document.getElementsByClassName
      // document.getElementsByName
      // document.getElementsByTagName
      // ...
    </script>
  </body>
</html>

5. 获取表单数据

表单: docment.forms.id
控件: form.name/id

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单元素的获取</title>
  </head>
  <body>
    <form action="login.php" method="post" id="login">
      <fieldset class="login" style="display: inline-grid; gap: 10px">
        <legend>用户登录</legend>
        <div>
          <label for="email">邮箱:</label>
          <input type="email" name="email" id="email" value="admin@php.cn" autofocus />
        </div>
        <div>
          <label for="password">密码:</label>
          <input type="password" name="password" id="password" value="123456" />
        </div>
        <button>提交</button>
      </fieldset>
    </form>
    <script>
      // 1.获取表单form
      //   const form = document.querySelector('#login')
      //   console.log(form)
      // 2. 获取控件的值
      //   const email = form.querySelector('#email')
      //   console.log(email)
      //   console.log(email.value)
      // 1. 获取表单： forms.id
      //   const form = document.forms.login
      //   console.log(form)
      // 2.获取控件: name / id
      //   const email = form.email.value
      //   console.log(email)
      /**
       * 前后端分离场景下
       * 前端 -> JSON -> 服务器
       * 先将表单数据封装成一个json数据包
       */
      // 1. 获取邮箱和密码
      //   let form = document.forms.login
      //   let email = form.email.value
      //   let password = form.password.value
      //   console.log(email, password)
      // 2. 数据封装->对象
      //   let user = { email: email, password: password }
      //   let user = { email, password }
      // 3. 转换json并发送
      //   let json = JSON.stringify(user, null, 4)
      //   console.log(json)
      // body
      console.log(document.body)
      // head
      console.log(document.head)
      // title
      console.log(document.title)
      // url
      console.log(document.URL)
      // html
      console.log(document.documentElement)
      // window
      console.log(document.defaultView)
    </script>
  </body>
</html>

6. 快捷方法

body : document.body
head : document.head
title : document.title
html : document.documentElement
url : document.URL
window : document.defaultView
cookie : document.cookie
script : document.scripts
styleSheets: document.styleSheets

7. 遍历 DOM

children: 元素类型子节点
firstElementChild: 第一个子元素
lastElementChild: 最后一个子元素
nextElementSibling: 下一个兄弟元素
previousElementSibling: 前一个兄弟元素
parentElement: 父元素
contains(): 是否是后代

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM中的遍历</title>
  </head>
  <body>
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
    </ul>
    <script>
      /**
       * * 节点类型(12个,常用3个)
       * * 1. document: 文档类型, 9
       * * 2. element: 元素类型, 1
       * * 3. text: 文本类型, 3
       */
      let list = document.querySelector('.list')
      // console.log(list.nodeType)
      // 1. 所有子节点(不区分类型,包括元素,文本)
      // let items = list.childNodes
      // items.forEach(item => console.log(item))
      // filter 数组过滤器
      // [...items] // 转为真数组
      // let res = [...items].filter(item => item.nodeType === 1)
      // console.log(res)
      // console.log(items)
      items = list.children
      console.log(items)
      // 第一个子元素
      // console.log(items[0])
      console.log(list.firstElementChild)
      // 下一个
      let first = list.firstElementChild
      let second = first.nextElementSibling
      console.log(second)
      // 最后一个
      console.log(list.lastElementChild)
      // 前一步
      let last = list.lastElementChild
      let prev = last.previousElementSibling
      console.log(prev)
      // 父节点
      let parent = last.parentNode
      console.log(parent)
      // 如果你省了语句结束的分号, [],{},()之前必须加上分号
      // NodeList可以用forEach,但它不是真数组,如果想使用更多数组方法,请转换
      // 将"类数组"转为"真数组"有二种: Array.from(), [...value]
    </script>
  </body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端软件安装设置、Markdown和Emmet语法

2021-09-23 09:51:01