2021-08-20今日笔记

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Leon</title>

</head>

<body>

  <table>

    <thead>

      <th>序号</th>

      <th>姓名</th>

      <th>年龄</th>

      <th>性别</th>

      <th>操作</th>

    </thead>

    <tbody></tbody>

  </table>

</body>

</html>

<script>

  var arr = [

    {name: 'Jack',age: 18,gender: '男'},

    {name: 'Rose',age: 20,gender: '女'},

    {name: 'Top',age: 22,gender: '男'},

    {name: 'leon',age: 32,gender: '男'},

    {name: 'lisi',age: 31,gender: '女'}

  ];

  bindHtml()

  // 根据数组的数据动态渲染表格函数

  function bindHtml(){

    // 获取tbody标签

    var tbody = document.getElementsByTagName('tbody')[0];

    // 定义一个str变量用来接收我们拼接的表格tr-td字符串

    var str = '';

    // 遍历数组，拿到数组中的数据，拼接到表格字符串中

    for (var i = 0; i < arr.length; i++) {       

      str += '<tr>';

      str += '<td>';

      str += (i+1);

      str += '</td>';

      // 遍历数组中的元素对象，拿到对象中的数据，然后拼接在下方的td中

      for (var key in arr[i]) {

        // 遍历数组中的对象arr[i] 通过arr[i][key] 拿到数据姓名 年龄 性别的数据

        str += '<td>';

        str += arr[i][key];

        str += '</td>';

      }

      // 在删除的td标签上添加一个del类名，便于删除的时候获取到这个标签

      // 在删除的td标签上添加一个自定义属性index，将这条数据在数组中的索引作为属性值存起来

      str += '<td class="del" index= '+i+'>';

      str += '删除';

      str += '</td>';

      str += '</tr>';     

    }


    // 将拼接好的表格字符转tr-td放到tbody中

    tbody.innerHTML = str;

    // 调用 删除函数

    del()

  }


  // 点击参数数组中的数据，并渲染页面

  function del(){

    // 获取所有的删除td标签,通过del的类名获取

    var dels = document.getElementsByClassName('del');

    // 遍历获取到的所有删除td的伪数组，给每一个删除td绑定一个点击事件

    for (var i = 0; i < dels.length; i++) {

      dels[i].onclick = function(){

        // console.log(this);

        // 事件函数中的this，指向触发这个事件的元素

        // 通过点击删除 删除数组中数据

        // 根据删除td的index属性拿到 这条数据的索引下边  getAttribute()

        var index = this.getAttribute('index');

        // 根据拿到的索引删除数组中数据，splice()

        arr.splice(index,1);

        // 调用 渲染表格的函数

        bindHtml();

      }

    }

  }

</script>



/*

    DOM 节点 就是DOM中html的所有内容

    节点分类：

      1. 文本节点  html中的文本内容和空格换行  innerText

      2. 元素节点  标签  getElement...

      3. 属性节点  标签中的属性  getAttribute

  */

// 获取节点

  // 先获取到div标签元素

  var div = document.getElementsByTagName('div')[0];

  // 获取div元素的节点

  // 1. 获取元素的所有子节点，返回子节点的伪数组

  // 语法： .childNodes

  // console.log(div.childNodes);

  // 2. 获取元素的所有子元素节点,返回子元素节点的伪数组

  // 语法:  .children

  // console.log(div.children);

  // 3. 获取元素的子节点的第一个节点

  // 语法： .firstChild

  // console.log(div.firstChild);

  // 4. 获取元素的最后一个子节点

  // 语法： .lastChild

  // console.log(div.lastChild);

  // 5. 获取元素的第一个子元素节点

  // 语法： .firstElementChild

  // console.log(div.firstElementChild);

  // 6. 获取元素的最后一个子元素节点

  // 语法： .lastElementChild

  // console.log(div.lastElementChild);

  // 7. 获取元素的下一个兄弟节点

  // 语法： .nextSibling

  // console.log(div.nextSibling);

  // 8. 获取元素的上一个兄弟节点

  // 语法： .previousSibling

  // console.log(div.previousSibling);

  // 9. 获取元素的下一个兄弟元素节点

  // 语法： .nextElementSibling

  // console.log(div.nextElementSibling);

  // 10. 获取元素的上一个兄弟元素节点

  // 语法：.previousElementSibling

  // console.log(div.previousElementSibling);

  // 11. 获取元素的父节点元素

  // 语法: .parentNode

  // console.log(div.parentNode);

  // 12. 获取元素的所有属性节点 返回的是属性节点伪数组

  // 语法: .attributes()

  // console.log(div.attributes)


