js一些思想总结-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_75112012/article/details/145246910

1. appendChild

   appendChild 的行为是把指定元素移动到目标元素内部，如果目标元素已经是该元素的祖先，就相当于重新调整层级关系。
   原本这些行就在这个 tbody 里，经过排序后重新插入，本质是调整它们的顺序，而不是复制粘贴出全新的行。

2. 表格排序原理

先设置数组，将子元素排序后添加到数组里面，然后再根据排序好的数组。给tBodys添加子元素，然后更新

3. 搜索

遇到大小写查找不一致的情况下，可以全部转换成小写来进行搜索
如果想要查找多个类的情况下，将搜索的内容按空格分类split----字符串变数组
模糊搜索，可以调用search方法，search 是 JavaScript 字符串对象的方法，用于在字符串中查找另一个字符串首次出现的位置 。如果找到了，search 会返回匹配字符串的起始索引；如果没找到，则返回 -1

4. 添加删除

首先，创建标签元素 createElement('li')，然后给父元素添加子元素 ul.appendChild(li)
删除元素，使用 removeChild(子元素)

5. 排序

排序，就是从小到大在appendChild()一遍
先把元素选出来放到数组里(遍历)，利用sort进行排序，同时再重新遍历，重新给父盒子appendChild一遍

6. innerHTML

innerHTML 返回的是包含 HTML 标记的字符串，如果你只需要文本内容，使用 textContent 或 innerText 可能更合适。
innerHTML可以解析标签元素

7. 时钟

var oDate=new Date();
使用getFullYears()方法

8. charAt

string.charAt(index)
index:一个整数，用于指定要获取字符所在的位置。如果 index 不在字符串的有效索引范围内（小于 0 或者大于等于字符串长度），charAt() 会返回一个空字符串 ""

9. 提示文字

输入框提示文字，title属性

10. checked

全选：所有的checked=true
不选：所有的checked=false
反选：使用if判断，值为true的取false

11. index

 可以给数组添加索引---要使用的内容和数组的索引有关时
 oLi[i].index = i

12. delete

 delete操作符只能删除对象自身的属性，不能删除从原型链上继承的属性。
 这是因为从原型链继承的属性不是对象自身拥有的，它们属于对象的原型对象。
 当你使用 delete 操作符时，它会尝试从对象中移除指定的属性。如果操作成功，delete 操作符会返回 true；如果操作失败或属性不存在，它会返回 false

13. 选项卡布局

 选项卡显示的序号和按钮对应的序号是一致的，就要使用oLi[i].index = i
 先将元素的类名去掉，再给当前元素添加类名
 找到当前按钮的索引找到对应的div---oDiv[this.index].style.display = 'block'

14. 延时提示框

```
 使用setTimeout
 oDiv1.onmouseover = oDiv2.onmouseover = function () {
     clearTimeout(time);
     oDiv2.style.display = 'block';
 }
  oDiv1.onmouseout = oDiv2.onmouseout = function () {
     //太快了，应该给个延时操作
     time = setTimeout(() => {
         oDiv2.style.display = 'none';
     }, 500);
 }

15. arguments

 arguments 不是真正的数组，它是一个对象，但具有 length 属性，并且可以通过索引访问其中的元素，就像数组一样。
 它包含了传递给函数的所有参数，无论函数声明时是否明确列出了这些参数。
 ```
 function css(obj, name, value) {
     //获取样式
     // 如果只有arguments.length == 2，说明没有value值
     if (arguments.length == 2) {
         return obj.style[name];
     }
     else {
         //设置样式
         obj.style[name] = value;
     }
 }

16. currentStyle 和 getComputedStyle

 currentStyle 是一个属性，在早期的 Internet Explorer 浏览器中用于获取元素的当前样式。它是一个 IE 特有的属性，在其他浏览器中不存在。对于其他浏览器，通常使用 getComputedStyle 方法来实现相同的功能。

17. parseInt 和 parseFloat

 （取整）从左向右提取数字，遇到不是数字跳出，如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN
 parseFloat:没有小数部分,显示原数字--有小数部分，整数部分加上小数部分（也是 从左向右提取数字，遇到不是数字跳出）

