vue期末复习选择题1

已于 2024-05-24 22:38:06 修改
阅读量845 收藏 7
点赞数 5
文章标签： vue.js 前端 javascript
于 2024-05-24 22:33:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73922932/article/details/139185881
版权

1. 下面哪一项描述是错误的？（B）

  • A.$("ul li:gt(5):not(:last)")选取ul标记里面索引值大于5且不是最后一个的li元素
  • B.$("div").find("span")选取div元素的子元素span
  • C.$("div.showmore > a")选取class属性值为showmore的div元素的子元素a
  • D. $("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")选取文本包含佳能或尼康或奥林巴斯的li元素

[!NOTE]

代码 $("div").find("span") 实际上并不是选取 div 元素的子元素 span，而是选取 div 元素的后代元素中的 span 元素。

如果要选取 div 元素的直接子元素中的 span 元素，可以使用 $("div > span")。这样的选择器将选取所有直接作为 div 元素子元素的 span 元素。

2. 下面哪一项描述是错误的?（A）

  • A. $("div~span")选取<div>标记所有的同辈元素<span>
  • B. $("div>span")选取<div>标记里的标记名为<span>的子元素标记
  • C. $("#two>*")选取id属性值为two的标记的所有子元素
  • D. $(".one+span")选取class属性值为one的标记的向下紧相邻的同辈元素<span>

[!NOTE]

$("div~span") 并不是选取 <div>标记所有的同辈元素 <span>。

$("div~span") 是一种 jQuery 选择器语法，用于选取所有与 div元素同级且在 div元素后面的所有兄弟元素中的 span 元素。

例如，考虑以下 HTML 结构：

<div></div>
<span></span>
<div></div>
<span></span>
<span></span>
<div></div>

在这个结构中，$("div~span") 会选取第二个和第四个 span 元素，因为它们是与 div 元素同级的，并且在 div 元素后面的所有兄弟元素中。

3. 有如下HTML结构代码：

<body>
    <h1>这是标题1</h1>
    <h2>这是标题2</h2>
    <div class="one" id="one">
        id为one，class为one的div
        <div class="mini">
            class为mini
        </div>
    </div>
    
    <div class="one" id="two" title="test">
        id为two，class为one,title为test的div
        <div class="mini" title="other">class为mini，title为other</div>
        <div class="mini" title="test">class为mini，title为test</div>
    </div>
    <div class="one" >
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
</body>

执行代码： alert($(“div”).eq(2).index());输出结果是下面哪一项？（B）

  • A. 4
  • B. 3
  • C. 2
  • D. 1

[!NOTE]

这是因为 $("div") 选取了文档中所有的 div 元素，然后 .eq(2) 针对这些元素取得第三个元素，即 id 为 two 的 <div> 元素，它在所有 div 元素中的索引位置是2。而 .index() 方法返回的是元素在其同级元素中的索引位置（从 0 开始计数），所以结果是 3。

4. 有如下HTML 代码：

<table width="400" border="1" cellspacing="0" cellpadding="0">
    <tr><td>1.</td><td>jQuery内容过滤选择器<span>第1行</span></td></tr>
    <tr><td>2.</td><td>jQuery内容过滤选择器第2行</td></tr>
    <tr><td>3.</td><td>jQuery内容过滤选择器第3行</td></tr>
    <tr><td>4.</td><td>jQuery第4行</td></tr>
    <tr><td>5.</td><td>jQuery第5行</td></tr>
    <tr><td>6.</td><td>第6行</td></tr>
    <tr><td>7.</td><td>第7行</td></tr>
    <tr><td>8.</td><td></td></tr>
</table>

