在官方网站下载包，下载不带有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. poj3728 The merchant[倍增]

    给一棵点带权树,$q$次询问,问树上$x$到$y$路径上,两点权之差(后面的减去前面的)的最大值. 这个是在树链上找点,如果沿路径的最小值在最大值之前出现那肯定答案就是$maxx-minx$,但是反之 ...

  2. Android 热修复（一）

    名词: dex:java文件编译class 然后生成 dex文件在Android上运行: 1.dex分包: 2.找出出现问题的dex文件进行替换操作 3.下载dex文件,静默替换有问题的dex文件,进 ...

  3. vue2.0 移动端，下拉刷新，上拉加载更多 封装组件

    前言 在做移动端的避免不了 下拉刷新,上拉加载 直接上代码吧,哈哈 组件里: <template lang="html"> <div class="yo ...

  4. jdk8流list转Map

    /** * */ package com.chuanglan.demo; import java.util.ArrayList; import java.util.Arrays; import jav ...

  5. C#抽象类怎么调试

    本文出自:https://www.cnblogs.com/2186009311CFF/p/11919030.html C#抽象类怎么调试 按F11调试 参考链接: 快捷键:https://www.cn ...

  6. Greenplum 日常维护

    1. 数据库启动:gpstart 常用可选参数: -a : 直接启动,不提示终端用户输入确认 -m:只启动master 实例,主要在故障处理时使用 2. 数据库停止:gpstop: 常用可选参数:-a ...

  7. chromedriver.exe，自动化web, 安装谷歌驱动，以及可能遇到的坑

    1.下载谷歌驱动:chromedriver.exe http://chromedriver.storage.googleapis.com/index.html (下载驱动的链接) 2.把下载的chro ...

  8. ueditor+实现word图片自动上传

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  9. BZOJ 5084: hashit 后缀自动机(原理题)

    比较考验对后缀自动机构建过程的理解. 之前看题解写的都是树链的并,但是想了想好像可以直接撤销,复杂度是线性的. 自己想出来的,感觉后缀自动机的题应该不太能难倒我~ 注意:一定要手画一下后缀自动机的构建 ...

  10. jQuery_CSS类操作

    下面讲述jQuery操作css类,进行类的添加,移除,以及前两项功能的结合操作. <!DOCTYPE html> <html> <head> <meta ch ...