18. 事件捕获，事件冒泡，事件委托

 事件捕获：
         addEventListener('click', function (){},true)-----第三个参数为true,默认为false
         事件会从 DOM 树的根节点开始，沿着 DOM 树的层次结构，自上而下地向目标元素进行传递
         当一个元素调用setCapture方法后，后续在该页面内这个元素及其所有包含的子元素上发生的鼠标相关事件，都会被这个调用了setCapture的元素所 “捕获”，即相关鼠标事件的处理函数都会先由这个元素来触发
 事件冒泡：
         第三个参数为false
         事件首先会传递到触发它的目标元素（也就是实际发生操作的那个元素，例如被点击的按钮、被鼠标移入的图片等），然后从目标元素开始，沿着 DOM 树的层次结构，自下而上地向根节点方向进行传播
         子元素触发了，它的父元素也要触发
 事件委托：
         事件委托不是 DOM 事件的默认行为
         事件委托则是将事件处理函数绑定到这些子元素的共同父元素上，利用 DOM 事件冒泡的特性，当子元素触发事件后，事件会冒泡到父元素，父元素再根据事件对象等相关信息判断具体是哪个子元素触发的事件，进而执行相应的操作。这样就无需为每个子元素都单独绑定事件处理函数，从而达到优化性能、简化代码结构等目的。
 addEventListener:
         第三个参数(capture),默认为false
         removeEventListener解除绑定
 setCapture:
         IE专用
         当元素调用 setCapture 方法后，该元素会捕获所有的鼠标事件（如 onmousedown、onmouseup、onmouseover 等），直到调用 releaseCapture 方法解除锁定。在这期间，即使鼠标移动到其他元素上，这些鼠标事件也只会被锁定的元素接收。
         使用这个，还可以解决div跟不上鼠标的情况

19. 阻止事件冒泡

 // 非 IE 浏览器：
 e.stopPropagation()
 // IE 浏览器：
 e.cancleBubble = true
 // 同一节点，阻止同一事件：
 e.stopimmediatePropagation()
         不仅可以阻止事件冒泡，还可以阻止当前元素上的其他事件处理函数被调用。如果一个元素上绑定了多个相同事件的监听器，使用 stopImmediatePropagation() 可以确保只执行 当前（该方法所在的函数） 的事件处理函数

20. 阻止默认行为

 // 1、在IE浏览器中通过
 e.returnValue = false
 // 2、在其他浏览器中调用方法
 e.preventDefault()
 // 3、在jQuery中通过在事件回调利用
 return false
 在onkeydown事件处理器中返回false确实可以阻止默认行为（如页面滚动）并阻止事件冒泡，但这种方式通常用于直接在HTML属性中定义的事件处理器（如onkeydown="return false;"）。在JavaScript中，更推荐使用event.preventDefault()方法来明确阻止默认行为

21. 事件

 oncontextmenu点击右键
 onscroll 用户滚动元素

22. 跟着鼠标显示

 鼠标点到那，菜单在那出现
 oDiv.style.left = e.clientX + 'px';
 oDiv.style.top = e.clientY + 'px';

23. 事件流

 捕获阶段
 目标阶段
 冒泡阶段

24. 即使页面滚动了，也跟着鼠标显示

     function getPos(ev) {
         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
         var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
         return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
     }

25. 拖拽

     oDiv.onmousedown > document.onmousemove > document.onmouseup
     a.  disX = e.clientX - oDiv.offsetLeft;
         disY = e.clientY - oDiv.offsetTop;
     b.  var l = e.clientX - disX;
         var t = e.clientY - disY;
         if (l < 0) {
             l = 0;
         }
         // 可视区的宽度-自身的宽度
         else if (l > document.documentElement.clientWidth - oBox.offsetWidth) {
             l = document.documentElement.clientWidth - oBox.offsetWidth
         }
     c.  document.onmousemove = null;
         document.onmouseup = null;
         // div要在框框消失之前，移动过去
         oDiv.style.left = oBox.offsetLeft + 'px';
         oDiv.style.top = oBox.offsetTop + 'px';

26. 键盘

 0-9===48-57
 清除键--8

27. 自定义滚动条

 利用拖拽原理
 将窗口四周封闭，不让div出去
 文字在滑动时，滑动的距离不是 本身 的高度，而是 本身减去父盒子 的高度
 这是一个比例，l是距离父盒子左侧的距离，根据它所移动的距离判断
 var scale = l / (parent.offsetWidth - oDiv.offsetWidth);
 文字根据比例来移动
 div3.style.top = -scale * (div3.offsetHeight - div2.offsetHeight) + 'px';

