JQ基础——JQ的简单使用

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<style>

			.w{}

		</style>

	</head>

	<script type="text/javascript" src="js/jquery.min.js" ></script>

	<body>

	1.	弹窗

		<script>

			$(function(){

				alert("JQ超简")

			})

		</script>

	2.	修改文本

		<div>张山</div>

		<script>

			$(function(){

				$("div").html("李四")

			})

		</script>

	3.	点击事件

		<button id="btn">点我</button>

		<script>

			$(function(){

				$("#btn").click(function(){

					$("#btn").html("修改成功")

				});

			});

		</script>

	4.图片显示/隐藏  （自建效果）

	<img src="img/bootstrap-mdo-sfmoma-01.jpg" id="img" width="200px"> <br />

	<button id="btn1">显示</button><button id="btn2">隐藏</button>

<a href="#" id="btn1">显示</a><a href="#" id="btn2">隐藏</a>

	<script>

		$(function(){

			$("#btn1").click(function(){

				$("#img").show(2000);

				$("#img").fadeOut(2000);//渐出

				$("#img").slideDown(2000);//向下出

			});

		});

		$(function(){

			$("#btn2").click(function(){

				$("#img").hide(2000);

				$("#img").fadeIn(2000);//渐入

				$("#img").slideUp(2000);//下上藏

			})

		})

		自建效果

		$(function(){

			$("#btn1").click(function(){

			$("#img").animate({

				width: "400px",

				opacity:"0.1" ,

			},3000)

		})

	})

	</script>

	5.Ad广告。定时弹出。

	<img src="img/bootstrap-mdo-sfmoma-01.jpg" id="img" />

	<script>

		$(function(){

			setTimeout("hideAd()",3000);

		});

		function showAd(){

			$("#img").show();

		}

		function hideAd(){

			$("#img").hide();

			setTimeout("showAd()",3000);

		}

	</script>

	</body>

</html>

JQ的简单使用（基础）——————JQ的更多相关文章

  1. JS模式：jq中简单的模式--》采摘自js设计（tomxu_version）

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  2. 【jq】c#零基础学习之路（5）自己编写简单的Mylist<T>

    public class MyList<T> where T : IComparable { private T[] array; private int count; public My ...

  3. 基础JQ框架

    最近在研究jq的插件写法,看jq的源码.这里梳理一个最基本的JQ框架,从jq1.7提取.足够简单 <!DOCTYPE html> <html lang="en"& ...

  4. JQ写简单的伸缩菜单（内附效果图和源代码）

    效果如图: JQ代码就那么几句, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. jq,js简单实现类似Angular.js数据绑定效果

    刚了解了下Angular.js,发现Angular.js绑定数据方面非常方便,套下教程demo: <div ng-app="myApp" ng-controller=&quo ...

  6. 基于JQ的简单左右轮播图

    // 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...

  7. jq实现简单的二级联动下拉框

    1 效果图 2 html <!DOCTYPE html> <html lang="en"> <head>     <meta charse ...

  8. jq实现简单购物车增删功能

    https://www.cnblogs.com/sandraryan/ jq实现购物车功能 点击+- 增减数量,计算价格: 点击删除,删除当前行(商品) 点击- ,减到0 询问是否删除商品 点击全选 ...

  9. 【jq】c#零基础学习之路（1）Hello World！

    从今天起我会持续发表,这个就是一个日记型的,学习编程是枯燥的,况且我们还是零基础. 学前准备 1.编译环境 vs2010.vs2012.vs2015...(本人用的是vs2010旗舰版).vs2010 ...

随机推荐

  1. python-jsonpath、findall返回值提取

    findall import re """ "d"表示取数字0-9, "D"表示不要数字, "w"在正则里面代 ...

  2. 词根——rect

    词根rect:直 线索链 来源于简单词right righta.正确的,直的,右的 (正和直是不分的)n. 右,权利ad.正确地,在右边 rectifyv. 纠正,整顿把它直起来 rect+ify=直 ...

  3. Redis实战（十一）Redis面试题

    序言 单线程的redis为什么这么快? 1.纯内存操作不需要进行磁盘的 IO 2.单线程操作避免了频繁上下文切换 3.采用非阻塞的多路I/O复用模型 什么是路I/O复用模型? 核心是监听socket, ...

  4. 【bzoj2733】[HNOI2012]永无乡

    题目描述: 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以从一个岛 到 ...

  5. Spring Cloud架构教程 （七）消息驱动的微服务（核心概念）【Dalston版】

    下图是官方文档中对于Spring Cloud Stream应用模型的结构图.从中我们可以看到,Spring Cloud Stream构建的应用程序与消息中间件之间是通过绑定器Binder相关联的,绑定 ...

  6. 移动端与PHP服务端接口通信流程设计(基础版)

    转载自:http://blog.snsgou.com/post-766.html --->非开放性平台 --->公司内部产品 接口特点汇总: 1.因为是非开放性的,所以所有的接口都是封闭的 ...

  7. 重新理解了重定向，利用重定向可以防止用户重复提交表单（兼谈springmvc重定向操作）

    自己用springmvc框架有一段时间了,但是都还一直分不清楚什么时候应该用转发,什么时候应该用重定向.可能用转发的情形太多了,以致于自己都忘记了还有重定向. 当用户提交post请求之后,刷新页面就会 ...

  8. LeetCode 47——全排列 II

    1. 题目 2. 解答 在 LeetCode 46--全排列 中我们已经知道,全排列其实就是先确定某一个位置的元素,然后余下就是一个子问题.在那个问题中,数据没有重复,所以数据中的任意元素都可以放在最 ...

  9. JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏

    JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏 window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 基本语法: ...

  10. 关于崩溃报告的日志以及dump文件

    在用户使用软件的过程当中突然产生软件崩溃的问题,必须采取相关的措施去拦截崩溃产生的原因,这有助于程序员解决此类崩溃的再次发生.特别是有些难以复现的崩溃,不稳定的崩溃,更有必要去调查崩溃产生的原因.一般 ...