则下面描述哪一项是错误的？ （A）

  • A.$("td:empty")选择的是第8行的第1个单元格
  • B. $("td:parent")选择的是含有子元素或文本的td元素
  • C.$("tr:contains('内容')")选择的是第1，2，3行
  • D.$("tr:has('span')"）选择的是第1行

[!NOTE]

$("td:empty") 是一个 jQuery 选择器，用于选取所有不包含任何内容（即无子元素和无文本）的 <td> 元素。
因此，它选取的是第 8 行的第二个单元格，而不是第一个。

5. 有如下HTML 代码：

<div class="box">
    <div>visibile</div>
    <div style="display:none">Hidden1</div>
    <div style="visibility:hidden">Hidden2</div>
    <div class="classHidden">Hidden3</div>
    <input type="hidden"/>
</div>

则jQuery 程序中的代码： $("div :hidden")选择的是哪些元素？ （C）

  • A.<div style="visibility:hidden">Hidden2</div>
  • B.<div style="display:none">Hidden1</div>
  • C.<div style="display:none">Hidden1</div>,<input type="hidden" />
  • D.<input type="hidden" />

[!NOTE]

$("div :hidden") 是一个 jQuery 选择器，用于选取所有被隐藏的 <div> 元素及其他隐藏元素。

在给定的 HTML 代码中，有以下元素是被隐藏的：

  • <div style="display:none">Hidden1</div>
  • <input type="hidden" />

6. 下面哪一项描述是错误的？ （A）

  • A. $("input：lt(1)")选取索引值大于1的<input>元素
  • B. $("input:even")选取索引值是偶数的<input>元素
  • C. $("div:last")选取所有<div>元素中最后一个<div>
  • D. $("input:not(.myClass)")选取class属性值不是myClass的<input>元素

[!NOTE]

$("input：lt(1)")是一个 jQuery 选择器，用于选取索引值小于 1 的 <input> 元素。而不是大于 1。

7. 有如下HTML 代码:

<form>
    <label>Name:</label>
    <input name="name" type="text" />
    <fieldset>
        <label>Newsletter:</label>
        <input name="newsletter" type=""text />
    </fieldset>
</form>
<input name="none" type="text"/>

则jQuery 程序中的代码:$(“form>input”)选择的是哪些元素?（D）

  • A. <input name="name" type="text"/>, <input name="newsletter" type="text" />
  • B. <input name="newsletter" type="text" />
  • C. <nput name="none" type="text"/>
  • D. <input name="name" type="text" />

[!NOTE]

$("form>input")是一个jQuery选择器，它用于选择所有直接位于<form>元素内部的<input>元素。

在这个选择器中，form表示选择所有<form>元素，>表示选择其中的直接子元素，input表示选择所有<form>元素的直接子元素中是<input>元素的元素。

因此，$("form>input")选择的是所有直接位于<form>元素内部的<input>元素。

8. 有如下程序代码:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜单关联</title>
    <script src="jquery-1.12.4.js" type="text/javascript"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0
        }

        body {
            font-size: 12px;
            font-family: "宋体", "微软雅黑";
        }

        ul,
        li {
            list-style: none;
        }

        link,
        a:visited {
            text-decoration: none;
        }

        div.list {
            width: 210px;
            margin: 40px auto 0 auto;
        }

        .list a {
            display: block;
            font-weight: bold;
            height: 36px;
            line-height: 36px;
        }

        .list ul li {
            background-color: #467ca2;
            border-bottom: solid 1px #316a91;
        }

        .list ul li a {
            padding-left: 10px;
            color: #fff;
        }

        .list ul li ul {
            display: none;
        }

        .list ul li ul li {
            background-color: #6196bb;
            border-bottom: solid 1px #467ca2;
        }

        .list ul li ul li ul {
            display: none;
        }

        .list ul li ul li a {
            padding-left: 20px;
            color: #9FC;
        }

        .list ul li ul li ul li {
            background-color: #d6e6f1;
            border-bottom: solid 1px #6196bb;
        }

        .list ul li ul li ul li a {
            padding-left: 30px;
            color: #316a91;
        }
    </style>
    <script>
        $(function () {
            $("a.inactive").click(function () {
                if ($(this).next("ul").___(1)_____) $(this).next("ul").hide();
                else $(this).next("ul").show().___(2)___.siblings().___(3)____.hide();
        })
                        })
    </script>
</head>

<body>
    <div>
        <ul>
            <li><a href="#">学校概况</a>
                <ul>
                    <li><a href="#">科大简介</a>
                        <ul>
                            <li><a href="#">校园分布</a></li>
                            <li><a href="#">校园风光</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">现任领导</a>
                    </li>
                    <li>
                        <a href="#">组织机构</a>
                        <ul>
                            <li><a href="#">党委机关</a></li>
                            <li><a href="#">团委机关</a></li>
                            <li><a href="#">行政机关</a></li>
                            <li><a href="#">群团组织</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li> <a href="#">教育教学</a>
                <ul>
                    <li><a href="#">本科生教育</a></li>
                    <li><a href="#">研究生教育</a></li>
                    <li><a href="#">继续教育</a></li>
                </ul>
            </li>
            <li> <a href="#">招生就业</a>
                <ul>
                    <li><a href="#">本科生招生</a></li>
                    <li><a href="#">研究生招生</a></li>
                    <li><a href="#">继续教育招生</a></li>
                    <li><a href="#">就业信息网</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>

