jquery - 选择器 - 试题

最新推荐文章于 2024-03-20 05:13:45 发布

yuxuac

最新推荐文章于 2024-03-20 05:13:45 发布

阅读量945

点赞数

分类专栏： Jquery 文章标签： jquery

本文链接：https://blog.csdn.net/yuxuac/article/details/47013793

版权

这篇博客介绍了jQuery选择器的使用，包括相邻、同级、下层、索引及属性等选择器的实例，以及如何操作元素显示。通过一个编程练习，展示了如何利用jQuery实现动态显示和隐藏列表项，加深了对jQuery选择器的理解。

摘要由CSDN通过智能技术生成

最近在慕课网学习Jquery, 觉得很好，其中有一道题如下：

编程练习
在页面中,添加一个<ul>元素,里面放置多个(至少7个以上)的<li>元素,此外,再添加一个<a>元素.

任务
初始时:<ul>元素中仅显示5个<li>元素,其中包含还包括最后一个<li>元素,<a>元素中的显示"更多"字符.
当点击"更多"链接时,自身内容变为"简化",同时,<ul>元素中显示全部的<li>元素.
当点击"简化"链接时,自身内容变为"更多",同时,<ul>元素中仅显示包含最后一个<li>元素在内的5个元素.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>
    
    <body>
        <ul>
            <li>A1</li>
            <li>A2</li>
            <li>A3</li>
            <li