2021-04-12 js进阶05

最新推荐文章于 2024-11-12 11:19:19 发布

子非鱼emma

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量92

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_38998319/article/details/115638911

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

题目

1.通过下标方式删除ul中的第二个子元素

2.将数组comments 中的数据根据时间排序（时间近的排前面）

3.innerText与innerHTML的区别？

2.将数组comments 中的数据根据时间排序（时间近的排前面）

3.innerText与innerHTML的区别

4.根据相应的代码求结果（设后面的结果不会被前的影响）

5.事件对象的组成以及语法

6.编写一个图片跟随鼠标进行移动的案例

题目

1.通过下标方式删除ul中的第二个子元素

<body>
    <input type="button" value="点我删除" id="btn" />
    <ul>
      <li>我是第1个个li</li>
      <li>我是第2个个li</li>
      <li>我是第3个个li</li>
      <li>我是第4个个li</li>
      <li>我是第5个个li</li>
      <li>我是第6个个li</li>
      <li>我是第7个个li</li>
      <li>我是第8个个li</li>
      <li>我是第9个个li</li>
      <li>我是第10个个li</li>
    </ul>
  </body>

2.将数组comments 中的数据根据时间排序（时间近的排前面）

<!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>
</head>
<body>
    
</body>
<script>
     var comments = [
        {
          user: "王德发",
          content: "那一年我背井离乡,从此村里的人再也没喝过一口水",
          time: "2021-04-09 15:15:18",
        },
        {
          user: "小甜甜",
          content: "我班里的女神穷追猛打,最后终于把她打进了医院",
          time: "2021-03-08 12:48:52",
        },
      ];
      //排序
 

  console.log(comments);
</script>
</html>

3.innerText与innerHTML的区别？

4.根据相应的代码求结果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="father">
      <div class="son">1</div>
      <div class="son">2</div>
      <div class="son">3</div>
    </div>
  </body>
  <script>


var father = document.querySelector('#father');


  </script>
</html>

4.1求下列代码打印结果

console.log(father.innerHTML);

4.2求下列代码打印结果

console.log(father.innerText);

4.3求下列代码打印结果

father.innerText='<p>565656</p>';
console.log(father);

4.4求下列代码打印结果

father.innerHTML = '363636';
console.log(father);

5.事件对象的组成以及语法

6.编写一个图片跟随鼠标进行移动的案例

<!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>
    img {
      position: absolute;
    }
  </style>
</head>

<body>
  <img src="./images/lg.gif" alt="" />
</body>
<script>


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

 
</script>

</html>

答案

1.通过下标方式删除ul中的第二个子元素

<body>
    <input type="button" value="点我删除" id="btn" />
    <ul>
      <li>我是第1个个li</li>
      <li>我是第2个个li</li>
      <li>我是第3个个li</li>
      <li>我是第4个个li</li>
      <li>我是第5个个li</li>
      <li>我是第6个个li</li>
      <li>我是第7个个li</li>
      <li>我是第8个个li</li>
      <li>我是第9个个li</li>
      <li>我是第10个个li</li>
    </ul>
  </body>

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

// 删除ul第二个儿子

ul.removeChild(ul.children[1]);

2.将数组comments 中的数据根据时间排序（时间近的排前面）

<!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>
</head>
<body>
    
</body>
<script>
     var comments = [
        {
          user: "王德发",
          content: "那一年我背井离乡,从此村里的人再也没喝过一口水",
          time: "2021-04-09 15:15:18",
        },
        {
          user: "小甜甜",
          content: "我班里的女神穷追猛打,最后终于把她打进了医院",
          time: "2021-03-08 12:48:52",
        },
      ];
      //排序
  comments.sort(function(a,b){
    var aDate = new Date(a.time);
    var bDate = new Date(b.time);
    return bDate - aDate;
  });
  console.log(comments);
</script>
</html>

3.innerText与innerHTML的区别

innerText ———— 内部的文本

如果用于获取内容，只会得到文字，如果用于设置，则不会解析内容，直接作为文字内容

innerHTML ———— 内部HTML结构

获取的时候能得到结构，设置的时候会解析内容，如果有满足标签的语法，会解析为标签生成

4.根据相应的代码求结果（设后面的结果不会被前的影响）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="father">
      <div class="son">1</div>
      <div class="son">2</div>
      <div class="son">3</div>
    </div>
  </body>
  <script>


var father = document.querySelector('#father');


  </script>
</html>

4.1求下列代码打印结果

console.log(father.innerHTML);//文本形式输出为father中的标签内容

4.2求下列代码打印结果

console.log(father.innerText);//innerText也是覆盖写模式

4.3求下列代码打印结果

father.innerText='<p>565656</p>';
console.log(father);

4.4求下列代码打印结果

father.innerHTML = '363636';
console.log(father);

5.事件对象的组成以及语法

组成：

属性:存了当前的事件相关的一些数据比如:鼠标的位置 ,我点的是谁

方法:得到事件对象在事件处理程序的函数里多了一个形参

语法：

btn.onclick = function(事件对象){

// 事件对象一般使用e或者event来表示事件对象

}

6.编写一个图片跟随鼠标进行移动的案例

<!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>
    img {
      position: absolute;
    }
  </style>
</head>

<body>
  <img src="./images/lg.gif" alt="" />
</body>
<script>


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

  document.onmousemove = function (e) {
    console.log(e);
    //得到鼠标的位置
    var x = e.pageX;
    var y = e.pageY;

    console.log(x, y);
    img.style.top = y + 'px'
    img.style.left = x + 'px';
  }
</script>

</html>