查看本章节

查看作业目录

需求说明：

  1. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。
  2. 具体要求如下：
  • 在页面中显示电影排行榜
  • 当单击“（收起）”链接时，排行榜中后三项的电影名称隐藏而且链接的文本更改为“（展开）
  • ” 当单击“（展开）”的链接时，后三项的电影名称重新显示且链接的文本更改为“（收起）”

实现思路：

  1. 新建 HTML 页面，使用 <h3> 和 <ul> 等标签制作页面加载时的初始效果
  2. 在页面加载完毕事件中，给 <a href="#">（收起）</a> 标签的单击事件绑定方法
  3. 在 <a> 标签的点击事件方法中判断无序列表的后三项是否可见。若可见，利用 css() 方法把后三项的display 属性设置成“none”，再利用 text() 方法，改变 <a> 标签的文本为“展开”；若不可见，利用 css() 方法把后三项的 display 属性设置成“list-item”，再利用 text() 方法，改变 <a> 标签的文本为“收起”

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			$(function(){

				$("a[href='#']").click(function(){

					var flag = $("ul li:gt(4)").is(":visible");

					if (flag) {

						$("ul li:gt(4)").css("display","none")

						$(this).text("(展开)")

					} else{

						$("ul li:gt(4)").css("display","list-item")

						$(this).text("(收起)")

					}

				})

			})

		</script>

	</head>

	<body>

		<h3>影视排行榜<a href="#">(收起)</a></h3>

		<ul>

			<li>捉妖记 2</li>

			<li>战狼 2</li>

			<li>奇门遁甲</li>

			<li>猫妖传</li>

			<li>时空终点</li>

			<li>前任3：再见前任</li>

			<li>冰雪奇缘</li>

			<li>极品飞车</li>

		</ul>

	</body>

</html>

使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。的更多相关文章

  1. 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  2. 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

  3. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  4. jquery选择器:获取父级元素、同级元素、子元素

    jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获 ...

  5. js获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...

  6. jquery如何获得页面元素的坐标值

    http://www.cnblogs.com/pansly/archive/2011/05/25/2056222.html jquery如何获得页面元素的坐标值   yulutxt是输入经典语录的输入 ...

  7. 原生js与jquery加载页面元素比较

    原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascrip ...

  8. JavaScript获取页面元素的常用方法

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

  9. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

随机推荐

  1. 理解inode以及软硬连接，和inode磁盘爆满的解决方案以及文件权限

    理解Linux的软硬链接 创建硬链接的命令 [root@centos6 data]#ln /data/f1 /data/f2 [root@centos6 data]#ll -itotal 1613 - ...

  2. html标签设置contenteditable时，去除粘贴文本自带样式

    在一个div标签里面加了可编辑的属性,从别的地方复制了一串文本,只想把文本内容存到接口里面,结果发现文本自带的标签和样式都会存进去. $(".session-new-name"). ...

  3. 【Linux】【CentOS】【FTP】FTP服务器安装与配置（vsftpd、lftp）

    [初次学习.配置的笔记,如有不当,欢迎在评论区纠正 -- 萌狼蓝天 @ 2021-12-02] 基本概念 FTP访问方式 实体账号:本地账户 来宾账户:guest 匿名登录:anonymous fp ...

  4. 【C#】【MySQL】C#连接MySQL数据库（一）代码

    C#连接MySQL数据库 准备工作 1.环境安装 安装MySQL For Visual Studio<<点击进入官网下载 第一个要下载安装,第二个下载后将MySQL.data添加到Visu ...

  5. Go modules基础精进，六大核心概念全解析（上）

    点击一键订阅<云荐大咖>专栏,获取官方推荐精品内容,学技术不迷路! Go 语言做开发时,路径是如何定义的?Go Mudules又为此带来了哪些改变?本文将会全面介绍Go modules六大 ...

  6. Mysql资料 xtrabackup

    目录 一.简介 原理 优缺点 二.安装 三.日常使用 备份所有库 增量备份 远程备份 四.参数 一.简介 原理 其实XtraBackup也是基于INNODB的 crash-recovery功能来实现的 ...

  7. dart系列之:如丝滑般柔顺,操作文件和目录

    目录 简介 File 读取整个文件 以流的形式读取文件 随机访问 文件的写入 处理异常 总结 简介 文件操作是IO中非常常见的一种操作,那么对应dart语言来说,操作文件是不是很简单呢?实际上dart ...

  8. AT2686 [ARC080A] 4-adjacent 题解

    Content 给定一个长度为 \(n\) 的数列 \(a\),请将其重新排列,使得 \(\forall i\in[1,n-1]\),都有 \(4\mid (a_i\cdot a_{i+1})\),或 ...

  9. 出现线上bug，测试人能做些什么？

    测试奇谭,BUG不见. 大家好,我是谭叔. 一提到线上问题,很多测试小白要么"原则性"恐惧,要么憨憨如也,不知如何下手. 本篇文章,我再细化下这道常见的面试题,跟大家捋捋发生线上问 ...

  10. windows平台使用 pthreads库

    note 近日封装一些跨平台库时, 发现线程的创建需要做平台的区分, windows的线程创建和Linux下的线程操作不一样.很麻烦,还要做平台区分. 能否在windows上使用pthread的线程库 ...