前端考试选择判断大题

单选

1.以下关于css方法的用法， 哪一种是不正确的？(A)

A. $("p").css({font-size:"30px",background-color:"#888"}))

B. $("p").css({"fontSize":"30px","backgroundColor":"#888"})

C.  $("p").css("color")

D. $("p").css("color","red")

2.下列选项中，关于命名路由的说法错误的是（C ）。

A. 在声明式导航中使用命名路由时，如，则对象中可以使用params属性指定跳转时携带的路由参数

B. 标签的to属性用于跳转到指定目标地址

C. 命名路由的name属性值可以重复

D. 命名路由通过name属性定义路由规则的名称

3.在jQuery中，下面哪一项描述是错误的？(A)

A. find()方法用来获取匹配元素的子元素

B. closest()方法从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素

C. parents()方法可以获取匹配元素的祖先元素

D. parent()方法可以获取匹配元素的父级元素

4.如果想要实现只有名称匹配的组件被缓存，可以通过KeepAlive组件的常用属性( B )来实现。

A. slot

B. include

C. exclude

D. map

5.用v-model指令将多选下拉框绑定在一个数组上，当选中某个选项时，如果该option选项设置有value属性，则将什 么内容添加到数组中。(C)

A. option标记的value属性值和option标记中的文本

B. select标记的id属性

C. option标记的value属性值

D. option标记中的文本

6.下面关于v-show与v-if指令说法是错误的是哪一个？（A）

A. v-show和v-if指令都可以与v-else结合使用。

B. 具体使用时频繁切换用v-show,反之用v-if ，前者切换消耗少。

C. v-show指令根据后面的表达式结果的真假(true或false)，切换元素的显示和隐藏，true显示，false隐藏，原理是修改元素的display属 性实现显示或隐藏。

D. v-if指令根据后面的表达式的值的真假(true或false)，切换元素的显示和隐藏，但它操作的是DOM元素本身， true时元素存在DOM 树中，false时元素从DOM树中移除。

7.下列选择中，关于MVVM的说法错误的是（B  ）。

A. View负责视图的处理。

B. Model和View可以直接通信，互相监控双方的动作，并及时进行相应操作。

C. Model主要负责业务数据的处理。

D. ViewModel负责监听Model或者View的改变。

多选

1.对于代码$(this).clone().appendTo("ul");下面哪些描述是错误的？（ABDE）

A. 复制当前节点，并将它插入到ul 元素之后

B. 复制当前节点，并将它插入到ul 元素的前面

C. 复制当前节点，并将它插入到ul 元素内部的后面

D. 复制当前节点，并将它插入到父元素中

E. 复制当前节点，并将它插入到ul 元素内部的前面

区分append()和appendTo():

append()前面是被插入的对象，后面是要在元素内插入的内容

appendTo()前面是要插入的元素的内容，后面是被插入的对象

2.下面关于自定义指令说法正确的有哪些？（ABCDE）

A. Vue中的自定义指令分为私有自定义指令和全局自定义指令。

B. 自定义指令的主要作用是方便开发者直接操作DOM元素来实现业务逻辑。

C. 通过自定义指令可以拓展Vue内置指令的功能。

D. 在使用setup语法糖，任何以“v”开头的驼峰式命名的变量都可以被用作一个自定义指令。

E. 在main.js文件中可以通过Vue应用实例的directive()方法定义全局自定义指令。

3.下面关于计算属性说法正确的有哪些？（ABCDE）

A. 利用computed中可以定义一些属性，这些属性称为计算属性。

B. 计算属性的计算结果会被缓存起来，方便下次使用。

C. 计算属性内部所依赖的数据发生变化，计算属性才会重新计算。

D. 在使用时将它们看成普通属性去使用，不会当做方法去调用。

E. 计算属性的本质是就是一个方法。

4.下面哪些操作属于jQuery中的DOM操作?（ABCDE）

• A. 创建节点与插入节点
• B. 复制节点
• C. 获取节点
• D. 删除节点
• E. 替换节点与包裹节点

5.在jQuery中下面哪些方法可以删除节点?()BE

• A. removeChild()
• B. remove()
• C. filter()
• D. clone()
• E. detach()

6.下面哪些语句写法是正确的？(DE)

• A. $("<li>菠萝</li>").prependTo($("ul")[0]);
• B. $("<li>菠萝</li>").prepend("ul")[0];
• C. $("ul")[0].prepend($("<li>菠萝</li>"));
• D. $("ul").prepend($("<li>菠萝</li>"));
• E. $("<li>菠萝</li>").prependTo($("ul"));

7.在jQuery中下面哪些方法可以将节点以兄弟节点的形式插入到指定节点的前面或后面？

(ABDE)

• A. insertBefore()
• B. insertAfter()
• C. appendChild()
• D. before()
• E. after()