补充完整功能实现,实现如下功能:

(1)单击菜单使下面的子菜单显示或隐藏;

(2)单击菜单使其下面的子菜单互斥显示。

效果如下图所示:（B）

img

  • A.

    (1) is(":visible")
    (2) parent()
    (3) children("ul")

  • B.

    (1) is(":visible")
    (2) parent()
    (3) find("ul")

  • C.

    (1) is("visible")
    (2) parent()
    (3) find("ul")

  • D.

    (1) is(":visible")
    (2) prev()
    (3) find("ul")

[!NOTE]

is(“:visible”)：判断是否显示

find(“ul”)：ul的所有后代节点

siblings()：查找所有兄弟的节点

parent()：查找父亲节点

9. 下面哪一项描述是错误的?（A）

  • A. $("#two>*")与$("#two").siblings()等价
  • B. $(".one+span")与$(".one").next("span")等价
  • C. $("div~span")与$("div").nextAll("span")等价
  • D. $("div+span")与$("div").next("span")等价

[!NOTE]

$("#two>*")表示选择#two下的所有子元素，而$("#two").siblings()表示选择#two的兄弟元素，因此它们并不等价。

10. 有如下HTML 代码:

<p>one</p>
<div><p>two</p></div>
<p>three</p>

则jQuery 程序中的代码: $(“div>p”)选择的是哪些元素?( B )

  • A. <p>three</p>
  • B. <p>two</p>
  • C. <div><p>two</p></div>
  • D. <p>one</p>

11. 在HTML页面中有如下结构的代码： （ D ）

<div id=""header"">
    <h3><span>S3N认证考试</span></h3>
    <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
    </ul>
</div>

请问下面哪一个选项所示的jQuery代码，不能够让汉字“四”的颜色变成红色？

  • A. $("#header li:eq(3)").css("color","red")
  • B. $("#header ul li:eq(3)").css("color","red")
  • C. $("#header li:last").css("color","red")
  • D. $"#header li:gt(3)").css("color","red")

[!NOTE]

$("header li:gt(3)")表示选择header下索引大于3的所有li元素，而题目中要求的是选择第4个li元素，所以这个代码并不能达到要求。

12. 有如下程序代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
            text-align: center;
        }

        #wrap {
            width: 330px;
            margin: 30px auto 0;
            height: 30px;
            background-color: blue;
            border-radius: 5px;
            padding: 0 5px;
        }

        #wrap>ul {
            height: 30px;
        }

        #wrap>ul>li {
            float: left;
            width: 100px;
            background-color: yellow;
            height: 30px;
            line-height: 30px;
            margin: 0 5px;
        }

        a {
            text-decoration: none;
            color: red;
        }

        #wrap .uu {
            background-color: pink;
            display: none;
        }
    </style>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("li").mouseenter(function () {
                $(this).___(1)___.show();
            }).mouseleave(function () {
                $(this).___(2)_____.hide();
            })
        })
    </script>
</head>

<body>
    <div id="wrap">
        <ul>
            <li>
                <a href="javascript:;">一级菜单1</a>
                <ul>
                    <li>二级菜单11</li>
                    <li>二级菜单12</li>
                    <li>二级菜单13</li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">一级菜单2</a>
                <ul>
                    <li>二级菜单21</li>
                    <li>二级菜单22</li>
                    <li>二级菜单23</li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">一级菜单3</a>
                <ul>
                    <li>二级菜单21</li>
                    <li>二级菜单22</li>
                    <li>二级菜单23</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>

从下面选项中选择正确的答案补充完整程序,实现鼠标移动到一级菜单上时显示对应的子菜单,离开一级菜单时子菜单隐藏。效果如下图所示: （C）

img

  • A.

    (1) next("ul")

    (2) next("ul")

  • B.

    (1) prev("ul")

    (2) prev("ul")

  • C.

    (1) children("ul")

    (2) children("ul")

  • D.

    (1) find()

    (2) find()

[!NOTE]

