查看本章节

查看作业目录

需求说明：

  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. echo -e "\033[字背景颜色;字体颜色m字符串\033[0m

    格式: echo -e "\033[字背景颜色;字体颜色m字符串\033[0m" 例如: echo -e "\033[41;36m something here \033 ...

  2. weak和拷贝

    weak/拷贝 1. weak 只要没有strong指针指向对象,该对象就会被销毁 2. 拷贝 NSString和block用copy copy语法的作用 产生一个副本 修改了副本(源对象)并不会影响 ...

  3. 关于for与forEach遍历集合中对集合进行操作的问题

    遍历List集合,在循环中再对List集合进行操作,有时候会遇到ConcurrentModificationException(并发修改异常);其实只有在forEach循环集合再对集合操作会发生异常: ...

  4. java输入/输出流的基本知识

    通过流可以读写文件,流是一组有序列的数据序列,以先进先出方式发送信息的通道. 输入/输出流抽象类有两种:InputStream/OutputStream字节输入流和Reader/Writer字符输入流 ...

  5. 从orderby引发的SQL注入问题的思考

    背景: 某一天准备上线,合完master之后准备发布了,忽然公司的代码安全监测提示了可能在代码中存在sql注入的风险,遂即检查,发现sql注入问题 既然碰到了这个问题,那就了简单了解下sql注入 基础 ...

  6. centos7部署mysql-5.7

    目录 一.环境声明 二.程序部署 三.更改初始密码 一.环境声明 [mysql-Server] 主机名 = host-1 系统 = centos-7.3 地址 = 1.1.1.1 软件 = mysql ...

  7. 什么是token？

    一.简介 token的意思是"令牌",是服务端生成的一串字符串,作为客户端进行请求的一个标识. 当用户第一次登录后,服务器生成一个token并将此token返回给客户端,以后客户端 ...

  8. centos添加本地yum源

    一.简介 centos6系列于2020年11月份已经停止提供服务,现在各大镜像源已经关闭centos6的yum源,需要下载镜像后在本地搭建yum源方便使用. 最好将镜像下载后传到OSS中,这样从阿里云 ...

  9. react-hook简单使用

    一.函数式组件创建 function HelloComponent(props, /* context */) { return <div>Hello {props.name}</d ...

  10. 记一次AWD

    有幸bjx师傅又让我参加了一次awd,算是第二次体验awd,又感觉学习到了很多东西. 第一次打这种模式的时候,我几乎什么都没有做,就给师傅们下载文件,上传文件了.(太菜了) 昨晚分的组,发现没有人是p ...