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. 解决Intellij IDEA中项目不能识别yml配置文件

    问题:能读取资源路径下的properties配置文件但是不能读yml配置文件 因为无法读取配置yml配置文件,所以不能配置bean,导致项目启动报错. 解决方法: 在VM options中设置虚拟机加 ...

  2. 奇偶选择器：使用odd和even属性实现表格单双行颜色相间和不同

    一.奇偶选择器 表格在呈现数据的时候我们为了方便观看,而隔行显示不同的颜色,虽然可以用用类选择器 class实现这种效果,但是未免太过麻烦,为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器 ...

  3. VGA驱动时序说明

    根据不同的显示器分辨率,需要不同的刷新频率. 其中显示模式中@60表示显示器1秒钟刷新60帧. 其中时钟(MHz),表示FPGA输出给显示器的时钟频率.需要我们配置PLL的时钟频率为对应频率. 其中行 ...

  4. prefetches

    用于设置预请求的所有url的列表,该部分URL,会在进入小程序后自动发起请求(优于开发者代码加载).当开发者再次发起request请求时可以增加cache参数,如果配置的prefetch请求已返回,则 ...

  5. HDU 4300 Clairewd's message ( 拓展KMP )

    题意 : 给你一个包含26个小写字母的明文密文转换信息字符串str,第一个表示'a'对应的密文是str[0].'b'对应str[1]……以此类推.接下来一行给你一个另一个字符串,这个字符串由密文+明文 ...

  6. js判断浏览器的类型

    我们很多时候都需要判断浏览器,下面就是一些常用的判断 var ua = navigator.userAgent.toLowerCase(); //用来判断移动端类型 var isWeixin = /M ...

  7. SQL报错：ORA-00911:无效的字符错误

    转载自:https://blog.csdn.net/huangyanlong/article/details/38096469 *)ORA-00911:无效的字符错误——由编译环境下一个小错误引起.S ...

  8. Hash算法原理以及HashCode深入理解

    Java中的Collection有两类,一类是List,一类是Set.List内的元素是有序的,元素可以重复.Set元素无序,但元素不可重复.要想保证元素不重复,两个元素是否重复应该依据什么来判断呢? ...

  9. JavaScript code modules

    https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules Non-standardThis feature is ...

  10. 数位dp好题整理+自己wa过的细节记录

    花(fa)神的数论题 三倍经验:烦人的数学作业 windy数 手机号码 同类分布(博客先鸽着) 板子固然好,细节无限多. 花式wa题法,警示后来人. 1.手残害人不浅 (蒟蒻的我掉坑里不止一次) 2. ...