// 获取div元素

  var div = document.querySelector('div');

  // 获取div元素的所有子节点 

  var nodes = div.childNodes

  // console.log(nodes);

  // 获取div中的第一个节点---文本节点

  var text = nodes[0];

  // 获取div中的第二个节点---元素节点

  var ele = nodes[1];

  // 获取div中的子节点的最后一个---注释节点

  var comment = div.lastChild;

  // 获取div的属性节点的第一个 id属性节点

  var attrs = div.attributes[0];

  // console.log(text,ele,comment,attrs);

  /*

    节点属性:

      节点类型  通过 节点.nodeType 获取

      节点名称  通过 节点.nodeName 获取

      节点值    通过 节点.nodeValue 获取

    节点类型：元素节点： 1  属性节点：2  文本节点：3 注释节点：8

    节点名称：元素节点：标签元素名称大写  属性节点：属性名  文本节点：#text 注释节点：#comment

    节点值：元素节点：null 属性节点：属性值  文本节点：文本内容本身  注释节点：注释内容

  */

  // 节点类型

  // console.log(text.nodeType);  // 3

  // console.log(ele.nodeType); // 1

  // console.log(comment.nodeType);// 8

  // console.log(attrs.nodeType); // 2

  // 节点名称

  // console.log(ele.nodeName);  // P

  // console.log(attrs.nodeName); // id

  // console.log(text.nodeName); // #text

  // console.log(comment.nodeName); // #comment

  // 节点值

  // console.log(ele.nodeValue);  // null

  // console.log(attrs.nodeValue); // dv

  // console.log(text.nodeValue); //  文本内容

  // console.log(comment.nodeValue); // 注释



<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Leon</title>

</head>

<body>

  <table rules = 'all' border = "1">

    <thead>

      <th>序号</th>

      <th>姓名</th>

      <th>年龄</th>

      <th>性别</th>

      <th>操作</th>

    </thead>

    <tbody></tbody>

  </table>

</body>

</html>

<script>

  var arr = [

    {name: 'Jack',age: 18,gender: '男'},

    {name: 'Rose',age: 20,gender: '女'},

    {name: 'Top',age: 22,gender: '男'},

    {name: 'leon',age: 32,gender: '男'},

    {name: 'lisi',age: 31,gender: '女'}

  ];

  var tbody = document.querySelector('tbody');

  var str  = '';

  for (var i = 0; i < arr.length; i++) {

    if(i%2 == 0){

      str += '<tr style="background-color:#ccc">';

    }else{

      str += '<tr style="background-color:pink">';

    }

    str += '<td>';

    str += (i+1);

    str += '</td>';

    for (var key in arr[i]) {

      str += '<td>';

      str += arr[i][key];

      str += '</td>';

    }

    str += '<td>';

    str += '删除';

    str += '</td>';

    str += '</tr>';

  }

  tbody.innerHTML = str;

</script>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

  #box{

    border:5px solid #999;

    width:600px;

    margin:0 auto;

    height:350px;

    overflow:hidden;

  }

  ul,ol{

    list-style:none;

    padding:0;

    margin:0;

  }

  ul{

    display:flex;   

    background:pink;

  }

  ul li{

    width:200px;

    height:50px;

    line-height:50px;

    font-size:30px;

    font-weight:bold;

    text-align:center;

    background:pink;

  }

  ul li.current{

    background:#ff0;

  }

  ol li{

    height:300px;

    text-align:center;

    font-size:200px;

    background:#0f0;

    color:#fff;

    line-height:300px;

    font-weight:bold;

    display:none;

  }

  ol li.current{

    display:block;

  }

</style>

</head>

<body>

<div id="box">

  <ul>

    <li class="current">1</li>

    <li>2</li>

    <li>3</li>

  </ul>

  <ol>

    <li class="current">1</li>

    <li >2</li>

    <li >3</li>

  </ol>