children("ul") 是 jQuery 中的一个方法调用。它的意思是选择当前元素的所有直接子元素中符合指定选择器的元素，其中 "ul" 是选择器，表示选择所有标签名为 <ul> 的子元素。

<div class="parent">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <p>Paragraph</p>
    <ul>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

如果你使用 $(".parent").children("ul")，它会选择 class 为 "parent" 的 <div> 元素的所有直接子元素中标签名为 <ul> 的元素，也就是第一个和第二个 <ul> 元素。

next("ul") 是 jQuery 中的一个方法调用。它的意思是选择当前元素的下一个兄弟元素中符合指定选择器的元素，其中 "ul" 是选择器，表示选择下一个兄弟元素中标签名为 <ul> 的元素。

<div class="parent">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <p>Paragraph</p>
    <ul>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

如果你使用 $("p").next("ul")，它会选择标签名为 <p> 的元素的下一个兄弟元素中标签名为 <ul> 的元素，也就是第二个 <ul> 元素。

13. HTML代码如下：

<div class="one" id="one">
    id为one,class为one的div
    <div class="mini">class为mini</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>

选择第一个div元素，用以下哪个选择器？（B）

  • A. $("div eq(0)")
  • B.$("div:first")
  • C.$("div:eq(1)")
  • D.$("div :first")

[!NOTE]

选项 A 中的选择器 $("div eq(0)") 包含了两个部分，分别是：

  • div：选择所有 <div> 元素。
  • eq(0)：从匹配的元素集合中选取索引为 0 的元素。

然而，这个选择器有一个语法错误，应该修改为 $("div:eq(0)")，才能正确选择第一个 <div> 元素。

14. 有如下HTML 代码:

<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src='jquery-1.12.4.js'></script>
    <script>
        $(function () {
            alert($("*").length);
        })
    </script>
</head>

<body>
    <p>河南科技大学</p>
    <div>DIV</div>
    <span>SPAN</span>
    <p>P</p>
</body>

</html>

则jQuery 程序中的代码:alert($(“*”).length)输出的结果是(D)?

  • A. 4
  • B. 6
  • C. 10
  • D. 11

