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. postman基础

    Postman使用场景: 开发接口的时候需要快速的调用接口,以便调试 测试的时候需要非常方便的调用接口,通过不同的参数去测试接口的输出 这些接口调用是需要保存下来的反复运行的 在运行过程中如果有断言( ...

  2. HTML Tag, 把 WCAG 的标准和语义网的目标进行代码上的体现

    1. 文档声明:<!Doctype> 其实这跟 WCAG 根本上连不上什么直接关系,但为了一个兼容性更好,特别是向后兼容的页面,我推荐你这样写: <!Doctype html> ...

  3. 内联元素的盒子模型与文档流定位padding属性

            内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px}   与     span{width:100 ...

  4. C++ 对象间通信框架 V2.0 ××××××× 之（三）

    类定义:CSignalSlot ======================================================================= // SignalSlo ...

  5. 解决IDEA输入法输入中文候选框不显示问题（亲测谷歌拼音完美解决问题）

    解决方法:关掉idea,进入idea的安装目录找到jre64文件夹重命名为jre642(随便什么名字都行)如下图 然后找到jdk安装目录下的jre文件复制到上图idea的安装目录下并改名为jre64 ...

  6. Python分析《武林外传》 -----转载

    转载原链接:http://www.cnblogs.com/fredkeke/p/8328387.html 我一向比较喜欢看武侠电影.小说,但是06年武林外传开播的时候并没有追剧,简单扫几眼之后发现他们 ...

  7. DAY 6 TEST

    test T1 样例输入 样例输出 答案选择u,v作为关键点 暴力的话k^2枚举跑最短路,寻找最小值就行了 50pts 考虑优化枚举量 因为答案的两个点是不同的点,所以编号的二进制表示中至少一位不同 ...

  8. react 类样式的一些使用方法

    在 css类不想使用穿透的状态,可以再webpack配置  modules:true,它位于css-loader下,此外调用css的类时可能会自动生成一个hash值,这时候如果想显示本来的名字,可以打 ...

  9. windows 10中使用命令行关掉占用指定端口的程序

    通过netstat -ano与findstr命令结合查询到带有9080端口的监听信息,图中最后一列为监听程序的PID 通过tasklist命令与findstr命令结合查询到指定PID对应的应用程序 使 ...

  10. 《JavaScript 高级程序设计》

    第 3 章 基本概念 3.5.2 位操作符 ECMAScript 中所有数值都是以 IEEE-754 64 位格式存储,但位操作符并不直接操作 64 位的值.而是先将 64 位的值转换成 32 位的整 ...