在官方网站下载包，下载不带有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. context容器上下文件

    在web项目中想要获取哪个bean,得先得到容器上下文context public class MyLoaderListener extends ContextLoader implements Se ...

  2. idea 注册码 2月

    https://blog.csdn.net/zhw0596/article/details/81394870 不显示.java后缀 https://segmentfault.com/q/1010000 ...

  3. JS---client系列

    offset系列:获取元素的宽,高,left,top, offsetParent   offsetWidth:元素的宽,有边框 offsetHeight:元素的高,有边框 offsetLeft:元素距 ...

  4. inode、软硬链接

    关于inode是什么,可以看这篇文章:http://www.cnblogs.com/adforce/p/3522433.html 如何查看inode ll -di /boot / /app查看文件和文 ...

  5. mysql事务,视图,触发器,存储过程与备份

    .事务 通俗的说,事务指一组操作,要么都执行成功,要么都执行失败 思考: 我去银行给朋友汇款, 我卡上有1000元, 朋友卡上1000元, 我给朋友转账100元(无手续费), 如果,我的钱刚扣,而朋友 ...

  6. poj2279 Mr. Young's Picture Permutations[勾长公式 or 线性DP]

    若干人左对齐站成最多5行,给定每行站多少个,列数从第一排开始往后递减.要求身高从每排从左到右递增(我将题意篡改了便于理解233),每列从前向后递增.每个人身高为1...n(n<=30)中的一个数 ...

  7. 我说CMMI之四：CMMI的表示方法--转载

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/dylanren/article/deta ...

  8. linux yum的配置文件 repo文件详解

    linux yum的配置文件 repo文件详解 什么是repo文件?repo文件是Fedora中yum源(软件仓库)的配置文件,通常一个repo文件定义了一个或者多个软件仓库的细节内容,例如我们将从哪 ...

  9. 【winform-窗体快捷键】定义功能窗体快捷键，非全局

    这里的快捷键并非系统全局快捷键.仅是普通的当窗体在焦点内发生.有很多种方法,这里列举几种项目中使用到的方法. Alt+*(一般控件快捷键) 这个比较简单,只需为该控件的Text属性声明时加上”(&am ...

  10. QTCreator:QSS语法高亮(QSS Syntax highlight)

    由于QSS几乎等同CSS[1]语法,所以我们设置有 QT 语法高亮: Qtcreator QSS syntax highlight setting: Qt Creator QSS 语法交互设置:QTC ...