15. 有如下HTML代码：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>复选框效果</title>
    <style type="text/css">
        td {
            text-align: center;
            font-size: 24px;
            line-height: 36px;
        }

        input {
            display: inline-block;
            width: 24px;
            height: 24px;
        }

        input[type=button] {
            width: 100px;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>   $(function () {
            $("#all").click(function () {
                var ch = this.checked;
                $("input[name=product]").each(function () {
                    this.checked = ch;
                })
            })
            $("input[name=product]").click(function () {
                if ($("input[name=product]:checked").length == $("input[name=product]").length) $("#all")[0].checked = true; else $("#all")[0].checked = false;
            })
        }) </script>
</head>

<body>
    <table border="1" cellspacing="0" cellpadding="0" width="600px;" id="tb1">
        <tr>
            <td> <input type="checkbox" id="all" value="全选" />全选 </td>
            <td>商品名称</td>
            <td>价格</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="product" /></td>
            <td>网页设计</td>
            <td>25</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="product" /></td>
            <td>css + div布局</td>
            <td>26</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="product" /></td>
            <td>JavaScript程序设计</td>
            <td>28</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="product" /></td>
            <td>JQuery程序设计</td>
            <td>28</td>
        </tr>
    </table>
</body>

</html>

从下面选项中选择正确的答案补充完整程序，实现如下功能：(1)点击全选按钮后，根据全选按钮的选中状态来控制下面所有子复选框的状态相应的功能。(2)单击下面的单个复选框时，需要根据当前下面所有复选框的状态来确定全选复选框的状态，当下面所有复选框都选中时，全选复选框才选中，否则全选复选框不能选中。（A）

3.png

  • A.

    (1)each

    (2)this.checked

    (3)input[name=product]

    (4)input[name=product]:checked

  • B.

    (1)each

    (2)this.checked

    (3)input[name=product]

    (4)input:checked

  • C.

    (1)each

    (2)$(this).checked

    (3)input

    (4)input[name=product]:checked

  • D.

    (1)each

    (2)this.checked

    (3):checkbox

    (4)input[name=product]:checked

16. 有如下程序代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            ul{
                list-style: none;
                width: 160px;
            }
            
            ul,li{
                padding:0;
                margin:0;
                border-bottom: 1px solid #fff;
            }
            
            li>span{
                display: block;
                background-color: pink;
            }
            
            li>div{
                height: 120px;
                background-color: yellow;
                display: none;
            }
        </style>
        <script src="jquery-1.12.4.js"></script>
        <script> $(function(){
                $("span").click(function(){
                    $(this).___(1)____.show().____(2)___.siblings().____(3)____.hide();
                });
            })
        </script>
    </head>
    <body>
        <ul>
            <li>
                <span>标题1</span>
                <div>我是弹出来的div1</div>
            </li>
            <li>
                <span>标题2</span>
                <div>我是弹出来的div2</div>
            </li>
            <li>
                <span>标题3</span>
                <div>我是弹出来的div3</div>
            </li>
            
            <li>
                <span>标题4</span>
                <div>我是弹出来的div4</div>
            </li>
        </ul>
    </body>
</html>

补充完整功能实现,实现单击标题使其下面的div元素互斥显示。 效果如下图所示: （D）

img

  • A.

    (1)fin()

    (2)parent()

    (3)children(“div”)

  • B.

    (1)next()

    (2)parent()

    (3)children()

  • C.

    (1)next()

    (2)parent()

    (3)find()

  • D.

    (1)next()

    (2)parent()

    (3)children(“div”)

[!NOTE]

在程序中，单击标题元素时，需要显示其下面的div元素，并隐藏其他兄弟元素的div。因此，我们需要先找到标题元素所在的<li>元素，再从<li>元素中找到它的直接子元素<div>，将其显示出来，同时将其他兄弟元素的<div>元素隐藏掉。

具体来说，答案D中的代码含义如下：

  1. next()方法：选择当前元素的下一个同级元素，即<div>元素。

  2. parent()方法：选择当前元素的父节点，即<li>元素。

  3. children("div")方法：选择当前元素的所有直接子元素中的<div>元素。

综上所述，答案D能够实现题目要求的功能。

17. 有如下程序代码:

<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="jquery-1.12.4.js"></script>
        <script>
            $(function(){
                var att="";
                for(i=0;i<$("*").length;i++) att+=$("*")[i].tagName+"\n";
                //深度优先遍历
                alert(att);
            });
        </script>
    </head>
    <body>
        <ul>
            <li>我是第1个列表项</li>
        </ul>
        <div>我是div元素</div>
    </body>
</html>

运行后结果是( A)。

  • A.

    HTML
    HEAD
    META
    TITLE
    SCRIPT
    SCRIPT
    BODY
    UL
    LI
    DIV

  • B.

    HTML
    HEAD
    META
    TITLE
    SCRIPT
    SCRIPT
    BODY
    UL
    DIV
    LI

  • C.

    HTML
    HEAD
    META
    TITLE
    BODY
    UL
    DIV
    LI
    SCRIPT
    SCRIPT

  • D.

    HTML
    HEAD
    BODY
    META
    TITLE
    SCRIPT
    SCRIPT
    UL
    DIV
    LI

[!NOTE]

输出所有标签，按照优先遍历的顺序输出

18. 有如下程序代码:

<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="jquery-1-12.4.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                $("p").click(function(){ ____(1)_____; });
            })
        </script>
    </head>
    <body>
        <p>段落一</p>
        <p>段落二</p>
        <p>段落三</p>
    </body>
</html>

