1.获取系统当前时间与自已输入时间
<script>
//获取系统当前时间
const d = new Date()
console.log(d);
//获取输入时间
const dd = new Date('2008-8-8')
console.log(dd);
</script>
2.获取系统当前的年月日时分秒
<script>
const d = new Date()
const y = d.getFullYear()
console.log(y)
const M = d.getMonth() + 1
console.log(M);
const m = d.getDate()
console.log(m);
const day = d.getDay()
console.log(day);
const h = d.getHours()
console.log(h);
const ts = d.getMinutes()
console.log(ts);
const s = d.getSeconds()
console.log(s);
console.log(y, M, m, day, h, ts, s);
</script>
3.封装一个函数获取现在的年月日时分秒
<style>
.box {
width: 240px;
height: 80px;
background-color: pink;
margin: 100px auto;
text-align: center;
line-height: 80px;
font-size: 22px;
color: #fff;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
function getTimes() {
const d = new Date()
const YYYY = d.getFullYear()
let MM = d.getMonth() + 1
//调用函数,并且把函数赋值给获取的月份
MM = p(MM)
let DD = d.getDay()
//调用函数,并且把函数赋值给获取的当天日期
DD = p(DD)
let HH = d.getHours()
//调用函数,并且把函数赋值给获取的小时数
HH = p(HH)
let mm = d.getMinutes()
//调用函数,并且把函数赋值给获取的分钟数
mm = p(mm)
let ss = d.getSeconds()
//调用函数,并且把函数赋值给获取的秒数
ss = p(ss)
const str = `${YYYY}-${MM}-${DD} ${HH}:${mm}:${ss}`
document.querySelector('.box').innerHTML = str
}
getTimes()
setInterval(getTimes, 1000)
//封装一个函数,判断数字是否小于0
function p(n) {
return n < 10 ? '0' + n : n
}
</script>
4.节点介绍
1.节点 node ： 网页一切内容皆为节点
* 节点作用 ： 让渲染引擎准确的渲染dom树
2.四种节点： 元素节点、 属性节点 、 文本节点 、 注释节点
* 最重要： 元素节点(标签)
5.创建节点
<body>
<ul>
<li>001</li>
<li>002</li>
<li class="lis">003</li>
<li>004</li>
<li>005</li>
<li>006</li>
</ul>
<button class="btn">创建节点</button>
<script>
const btn = document.querySelector('.btn')
const ul = document.querySelector('ul')
const lis = document.querySelector('.lis')
btn.addEventListener('click', function () {
//创建一个li标签
const li = document.createElement('li')
//给li标签添加一个文本
li.innerHTML = '我是新标签'
//把li添加到ul里面,但括号里面的li不能加子符串引号
document.querySelector('ul').appendChild(li)
//插入子元素的前面
ul.insertBefore(li, lis)
})
</script>
6.子节点
<body>
<ul>
<!-- 我是注释哟 -->
我是文本哈
<li>我是班长1</li>
<li>我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
/* 学习目标： 查询节点
1.获取子元素 : 元素.children
2.获取兄弟元素
3.获取父元素
*/
//获取父元素
let ul = document.querySelector('ul')
//1.1 获取子节点
console.log( ul.childNodes )//获取 元素节点、文本节点、注释节点
//1.2 获取子元素
console.log( ul.children )// 获取子元素
</script>
7.兄弟节点
<body>
<button class="btn">点我操作li2的兄弟节点</button>
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
/* 学习目标： 查询节点
1.获取子元素 : 父元素.children
2.获取兄弟元素 :
获取上一次元素 ： 元素.previousElementSibling
获取下一次元素 ： 元素.nextElementSibling
3.获取父元素 :
*/
//获取父元素
let ul = document.querySelector('ul')
//获取li2
let li2 = document.querySelector('#li2')
//1 获取子元素
console.log(ul.children) //获取 子元素
//2.获取兄弟元素
//2.1 获取上一个元素
console.log(li2.previousElementSibling) //班长1
//2.2 获取下一个元素
console.log(li2.nextElementSibling) //班长3
//点击按钮：修改兄弟元素颜色
document.querySelector('.btn').addEventListener('click', function () {
li2.previousElementSibling.style.backgroundColor = 'red'
li2.nextElementSibling.style.backgroundColor = 'red'
})
</script>
8.删除节点
<body>
<button class="btn">点我删除节点</button>
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
/* 节点增删改查
1.查节点 :
查子元素: 元素.children
查兄弟元素:
上一个元素： 元素.previousElementSibling
下一个元素： 元素.nextElementSibling
查父元素 : 元素.parentNode
2.增 ： document.createElement()
(1)内存创建空节点： document.createElement('标签名')
(2)设置标签内容
(3)添加到页面dom
新增到最后面 ： 父元素.appendChild(元素)
新增到元素前面 ： 父元素.insertBefore(要加的元素,哪一个元素前面)
3.删 ： 父元素.removeChild(子元素)
*/
//点击按钮删除li2
document.querySelector('.btn').onclick = function(){
//获取父元素和子元素
let ul = document.querySelector('ul')
let li2 = document.querySelector('#li2')
//删除子元素
ul.removeChild( li2 )
}
</script>
注:点击按钮会删除第二个li
案例
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
document.querySelector('ul').addEventListener('click', function (e) {
if (e.target.tagName.toLowerCase() === 'li') {
//需要父元素调用
//if (confirm('确定要删除我吗')) this.removeChild(e.target)
//自已调用
if (confirm('确定要删除我吗')) e.target.remove()
}
})
</script>
</body>
注:在页面点击哪个li就会被删除
9.新增节点
<body>
<ul>
<li>我是班长1</li>
<li id="li2">我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
</ul>
<script>
/*
1.复习介绍dom新增元素 三种方式
1.1 document.write('') 开发中几乎不用
1.2 元素.innerHTML = '' 新增100以内的元素的时候可以用
覆盖操作： 元素.innerHTML = '<h1>标题</h1>'
新增操作： 元素.innerHTML += '<h1>标题</h1>'
1.3 document.createElement() : dom推荐
2.重点讲解 document.createElement 用法
(1)在内存中创建空标签 ： document.createElement('标签名')
(2)设置标签内容
(3)添加到页面dom : 父元素.appendChild(子元素)
3.新增到最后面与新增到指定位置
3.1 新增到最后面： 父元素.appendChild(元素)
3.2 新增到元素前面 : 父元素.insertBefore(要新增的元素,哪一个元素前面)
*/
//1.在内存中创建空标签
let li = document.createElement('li')
//2.设置标签内容
li.innerText = '我是新来的'
li.style.backgroundColor = 'red'
console.log( li )
//3.添加到页面dom树 : 父元素.appendChild(子元素)
//3.1 新增到父元素最后面
// document.querySelector('ul').appendChild(li)
//3.2 新增到元素前面
let ul = document.querySelector('ul')
let li2 = document.querySelector('#li2')
ul.insertBefore(li, li2 )
</script>
</body>
10.查找子节点
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<button class="btn">按钮</button>
<script>
const ul = document.querySelector('ul')
const btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
console.log(ul.children);
})
</script>
</body>
11.克隆节点
<style>
.box {
width: 300px;
height: 100px;
border: 1px solid pink;
margin-top: 10px;
}
</style>
</head>
<body>
<button class="btn">点我克隆节点</button>
<div class="box">
<a href="我是链接"></a>
<p>我是p标签</p>
<ul>
<li>我是ikun1</li>
<li>我是ikun2</li>
</ul>
</div>
<script>
/*克隆节点 ： 复制节点
元素.cloneNode(true)
默认false : 浅克隆，只克隆元素自身
true : 深克隆，克隆元素自身 + 所有后代元素
*/
//点击按钮 : 克隆box
document.querySelector('.btn').addEventListener('click', function () {
//获取box
let box = document.querySelector('.box')
//*** 克隆元素 : 元素.cloneNode()
let newBox = box.cloneNode(true)
console.log(newBox)
//新增到dom树,添加到最后面
document.body.appendChild(newBox)
})
</script>
</body>
12.点击关闭案例
<style>
.box {
position: relative;
width: 1000px;
height: 200px;
background-color: pink;
margin: 100px auto;
text-align: center;
font-size: 50px;
line-height: 200px;
font-weight: 700;
}
.box1 {
position: absolute;
right: 20px;
top: 10px;
width: 20px;
height: 20px;
background-color: skyblue;
text-align: center;
line-height: 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
我是广告
<div class="box1">X</div>
</div>
<script>
document.querySelector('.box1').addEventListener('click', function () {
this.parentNode.style.display = 'none'
})
</script>
</body>
13.map方法
<body>
<script>
const arr = ['red', 'green', 'pink']
//map方法会对数组进行遍历
//map方法的作用,对数组里面的元素进行加工处理,返回一个新数组
const newArr = arr.map(function (item) {
return item + '老王'
})
console.log(newArr)
</script>
</body>
14.join方法
<body>
<script>
//arr.join('-')
//将数组里面的元素拼接成字符串
const arr = ['red', 'pink', 'blue', 'skyblue']
console.log(arr.join('-'));
console.log(arr.join(''));
</script>
</body>
15.触屏事件 touch
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
//主要用于移动端
document.querySelector('.box').addEventListener('touchstart', function () {
//鼠标按下会触发
console.log('我开始摸你了');
})
document.querySelector('.box').addEventListener('touchmove', function () {
//鼠标按下不松动并随意滑动触发
console.log('我又开始摸你了');
})
document.querySelector('.box').addEventListener('touchend', function () {
//鼠标弹起会触发
console.log('我不摸你了');
})
</script>
</body>
