jQuery切换事件
有html页面内容如下：
<body>
<h5 id="hh">关于jQuery的介绍</h5>
<p id="p1">jQuery是一门前端编程语言</p>
</body>
需要实现点击标题显示和隐藏段落的功能。
第一种通过点击方法实现，代码如下，需要注意is(":visible")的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../script/jquery-2.1.4.js"></script>
<title></title>
<script>
$(function(){
$("#hh").click(function(){
if($(this).next().is(":visible")){
$(this).next().hide();
}
else{
$(this).next().show();
}
});
});
</script>
</head>
<body>
<h5 id="hh">关于jQuery的介绍</h5>
<p id="p1">jQuery是一门前端编程语言</p>
</body>
</html>
第二种方法通过toggle使用，当toggle代码如下时，效果是先出现一段文字
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../script/jquery-2.1.4.js"></script>
<title>toggle</title>
<script>
$(function(){
$("#hh").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
</script>
</head>
<body>
<h5 id="hh">关于jQuery的介绍</h5>
<p id="p1">jQuery是一门前端编程语言</p>
</body>
</html>
而要实现点击切换的效果，新的jQuery代码应该是：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../script/jquery-2.1.4.js"></script>
<title>toggle</title>
<script>
$(function(){
$("#hh").click(function(){
$(this).next().toggle(600);
},function(){
$(this).next().toggle(600);
})
})
</script>
</head>
<body>
<h5 id="hh">关于jQuery的介绍</h5>
<p id="p1">jQuery是一门前端编程语言</p>
</body>
</html>
jQuery切换事件的更多相关文章
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- 偷懒的一天-jQuery之事件与应用
hi 睡得恍恍惚惚不知精神为何物了 1.jQuery -----事件与应用----- ----页面加载时触发ready()事件 ready()事件类似于onLoad()事件,但前者只要页面的DOM结构 ...
- 第二十六课：jQuery对事件对象的修复
因为原生的event对象,在不同浏览器下,有不同的属性和方法,因此需要用jQuery进行兼容. jQuery在这里分两步走,首先创建一个伪事件类jQuery.Event(jQuery里面自定义的事件类 ...
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- jQuery之事件even
jQuery之事件 W3C:http://www.w3school.com.cn/jquery/jquery_ref_events.asp 一.事件列表 1.blur() 当失去焦点时触发 ...
- jQuery之事件
(一).事件列表. 1.blur() 当失去焦点时触发.包括鼠标点击离开和TAB键离开. 2.change() 当元素获取焦点后,值改变失去焦点事触发. 3.click() 当鼠标单击时触发. 4.d ...
- 【jQuery】(4)---jQuery常用事件
[jQuery入门](4)---jQuery常用事件 一.常用事件列表 1.blur() 当失去焦点时触发.包括鼠标点击离开和TAB键离开. 2.change() 当元素获取焦点后,值改变失去焦点事触 ...
- jquery 鼠标事件汇总
鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法 鼠标事件是在用户移动鼠标 ...
- JS -判断、监听屏幕横竖屏切换事件
通过监听window.orientationchange事件,当横竖屏切换事件时触发 <!doctype html> <html> <head> <title ...
随机推荐
- 洛谷——P3905 道路重建
P3905 道路重建 题目描述 从前,在一个王国中,在n个城市间有m条道路连接,而且任意两个城市之间至多有一条道路直接相连.在经过一次严重的战争之后,有d条道路被破坏了.国王想要修复国家的道路系统,现 ...
- 【Go】基础语法之接口
接口定义: 利用关键字interface来定义一个接口,接口是一组方法的集合. 例如: type People interface { Show(name string, age int) (id i ...
- 排序小记【2】对 struct 的排序
有了前面的内容,对于一般的排序已经没有问题了,但是有时候排序的要求可能会有点刁... 举个简单的例子,应该是NOIP2009的分数线划定,差不多算是一个比较高级的排序(吧). 多关键字排序(?) 我一 ...
- PM过程的一些典型场景和问题
如何进行团队激励 如何进行目标管理 如何进行绩效考核 如何处理团队沟通(技巧) 详述几种软件过程理论 需求分析和度量 测试过程和工具 开发管理过程
- 进入bios后没有usb启动项怎么办
开机按DEL进入BIOS(现在还这么说吧,不同的主板进入方法不太一样),找到BOOT选项. 选择Boot mood:legacy support(引导模式,逻辑支持) boot priorty:leg ...
- bzoj3012（Trie）
bzoj3012 题解 3012: [Usaco2012 Dec]First! Desdescription Bessie has been playing with strings again. S ...
- PS 2019 | Photoshop CC 2019 的安装激活
文章目录 写在前面 安装步骤 软件激活 关闭"主页"屏幕 写在前面 Photoshop CC 2019(64位)下载地址: 链接:https://pan.baidu.com/s/1 ...
- CentOS中如何安装7ZIP
7-zip以高压缩率著称,并且是一款免费开源的压缩软件.在常规的Linux发行版中,无法通过简单的yum命令来安装该软件.那么在CentOS中,如何安装7ZIP呢?有以下3种方法: 第一种,源码编译安 ...
- 应用 TransactionScope 报：此操作对该状态的事务无效 的错误
如果在事务过程跨了数据库服务器(即使在同一台服务器上,两个不同的数据库实例也算跨数据库服务器),而使用 TransactionScope 却报:此操作对该状态的事务无效 的错误 是因为没有启用每台服务 ...
- C# 获取文件版本
var versionInfo = FileVersionInfo.GetVersionInfo(filePath); String productVersion = versionInfo.Prod ...