节点操作和插件"/>
节点操作和插件
节点操作
DOM节点
DOM树:DOM将HTML文档以树状结构直观的表现出来—称为DOM树 /节点树
**节点(Node)**是DOM树中的单个点,包括文档本身,元素,文本以及 注释,属性 都属于节点
-
元素节点
所有的标签 比如body,div
html是根节点
-
属性节点
所有的属性 比如 id,href
-
文本节点
所有的文本
学习节点有什么好处?
利用节点关系可以更好的操作元素(查询元素更方便)
查询节点
查找节点:利用节点关系查找节点,返回的都是对象
父节点 parentNode
返回最近一级的父节点对象,找不到返回null
子元素.parentNode
子节点
children
获得所有的子元素节点,返回的是一个伪数组
节点对象.children
兄弟节点
previousElementSibling
上一个兄弟
nextElementSibling
下一个兄弟
ul.children[下标]
增加节点
创建一个新的节点,把创建的新的节点放入到指定的元素内容
创建节点
document.createElement('标签名')
追加节点
把创建的节点插入到某个父元素中
1.父元素最后一个子节点之后,插入节点元素
element.append()
2.父元素第一个子元素之前,插入节点元素
element.prepend()
删除节点
element.remove()
把对象从它所属的DOM树中删除
移动端事件
移动端有自己的事件,触屏事件touch(触摸事件),Android和ios都有
touch对象代表一个触摸点,触摸点可能是一根手指,也可能是一根触摸笔;
触摸事件可响应用户手指(触摸笔)对屏幕或者触控板操作
常见的触摸事件
touchstart
手指触摸到一个DOM元素时触发touchmove
手指在一个DOM元素上滑动时触发touchend
手指从一个DOM元素上移开时触发
插件-swiper
插件–别人写好的代码,我们只需要复制对应的代码,就可以实现对应的效果
思路:
1.看官网 /
2.基本使用流程 .html
3.写小demo
4.应用
AlloyFinger
AlloyFinger是腾讯AlloyTeam团队开源的超轻量级web手势插件,为元素注册各种手势事件
使用步骤:
1.引入js库 @0.1.16/alloy_finger.js
2.配置
new AlloyFinger(element,{ //element 是给哪个元素做滑动事件swipe:function(e){//滑动的时候要做的事情 e.direction 可以判断上下左右滑动 left right等}})
联系人案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.header {width: 100%;height: 40px;line-height: 40px;background-color: orange;text-align: center;color: #fff;}/* .content {display: flex;flex-direction: column;} */.item {display: flex;align-items: center;position: relative;height: 50px;line-height: 50px;border-bottom: 1px solid #eee;background-color: #fff;transition: all .3s;}.circle {display: inline-block;width: 30px;height: 30px;line-height: 30px;background-color: pink;border-radius: 50%;text-align: center;margin-left: 50px;margin-right: 10px;}.name {width: 70px;margin-right: 35px;}.phone {background-color: #fff;}.delete-box {position: absolute;z-index: -1;top: 0;right: 0;display: flex;justify-content: center;align-items: center;width: 50px;height: 50px;background-color: #f7f7f7;}.delete {display: inline-block;width: 40px;height: 40px;line-height: 40px;text-align: center;font-size: 14px;border-radius: 50%;background-color: pink;}.active {transform: translateX(-50px);}.footer {width: 100%;position: fixed;bottom: 0;padding: 10px;border-top: 1px solid #ccc;}.addName,.addPhone {width: 100px;height: 20px;outline-style: none;}</style>
</head><body><div class="header">通讯录</div><div class="content"><!-- <div class="item"><div class="circle">月</div><div class="name">五月</div><div class="phone">13500000000</div><div class="delete-box"><span class="delete" data-index="${ind}">删除</span></div></div> --></div><div class=" footer"><input type="text" class="addName" placeholder="联系人姓名"><input type="text" class="addPhone" placeholder="联系人电话"><button class="addBtn">添加联系人</button></div><script src=" @0.1.16/alloy_finger.js"></script><script>// 模拟数据// const initData = [// { name: '欧阳娜娜', tel: '13500000000' },// { name: '杨幂', tel: '13500000000' },// { name: '胡歌', tel: '13500000000' },// { name: '赵丽颖', tel: '13500000000' },// { name: '唐嫣', tel: '13500000000' },// ]// localStorage.setItem('initData', JSON.stringify(initData))const arr = JSON.parse(localStorage.getItem('initData') || '[]')// 封装渲染函数function render() {const content = document.querySelector('.content')let str = ''arr.forEach((element, index) => {str += `<div class="item"><div class="circle">${element.name.substring(element.name.length - 1)}</div><div class="name">${element.name}</div><div class="phone">${element.tel}</div><div class="delete-box"><span class="delete" data-index="${index}">删除</span></div></div>`});content.innerHTML = strinitSwipe()}render()/*2.利用alloyfinger 手势插件实现滑动效果2-1.forEach遍历每一个item2-2.遍历的同时给每一个item添加滑动效果如果是左侧滑动,则添加active类 实现滑动效果 显示删除按钮否则移除active类,隐藏删除按钮封装一个函数 initSwipe 提供给渲染函数使用*/// 封装initSwipe函数function initSwipe() {const items = document.querySelectorAll('.item')items.forEach(element => { // element 是给哪个元素做滑动事件// 每一个item添加滑动效果new AlloyFinger(element, {swipe: function (e) {// Left Right Up Dowmconsole.log(e.direction)// 如果往左滑动 给item添加active类 让盒子左侧移动if (e.direction === 'Left') {// 先要移除其余的element的active这个类 const old = document.querySelector('.active')old && old.classList.remove('active')// 当前滑动的元素添加active类element.classList.add('active')} else {element.classList.remove('active')}}})})}/* 新增 : 尽量减少dom操作--- 操作数组新增数据----追加给数组---利用数组渲染页面1.点击新增按钮 表单校验 return2.如果用户输入正确,把收集的表单数据生成对象 追加给arr数组*/// 新增联系人const name = document.querySelector('.addName')const phone = document.querySelector('.addPhone')const nameEle = document.querySelector('.name')const phoneEle = document.querySelector('.phone')const addBtn = document.querySelector('.addBtn')addBtn.addEventListener('click', function () {if (name.value == '' | phone.value == '') {return alert('输入不能为空!')}// 把收集的表单数据生成对象 追加给arr数组const uobj = {name: name.value,tel: phone.value,}arr.push(uobj)localStorage.setItem('initData', JSON.stringify(arr))// 重新渲染页面render()// 表单清空name.value = ''phone.value = ''})/* 删除 确定要删除的数据---新增元素无法直接注册事件----事件委托*/// 删除联系人const content = document.querySelector('.content')content.addEventListener('click', function (e) {if (e.target.tagName === 'SPAN') {let index = e.target.dataset.indexconst con = confirm('您确定要删除该联系人吗?')if (con) {arr.splice(index, 1)localStorage.setItem('initData', JSON.stringify(arr))render()}}})</script>
</body></html>
更多推荐
节点操作和插件
发布评论