补充程序实现单击页面的p元素,其内容变为红色。（A）

  • A. (1)this.style.color="red"
  • B. (1)$(this)[0].css("color","red)
  • C. (1)this.css("color","red)
  • D. (1)$(this).style.color="red"

19. HTML代码如下：

<form id="form1" action="#">
    <input type="button" value="Button" /><br />
    <button>提交</button><input type="image" /><br />
    <input type="reset" /><br />
    <input type="submit" value="提交" /><br />
</form>

执行代码alert($(“:button”).length);输出结果是哪一个？（C）

  • A.3
  • B.1
  • C.2
  • D.4

[!NOTE]

根据给定的 HTML 代码，有两个类型为 “button” 的元素：一个是 <input type="button">，另一个是 <button>。因此，alert($(":button").length) 将输出 2。

20. 有如下HTML代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>精品展示</title>
    <style>
        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .wrapper {
            width: 298px;
            height: 243px;
            margin: 100px auto 0;
            border: 1px solid pink;
        }

        #left,
        #center,
        #right {
            float: left;
            height: 243px;
        }

        #left,
        #right {
            width: 80px;
        }

        #center {
            width: 138px;
            height: 243px;
        }

        #left li,
        #right li {
            background-color: rgba(200, 200, 200, 0.3);
            height: 27px;
        }

        #left li a,
        #right li a {
            display: block;
            height: 26px;
            border-bottom: 1px solid pink;
            line-height: 26px;
            text-align: center;
            color: red;
            text-decoration: none;
            font-size: 12px;
        }

        #left li a:hover,
        #right li a:hover {
            color: blue;
            background-color: yellow;
            text-decoration: underline;
        }

        #center li {
            height: 243px;
            background-color: rgba(255, 255, 0, 0.3);
        }

        #center li a {
            display: block;
            height: 243px;
            line-height: 243px;
            text-align: center;
            font-size: 40px;
            text-decoration: none;
            color: #000;
        }

        #center>li {
            display: none;
        }

        #center>li:nth-child(1) {
            display: block;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("#left>li").mouseenter(function () {
                var index = ___(1)____; 
                $("#center>li:eq(" + index + ")").show().siblings().hide(); 
            })      
           $("#right>li").mouseenter(function () { 
               var index = ___(2)_____;
               $("#center>li:eq(" + index + ")").show().siblings().hide(); }) 
            })
    </script>
</head>

<body>
    <div>
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <ul id="center">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
            <li><a href="#">女包</a></li>
            <li><a href="#">男包</a></li>
            <li><a href="#">登山鞋</a></li>
            <li><a href="#">皮带</a></li>
            <li><a href="#">围巾</a></li>
            <li><a href="#">皮衣</a></li>
            <li><a href="#">男毛衣</a></li>
            <li><a href="#">男棉服</a></li>
            <li><a href="#">男靴</a></li>
        </ul>
        <ul id="right">
            <li><a href="#">女包</a></li>
            <li><a href="#">男包</a></li>
            <li><a href="#">登山鞋</a></li>
            <li><a href="#">皮带</a></li>
            <li><a href="#">围巾</a></li>
            <li><a href="#">皮衣</a></li>
            <li><a href="#">男毛衣</a></li>
            <li><a href="#">男棉服</a></li>
            <li><a href="#">男靴</a></li>
        </ul>
    </div>
</body>

</html>

从下面选项中选择正确的答案补充完整程序，实现当鼠标移动到下图某个菜单项时，在中间显示相应的文字，效果如下图所示。（D）

2.png

  • A.

    (1)this.index

    (2)this.index+9

  • B.

    (1)$(this).index()

    (2)$(this).index()

  • C.

    (1)this.index()

    (2)this.index()+9

  • D.

    (1)$(this).index()

    (2)$(this).index()+9