8.在jQuery中下面哪些方法可以将节点以子节点的形式插入到指定节点里面？(ACDE)

• A. prependTo()
• B. after()
• C. appendTo()
• D. prepend()
• E. append()

9.在页面中有一个ul元素，代码如下：

<ul>

  <li title='苹果'>苹果</li>

  <li title='橘子'>橘子</li>

  <li title='菠萝'>菠萝</li>

  <li title='葡萄'>葡萄</li>

  <li title='香蕉'>香蕉</li>

</ul>

现在实现将“菠萝”和“葡萄”移动到苹果前面，下面哪些写法是正确的？(ABCDE)

• A. $("li:gt(1):not(:last)").insertBefore($("li:first"));
• B. $("li:eq(2),li:eq(3)").insertBefore($("li:first"));
• C. $("li:eq(2),li:eq(3)").prependTo("ul");
• D. $("ul").prepend($("li:gt(1):not(:last)"));
• E. $("li").filter(":eq(2),:eq(3)").prependTo("ul");

10.下面哪些语句写法是正确的？(AE)

• A. $("select#sel2").append($("select#sel1>option:selected"));
• B. $("select#sel2")[0].append("select#sel1>option:selected");
• C. $("select#sel2")[0].append($("select#sel1>option:selected"));
• D. $("select#sel1>option:selected")[0].appendTo($("select#sel2");
• E. $("select#sel1>option:selected").appendTo($("select#sel2"));

11.在页面中有一个ul元素，代码如下：

<ul>

  <li title='苹果'>苹果</li>

  <li title='橘子'>橘子</li>

  <li title='菠萝'>菠萝</li>

</ul>

下面对节点的操作哪些说法是正确？(ABCDE)

• A. $("ul").append($("<li  title='香蕉'>香蕉</li>")); 是在ul元素内部后面追加节点。
• B. $("ul>li:eq(1)").clone(true).insertBefore($("ul>li:first"));是复制ul下“橘子”节点，然后插入到“苹果”节点前面。
• C. $("ul>li:eq(1)").insertBefore($("ul>li:first"));是将ul下“橘子”节点移动到“苹果”节点前面。
• D. var $li = $("<li  title='香蕉'>香蕉</li>"); 是创建节点。
• E. $("ul  li:eq(2)").remove();是删除ul下“菠萝”那个节点。

12.下面关于Vite构建的vue项目文件结构说法正确的是哪些？(ABCDE)

A.main.js是项目的入口文件。

B.style.css文件是项目的全局样式文件。

C.index.html是默认的主渲染页面文件，同时也是页面的入口文件。

D.APP.vue是项目的根组件。

E. node_modules文件夹存放项目的各种依赖和安装的插件。 

13.下面哪些函数是用来定义响应式数据的？(ACDE)

• A.ref()
• B. setup() 
• C.toRefs()
• D.toRef()
• E.reactive()

14.v-model指令可以用于下面哪些元素？(ABCDE)

• A.<input type="text"> 
• B. <input type="checkbox"> 
• C.textarea

• D.<input type="radio"> 

• E.select

15.下面哪些是v-on指令的事件修饰符。(ABCDE)

• A.self
• B .capture 
• C.stop
• D.once
• E.prevent

16.在Vue中利用v-for指令可以遍历下面哪些数据？(ABCD)

• A. 对象
• B. 整数
• C. 数组
• D. 字符串
• E. 布尔值

17.下面哪些是Vue.js提供给键盘事件的修饰符。（ABCDE）

• A..enter
• B..left 
• C..esc
• D..delete
• E..space

18.下面关于计算属性说法正确的有哪些？(ABCDE)

• A. 在使用时将它们看成普通属性去使用，不会当做方法去调用。
• B. 利用computed方法定义属性，这属性称为计算属性。
• C. 计算属性的计算结果会被缓存起来，方便下次使用。
• D. 计算属性的本质是就是一个方法。
• E. 计算属性所依赖的数据发生变化，计算属性才会重新计算。

判断

1.Vue中的指令有自定义指令和内置指令。 A. 对 B. 错    (A)

2.利用vite工具构建的是vue2.0的项目。 A. 对 B. 错      (B)

3.Vue中的大部分指令以“v-”开头的。 A. 对 B. 错      (A)

4.jQuery中的parents()方法可以获取匹配元素的祖先元素。 A. 对 B. 错      (A)

5.Element Plus是基于Vue3开发的优秀的PC端UI组件库。 A. 对 B. 错       (A)

大题

1.水果列表改变

(1)将"西瓜"添加在"苹果"之前；

(2)将"哈密瓜"添加在"菠萝"之后;

(3)将 "苹果" 和"橘子"复制一份插入到"雪梨"之后

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>水果列表改变</title>
  <script src="jquery-3.6.3.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function(){           
     //输入代码
    // (1)将"西瓜"添加在"苹果"之前；
    $("ul").prepend("<li>西瓜</li>");
    // (2)将"哈密瓜"添加在"菠萝"之后;
    $("li:eq(3)").append("<li>哈密瓜</li>")
    // (3)将 "苹果" 和"橘子"复制一份插入到"雪梨"之后
    $("li:lt(3):not(:first)").clone().appendTo("ul");
    });
  </script>
