在官方网站下载包，下载不带有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. oracle 数据库启动停止小结

    ---登录sqlplus sqlplus  /nolog conn / as sysdba shutdown immediate --启动数据库有两种方式 startup 会自动完成重启数据库的所有步 ...

  2. 有趣的动画swf 小鼠吃豆子

    今天发现一个有趣的动画swf,小鼠吃豆子,呵呵 <object width="240" height="206" data="http://cd ...

  3. Linux 内核源代码的几个C语言技巧

    1.#define中使用do{statement}while(0)保证statement无论在何处都能正确执行一次2.将链表操作抽象出来,与宿主结果相互独立.所有的链表操作都作用与list_head, ...

  4. JAVA》eclipse——(二)Tomcat

    一.进入www.apache.org网页(注:图中所有箭头都依据从左到右,从上到下的规则) 二.向下拉网页,然后如下图操作 三.进入之后,在网页的左边选择想要的Tomcat版本 四.选择与本机相同系统 ...

  5. php的工作原理

    php有一种专门解释php的引擎称之为zend引擎 对于源程序,php引擎全部读入,而后进行词法分析,如果遇到不认识的词,就报parse_error (词法错误后终止分析) 词法分析后进入语法分析:语 ...

  6. sql语言积累

    Persons 表: Id LastName FirstName Address City 1 Adams John Oxford Street London 2 Bush George Fifth ...

  7. 【C#-算法】根据生日自动计算年龄_DataTime 的 DateDiff 方法

    dateTimePicker1.Value出生日期控件的值 long BirthDay = DateAndTime.DateDiff(DateInterval.Year, dateTimePicker ...

  8. 【leetcode】1268. Search Suggestions System

    题目如下: Given an array of strings products and a string searchWord. We want to design a system that su ...

  9. Angular7和leaflet一起使用时的作用域不一致

    Angular7和leaflet一起使用时的作用域不一致问题,使用(e) =>可以完美解决. 使用原始的JavaScript: map.on("click", functio ...

  10. [转帖]H5 手机 App 开发入门：技术篇

    H5 手机 App 开发入门:技术篇   http://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html 阮一峰老师的文 ...