04-黑马js开发-进阶

---

一、日期对象

1.日期对象方法

• 获取当前时间

  const date=new Date();
  

• 获取指定时间

  const date=new Date('2001-8-8');
  

• 日期对象方法

  方法	作用	说明
  getFullYear()	获得年份	获取四位年份
  getMonth(）	获得月份	取值为 0 ~ 11
  getDate()	获取月份中的每一天	不同月份取值也不相同
  getDay()	获取星期	取值为 0 ~ 6
  getHours()	获取小时	取值为 0 ~ 23
  getMinutes()	获取分钟	取值为 0 ~ 59
  getSeconds()	获取秒	取值为 0 ~ 59

2.时间戳

1. 使用getTime()方法获取；

   const date=new Date（）;
   const time=date.getTime();
   

2. 简写+new Date()

      const time=+new Date();
   

3. 使用Date.now()

   //无需实例化，但是只能获取到当前时间戳，而上面两种可以获取到指定时间的时间戳；
   const time=Date.now();
   

二、JS节点操作

1.查找节点

1. 父节点查找

   • parentNode属性： 子元素.parentNode；

   • 返回最近一级的 父节点，找不到返回null；

2. 子节点查找

   • childNodes属性：父元素.childNodes

     • 获取所有子节点、包括文本节点（空格、换行）、注释节点等;

   • children属性：父元素.children

     • 仅返回所有元素节点；

     • 返回的还是一个伪数组；

3. 兄弟关系查找

   1. 下一个兄弟节点

      元素.nextElementSibling

   2. 上一个兄弟节点

      元素.previousElementSibling

2. 增加节点(重点）

1. 创建节点

   • 即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点；

   • 创建元素节点方法：

     //创建一个新的节点元素
     document.createElement('标签名');
     

2. 追加节点

   • 要想在界面看到还得插入到某个父元素中

   • 插入到父元素的最后一个子元素

     //插入到这个父元素的最后
     父元素.appendChild(要插入的元素)
     

   • 插入到父元素中的某个子元素的前面

     //插入到某个子元素的前面
     父元素.insertBefore(要插入的元素，在哪个元素前面）
     

3. 克隆节点

   //克隆一个已有的元素节点
   元素.cloneNode(布尔值)
   

   cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值；

   • 若为true，则代表克隆时会包含后代节点一起克隆

   • 若为false，则代表克隆时不包含后代节点

   • 默认为false；（可以不加）

3.删除节点

• 在Js原生dom操作中，要删除元素必须通过父元素进行删除；

• 语法：

  父元素.removeChild(要删除的元素)
  

• 注意：

  • 如果不存在父元素关系则删除不成功

  • 删除节点和隐藏节点（display:none)有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点；

三、M端事件

移动端有自己独特的地方，比如触屏事件touch（也称触摸事件），Android和IOS都有。

• 触屏时间touch（也称触摸事件），Android和IOS都有。

• touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触摸笔）对屏幕或者触控板操作；

• 常见触屏事件有：

  触屏touch事件	说明
  touchstart	手指触摸到一个DOM元素时触发
  touchmove	手指在一个DOM元素滑动时触发
  touchend	手指从一个DOM元素上移开时触发

  • 示例代码：

          const div = document.querySelector("div");
          div.addEventListener("touchstart", function () {
            console.log("开始摸我了！");
          });
    

四、插件

插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果

1. swiper插件

• 熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/

• 看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html

• 查看基本使用流程 https://www.swiper.com.cn/usage/index.html

• 查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html

• 注意: 多个swiper同时使用的时候, 类名需要注意区分

2. bootstrap插件。

3. vue插件等等