使用 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 ...
随机推荐
- ORACLE profile含义，修改，新增
profiles文件是口令和资源限制的配置集合,包括CPU的时间.I/O的使用.空闲时间.连接时间.并发会话数量.密码策略等对于资源的使用profile可以做到控制会话级别或语句调用级别.oracle ...
- tomcat结合nginx
相信很多人都听过nginx,这个小巧的东西慢慢地在吞食apache和IIS的份额.那究竟它有什么作用呢?可能很多人未必了解. 说到反向代理,可能很多人都听说,但具体什么是反向代理,很多人估计就不清楚了 ...
- 3.0 go mod之远程仓库搭建-代码示例
注意事项 所谓的远程仓库指的是github,个人首次使用go mod在其他云仓库上尝试,并未成功,这浪费了我近2小时的时间: 如果你是初次尝试,那么除了github的地址换一下之外,其他的都按照示例操 ...
- 关于tensorflow无法使用gpu
python3.6 无法使用tensorflow gpu 环境名称 test1 在控制台里进入环境 conda activate test1 使用python python 查看gpu能否使用 pri ...
- 【JavaWeb】【JSP】【Bean】JavaBean基础使用方法与操作步骤
JavaBean基础使用方法与操作步骤 JavaWeb jsp Bean 项目结构 JavaBean的概念 JavaBean是可复用的.平台独立的软件组件 JavaBean既可以是简单的GUI要素,如 ...
- ctypes与numpy.ctypeslib的使用
numpy ctypeslib 与 ctypes接口使用说明 作者:elfin 目录 一.numpy.ctypeslib使用说明 1.1 准备好一个C++计算文件 1.2 ctypeslib主要的五个 ...
- Jenkins 关闭和重启的实现方式
关闭jenkins 只需要在访问jenkins服务器的网址url地址后加上exit.例如我jenkins的地址http://localhost:8080/ , 那么我只需要在浏览器地址栏上敲下 htt ...
- TSN（Time-Sensitive Networking）协议导读
前言 上一个主题我们介绍了TSN的发展历史和协议族现状,它为建立统一的确定性网络传输基础设施提供了有力保障. TSN是一套协议标准,以保证确定性信息在标准以太网的不同场景下的顺利传输.TSN协议族本身 ...
- 转：select、poll、epoll之间的区别总结[整理]
转:select.poll.epoll之间的区别总结[整理] select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就 ...
- Python变量的作用域在编译过程中确定
为了节省读友的时间,先上结论(对于过程和细节感兴趣的读友可以继续往下阅读,一探究竟): [结论] 1)Python并不是传统意义上的逐行解释型的脚本语言 2)Python变量的作用域在编译过程就已经确 ...