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

时间: 2024-11-05 19:04:39

jQuery实用Demo的相关文章

简单分享javascript、jquery实用demo

前端追随的javascript.jquery javascript判断H5页面离开 1 function onbeforeunloadFn(){ 2 console.log('离开页面'); 3 //...code 4 } 5 function showOnbeforeunload(flags){ 6 if(flags){ 7 document.body.onbeforeunload = onbeforeunloadFn; 8 }else{ 9 document.body.onbeforeunl

jquery mobile demo

<!DOCTYPE html> <html> <head> <title>jQuery Mobile Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-wid

jQuery复习—DOM无关的jQuery实用函数

DOM无关的jQuery实用函数 一.实用函数的定义 定义在jQuery/$命名空间下不操作包装集的函数.一般来说这些使用函数要么操作除DOM元素以外的JavaScript对象,要么执行一些与Dom操作无关的操作. 二.操作JavaScript对象和集合 1.修建字符串  $.trim(value) 定义:删除传入的字符串开头和结尾处的空白字符,并返回修改后的结果 参数:value需要修改的字符串 返回值:修改后的字符串 $.trim($('#someFiled').val()); 2.遍历属性

jquery倒计时demo

原文:jquery倒计时demo 源代码下载地址:http://www.zuidaima.com/share/1550463776246784.htm

Java 多线程IO简单实用Demo

多线程主要作用是充分利用Cpu,而不在于它的乱序性.本Demo不讲它竞争什么的.之前看过乱序打印ABC的例子什么的,那些有意义吗? 本Demo 是多线程打印文件夹下的文件,主要实现是用数组存放文件,一个游标遍历. 我们需要考虑在什么时候加互斥访问,本例用synchronized . 先考虑单线程的流程:客户端启动-->读取文件下的文件放到数组(IO)--> 取游标打印 ,游标加1 -- > 改文件写文件(IO) -- 重复上两步至越界 -- 结束 多线程时显然需要在"取游标打印

JQuery AJAX Demo

JQuery AJAX Demo APP发展集团:347072638(HTML5,APP) 1.先看一个JQuery AJAX Demo HTML端: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

jQuery实用Ajax loading旋转指示器插件

spin.js是一款非常实用的jQuery Ajax loading spin旋转指示器插件.在页面进行ajax调用的时候,需要一个指示器来告诉用户当前正处于加载状态.该旋转指示器的作用就类似于一个无线循环的进度条. 通过该旋转指示器插件,你可以自定义它的密度.大小.旋转速度和旋转方向等属性,非常方便实用.该jQuery旋转指示器的特点有: 没有使用图片,纯css制作. 没有使用外部依赖. 可配置性强. 高分辨率. 在旧的IE浏览器中使用VML回退. 实用CSS3 @keyframe动画,通过s

JQuery实用技巧--学会你也是大神(1)——插件的制作技巧

  前  言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情.它是轻量级的js库,这是其它的js库所不及的,它兼容CSS3,还兼容各种常用浏览器. JQuery是一个快速的,简洁的JavaScript库,使用户能更方便地处理HTML documents.events.实现动画效果,

jQuery实用美化input 上传组建

下载插件 (5) 简要教程 jquery-filestyle是一款可以简单实用的表单文件上传域美化jQuery插件.该插件可以将表单的文件上传域转换为类似Bootstrap按钮组的样式.它提供了大量的data属性来控制文件上传域的样式,可以自定义按钮文本和图标等. 使用方法 使用该表单文件上传域美化插件需要引入jquery,jquery-filestyle.min.css和jquery-filestyle.min.js文件. <link href="css/jquery-filestyle