廈門網(wǎng)站設(shè)計(jì)公司seo sem論壇
1.日期對(duì)象
2.節(jié)點(diǎn)操作
3.M端事件
4.JS插件
一.日期對(duì)象
- 實(shí)例化
- 時(shí)間對(duì)象方法
- 時(shí)間戳
日期對(duì)象：用來表示時(shí)間的對(duì)象
作用：可以得到當(dāng)前系統(tǒng)時(shí)間
1.1 實(shí)例化
① 概念：在代碼中發(fā)現(xiàn)了new關(guān)鍵字時(shí)，一般將這個(gè)操作稱為實(shí)例化
② 創(chuàng)建一個(gè)時(shí)間對(duì)象并獲取時(shí)間
- ?獲取當(dāng)前時(shí)間
const date = new Date()- 獲得指定時(shí)間
const date = new Date('2022-01-05 08:28')1.2?時(shí)間對(duì)象方法
日期對(duì)象返回的數(shù)據(jù)我們不能直接使用，所以需要轉(zhuǎn)換為實(shí)際開發(fā)中常用的格式
const date = new Date()
console.log(date.getFullYear())
console.log(date.getMonth() + 1)let h = date.getHours()
let m = date.getMinutes()
let s = date.getSeconds()1.3? 時(shí)間戳
① 概念：指的是1970年01月01日00分00秒起到現(xiàn)在的毫秒數(shù)，是一種特殊的計(jì)量時(shí)間的方式
② 算法
- 將來的時(shí)間戳 - 現(xiàn)在的時(shí)間戳 = 剩余時(shí)間毫秒數(shù)
- 剩余時(shí)間毫秒數(shù)轉(zhuǎn)換為剩余時(shí)間的年月日就是倒計(jì)時(shí)時(shí)間
- 1秒 = 1000毫秒
?③ 獲取時(shí)間戳
- 使用getTime() 方法?(需要實(shí)例化)
const date = new Date()
console.log(date.getTime())- 簡(jiǎn)寫 new Date() （無需實(shí)例化）
console.log(+new Date())- 使用Date.now() （無需實(shí)例化）
? ? 但是只能得到當(dāng)前的時(shí)間戳，前兩種可以得到指定時(shí)間的時(shí)間戳
console.log(Date.now())二.節(jié)點(diǎn)操作
- DOM節(jié)點(diǎn)
- 查找節(jié)點(diǎn)
- 增加節(jié)點(diǎn)
- 刪除節(jié)點(diǎn)
2.1 DOM節(jié)點(diǎn)
① DOM節(jié)點(diǎn)：DOM樹里面的每一個(gè)內(nèi)容都稱為節(jié)點(diǎn)
② 節(jié)點(diǎn)類型：
- 元素節(jié)點(diǎn)：所有的標(biāo)簽，比如div body
- 屬性節(jié)點(diǎn)：所有的屬性，比如href
- 文本節(jié)點(diǎn): 所有的文本
- 其他
2.2?查找節(jié)點(diǎn)
① 節(jié)點(diǎn)關(guān)系
- 父節(jié)點(diǎn)
? ?（1）parentNode屬性
? ? ?(2）返回的最近一級(jí)的父節(jié)點(diǎn)，找不到返回為null
? ? ?(3) 語(yǔ)法：節(jié)點(diǎn).parentNode? ?
const baby = document.querySelector('.son')
console.log(baby.parentNode.parentNode)- 子節(jié)點(diǎn)
? ? ?（1）childNodes? 獲得所有子節(jié)點(diǎn)，包括文本節(jié)點(diǎn)（空格，換行），注釋節(jié)點(diǎn)等
? ? ?（2）children屬性 ：僅獲得所有元素節(jié)點(diǎn)，返回一個(gè)偽數(shù)組
? ? ?（3）語(yǔ)法：節(jié)點(diǎn).children
const ul = document.querySelector('ul')
// 獲取所有子節(jié)點(diǎn)
console.log(ul.children) //選擇最近一級(jí)孩子? ??
- 兄弟節(jié)點(diǎn)
? ? ? ?(1) 下一個(gè)兄弟節(jié)點(diǎn)：nextElementSibling 屬性
? ? ?（2）上一個(gè)兄弟節(jié)點(diǎn)：previousElementSibling 屬性
const li2 = document.querySelector('ul li:nth-child(2)')
console.log(li2.nextElementSibling)
console.log(li2.previousElementSibling)2.3 增加節(jié)點(diǎn)
① 創(chuàng)建一個(gè)新節(jié)點(diǎn)
- 概念：創(chuàng)造一個(gè)新的網(wǎng)頁(yè)元素，再添加到網(wǎng)頁(yè)內(nèi)，一般先創(chuàng)建節(jié)點(diǎn)，然后插入節(jié)點(diǎn)
- 創(chuàng)建元素節(jié)點(diǎn)方法：?document.createElement('標(biāo)簽名')
const div = document.createElement('div')
console.log(div)② 追加節(jié)點(diǎn)（還需要插入到某個(gè)父元素中）
- 插入到父元素的最后一個(gè)子元素:? ? appendChild
const div = document.createElement('div')
console.log(div)
document.body.appendChild(div)- 插入到父元素的某個(gè)子元素的前面: insertBefore
const ul = document.querySelector('ul')
const li = document.createElement('li')
ul.insertBefore(li, ul.children[0])2.4 克隆節(jié)點(diǎn)
① 語(yǔ)法： 元素.cloneNode(布爾值)
② cloneNode 會(huì)克隆出一個(gè)跟原標(biāo)簽一樣的元素，括號(hào)中傳入布爾值
- 如果傳入的是true,則代表克隆時(shí)會(huì)包含后代節(jié)點(diǎn)一起克隆
- 如果傳入的是false，則表示克隆時(shí)不包含后代節(jié)點(diǎn)
- 默認(rèn)為false
<ul><li>1</li><li>2</li><li>3</li></ul><script>const ul = document.querySelector('ul')const li1 = ul.children[0].cloneNode(true)ul.appendChild(li1)</script>?2.5 刪除節(jié)點(diǎn)
? ① 刪除元素必須通過父元素刪除
? ② 語(yǔ)法： 父元素.removeChild(要?jiǎng)h除的元素)
?③ 注意
- 如果不存在父子關(guān)系則刪除不成功?
三.M端事件
① 移動(dòng)端也有自己獨(dú)特的地方，比如觸屏事件touch,android和ios都有
② touch對(duì)象代表一個(gè)觸摸點(diǎn)，觸摸點(diǎn)可能是一根手指，也可能是一根觸摸筆，觸屏事件可響應(yīng)用戶手指對(duì)屏幕或者觸控板操作
③ 常見的觸屏事件
const div = document.querySelector('div')div.addEventListener('touchstart', function() {console.log('開始觸摸')})div.addEventListener('touchmove', function() {console.log('一直觸摸')})div.addEventListener('touchend', function() {console.log('停止觸摸')})四. JS插件 -- swiper
① 插件的概念：就是別人寫好的一些代碼，我們只需要復(fù)制對(duì)應(yīng)的代碼，就可以實(shí)現(xiàn)對(duì)應(yīng)的效果② 學(xué)習(xí)插件過程
- 熟悉官網(wǎng)，了解這個(gè)插件可以完成什么需求
- 看在線演示，找到符合自己需求的demo
- 查看基本使用流程
- 查看API文檔，去配置自己的插件
- 多個(gè)swiper同時(shí)使用的時(shí)候，類名需要注意區(qū)分
swipper的 使用
<!DOCTYPE html>
<html lang="en">
<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>Document</title><link rel="stylesheet" href="./css/swiper.min.css"><style>.box {width: 600px;height: 200px;background-color: pink;margin: 100px;}html, body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin: 0;padding: 0;}.swiper-container {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}</style>
</head>
<body><div class="box"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div><div class="swiper-slide">Slide 10</div></div><!-- Add Pagination --><div class="swiper-pagination"></div></div> </div><script src="./js/swiper.min.js"></script><script>var swiper = new Swiper('.swiper-container', {pagination: {el: '.swiper-pagination',},autoplay: {delay: 1000,//1秒切換一次// 鼠標(biāo)點(diǎn)擊或觸摸之后，繼續(xù)自動(dòng)播放disableOnInteraction: false,},// 鍵盤keyboard: {enabled: true,onlyInViewport: true,},});</script>
</body>
</html>