JS基础与Web API | 青训营笔记

罗伊斯
58 阅读2分钟

2. JS基础查缺补漏

image-20221107115914968

image-20221107172238941

2.1 JS基础查缺补漏

作用域：let, const, var？

image-20221107110928704

注意坑

被当全局变量

image-20221107114648512

 if (true) {
     num = 10//要let num = 10
 }
 console.log(num) //这样是不好的

image-20221107114947970

匿名函数与立即执行函数

函数表达式（匿名函数）

 let fn = function () {
     console.log("Hello")
 }

 <body>
     <button>
         点击
     </button>
     <script>
         let btn = document.querySelector('button')
         btn.onclick = function() {
             console.log("Hello")
         }
         //也可以这么用
         btn.addEventListener(function() {console.log("Hello")})
     </script>

立即执行函数：立即执行，无需调用

避免变量之间的污染？

(function [funcName](定义形参) {console.log("Hello")})(传实参)

小括号包住函数定义

 (function flexible (window, document) {
     
 })(window, document);

多个立即执行函数之间必须加分号

 (function() {
     console.log(111)
 })();
 (function() {
     console.log(222)
 })();

image-20221107112136665

函数传参

  • 函数形参默认值
 function sum(a = 0, b = 0) {
     console.log(a + b);
 }

  • 动态参数：入参个数不固定

    console.log(1,2,3,4,5);

    arguments对象用来接收实参

 function getSum() {
     console.log(arguments);
     let sum = 0;
     for (let i = 0; i < arguments.length; i++) {
         sum = sum + arguments[i];
     }
     return sum
 }
 ​
 dynamicParamsFunc(1,2,3,6,7);

  • 剩余参数

    ...用于获取多余的实参

     function config(baseURL, ...other) {
     console.log(baseURL);
     console.log(other);// other为数组
 }
 ​
 config('http://baidu.com', 'get', 'json');

对象

为什么要有对象

  • 从数据类型来看
  • 从描述来看：数据属性+操作

对象声明/定义

  • 字面量创建
  • Object类的构造函数创建
 // 直接创建对象，没有类
 let object = {
     属性名: 属性值,
     方法名: 函数
 }
 ​
 let person = {
     uname: 'andy',
     age: 18,
     sayHi: function() {
         document.write("Hi")
     }
 }
 ​
 person.uname;
 person['age'];
 person.sayHi();//注意括号，调用方法

 let obj = new Object();//构造函数创建

操作对象：增删查改

 //接上面
 person.age = 30; //修改属性值
 person.sex = "男"; //新增属性并赋值
 //新增方法
 person.sing = function() {
     console.log("sing sing sing");
 }
 delete person.uname;//删除属性

遍历对象里的键值对

 for (let key in obj) {
     console.log(key, obj.key);
 }

数组对象

 let arr = [1,'pink',true,undefined, null, {}, []]; //数组里面可以放任何的数据类型
 ​

一个表格渲染的例子

image-20221107123724179

image-20221107123759987

内置对象

内置对象是什么：JS内部提供的对象，包含各种属性和方法给开发者调用

document.write()

console.log()

Math.min(1,6,3,5,20)

image-20221107170232424

实战例子——根据数据渲染页面

根据数据渲染页面，实现一下效果

image-20221107171407250

image-20221107171354412

3. WebAPI

Outline

  • DOM获取元素、修改属性
  • DOM事件基础：注册事件、tab栏切换
  • DOM节点操作：curl
  • DOM事件高级：事件对象、事件委托
  • 网页特效、轮播图
  • BOM-操作浏览器，localStorage
  • 正则表达式

3.1 Web API基本认知

什么是DOM：document object model文档对象模型，有什么作用：操作网页内容，实现用户交互

（vs BOM：浏览器对象模型）

Web API：使用JS去操作html和浏览器

DOM树：将HTML文档以树状结构直观的表现出来。DOM元素之间的关系

DOM对象：浏览器根据HTML标签生成的JS对象

document是DOM里顶层对象，网页所有内容都在document里

image-20221107230324030

获取DOM对象 document.querySelector

  • **根据CSS选择器来获取DOM元素
  • 其他获取DOM元素方法
 document.querySelector('css选择器'); //选择匹配的第一个元素

developer.mozilla.org/en-US/docs/…

 <body>
     <div>第一个</div>
     <div class="three">第三个</div>
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
     <script>
         let div = document.querySelector('.three');//获取<div class="three">第三个</div>
         let li = document.querySelector('ul li:last-child'); // ul_li之间的空格，后代选择器
     </script>
     
 </body>

 document.querySelectorAll('css选择器');//选择匹配的多个元素，返回伪数组/集合NodeList

image-20221107232555325

3.3 设置/修改DOM元素内容

  • document.write('<h3>hi</h3>')将文本内容追加到</body>前，入参的标签会被解析

  • obj.innerText：修改/添加标签的文本内容（属性），不解析

  • obj.innerHTML修改/添加标签的文本内容，，文本中包含的标签会被解析

    box.innerHTML = '<<h3>new content</h3>>'

设置/修改DOM元素属性（css）

应用：鼠标放上去（被选中），有样式变化

下拉菜单，鼠标放上去，就出现

  • 通过JS改样式属性

    1. 对象.style.样式属性 = 值 box.style.backgroundColor = 'red'
    2. obj.className = 'new css class'
     .active = {
     width: 400px;
     background-color = pink;
 }
 ​
 <!--操作类名`元素.className = 'new css class'`-->
 <script>
     let box = document.querySelector('div')
     box.className = 'active'
 </script>
    1. obj.classList.add('类名') obj.classList.remove('类名')``obj.classList.toggle('类名') 切换

  • 通过JS修改表单元素属性

    常见表单元素属性：disabled 禁用，checked 勾选，selected 选中

    鼠标点击，密码框<-->文本框互相切换

    表单.value = '用户名' 表单.type = 'password'

     <body>
     <input type="text" value="请输入">
     <button disabled>按钮</button> //禁用状态按钮
     <input type="checkbox" name="" id="" checked class="agree"> //勾选
     <script>
         let input = document.querySelector('input')
         let btn = document.querySelector('button')
         btn.disabled = false;//启用按钮，比如60s后启用，发送验证码
         let checkbox = document.querySelector('.agree')
         checkbox.checked = false;// 取消勾选
     </script>
     
 </body>

定时器-setInterval

自动播放，定时器：每隔若干时间自动执行一段代码setInterval(函数, 间隔时间) 每隔一段时间调用这个函数，返回一个数字，标明这是开启的第几个定时器

对比：setTimeout

 // 开启定时器
 function print() {
     console.log("hello")
 }
 ​
 //不是print()
 setInterval(print, 1000); //每隔1000ms执行print
 //也可以
 setInterval(function(){console.log("hello")}, 1000)
 ​
 // 关闭定时器
 let timer = setInterval(函数，间隔时间)
 clearInterval(timer)// 清除定时器，后面结合（鼠标）事件使用

例子

image-20221109182244606

avatar
文章
阅读
粉丝