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 779A Pupils Redistribution
简单题. 因为需要连边的人的个数一样,又要保证和一样,所以必须每个数字的个数都是一样的. #include<map> #include<set> #include<cti ...
- struts2核心配置之Result
result作用:在struts.xml中,使用<result>元素配置result逻辑视图和物理视图之间的映射 元素属性 属性 说明 是否必须 name 指定逻辑视图的名称(Action ...
- 【stl小记】list
list相当于双向链表,所以快插快删比较方便(链式数据结构的性质),但是随机读取较慢 用一道luogu的水题做一做list,code如下 #include <cstdio> #includ ...
- android 内存泄漏检测工具 LeakCanary 泄漏金丝雀
韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com 内存泄漏检测工具 android 内存泄漏检测工具 ======== 内存泄漏 就是 无用的对 ...
- BZOJ 1433 [ZJOI2009]假期的宿舍（网络流）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1433 [题目大意] 在校学生有自己的床,外校的则没有,如果两个同学相互认识,则可以借用 ...
- 20172333 2017-2018-2 《Java程序设计》第9周学习总结
20172333 2017-2018-2 <Java程序设计>第9周学习总结 教材学习内容 第十一章 异常与错误均是对象 异常是由代码的特定方法或者操作出错. 错误是代码运行中虚拟机出现错 ...
- Codeforces Round #127 (Div. 1) D. Brand New Problem 暴力dp
D. Brand New Problem 题目连接: http://www.codeforces.com/contest/201/problem/D Description A widely know ...
- 基于tiny4412的Linux内核移植（支持device tree）（一）
作者信息 作者: 彭东林 邮箱:pengdonglin137@163.com QQ:405728433 平台简介 开发板:tiny4412ADK + S700 + 4GB Flash 要移植的内核版本 ...
- Unity 加密解密
解密无非就为了 修改游戏功能数据.提取游戏资源.加入自己想加的广告...加密就是保护游戏不被恶意修改,经常看到有人说:"加什么密,你以为自己写的代码很NB?见不得人?"我只想说,加 ...
- weblogic生成和配置SSL证书
采用Linux自带的OPENSSL进行证书的生成工作 准备阶段 以root登录,同时在el01gbcn01上完成 [oracle@el01gbcn01]# which java /u01/FMW/we ...