查看本章节

查看作业目录

需求说明：

  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. 时光网内地影视票房Top100爬取

    为了和艺恩网的数据作比较,让结果更精确,在昨天又写了一个时光网信息的爬取,这次的难度比艺恩网的大不少,话不多说,先放代码 # -*- coding:utf-8 -*-from __future__ i ...

  2. JavaIO——转换流、字符编码

    1.转换流 转换流是将字节流变成字符流的流. OutputStreamWriter:将字节输出流转换成字符输出流. public class OutputStreamWriter extends Wr ...

  3. SpringIOC原理浅析

    1. IoC理论的背景我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 如果我们打开机械 ...

  4. entfrm-boot开发平台功能介绍【entfrm开源模块化无代码开发平台】

    简介 entfrm开发平台,是一个以模块化为核心的无代码开发平台,是一个集PC和APP快速开发.系统管理.运维监控.开发工具.OAuth2授权.可视化数据源管理与数据构建.API动态生成与统计.工作流 ...

  5. Dubbo使用Zookeeper注册中心

    在生产环境下使用最多的注册中心为Zookeeper,当然,Redis也可以做注册中心 一.创建提供者02-provider-zk (1) 导入依赖 https://blog.csdn.net/u012 ...

  6. 类型类 && .class 与 .getClass() 的区别

    一. 什么是类型类 Java 中的每一个类(.java 文件)被编译成 .class 文件的时候,Java虚拟机(JVM)会为这个类生成一个类对象(我们姑且认为就是 .class 文件),这个对象包含 ...

  7. [BUUCTF]PWN——jarvisoj_level3_x64

    jarvisoj_level3_x64 附件 步骤: 例行检查,64位程序,开启了nx保护 试运行一下程序,看看大概的情况 64位ida载入,习惯性的检索字符串,没有发现可以直接利用的system,估 ...

  8. 1、学习算法和刷题的框架思维——Go版

    前情提示:Go语言学习者.本文参考https://labuladong.gitee.io/algo,代码自己参考抒写,若有不妥之处,感谢指正 关于golang算法文章,为了便于下载和整理,都已开源放在 ...

  9. 在JSP页面里，时间控件的JS位置在下面然后就显示不出来

    在JSP页面里,时间空间的JS位置在下面然后就显示不出来,放到前面然后就显示出来了, 情何以堪啊,开始还以为是什么错误.

  10. vue+uniapp实现美颜拍照录像，相册选择 ｜ 录像限制时长，美颜拍照录像

    一.插件简介 Zhimi-BeautyCamera(智密 - 美颜相机图册插件)是一个支持美颜录像,美颜拍照,选择图视频功能,带录像参数时长限制的uniapp原生插件.平台支持:Android.IOS ...