jQuery实用Demo
1、点击 隐藏/显示 元素
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/demos.css" />
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*文档结构加载完成后,给2个按钮添加单击事件处理函数。*/
$(document).ready(function() { $('#id-button-show').click(function() {
$('h3').show();
});
$('#id-button-hide').click(function() {
$('h3').hide();
}) });
</script>
</head> <body>
<button type="button" id="id-button-show">显示</button>
<button type="button" id="id-button-hide">隐藏</button>
<hr />
<h3>这里是要操作的内容。</h3>
</body> </html>
视图：
引用文件：
http://files.cnblogs.com/files/wanghaibin/demos.css
http://files.cnblogs.com/files/wanghaibin/jquery-1.9.1.js
2、点击 隐藏/显示 元素（2）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/demos.css" />
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#id-button-showhide').click(function() {
$('h3').toggle();
});
});
</script>
</head> <body>
<button type="button" id="id-button-showhide">显示/隐藏</button>
<hr />
<h3>这里是要操作的内容。</h3>
</body> </html>
视图：
jQuery实用Demo的更多相关文章
- JQuery AJAX Demo
JQuery AJAX Demo APP发展集团:347072638(HTML5,APP) 1.先看一个JQuery AJAX Demo HTML端: <!DOCTYPE html PUBLIC ...
- jQuery实用工具集
插件描述:jQuery实用工具集,该插件封装了常用功能,如序列化表单值获取地址栏参数window对象操作等 此工具集包含判断浏览器,判断浏览终端,获取地址栏参数,获取随机数,数据校验等常用操作功能 引 ...
- jquery mobile demo
<!DOCTYPE html> <html> <head> <title>jQuery Mobile Demo</title> <me ...
- JQuery编程demo练习
JQuery练习demo: 编敲代码,实现: 1.选中当中一列的复选框时,该复选框所在行的背景色高亮显示(黄色). 2.取消选中复选框时,所在行的背景色恢复. ============ ...
- jquery选择器demo
大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- jQuery实用的语法总结
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...
- jquery Deferred demo
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery实用技巧--学会你也是大神(1)——插件的制作技巧
前 言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...
- JQuery实用技巧
1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom ...
随机推荐
- （求凹包） Bicycle Race （CF 659D） 简单题
http://codeforces.com/contest/659/problem/D Maria participates in a bicycle race. The speedway t ...
- 【滚动条】Selenium+python自动化-JS处理滚动条
转载地址: http://www.cnblogs.com/yoyoketang/p/6128655.html --------------------------------------------- ...
- html5打开摄像头并用canvas模拟拍照 - 转
<video id="video" width="640" height="480" autoplay></video&g ...
- Codeforces821A Okabe and Future Gadget Laboratory 2017-06-28 14:55 80人阅读 评论(0) 收藏
A. Okabe and Future Gadget Laboratory time limit per test 2 seconds memory limit per test 256 megaby ...
- 第87讲：scala中使用For表达式做查询
今天我们来学习下如何用for表达式在scala中做查询. 先来看看示例代码 case class Book(title:String,authors:List[String]) object text ...
- 响应式 和 移动 web
移动web 教程:http://www.imooc.com/learn/494 iphone5 问题一:6401136的图片,能否在iphone5上完全显示? chrome下 iphone5:3205 ...
- day08_雷神_模块一
# day08 一.模块 回顾相关: 取值顺序: 在局部调用:局部命名空间->全局命名空间->内置命名空间 在全局调用:全局命名空间->内置命名空间 内置函数: globals(), ...
- 计算日期差（Python实现）
class Solution: def Days(self,year,month,day): if (year%4==0 and year%100!=0) or year%400==0: monthl ...
- Cordova - Windows 下创建第一个 Android App
官方文档: Create your first Cordova app Android Platform Guide 安装 JDK 和 Android SDK 注意: 需要将 JK 和 Android ...
- Download SQL Server Management Studio (SSMS)下载地址
Download SQL Server Management Studio (SSMS)下载地址: https://msdn.microsoft.com/en-us/library/mt238290. ...