zoukankan      html  css  js  c++  java
  • js下 Day04、DOM操作--自定义属性

    语法: 元素.getAttribute(‘自定义属性名’)

    功能:获取自定义属性

    语法: 元素.setAttribute(‘自定义属性名’,’值’)

    功能:设置自定义属性

    语法: 元素.removeAttribute(‘自定义属性名’)

    功能:删除自定义属性

    #一.课堂案例

    #1. 标签库

    效果图:

    img

    功能思路分析:

    1. 找到标签库按钮,绑定点击事件。由于1个按钮既要展开又要做收起,所以需要用一个开关变量来判断(var flag = false;)。为假时点击展开,为真时点击收起。

    img

    2. 循环给每一个li绑定点击事件。由于每一个li既要做选中又要做取消选中,所以需要用类名来判断( classList.contains() )。如果当前类名不存在,点击后则选中:

    A. 添加类名( classList.add() )

    B. **克隆(cloneNode(true))**一个副本,添加到指定区域( appendChild() )

    如果当前类名存在,则取消选中:

    A. 删除类名(classList.remove())

    B. 找到已选中的所有标签,判断每一个选中的元素和点击的元素**自定义属性(getAttribute())**是否一致

    C. 一致则删除(removeChild())

    img

    3. 给克隆的元素绑定点击事件,实现双向删除,并去掉对应标签的类名。

    4. 个数限制,最多只能添加6个,通过选中标签的个数(sel.children.length)来判断。小于6个才可以选中标签,否则显示提示信息。当取消选中标签时,隐藏提示信息。

    img

    #二.今日小结

    元素.getAttribute(‘自定义属性名’) 获取自定义属性

    元素.setAttribute(‘自定义属性名’,’值’) 设置自定义属性

    元素.removeAttribute(‘自定义属性名’) 删除自定义属性

    元素.checked 复选框的选中状态

    #三.作业

    效果图:

    img

    功能思路分析:

    功能一:渲染数据

    1. 声明两个数组存放数据,将第一个数组的内容渲染到第一个盒子,将第二个数组的内容渲染到第二个盒子(渲染: **map(function(item){}).join( ** ‘’));

    功能二:标签转移

    2. 点击第一个盒子中的标签添加到第二个盒子中(appendChild())

    3. 点击第二个盒子中的标签添加到第一个盒子中

  • 相关阅读:
    python中的operator.itemgetter函数
    win10下安装Cygwin配置gcc编译环境
    英文单词拼写纠错
    关于文本处理之结巴分词
    mysql 主从复制
    YII2.0 增删改查
    Linux screen命令简介
    Zookeeper简介与安装
    如何在Linux上安装Tomcat
    Java学习笔记之自定义异常
  • 原文地址:https://www.cnblogs.com/yzy521/p/14132533.html
Copyright © 2011-2022 走看看