考试

web前端周考试题JavaScriptAPI模块
第一题：问答题（每题3分共72）
1、JavaScript中，如果已知HTML页面中的某标签对象的id=”username”。在脚本js中如何获取该元素（两种方式）

docment.getElementById('id')

docment.querySelector('#id')

2、通过typeof关键字判断一个变量的数据类型，显示结果与JavaScript数据类型名称不一致，它是哪种数据类型（null）（至少写一个）。

3、定义了一个变量，但是没有给该变量赋值，那么alert该变量，JavaScript弹出的对话框中显示（undefined）。

4、window对象中的定时器方法有两个，分别是？如何清除计时器

_{setInterual多次定时器/settimeout单词定时器/cleatInterual清楚多次定时器/clearTimeout清楚单次定时器}

5、offsetWidth = 获取元素宽度 clientWidth = 边框的宽度 offsetLeft = 元素到浏览器左边边距 clientLeft = 左侧边框的宽度
6、window的（onload）事件在浏览器完成页面加载后立即触发？

7、获得焦点事件是（onfcus），失去焦点事件是（onclur）

8、在BOM中，通过JavaScript使页面返回上一页的代码是？

history.back

9、document.body.scrollTop与document.documentElement.scrollTop的区别是？

document.body.scrollTop:非标准模式 document.documentElement.scrollTop：标准模式

10、JavaScript的数据类型有哪些？

基础：Number/String/Boolean/Null/Undefiend

复杂：Object
11、在BOM对象模型中，最顶层的是（Window）对象？在DOM对象模型中最顶层的是（Bom）对象？
12、window.location对象的（herf）属性返回或者设置当前浏览器的页面地址
13、截止目前我们所学的鼠标事件（包括案例动画中）有哪些？分别代表什么意思？

onmousemove;鼠标移动/onmouseleave:鼠标离开/onmouseenter:鼠标进入/onmousedown：鼠标按下/onmouseup:鼠标抬起
14、event事件对象的兼容性的写法？

var event = event ||window.event
15、Js如何阻止a链接默认跳转事件发生（提示：event事件对象中的一个方法）？又如何阻止冒泡事件呢？

阻止a链接默认跳转事件：preventDefault

阻止冒泡事件：stoppropagerion
16、DOM树节点包括什么？

标签节点，注释节点，元素节点，属性节点，文本节点，
17、截止目前所学的键盘事件有哪些？分别代表什么意思？

keywordup：键盘抬起/keyworddown：键盘按下

18、在轮播图动画中，单击四个小点轮播后，立马先清除自动轮播计时器的目的是什么？

防止计时器加速并且激活多个
19、浏览器中js由哪几部分组成？

Es/Dom/Bom
20、谈谈对innerText和innerHTML的理解

共同之处：都可以设置文本

innerText：只能单纯的设置文本

innerHTML：可以设置文本，也可以设置标签属性（为富文本）
21、dom0事件和dom2事件的各自写法和区别

dom0：设置同一个元素后面的会把前面的覆盖

document.getElementById('id').onclick = function（）{}

dom2：可以设置多个同级别元素不会覆盖前面的

document.getElementById('id').addEventListener('click',function(){})

22、如何监听屏幕滚动

window.onscroll
23、元素样式设置的几种方式

对象.style/对象.ClassName/对象.setAttridvte（’style）/对象.setAttridvte('class')/对象.style.setproperty(属性，属性值)/对象.style.csstext/对象.innerHTML
24、如何获得浏览器嗅探，有什么作用

获取嗅探：window.navigator.userAgent

作用：检测你是PC端口或者移动端口
第二题：选择题（1分一个共5分）
1、var x = 1;
function fn(n){
n = n+1
};
y = fn(x); y 的值为（D）
A．2     B．1     C．3     D．undefined
2、下面代码的运行结果是：第一次弹（ A ）第二次弹（ D ）
    function fn1() {
        alert(1);
    }
alert( fn1() );
A．1
B．alert(1);
C．function fn1() { alert(1); }
D．undefined
3、以下代码运行后，结果为（ B）
    fn1(1
    var fn1 = function(a){ alert(a); }
A．1     B．程序报错     C．alert(1);     D．undefined
4、下面代码的运行结果是：第一次弹（D ），第二次弹（ D ）
          var a = 100;
function fn1() {
               alert(a);
               var a = 10;
           }
           alert( fn1() );
A．100
B．10
C．function fn1() { alert(1); }
D．undefined
5、请选择结果为真的选项（A）
A．null == undefined
B．null === false
C．undefined == false
D．NaN == NaN
第三题：程序书写题（共23分）
1、当鼠标在一个盒子上移动时，打印出移动时的鼠标的坐标变化（5分）

var imgObj = document.querySelector("#imgObj");

// 鼠标移动事件

document.onmousemove = function (event) {

var event = event || window.event;

　　console.log(clientX)

　　console.log(clienty)

}

2、绘制一个密码框，当鼠标失去焦点时，获取当前输入框的value值（5分）

<input type = "password">
var input = document.getElementsByTagName("input")
input.onblov = function(){
console.log(this.value)
}

3、动态创建列表（5分）

<!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>
    <style>
        div{
            width: 300px;
            background-color: gray;
            border: solid 1px red;
        }
        .hover:hover{
            background-color: #CD7F32;
            list-style: none;
        }
    </style>

</head>

<body>
    <button>年轻人，你我有缘，点击这里你将会获得之高无上的功法秘诀！</button>
    <div>

    </div>
</body>

</html>
<script>
    var list = ['他化自在法', '邪神诀', '天龙心法', '焚诀', '永生之术', '不死经', '先天八卦', '不死神功', '八九玄功', '混沌神磨观想法', ]
    var box = document.querySelector('div');
    document.querySelector('button').addEventListener('click', function () {
        box.appendChild(document.createElement('ul'))
        for (var i = 0; i < list.length; i++) {
            var li = document.createElement('li')
            li.innerHTML = list[i]
            li.className = 'hover'
            if(i == 0 ){
                li.style.color = 'pink'
            }
            document.querySelector('ul').appendChild(li)
        }
        this.disabled = true;
    })
</script>

4.tab切换效果（5分）

  console.log(document.getElementsByTagName("dt"));

  var titleList = document.querySelector(".title").children;
  var contentList = document.querySelector(".content").children;
  console.log(titleList);
  for (let i = 0; i < titleList.length; i++) {
    titleList[i].onclick = function () {
      for (var j = 0; j < titleList.length; j++) {
        contentList[j].style.display = "none";
      }
      contentList[i].style.display = "block";
    };
  }

5实现数组去重并从大到小排序var arr = [3,3,4,4,5,5,1,2,2] (3分)

 var arr1 = [3,3,4,4,5,5,1,2,2];
    var arr2 = [];
    for (var i = 0; i < arr1.length; i++) {
        if (arr2.indexOf(arr1[i]) == -1) {
            arr2.push(arr1[i]);
        }
    }
    console.log(arr2);

posted @ 2021-12-20 16:53 Asanqi 阅读(235) 评论(0) 收藏举报

刷新页面返回顶部

Asanqi

考试

公告