</div>

</body>

</html>

<script>

  // 获取ul中的所有的li

  // 获取ol中的所有的li

  var ulis = document.querySelectorAll('ul>li');

  var olis = document.querySelectorAll('ol>li');

  // 给ulis中的li绑定点击事件

  for(var i = 0; i<ulis.length;i++){

    // 将li在ul中的下标存储到li标签中

    ulis[i].setAttribute('index',i);

    ulis[i].onclick = function(){

      // 拿到所有的ul中的li，清除类样式

      for(var i = 0; i<ulis.length;i++){

        ulis[i].className = '';

      }

      // this表示触发点击事件的元素 li

      this.className = 'current';

      // 拿到所有ol中的li,清除样式

      for(var i = 0; i<olis.length;i++){

        olis[i].className = '';

      }

      // 拿到点击的这个li的索引

      var j = this.getAttribute('index');

      olis[j].className = 'current';

    }

  }

</script>



<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Leon</title>

  <style>

    #box{

      height: 200px;

      width: 200px;

      background-color: skyblue;

    }

  </style>

</head>

<body>

  <div>我是div</div>

  <div id="box">

    <span>我小span <i>6666</i> </span>

  </div>

</body>

</html>

<script>

  //操作DOM节点，无外乎就是 增删改查

  // 获取页面中的div元素

  // var box = document.querySelector('#box');

  // var sp = document.querySelector('span');

  // 1. 创建元素节点

  // 语法：document.createElement(标签名)

  // 返回值：可用的DOM元素节点

  // var dv = document.createElement('div');

  // console.log(dv);


  // 2. 创建文本节点

  // 语法：document.createTextNode(内容);

  // 返回值：返回一个文本节点

  // var text = document.createTextNode('zhangsan');

  // console.log(text);


  // 3. 向元素中添加元素

  // 语法：元素A.appendChild(节点B)

  // 将节点B追加到元素A里面的后面

  // dv.appendChild(text);

  // box.appendChild(dv);

  // 4. 向元素的前面添加一个元素

  // 语法：元素A.insertBefore(节点B,元素C)

  // 将节点B添加到元素A里面的元素C的前面

  // var box = document.querySelector('#box');

  // var sp = document.querySelector('span');

  // var dv = document.createElement('div');

  // var text = document.createTextNode('zhangsan');

  // dv.appendChild(text);

  // // box.insertBefore(dv,sp);

  // document.body.insertBefore(dv,box);

  // 5. 移除页面元素

  // 语法：元素A.removeChild(元素B)

  // 将元素A中的元素B移除

  // var box = document.querySelector('#box');

  // var sp = document.querySelector('span');

  // box.removeChild(sp);

  // 6. 修改元素，替换元素

  // 语法：元素A.replaceChild(节点B,节点C)

  // 用节点B替换元素A中的节点C

  // var box = document.querySelector('#box');

  // var sp = document.querySelector('span');

  // var dv = document.createElement('div');

  // var text = document.createTextNode('zhangsan');

  // dv.appendChild(text);

  // 将box中的sp替换为dv

  // box.replaceChild(dv,sp);

  // 7.克隆

  // 语法: 元素A.cloneNode(参数)

  // 参数默认是布尔值false ,如果是true则克隆子元素

  // 返回值：克隆复制的元素

  // var box = document.querySelector('#box');

  // var cloBox = box.cloneNode(true);

  // console.log(cloBox);

</script>


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Leon</title>

  <style>

    div{

      width: 100px;

      height: 100px;

      background-color: pink;

      border: 1px solid red;

    }

    div::after{

      content:'';

      width: 20px;

      height: 20px;

      background-color: yellowgreen;

      display: block;

    }

  </style>

</head>

<body>

  <div style="border: 2px solid skyblue;"></div>

</body>

</html>