丁小喜
关注
Vue.js期末总复习
06-28
主要是vue.js期末总复习，适用于软件专业的学生
Vue期末考试试题.pdf
06-27
50道选择题，带详细答案，期末考试完全够用
Vue面试中，经常会被问到的面试题/Vue知识点整理
weixin_34310127的博客
09-10 9086
看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。不然，稍微有水平的面试官一看就能看出，是否有真才实学还是刚好背中了这道面试题。（都是一些基础的vue面试题，大神不用浪费时间往下看） 一、对于MVVM的理解？ MVVM 是 Model-View-V...
Vue期末复习多选题及答案
Tarzan19970402的博客
05-25 6536
21级计算机应用技术Vue期末考试多选择题
vue复习选择题2
最新发布
weixin_73922932的博客
05-24 550
1. 下面哪一个方法可以实现判断元素的class属性是否含有pp样式？ （A） A. hasClass(“pp”) B. is(“pp”) C. attr(“class”,“pp”) D. toggleClass(“pp”) [!NOTE] 当涉及到在 jQuery 中判断元素的类属性时，下面是各个选项的作用： A. hasClass("pp"): 这个方法用于检查匹配的元素集合中的每个元素是否具有指定的类名。如果其中至少一个元素含有指定的类名，则返回 true；否则返回 false。在这种情况下，h
Vue基础知识测试
简单点的博客
10-18 7459
Vue基础知识测试
Vue基础考试题
sjs185565的博客
11-19 1864
简单的vue考试题
一些简单的vue考试题(选择题和简答题)
热门推荐
Wmlikeweb的博客
05-24 4万+
1、下面代码结果打印结果为: new Vue({ data: { a: 1, b: 2 }, created: function () { console.log(this.a) }, mounted(){ console.log(this.b) } }) A：1，2 B: 1,1 C: 2,2 D:2,1 2、在beforeRouteEnter钩子函数中进行console.log(...
vue习题
qq_45179355的博客
06-03 1万+
一 单选题，每道小题1分，共9道小题，9分1. 下面选项中，可以用来创建store实例对象的是（）。A new Vuex.Store({})B new Vue({})C new Vuex({})D new Store({})2. 以下代码 {{this.$store.state.name}}var store = new Vuex.Store({ state:{name:'store'}})var vm = new Vue({...
Vue组件测试分析选择题
weixin_56258427的博客
11-22 2154
这里是解析 子组件将值传递给父组件是逆向传值，通过$emit触发事件，在父组件（A）中，修改了msg的值。这里是解析 父组件通过v-bind向子组件传值，子组件通过props来获取父组件传递过来的值。这里是解析 fn是接收到事件后响应方法的名称，定义是在父组件中定义。这里是解析 组件间的作用域相互独立，所以组件之间的数据不可共用.这里是解析 局部组件和全局组件都需以函数返回值的形式定义数据。这里是解析 组件的作用域：定义该组件的作用域内可调用。这里是解析 组件分为全局组件和局部组件。
《Vue-框架开发》期末考试试题
07-10
《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架开发》期末考试试题 《Vue-框架
Vue课程雨课堂练习选择题判断题
01-18
本题涉及到的Vue知识点包括但不限于组件、事件绑定、生命周期、属性和方法、过渡效果、插件安装以及Vue CLI的使用。以下是相关知识点的详细解释： 1. `vm.$attrs`：Vue实例的`$attrs`属性可以用来获取父组件传递给...
电子科技大学 互联网+ 软件技术基础期末复习材料
07-06
《电子科技大学互联网+软件技术基础期末复习指南》 在当今数字化时代，软件技术已经成为各行各业不可或缺的重要组成部分，尤其在“互联网+”的浪潮下，软件技术的重要性更是日益凸显。电子科技大学的“互联网+软件...
Web前端技术（期末复习 选填、判断、简答、编程等超全总结）.zip
07-17
这份名为"Web前端技术（期末复习 选填、判断、简答、编程等超全总结）.zip"的压缩包文件包含了全面的Web前端学习资源，适合期末复习和备考。以下是基于该压缩包文件可能包含的知识点的详细说明： 1. HTML...
javascript网页设计期末考试复习资料.pdf
07-14
在JavaScript的学习和复习中，我们需要掌握以下几个核心知识点： 1. **基础语法**：JavaScript是一种弱类型的语言，理解变量的声明、赋值、数据类型如字符串、数字、布尔值、数组、对象等至关重要。此外，了解函数...
你要的Vue.js面试题都在这里。
qq_35721888的博客
06-26 1320
1. Vue.js介绍 Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API； Vue.js是一个构建数据驱动的Web界面的库。 Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 V...
vue-选择题练习
写的不好之处,请指教
11-26 8309
1.以下会打印 new Vue({ data: { a: 1, b: 2 }, created: function () { console.log(this.a) }, mounted(){ console.log(this.b) } }) A:1,2 B:2 C:1 D:2,1 2、vue的生命周期，执行顺序正确的是： A. beforeCreate->created->mounted->d
前端（js+vue）选择题+判断题+问答题
qq_45808765的博客
07-13 4801
前端js+vue选择题+判断题+问答题
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
vue期末考试选择复习
06-10
当准备复习 Vue 期末考试时，您可以从以下几个方面进行复习： 1. Vue 基础知识：包括 Vue 常用指令、组件、生命周期、模板语法、计算属性、事件处理等内容。 2. Vue 路由：包括路由的配置、路由传参、路由守卫等内容。 3. Vue 状态管理：包括 Vuex 的使用、状态管理的设计思路、异步数据处理等。 4. Vue 项目实战：通过实际项目的实践，加深对 Vue 的理解和应用能力。 5. Vue 常用工具和插件：包括 Vue CLI、Vue Devtools、axios 等工具和插件的使用。 另外，建议您多做一些练习题和项目实战，巩固所学知识，并且多查阅官方文档和相关书籍，深入理解 Vue 的原理和机制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值