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 ...
随机推荐
- Codeforces Round #425 (Div. 2) Misha, Grisha and Underground（LCA）
Misha, Grisha and Underground time limit per test 2 seconds memory limit per test 256 megabytes inpu ...
- 密码统计分析工具pipal
密码统计分析工具pipal pipal是Kali Linux提供的一款密码统计分析工具.该工具可以对一个密码字典的所有密码进行统计分析.它会统计最常用的密码.最常用的基础词语.密码长度占比.构成字 ...
- python strip() 函数和 split() 函数的详解及实例
strip是删除的意思:split则是分割的意思．strip可以删除字符串的某些字符,split则是根据规定的字符将字符串进行分割． 1.Python strip()函数 介绍 函数原型 声明:s为字 ...
- Line Reflection -- LeetCode
Given n points on a 2D plane, find if there is such a line parallel to y-axis that reflect the given ...
- [USACO 2016 Dec Gold] Tutorial
Link: 传送门 A: 贪心从小到大插入,用并查集维护连通性 #include <bits/stdc++.h> using namespace std; #define X first ...
- 【左偏树+延迟标记+拓扑排序】BZOJ4003-城池攻占
[题目大意] 有n个城市构成一棵树,除1号城市外每个城市均有防御值h和战斗变化参量a和v. 现在有m个骑士各自来刷副本,每个其实有一个战斗力s和起始位置c.如果一个骑士的战斗力s大于当前城市的防御值h ...
- [Luogu1843]奶牛晒衣服
题目大意: 你要晒n件衣服,第i件衣服有w[i]滴水, 每件衣服每秒钟会自然风干a滴水,将这件衣服放入烘干机中每秒钟会烘干a+b滴水. 一秒钟不可以拆开,问晒干所有的衣服至少要多少时间? 思路: 二分 ...
- 【docker】解决docker pull镜像 拉取镜像龟速的问题,docker拉取镜像使用阿里云docker镜像加速器
在docker拉取mysql镜像过程中,出现龟速的问题,解决这个问题的方法: 这个页面 停留了好久好久,依旧没有下载完成. 碰上这种情况 1.先退出Ctrl+C 2.在浏览器上进入阿里云docker库 ...
- nyoj42一笔画问题（欧拉图）
这题事实上说不上难度4.仅仅是一个简单的欧拉图推断,给一些点,首先推断连通性.假设不连通.就谈不上是欧拉图. 假设是连通的,在推断度的数目,每一个顶点都是偶数个或者仅仅有两个是奇数个.这样就能够构成欧 ...
- java中jar命令打包一个文件夹下的所有文件
(1)首先,必须保证java的所有路径都设置好,在dos提示符下输入jar -help出现C:\Documents and Settings\dly>jar -help非法选项:h用法:jar ...