JS初学者指南-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46409700/article/details/108066786

js初学者必记!!

错误提示

Cannot read property 'title' of null   ===>   null.title    ==> null 不正常的数据类型
Cannot read property 'slice' of undefined  => undefined.slice => undefined 不正常的数据类型
Uncaught SyntaxError: Invalid left-hand side in assignment
错误的运算，检查运算是否有问题。
xxx is not a function
你以为你调用的是一个函数，其实他不是一个函数。
所以因为你调用的xxx不是一个函数，xxx()这样的写法就报错了。
3.can not read property 'type' of null
can not read property 'type' of undefined
不能读取null(undefined)的属性type
//报这种错误的情况只有一个，就是访问type属性的那个对象是null或者undefined
input.type
解决方案：
找到获取元素的代码，看看是不是有问题。
4.Uncaught SyntaxError: Unexpected token x in JSON at position 65
Uncaught SyntaxError： 未捕获的语法错误。
Unexpected token x in JSON at position 65 ：出乎意料的操作符 x 在65行出现。
解决方案：
看一看你需要转换的JSON格式的字符串是不是多了一些奇怪的东西。因为这个错误就是转换出现了错误。

事件

//  onclick - 单击
    //  ondblclick - 双击
    // onmouseover  移入 (多次)
    // onmouseout   移出 (多次)
    // onmouseenter  移入(1次)
    // onmouseleave  移出(1次)
    // onmousedown  鼠标按下
    // onmousemove  鼠标移动
    // onmouseup    鼠标松开
    // onkeydown  按下键盘按键  (任意按键)
    // onkeypress 按下键盘按钮  (数字 + 字母)
    // onkeyup    松开按键
    // oninput 监听文本框的变化
    // onvisibilitychange 监听页面显示和隐藏 (切换页面)
    // onfocus  聚集焦点
    // onblur   失去焦点
    // onscroll 监听滚动
    // oninput 
    // onchange

排他思想

// 1. 干掉所有人
// 2. 复活我自己
let btn = document.querySelectorAll('button');
        for (let i = 0; i < btn.length; i++) {
            btn[i].onclick = function () {
                for (let i = 0; i < btn.length; i++) {
                    btn[i].className = '';
                }
                this.className = 'bg';
            };
        }
