在官方网站下载包，下载不带有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. ansible简要说明

    说明 Ansible是一个python编写模型驱动的配置管理器,支持多节点发布.远程任务执行.默认使用 SSH 进行远程连接.无需在被管理节点上安装附加软件,可使用各种编程语言进行扩展.本文基于ans ...

  2. 003-centos7:rsyslog简单配置客户端和服务器端

    实现把一个主机作为客户端,把日志发送到指定的服务器端: [服务器端] 开放tcp端口,udp端口: vim /etc/rsyslog.conf: # Provides UDP syslog recep ...

  3. Gym - 102040B Counting Inversion (数位dp)

    题意:求[a,b]区间内的数字中正序对的个数. 具体思路参考: https://blog.csdn.net/weixin_43135318/article/details/88061396 https ...

  4. Linux使用技巧汇总

    Debian是我日常使用的桌面系统,这里记录了我在使用Debian和其他Linux时所有的问题和解决办法,以及一些其他的心得体会. 向Debian致敬! 找回桌面系统关机按钮 在/etc/polkit ...

  5. 【C#-去空格】去掉字符串后空字符串\0\0\0\0\0\0

    使用  变量.Replace(@“\0”,"") string str="abcde\0\0\0\0\0\0"; str=str.Replace(@" ...

  6. OpenCV笔记（5）(定位票据并规范化、调库扫描文本)

    一.定位和变换票据 定位照片中的不规范票据或矩形文本,并将其变换为正规矩形,以供OCR识别. # -*- coding:utf-8 -*- __author__ = 'Leo.Z' import cv ...

  7. Sql Service中的分页

    创建存储过程如下: CREATE PROCEDURE [dbo].[sp_GetPageList] ), --表名 ) = '*', --字段名(全部字段为*) ), --排序字段(必须!支持多字段) ...

  8. C语言 - 堆和栈

    一.堆内存 1.就是程序员手动管理的一块内存,在C语言中,可以理解为用malloc.realloc等申请空间的一些函数,这些函数所申请的空间就是堆空间 2.C语言中,堆空间是申请和释放 malloc/ ...

  9. System limit for number of file watchers reached

    https://blog.csdn.net/weixin_43760383/article/details/84326032 sudo xed /etc/sysctl.conf 在最下添加 fs.in ...

  10. 导数与微分简单总结（updated）

    只讲一些导数在OI中的简单应用,特别基础的东西,不会很详细也不会很全面. 导数的定义 设函数\(y=f(x)\)在点\(x_0\)的某个邻域内有定义,当自变量\(x\)在\(x_0\)处有增量\(Δx ...