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 ...
随机推荐
- Linux命令之sort
sort [选项] [文件] 对文本文件的行进行排序.常见的字符排序空字符串<数字<a<A<b<B...<z<Z (1).常用选项 -b,--ignore-l ...
- CodeForces - 1000E We Need More Bosses
题面在这里! 依然一眼题,求出割边之后把图缩成一棵树,然后直接求最长链就行了2333 #include<bits/stdc++.h> #define ll long long using ...
- [UOJ409]Highway Tolls
题意:交互题,给定一个简单无向图和$A,B(1\leq A\lt B)$,你可以对每条边指定其边权为$A$或$B$后通过交互库询问$S\rightarrow T$的最短路($S,T$在程序运行之前已经 ...
- 【贪心】【后缀自动机】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem E. Enter the Word
题意:给你一个串,让你从左到右构造这个串,一次操作可以直接在当前串后面添加一个任意字符,或者拷贝当前串的任意一个子串到当前串的后面.问你最少要多少次操作才能构造出这个串. 从前向后贪心,从当前已构造的 ...
- 【序列莫队+树状数组】BZOJ3289-Mato的文件管理
[题目大意] 一共有n份,每份有一个大小和一个编号.Mato每天随机选一个区间[l,r],拷贝出来(即对原序列不影响),给它们排序,并且每次只能交换相邻两份文件.问每天最少交换几次? [思路] 显然, ...
- Codeforces Round #341 (Div. 2) D. Rat Kwesh and Cheese 数学
D. Rat Kwesh and Cheese 题目连接: http://www.codeforces.com/contest/621/problem/D Description Wet Shark ...
- MYSQL复习笔记9-存储过程
date: 20140208auth: Jin参考引用:http://blog.sina.com.cn/s/blog_52d20fbf0100ofd5.html mysql存储过程详解一.基本介绍1. ...
- 利用cURL请外部接口
昨天有一个需求,就是需要把获取到的百度地图信息存储到百度地图LBS云储存上 看了一下LBS云储存,说白了就是通过接口操作云数据库,所以写了一个通用的cURL函数 代码如下: /** * @param ...
- HDU 3473 Minimum Sum（划分树）
Minimum Sum Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- 利用cca进行fmri分析
在肖柯的硕士毕业论文中<基于CCA的fMRI时空模型数据处理方法的研究>,他的总体思路是利用cca提取出fmri图像在时间和空间上两个相关系数,也就是两个特征,然后利用pca,对这两个特征 ...