28. .document.childNodes[0].tagName

 childNodes 返回一个 NodeList，包含了 document 的所有子节点
 这些子节点可以是元素节点（如 < html >、<head>、<body> 等）
 document.childNodes[0] 表示 document 的第一个子节点。
 在一个典型的 HTML 文档中，第一个子节点通常是 < !DOCTYPE html > 节点。
 tagName 是元素节点的一个属性，它返回元素的标签名以大写形式表示。

29. js建立二维数组

     /第一种///
     let matrix = [];
     for (let i = 0; i < n; i++) {
         matrix.push([]);
     }
     /第二种///
     let arr = [];
     for (let i = 0; i < rows; i++) {
         let row = [];
         for (let j = 0; j < cols; j++) {
             row.push(0); // 初始化为 0，可以根据需要修改初始值
         }
         arr.push(row);
     }
     //第三种/
     使用 Array.from() 和 Array() 方法
     function create2DArray(rows, cols) {
         //有length属于可迭代对象
         //Array(cols)：创建一个长度为 cols 的新数组。
         //调用 fill 方法将这个新数组的元素都填充为 0
         //当 Array.from() 被调用时，它会根据 { length: rows } 来创建一个长度为 rows 的新数组。
         //对于这个新数组的每一个元素，都会调用箭头函数 () => Array(cols).fill(0)。
         return Array.from({ length: rows }, () => Array(cols).fill(0)); // 并且数组中的所有元素都被初始化为 0
     }
     ///第四种///
     使用map方法
     function create2DArray(rows, cols) {
         return new Array(rows).fill().map(() => new Array(cols).fill(0)); // 初始化为 0，可以根据需要修改初始值
     }

30. Array.from

 用于从类数组对象或可迭代对象 变成 数组
 Array.from(arrayLike, mapFn, thisArg)
 arrayLike 想要转换成数组的类数组或可迭代对象。
 mapFn 第二个参数是一个映射函数，它会对新数组的每个元素进行操作
 thisArg执行 mapFn 时用作 this 的值。

31. js原型继承，使用prototype

`
通过设置对象的原型链来实现继承
call:可以改变函数执行时的this
for (var i in A.prototype) {
B.prototype[i] = A.prototype[i];
// B 继承了 A 的原型（A.prototype），意味着 B 的实例可以使用 A 中定义的方法。
// A 并没有与 B 形成任何关系，因此 A 的实例无法访问 B 中的方法和属性。
}
这里使用 for…in 循环将 A.prototype 中的所有属性和方法复制到 B.prototype 中，从而实现继承。
注意：由于是引用类型，任何对 A.prototype 中方法或属性的更改都会反映在 B.prototype 中

32. create
 在 JavaScript 中，create 通常指的是 Object.create() 方法，这是一个用于创建新对象的内置方法。这个方法可以基于现有的对象创建新对象，并将指定对象作为新对象的原型。
 const rabbit = Object.create(animal,{同时还可以给自己添加属性}); // 使用 animal 作为 rabbit 的原型
 33. 面向对象 
 函数：把在外面的函数变成方法---通过原型添加
 变量：变成对象的属性，加到this上 
 函数不能有嵌套 -----把嵌套的函数放到外面，但是还要考虑变量，在使用函数时，要使用this
 window.onload初始化整个程序；构造函数，初始化整个对象---所以变成构造函数
 window.onload里面放实例
 ## 34.构造函数
 构造函数创建的所有实例都可以访问到这些方法或属性。这种方法被称为原型继承
 构造函数里加属性，原型上加方法
 构造函数首字母大写
 所有实例共享同一个方法定义 obj1.showName == obj2.showName----true
 //不需要每次创建对象，使用时，可以直接 var obj1 = createPerson('blue', '4182094')
 ```
 function createPerson(name, qq) {
     //创建对象
     var obj = new Object();
     obj.name = name;
     obj.qq = qq;
     obj.showName = function () {
         console.log(this.name);
     }
     obj.showQq = function () {
         console.log(this.qq);
     }
     // 返回对象，为了后面可以使用属性
     return obj;
 }
