使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。
查看本章节
查看作业目录
需求说明：
- 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。
- 具体要求如下：
- 在页面中显示电影排行榜
- 当单击“（收起）”链接时，排行榜中后三项的电影名称隐藏而且链接的文本更改为“（展开）
- ” 当单击“（展开）”的链接时，后三项的电影名称重新显示且链接的文本更改为“（收起）”
实现思路：
- 新建 HTML 页面，使用 <h3> 和 <ul> 等标签制作页面加载时的初始效果
- 在页面加载完毕事件中，给 <a href="#">（收起）</a> 标签的单击事件绑定方法
- 在 <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 样式属性，从而实现显示和隐藏效果。的更多相关文章
- 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
- 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式
查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- jquery选择器:获取父级元素、同级元素、子元素
jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获 ...
- js获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
- jquery如何获得页面元素的坐标值
http://www.cnblogs.com/pansly/archive/2011/05/25/2056222.html jquery如何获得页面元素的坐标值 yulutxt是输入经典语录的输入 ...
- 原生js与jquery加载页面元素比较
原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascrip ...
- JavaScript获取页面元素的常用方法
1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...
- webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2
js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...
随机推荐
- iOS 客户端获取七牛上传token
一.官方参考文档: 1.上传策略http://developer.qiniu.com/article/developer/security/put-policy.html 2.上传凭证(即uptoke ...
- Linux学习 - 系统命令sudo权限
1 功能 root把超级用执行的命令赋予普通用户执行 2 使用 visudo 或 vim /etc/sudoers 说明: root 用户名 ALL=(ALL) 被管理主机的地址=(可使用的身份) A ...
- @Conditional 注解，基于条件实例对象
.catalogue-div { position: relative; background-color: rgba(255, 255, 255, 1); right: 0 } .catalogue ...
- 【JS】原生实现拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 【保姆级教程】Ubuntu18.04+Geforce 980Ti+安装CUDA10.2+Cudnn
首先感谢师兄的博客!前半部分按照这个照做没有问题! https://www.bilibili.com/read/cv9162965/ 第一步:下载CUDA 在官网下载,查询自己的GPU型号对应的CUD ...
- Log4j2再发新版本2.16.0，完全删除Message Lookups的支持，加固漏洞防御
昨天,Apache Log4j 团队再次发布了新版本:2.16.0! 2.16.0 更新内容 默认禁用JNDI的访问,用户需要通过配置log4j2.enableJndi参数开启 默认允许协议限制为:j ...
- HyperSnips：VSCode上的自动补全神器
发现一个小众但是巨好用的VSCode自动补全插件:HyperSnips. 作者显然受到了 这位小哥 的启发,将 Vim Ultisnips 的大部分功能搬到了VSCode上.并用 JavaScript ...
- [BUUCTF]REVERSE——Youngter-drive
Youngter-drive 附件 步骤: 例行查壳儿,32位程序,upx壳儿 利用网上找的upx脱壳儿工具脱完壳扔进ida,首先检索程序里的字符串,发现了有关flag的字样,跟进,当source=T ...
- 12 - Vue3 UI Framework - 打包发布
基础组件库先做到这个阶段,后面我会继续新增.完善 接下来,我们对之前做的组件进行打包发布到 npm 返回阅读列表点击 这里 组件库优化 通用层叠样式表 我想大家都注意到了,前面我们在写组件的时候,sc ...
- CF761A Dasha and Stairs 题解
Content 给定两个数 \(n,m\),试问是否有区间里面有 \(n\) 个奇数和 \(m\) 个偶数. 数据范围:\(0\leqslant n,m\leqslant 100\). Solutio ...