在官方网站下载包，下载不带有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. 从subversion开始(svn安装配置全过程（+全套安装文件与配置文件）)…..

    从subversion开始(svn安装配置全过程(+全套安装文件与配置文件))-.. 博客分类: 工具使用 SVNsubversion配置管理Apache应用服务器  </div> 花了一 ...

  2. Charles中使用Map Local提高测试效率

    书接上回,上次说到Charles中可以使用修改返回值来模拟接口返回,这次我们来说一下Charles中另外一个强大的功能. 我们用手机连接Charles,具体可以参考上一篇<借助Charles来测 ...

  3. Linux_GDB调试学习笔记

    点击直接跳转 第01课:调试信息与调试原理 第02课:启动GDB调试 第03课:GDB常用的调试命令概览 第04课:GDB常用命令详解(上) 第05课:GDB常用命令详解(中) 第06课:GDB 常用 ...

  4. 数组与pandas模块

    '''数组与pandas模块''' # numpy模块:用来做数据分析,对numpy数组(既有行又有列)--矩阵进行科学运算 # tensorflow/pytorch(数学专业/物理专业/计科专业硕士 ...

  5. vue - router + iView 的使用（简单例子）

    所使用的工具:谷歌浏览器.Nodejs(自带npm).HBuilder 0.要先安装Nodejs,下载安装即可 0-1.安装vue-cli,打开cmd 输入 npm install -g @vue/c ...

  6. tp6中使用微信支付sdk

    一.下载微信支付sdk 二.将lib文件夹下的文件复制到目录:extend->WxPay 将example文件夹下的WxPay.Config.php文件也复制到:extend->WxPay ...

  7. WTL自定义控件:SubclassWindow的实现

    自定义了一个edit类如下: class CCheckEditEx : public CWindowImpl< CCheckEditEx, CEdit > 其SubclassWindow函 ...

  8. Python 练习实例3

    Python 练习实例3 题目:一个整数,它加上100后是一个完https://www.xuanhe.net/全平方数,再加上168又是一个完全平方数,请问该数是多少? 程序分析: 假设该数为 x. ...

  9. java8中规范的四大函数式接口

    java8中规范的四大函数式接口: 1.Consumer<T>   :消费型接口    void accept(T t); 2.Supplier<T>      :供给型接口  ...

  10. Unity3D_(游戏)双人3D坦克_简易版

    双人3D坦克实现 player1: WSAD控制上下左右 空格键发射炮弹 player2: IKJL可控制上下左右 B键发射炮弹 每个坦克只有100hp,子弹击中1次扣30hp,hp时时显示在坦克上 ...