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. 返 ...
随机推荐
- python之路十四
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...
- Gulp真实项目用例
包括了less预编译,css压缩,html文件include引入,js混淆压缩,本地开发热刷新服务器,html压缩,版本号添加 github地址: gulpfile.js var gulp = req ...
- Bing Test -必应每日壁纸自动换
今天向大家推荐一个桌面美化类的工具,没错就是自动更换壁纸,而且是精美的必应每日壁纸哦!绿色小巧,开机自启动,设置后每日自动更新你的桌面~ 软件名称:Bing Test 链接: http://pan.b ...
- STM32F412应用开发笔记之五：结合W5500实现以太网通讯
因实际使用需求我们测试一下网络通讯,在NUCLEO-F412ZG测试板上没有以太网部分,我们选择外接一个W5500的实验板.W5500支持SPI接口通讯,DC3.3V供源.而NUCLEO-F412ZG ...
- Java页面中文编码要转换两次encodeURI
1.js文件中使用encodeURI()方法. login_name = encodeURI(encodeURI(login_name)); 2.action中URLDecoder解码 loginNa ...
- 如何利用rem在移动端不同设备上让字体自适应大小
本人也是一个刚刚接触前端的小虾米,对于移动端这一块更是一抹眼的黑,前端时间接手开始一个移动端的项目,在网上查询了一下rem的作用,百度搜索下来全是介绍rem的作用原理的(rem是根据根元素计算的),然 ...
- JDBC连接数据库
JDBC连接数据库 1.加载JDBC驱动程序. Class.forName("com.mysql.jdbc.Driver"); 建立连接,. Connection conn = D ...
- RakNet发送与接收数据
http://www.jenkinssoftware.com/raknet/manual/creatingpackets.html Creating Packets with Bitstreams W ...
- 常用的HTML代码
一.文字1.标题文字 <h#>..........</h#> #=1~6:h1为最大字,h6为最小字 2.字体变化 <font>..........</fon ...
- NGUI之UIRoot——屏幕的自适应分辨率的计算
//原来写在其他博客上的东西,搬迁 预备知识: 要明确的三个概念: 设计分辨率:在编辑器上开发UI使用的分辨率.我们所有的UI都是在这个分辨率下设计制作的. 显示区域分辨率:设备上所显示的UI区域在编 ...