<script>

  // 获取div元素

  // var div = document.querySelector('div');

  // 获取元素的样式 style 只能获取行内样式

  // console.log(div.style.border);

  // console.log(div.style.width);

  // 1. getComputedStyle() 全能的获取样式方法

  // 不兼容低版本的IE浏览器 IE8以下

  // 语法：window.getComputedStyle(元素,参数).样式名

  // 参数不写默认 null, 获取元素的样式值

  // console.log(window.getComputedStyle(div,null).width); // 100px

  // console.log(window.getComputedStyle(div,null).border); // 2px solid rgb(135, 206, 235)

  // 参数 'after/before' 可以获取元素伪类的样式

  // console.log(window.getComputedStyle(div,'after').backgroundColor); // rgb(154, 205, 50)

  // console.log(window.getComputedStyle(div,'after').width); // 20px

  // 2. curentStyle()

  // 可以兼容ie8以下的浏览器

  // 语法：元素.currentStyle.样式

  // var div = document.querySelector('div');

  // console.log(div.currentStyle.width); // 100px

  // 获取样式的兼容函数

  function getStyle(ele,style){

    try {

      return window.getComputedStyle(ele)[style];     

    } catch (error) {

      return ele.currentStyle[style];     

    }

  }

  // var div = document.querySelector('div');

  // console.log(getStyle(div,'width'));

  // console.log(getStyle(div,'backgroundColor'));



  // var div = document.querySelector('div');

  // // 设置样式只能通过style的形式

  // // window.getComputedStyle(div).width = '1000px'; // 报错

  // div.style.width = '1000px';

</script>

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Leon</title>

  <style>

    *{margin: 0;padding: 0;}

    #box{

      width: 400px;

      height: 400px;

      background-color: pink;

      margin-left: 10px ;

      position: relative; 

    }

    #dv{

      width: 200px;

      height: 200px;

      background-color: green;

      border: 10px solid red;

      padding: 5px 10px;

      margin: 10px auto;

      position: absolute;

      top: 20px;

      left: 20px;

    }

  </style>

</head>

<body>

  <div id="box">

    <div id="dv"></div>

  </div>

</body>

</html>

<script>

  // 获取元素的尺寸  内容+padding+border

  // offsetWidth 宽 offsetHeight 高

  //  获取dv元素

  // var dv = document.querySelector('#dv');

  // console.log(dv.offsetWidth);  // 240

  // console.log(dv.offsetHeight); // 230

  // 获取元素的偏移量

  // offsetLeft offsetTop

  // 如果元素没有定位。则获取的是相对于页面的左上角

  // var dv = document.querySelector('#dv');

  // console.log(dv.offsetLeft); // 90

  // console.log(dv.offsetTop); // 10

  // 如果元素有定位，则获取的是相对父元素左上角的定位

  // var dv = document.querySelector('#dv');

  // console.log(dv.offsetLeft); // 20

  // console.log(dv.offsetTop); // 30

</script>


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Leon</title>

</head>

<body>

  <button>按钮</button> <br>

  <img src="./images/1.jpg" alt="" width="500">

</body>

<script>

  // 将图片名称放到数组中

  var imgs = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];

  // 点击按钮随机获取图片名

  // 1. 获取按钮绑定点击事件

  document.querySelector('button').onclick = function(){

    // 2. 获取img标签并设置src属性的值

    // document.querySelector('img').setAttribute('src','./images/'+imgs[getNum(0,imgs.length-1)]);

    // src属性是自有属性，可以直接通过 元素.src 设置获取

    document.querySelector('img').src = './images/'+imgs[getNum(0,imgs.length-1)];

  }


  function getNum(a,b){

    return Math.floor(Math.random()*(b-a+1)+a);

  }

</script><!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Leon</title>

</head>

<body>

  <button>按钮</button> <br>

  <img src="./images/1.jpg" alt="" width="500">

</body>

<script>

  // 将图片名称放到数组中

  var imgs = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];

  // 点击按钮随机获取图片名

  // 1. 获取按钮绑定点击事件

  document.querySelector('button').onclick = function(){

    // 2. 获取img标签并设置src属性的值

    // document.querySelector('img').setAttribute('src','./images/'+imgs[getNum(0,imgs.length-1)]);

    // src属性是自有属性，可以直接通过 元素.src 设置获取

    document.querySelector('img').src = './images/'+imgs[getNum(0,imgs.length-1)];

  }


  function getNum(a,b){

    return Math.floor(Math.random()*(b-a+1)+a);

  }

</script>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,332评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,508评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,812评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,607评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,728评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,919评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,071评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,802评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,256评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,389评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,032评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2赞 350

推荐阅读更多精彩内容