JQ 常见demo
使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>
使用 toggle() 方法来切换 hide() 和 show() 方法。（显示和隐藏）
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
JQ 常见demo的更多相关文章
- JS/JQ常见兼容辅助插件
1.Respond.js Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-widt ...
- jq小demo—图片翻页展示效果 animate()动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 整理版jq 复习贴子
1绝对定位(abs)与相对定位(relative) 区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把 其它的层遮罩住 绝对定位就是的参照位置 ...
- 推荐一个内容滚动jquery插件
myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...
- 单行文字滚动就用myslider
单行文字滚动就用myslider,myslider是一个小型的内容滚动jquery插件. 首先请看实例:http://keleyi.com/jq/myslider/demo/4.htm 然后来看代码: ...
- 使用hovertree菜单作为后台导航
hovertree是一个jquery菜单插件,官方网址:http://keleyi.com/jq/hovertree/ ,可以登录该网址体验效果. 0.1.3版本:http://keleyi.com/ ...
- HoverTree菜单0.1.3新增效果
HoverTree菜单0.1.3增加弹出菜单的动态效果,可以是动态下拉,也可以是动态淡入. 效果请看:http://keleyi.com/jq/hovertree/demo/demo.0.1.3.ht ...
- jQuery仿京东无限级菜单HoverTree
官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...
- js基础第八天
返回前面起第一个字符位置 indexOf("sdfsdf");它是从左边索引为0开始数,而且只找第一个,然后返回该字符的位置.返回是个数值.如果找不到该字符,那么就会返回-1. 返 ...
随机推荐
- linux文件对比命令——diff
diff用于比较文件或目录内容,特别是比较两个版本不同的文件以找到改动的地方. 如果指定比较的是文件,则只有当输入为文本文件时才有效,以逐行的方式,比较文本文件的异同处. 如果指定比较的是目录的的时候 ...
- infoq 微信后台存储架构
infoq 上微信后台存储架构 视频很是值得认真一听,大概内容摘要如下: 主要内容:同城分布式强一致,园区级容灾KV存储系统 - sync 序列号发生器 移动互联网场景下,频繁掉线重连,使用 ...
- java基础高级2 MySQL 高级
1.数据库简介 DDL(数据定义语言) DML(数据操作语言) 2. 准备工作 解压缩文件目录下找到my.ini文件,文件中写入[mysql] default-character set= utf-8 ...
- Spring mvc时间格式处理
spring mvc中,如果时间格式是yyyy-MM-dd,传入后台会报错,要增加一些配置才可以. 1.修改spring-mvc.xml,增加org.springframework.format.su ...
- 无线连接Android设备
有时设备处于低电,此时又需要进行设备与PC的数据传输,但是通过USB连接充电速度太慢.这时就可以通过无线进行传输数据,然后通过AC充电.一举两得. 前提: 1.在Android设备的开发者模式-打开U ...
- java面试题总汇
coreJava部分 7 1.面向对象的特征有哪些方面? 7 2.作用域public,private,protected,以及不写时的区别? 7 3.String 是最基本的数据类型吗? 7 4.fl ...
- Linux学习记录
---恢复内容开始--- linux与unix的关系 linux是借鉴了unix设计思想,也称linux位类unix系统. Linux常用命令 1.命令基本格式 命令[选项][参数] 注意:个别命令不 ...
- JAVA BigDecimal 小数点处理
1,保留两位小数 方法一:{ double c=3.154215; java.text.DecimalFormat myformat=new java.text.DecimalFormat(" ...
- AngularJS的简单使用
官网下载:AngularJS 路由视图需要:Angular-Route.js 基于zepto的轻量级的 JavaScript UI 库: App.js 用于开发跨平台的移动Web应用 <!DO ...
- html表单提交方式
xml 表单提交方式: * 使用submit提交 <form> 要提交的数据 <input type="submit" /'> </form> ...