在官方网站下载包，下载不带有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. 屏蔽iOS升级方法

    1.iPhone或者iPad使用safari浏览器打开http://d.updater.i4.cn/i4tools7/temp/tvos.mobileconfig 2.点击[允许] 3.进入[通用]- ...

  2. 记一次生产环境nginx图片上传不了的问题

    在server节点目录下配置: client_max_body_size 8M; client_body_buffer_size 8M; 不过还是不能上传就执行下面这条命令: cd /var/lib/ ...

  3. Visual Studio右侧缩略图

    打开Visual Studio→工具→选项 点击确定,完成!Enjoy!

  4. luogu P1330 封锁阳光大学 x

    P1330 封锁阳光大学 题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构 ...

  5. luoguP1772 [ZJOI2006]物流运输 x

    P1772 [ZJOI2006]物流运输 题目描述 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线 ...

  6. Python3学习笔记（十四）：可迭代对象、迭代器和生成器

    记得在刚开始学Python的时候,看到可迭代对象(iterable).迭代器(iterator)和生成器(generator)这三个名词时,完全懵逼了,根本就不知道是啥意识.现在以自己的理解来详解下这 ...

  7. 在spring官网上下载历史版本的spring插件，springsource-tool-suite

    目前spring官网(https://spring.io/tools3/sts/all)上可下载的spring插件只有: ECLIPSE ARCHIVE SIZE 4.9.0 springsource ...

  8. js模拟24小时的倒计时效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. input选择框默认样式修改

    input选择框是无法直接修改样式,我们只能间接来改变它样式. 原理:用图片来代替原来的input选择框,原来的input选择框定位到图片上方并让它opacity为0,鼠标点击时用js来改变图片,这样 ...

  10. Spring boot之添加JSP支持

    大纲 (1) 创建Maven web project: (2) 在pom.xml文件添加依赖 (3) 配置application.properties支持jsp (4) 编写测试Controller ...