```
35.命名空间
 命名空间是一种组织代码的有效方式，用于避免命名冲突、提高可读性。通过使用对象、模块或其他结构，你可以有效地管理大型应用程序中的代码。在 JavaScript 中，使用命名空间也有助于提升代码的模块化和可维护性
 使用对象作为命名空间
 嵌套命名空间
 ES6 模块作为命名空间
 36.面向对象的选项卡
 闭包
 给构造函数的原型添加方法fnClick
  _this.fnClick(this); 因为fnClick是构造函数的方法---实例才能使用---_this在这里是保存的实例方法---_this=this``

32. offset

 属性通常用于获取元素的尺寸和位置信息
 offsetLeft 和 offsetTop 包括边框、内边距、滚动条和内容区域，适用于布局计算和元素定位
 缺点：// 不减反增
     // div.style.width = div.offsetWidth - 1 + 'px';

 lientWidth 和 clientHeight 包含元素的内容区域和内边距，但不包括边框和滚动条。
     document.documentElement.clientHeight

 getComputedStyle  它可以获取元素的所有样式，包括内联样式、样式表中的样式和浏览器默认样式

33. math

 向下取整 Math.floor()
 向上取整 Math.ceil()
 四舍五入 Math.round()
 绝对值 Math.abs()

34. js抖动

 抖动的原因是目标值有小数，而速度已经取整了
 解决
 var speed = (target - obj.offsetTop) / 6;
 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 target 和 obj.offsetTop越来越接近时，最终的差值是越来越小的
 这里来主要是判断最后一步，如果target-oDiv大于0，说明最后一步不够，就让它向上取整；否则就向下取整

35. 缓冲运动

 缓冲运动速度随着距离的减小而减小，可以使用距离做速度，但是应该除以一个数（可以通过这个数来控制），要不然刚开始速度太大了，直接就到目的地了

36. 自动播放

 首先，先给每个按钮分配index
 设置now变量
 当点击按钮的时候，调用对应的函数，使其能够找到对应的图片--并且里面调用封装move函数
 创建next函数，让now++,到达最大值时，now变为0，其他值调用上一个函数
 对next可使用定时器，使其自动播放

37. 完美move.js

     // 获取不在行间的样式
     function getStyle(obj, name) {
         if (obj.currentStyle) {
             return obj.currentStyle[name];
         } else {
             return getComputedStyle(obj)[name];
         }
     }
     //需要用到move的时候，直接拿来用就行
     // json{widht:200.height :200}
     function move(obj, json, funEnd) {
         clearInterval(obj.timer);
         var cur = 0;
         obj.timer = setInterval(function () {
             var bStop = true;  //假设所有的值都已经到了
             for (var attr in json) {
                 // 透明度比较特殊
                 if (attr == 'opacity') {
                     // 四舍五入取整
                     cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                 } else {
                     cur = parseInt(getStyle(obj, attr));
                 }
                 var speed = (json[attr] - cur) / 6;
                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                 // 如果有没有到达的，将bstop设置成false
                 if (cur != json[attr]) {
                     bStop = false;
                 }
                 // if (cur == json[attr]) {
                 //     clearInterval(obj.timer);
                 //     if (funEnd) funEnd();
                 // }
                 if (attr == 'opacity') {
                     obj.style[attr] = (cur + speed) / 100;
                 }
                 else {
                     obj.style[attr] = cur + speed + 'px';
                 }
             }
             // 等json循环完，里面的定时器全部关闭
             if (bStop) {
                 clearInterval(obj.timer);
                 // 停止后。开始执行函数
                 if (funEnd) funEnd();
             }

         }, 30)

     }

39. cookie

 cookie 页面用来保存信息
 整个网站,同一个域名共享一套cookie 
 数量、大小有限--不能用来存储大的东西 
 有过期时间
 如果没有指定过期时间，那么浏览器关闭就自动清除了
 document.cookie
 格式：名字=值

40. Date

 oDate.setDate(oDate.getDate() + 8); //设置日期

41. 获取定位的父级

 offsetParents

42. prompt

 var res2 = prompt('请输入你的姓名', 'hello');
 // 返回的时value
 alert(res2);

43. random

 Math.floor(Math.random() * (max - min)) + min部分：最后加上min，就将随机数的范围从[0, max - min)调整到了[min, max)