在官方网站下载包，下载不带有min的包

http://jquery.com/download/

案例一：使用JQ完成首页定时弹出广告图片

01_JQ入门

01_jQuery入门.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>jQuery入门</title>

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

		<script>

			$(function() {

				alert("hello jquery!");

			});

		</script>

	</head>

	<body>

	</body>

</html>

02_JQ页面加载与JS页面加载区别.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>JQ页面加载与JS页面加载区别</title>

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

				<script>

					window.onload=function()

					{

						alert("张三");

					}

					//传统的方式页面加载会存在覆盖问题，加载比JQ慢（整个页面加载完毕<包括里面的其他内容，比如图片>）

					window.onload=function()

					{

						alert("老王");

					}

					//JQ的加载比JS加载要快！（当整个DOM树结构绘制完毕就会加载）

					jQuery(document).ready(function()

					{

						alert("李四");

					});

					//JQ不存在覆盖问题，加载的时候是顺序执行

					$(document).ready(function()

					{

						alert("王五");

					});

					//简写方式

					$(function()

					{

						alert("汾九");

					});

				</script>

	</head>

	<body>

	</body>

</html>

03_JQ的获取.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>JQ的获取</title>

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

		<script>

			$(function() {

				//1.JS方式获取

				document.getElementById("btn").onclick = function() {

					location.href = "01_jQuery入门.html";

				}

				//2.JQ方式获取

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

					location.href = "01_jQuery入门.html";

				});

			})

		</script>

	</head>

	<body>

		<input type "button" value="点我有惊喜" id="btn" />

	</body>

</html>

02_DOM对象与JQ对象的转换

DOM对象与JQ对象的转换.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>DOM对象与JQ对象的转换</title>

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

		<script>

			function write1() {

				//1.JS的DOM操作

				document.getElementById("span1").innerHTML = "萌萌哒！";

				var spanEle = document.getElementById("span1");

				//将DOM对象转换成JQ对象

				$(spanEle).html("思密达");

			}

			$(function() {

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

					$("#span1").html("呵呵");

					//JQ对象向DOM对象转换方式一

					$("#span1").get(0).innerHTML = "美美哒！";

					//JQ对象向DOM对象转换方式二

					$("#span1")[0].innerHTML = "美美哒！";

				})

			})

		</script>

	</head>

	<body>

		<input type="button" value="JS写入" onclick="write1()" />

		<input type="button" value="JQ写入" /><br /> 班长：

		<span id="span1">你好呀！</span>

	</body>

</html>

Web05_jQuery的更多相关文章

随机推荐

  1. Fatal Error: Out of memory php内存溢出处理三种方法

    有时候我们在运行php程序的时候会发现 Fatal Error: Out of memory 这样的提示,这有可能是程序中用到了大量了变量和对象,导致分配的内存不够用. 修改php.ini文件里的me ...

  2. eclipse中安装Activiti插件

    由于公司网络问题,不能在线安装,下载到本地的插件,安装也是各种问题,后面终于找到能安装的插件包 1.下载eclipse activiti插件包 链接:https://pan.baidu.com/s/1 ...

  3. Idea发布项目到Docker

    一.Docker开启远程访问 [root@local host ~]# vi /lib/systemd/system/docker.service #修改ExecStart这行 ExecStart=/ ...

  4. 7.Go-用户信息和系统文件目录

    7.1.获取操作系统用户信息 (1)os包及子包功能 os/exec包,负责执行外部命令 os/singal对输入信息的访问 os/user通过名次或ID 查询用户账号 (2)在os/user中提供了 ...

  5. 清北学堂dp图论营游记day1

    讲课人: 老师对dp的理解是类似于分治思想,由小状态推出大状态.不同的是分治算法没有重叠子问题. dp把子问题越划越小,从而推出了基础状态.然后是dp方程,要满足简洁性,并且充分描述能够影响最后结果的 ...

  6. GoAccess安装及分析nginx实时日志

    GoAccess是一个基于终端的快速日志分析器.其核心思想是实时快速分析和查看Web服务器统计信息,而无需使用您的浏览器(如果您希望通过SSH快速分析访问日志,或者只是喜欢在终端中工作),终端输出是默 ...

  7. tp5中的return

    return 可以输出对象,但是不可以输出数组 class Index { public function index(Student $student) { $data = $student-> ...

  8. bytes和bytearray总结

    The core built-in types for manipulating binary data are bytes and bytearray. They are supported by ...

  9. 2018 计蒜之道-初赛 第一场 A-百度无人车

    百度一共制造了 nn 辆无人车,其中第 ii 辆车的重量为 a_i\ \mathrm{kg}ai​ kg. 由于车辆过重会增大轮胎的磨损程度,现在要给这 nn 辆车减轻重量.每将一辆车减轻 1\ \m ...

  10. TTTTTTTTTTTTTTTTTT POJ 2724 奶酪消毒机 二分匹配 建图 比较难想

    Purifying Machine Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5004   Accepted: 1444 ...