```javascript

假设成立法

// 1. 假设都选中
var flag = true
// 2. 找打脸的 (如果有一个没有选中)
for(var j = 0; j < ipts.length; j++) {
    if(ipts[j].checked == false) {
        flag = false
        break
    }
}   
// 3. 最终判断
 if(flag == true) {
        // 真的都全选
 }else {
        // 没有全选
 }

for循环

//1. for循环遍历 `数组`
for(var i = 0; i < arr.length; i++) {
}
//2. 遍历 `次数` => 遍历10次痛打大飞哥
for(var i = 1; i <= 10 ; i++) {
    console.log('痛打大飞哥')
}

获取当前元素的索引

for(var i = 0 ; i < btns.length; i++) {
    # 第一步 : 添加自定义属性 存 i
    btns[i].index = i      #+++++++
        btns[i].onclick = function(){
                
       # 获取刚才存的 i
       this.index         #+++++++++
        }
}

节点(元素)操作

7.1 节点查找
• 找孩子
- children  获取所有的子元素
- firstElementChild 第一个子元素
- lastElementChild  最后一个子元素
找兄弟
- previouseElementSibling  查找上一个兄弟元素
- nextElementSibling   查找下一个兄弟元素
找父亲
- parentNode  找父元素
7.2 添加节点
• appendChild
格式 : 父元素.appendChild(新的子元素)
作用 : 把新的子元素添加到所有子元素的最后面
• insertBefore
格式 : 父元素.insertBefore(新的子元素, 参考元素)
作用 : 把 新的子元素 插入到 参考元素的 前面
7.3 创建节点(元素)
- 格式 : document.createElement('标签名')
- 参数 : 标签名
- 返回值 : 返回一个新的元素
7.4 删除节点
格式 : 父元素.removeChild(子元素)

定时器
8.1 延时器
作用 : 延迟一段时间执行某段特定的代码
格式 : setTimeout(函数, time)

参数1 : 函数 , 延时后要执行的函数
参数2 : time , 延迟的时间单位毫秒 2000 => 2s

// 开启延时器
var timerId = setTimeout(function(){
                ....
              },2000)

// 清除延时器

clearTimeout(timerId)

8.2 定时器
作用 : 间隔一段时间, 重复执行某段特定的代码
格式 : setInterval(函数, time)

参数1 : 函数 , 间隔时间后重复执行的函数
参数2 : 时间, 间隔的时间 2000 => 2s
// 开启定时器

var timerId = setInterval(function(){
              ....
            },2000)

// 清除定时器
clearInterval(timerId)
8.3 三个注意点
• 次数
延时器 : 只会执行1次
定时器 : 执行多次
• 顺序
console.log(111); # 执行
// 异步
setTimeout(function () { // 滚一边去
console.log(333); // 最后再执行你
}, 0)
console.log(222); // 执行
111
222
333
• this问题谁调用this所在的函数, this就指向谁
var obj = {
name : ‘zs’,
say : function(){
this //obj
window.setTimeout(function(){
this // window
},0)
}
• }
obj.say()
// 需求 : 在延时器里打印 name:zs
//解决办法 :
var obj = {
name : ‘zs’,
say : function(){var that = this # ++++++

setTimeout(function(){
      
      // 里面以后都用that  => obj
 that.name          # ++++++++
 },0)

}
}
obj.say()
•
9. offsetWidth 和 offsetHeight
• 作用 : 获取元素自身的宽高
• 总结
•
ⅰ. 以后获取使用 offsetWidth 和 offsetHeight , 获取的数字类型
•
ⅰ. 以后设置使用 style.width 和 style.height , 设置的字符串类型
10. offsetLeft 和 offsetTop
• 作用 : 获取元素自身左侧/顶部到offsetParent左侧/顶部的距离
• 总结
•
ⅰ. 以后获取位置使用 offsetLeft和 offsetTop , 获取的数字类型
•
ⅰ. 以后设置位置使用 style.left 和 style.top , 设置的字符串类型
如果设置 left 和 top 不行 ,一定要注意查看是否设置了定位
11. 回调
// 回调

// 回调灰常重要, 如果不会回调, 就不算是个合格的前端程序员
// 什么时候需要用到回调 : 大多数都是在封装中, 调用这个封装的函数, 得到一个反馈
// 回调(非官方) : 把函数当成一个参数传递, 然后在适当的时机回头调用这个函数

// return 只能用在简单的同步
// callback 回调很强大 , 同步异步都可以使用 callback 只是一个形参可以随便你写 a b cc
// 开始登录这里如果想要得到反馈???
// 张三 : 登录

login('xmg', 1243, function (result) {
  alert(`登录的结果:, ${result}`);
})
// 登录的函数 (将来是要提到login.js里面去的)
function login(username, password, callback) {
  if (username === 'xmg' && password === 123) {
    callback && callback('登录成功') // 等价于 if  , && 逻辑短路 大多数都是用在了回调
  } else {
    callback && callback('登录失败')
  }
}

// 李四 : 登录

// login('xmg', 123, function (result) {
//   console.log('李四的回调结果', result);
// })
// 错误 :   Uncaught TypeError: callback is not a function
// 1. 错误  callback 不是一个函数
// 原因 : 李四 登录 的时候,没有传回调, callback 为undefined, undefined是不能添加() 调用的
// 2. at login.js : 8 
//  意思是 : 错误在 login.js 文件 里面的 第8行
// 3. 怎么解决 ? 
// calback && callback()  如果 callback有值 就执行, 如果没有值,就直接下一行了
// 功能类似于
// if(callback){
//  callbac()
//}