</head>
<body>
	<h3 title="选择你最喜欢的水果">你最喜欢的水果有？</h3>
	<ul>
	    <li>苹果</li>
	    <li>橘子</li>
	    <li>菠萝</li>
	    <li>雪梨</li>
	</ul>
</body>
</html>

2.景点列表

<template>
  <h1 align="center">景点列表</h1>
  <div>
    <div>省份：<input type="text" v-model="shengfen"></div>
    <div>城市：<input type="text" v-model="chengshi"></div>
    <div>景点：<input type="text" v-model="jingdian"></div>
  </div>
  <button class="btn" @click="add">添加景点</button>
  <table>
    <tr>
      <th>序号</th>
      <th>省份</th>
      <th>城市</th>
      <th>旅游景点</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item,index) in list" :key="item.id">
      <td>{{ index+1 }}</td>
      <td>{{ item.province }}</td>
      <td>{{ item.city }}</td>
      <td>{{ item.spot }}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
  </table>
</template>
  
<script setup>
  import { ref,reactive} from 'vue'
  const shengfen=ref('')
  const chengshi=ref('')
  const jingdian=ref('')
  const list = reactive([
      { id:1, province: "河南省", city: "郑州市", spot: "少林寺" },
      { id:2, province: "河南省", city: "洛阳市", spot: "龙门石窟" },
      { id:3, province: "湖北省", city: "长沙市", spot: "橘子洲头" },
      { id:4, province: "湖南省", city: "武汉市", spot: "黄鹤楼" },
  ])
  const add=()=>{
    const listItem={ id:list.length+1, province: shengfen.value, city:chengshi.value, spot: jingdian.value}
    list.push(listItem);
    shengfen.value=''
    chengshi.value=''
    jingdian.value=''
  }
  const del=(x)=>{
    // JavaScript 中的 splice 方法，它用于添加或删除数组中的元素。
    // splice 方法的第一个参数是开始修改的数组索引，第二个参数是要删除的元素数量。
    // 在这个例子中，x 是要删除的元素的索引，1 表示只删除一个元素。
    list.splice(x,1)
  }
</script>
  
<style scoped>
  button.btn {
    margin:10px auto;
    background-color:#ccc;
  }
  
  table {
      border: 3px solid red;
      border-collapse: collapse;
  }
  
  td,
  th {
      border: 1px solid red;
  }
</style>

3.迷你记事本

<template>
  <h2>迷你记事本</h2>
  <div id="box">
    <div class="write">
      <input type="text" placeholder="请输入任务......" v-focus  v-model="inputValue" @keyup.enter="add"
        @keyup.esc="inputValue=''" />
    </div>
    <ul>
      <li v-for="(item,index) in list">{{ index + 1 + ": " }}{{ item }}
        <img src="./assets/images/delect.png" @click="remove(index)">
      </li>
    </ul>
    <div class="count">
      <span class="left" v-text="'共 ' + list.length + ' 项'" v-if="list.length"></span>
      <span class="right" @click="clear" v-if="list.length">清空</span>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
const vFocus = (el) => {
  el.focus()
}
const list = reactive(["学习", "吃饭", "购物"])
const inputValue = ref("")
const add = () => {
  list.push(inputValue.value);
  inputValue.value = "";
}
const remove = (x) => {
  list.splice(x, 1)
}
const clear = () => {
  list.length=0;
}
</script>

<style scoped>
ul,
li {
  padding: 0;
  margin: 0;
}

#box {
  width: 300px;
  margin: 20px auto 0 auto;
  border: 3px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
}

h2 {
  text-align: center;
  margin-bottom: 10px;
  color: red;
}

div.write>input {
  height: 35px;
  width: 288px;
  border: none;
  border-bottom: 1px solid #ccc;
  padding-left: 10px;
  font-size: 20px;
  font-style: italic;
  outline: none;
}

ul {
  list-style: none;
  background-color: #fff;
  padding-left: 10px;
  padding-right: 10px;
}

ul>li {
  line-height: 38px;
  color: #000;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  position: relative;
}

ul>li:last-child {
  border-bottom: none;
}

ul>li>img {
  width: 24px;
  position: absolute;
  right: 0;
  top: 9px;
  display: none;
  cursor: pointer;
}

ul>li:hover>img {
  display: block;
}

div.count {
  height: 20px;
  color: #000;
  font-size: 12px;
  padding: 8px 10px 0 10px;
  position: relative;
}

div.count>span.right {
  float: right;
  cursor: pointer;
}
</style>