JavaScript与JQuery学习笔记

最新推荐文章于 2023-02-22 16:02:04 发布

CharmDeer

最新推荐文章于 2023-02-22 16:02:04 发布

阅读量248

点赞数 2

分类专栏： Web前端

本文链接：https://blog.csdn.net/m0_57249797/article/details/118441484

版权

Web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JavaScript

今日任务
1.JavaScript 语言
课堂笔记

1、JavaScript 介绍

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript 代码。
JS 是Netscape 网景公司的产品，最早取名为LiveScript;为了吸引更多java 程序员。更名为JavaScript。
JS 是弱类型，Java 是强类型。

特点：

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释JS 的浏览器都可以执行，和平台无关）

2、JavaScript 和html 代码的结合方式

2.1、第一种方式
只需要在head 标签中，或者在body 标签中，使用script 标签来书写JavaScript 代码
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	// alert 是JavaScript 语言提供的一个警告框函数。
	// 它可以接收任意类型的参数，这个参数就是警告框的提示信息
	alert("hello javaScript!");
	</script>
</head>
	<body>
	</body>
</html>

2.2、第二种方式
使用script 标签引入单独的JavaScript 代码文件
文件目录：
在这里插入图片描述
html 代码内容：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>Title</title>
<!--
现在需要使用script 引入外部的js 文件来执行
src 属性专门用来引入js 文件路径（可以是相对路径，也可以是绝对路径）
script 标签可以用来定义js 代码，也可以用来引入js 文件
但是，两个功能二选一使用。不能同时使用两个功能
-->
	<script type="text/javascript" src="1.js"></script>
	<script type="text/javascript">
	alert("国哥现在可以帅了");
	</script>
</head>
<body>
</body>
</html>

4、变量
什么是变量？变量是可以存放某些值的内存的命名。
JavaScript 的变量类型：
在这里插入图片描述
JavaScript 里特殊的值：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	var i;
	// alert(i); // undefined
	i = 12;
	// typeof()是JavaScript 语言提供的一个函数。
	// alert( typeof(i) ); // number
	i = "abc";
	// 它可以取变量的数据类型返回
	// alert( typeof(i) ); // String
	var a = 12;
	var b = "abc";
	alert( a * b ); // NaN 是非数字，非数值。
	</script>
</head>
<body>
</body>
</html>

5.3、关系（比较）运算
在这里插入图片描述
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	var a = "12";
	var b = 12;
	alert( a == b ); // true
	alert( a === b ); // false
	</script>
</head>
<body>
</body>
</html>

7.4、逻辑运算
在这里插入图片描述
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	/* 在JavaScript 语言中，所有的变量，都可以做为一个boolean 类型的变量去使用。
	0 、null、undefined、””(空串) 都认为是false；*/
	// var a = 0;
	// if (a) {
	// alert("零为真");
	// } else {
	// alert("零为假");
	// }
	// var b = null;
	// if (b) {
	// alert("null 为真");
	// } else {
	// alert("null 为假");
	// }
	// var c = undefined;
	// if (c) {
	// alert("undefined 为真");
	// } else {
	// alert("undefined 为假");
	// }
	// var d = "";
	// if (d) {
	// alert("空串为真");
	// } else {
	// alert("空串为假");
	// }
	/* && 且运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值*/
	var a = "abc";
	var b = true;
	var d = false;
	var c = null;
	// alert( a && b );//true
	// alert( b && a );//true
	// alert( a && d ); // false
	// alert( a && c ); // null
	/* || 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值*/
	// alert( d || c ); // null
	// alert( c|| d ); //false
	// alert( a || c ); //abc
	// alert( b || c ); //true
	</script>
</head>
<body>
</body>
</html>

在这里插入图片描述
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	var arr = [true,1]; // 定义一个空数组
	// alert( arr.length ); // 0
	arr[0] = 12;
	// alert( arr[0] );//12
	// alert( arr.length ); // 0
	// javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
	arr[2] = "abc";
	alert(arr.length); //3
	// alert(arr[1]);// undefined
	// 数组的遍历
	for (var i = 0; i < arr.length; i++){
	alert(arr[i]);
	}
	</script>
</head>
<body>
</body>
</html>

在这里插入图片描述
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	// 定义一个无参函数
	function fun(){
	alert("无参函数fun()被调用了");
	}
	// 函数调用===才会执行
	// fun();
	function fun2(a ,b) {
	alert("有参函数fun2()被调用了a=>" + a + ",b=>"+b);
	}
	// fun2(12,"abc");
	// 定义带有返回值的函数
	function sum(num1,num2) {
	var result = num1 + num2;
	return result;
	}
	alert( sum(100,50) );
	</script>
</head>
<body>
</body>
</html>

函数的第二种定义方式，格式如下：
使用格式如下：
var 函数名= function(形参列表) { 函数体}
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	var fun = function () {
	alert("无参函数");
	}
	// fun();
	var fun2 = function (a,b) {
	alert("有参函数a=" + a + ",b=" + b);
	}
	// fun2(1,2);
	var fun3 = function (num1,num2) {
	return num1 + num2;
	}
	alert( fun3(100,200) );
	</script>
</head>
<body>
</body>
</html>

注：在Java 中函数允许重载。但是在JS 中函数的重载会直接覆盖掉上一次的定义

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	function fun() {
	alert("无参函数fun()");
	}
	function fun(a,b) {
	alert("有参函数fun(a,b)");
	}
	fun();
	</script>
</head>
<body>
</body>
</html>

8.2、函数的arguments 隐形参数（只在function 函数内）

就是在function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像java 基础的可变长参数一样。
public void fun( Object … args );
可变长参数其他是一个数组。

那么js 中的隐形参数也跟java 的可变长参数一样。操作类似数组。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	function fun(a) {
	alert( arguments.length );//可看参数个数
	alert( arguments[0] );
	alert( arguments[1] );
	alert( arguments[2] );
	alert("a = " + a);
	for (var i = 0; i < arguments.length; i++){
			alert( arguments[i] );
	}
	alert("无参函数fun()");
	}
	// fun(1,"ad",true);
	// 需求：要求编写一个函数。用于计算所有参数相加的和并返回
	function sum(num1,num2) {
	var result = 0;
	for (var i = 0; i < arguments.length; i++) {
	if (typeof(arguments[i]) == "number") {
		result += arguments[i];
		}
	}
	return result;
}
	alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
	</script>
</head>
<body>
</body>
</html>

9、JS 中的自定义对象（扩展内容）

在这里插入图片描述
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	// 对象的定义：
	// var 变量名= new Object(); // 对象实例（空对象）
	// 变量名.属性名= 值; // 定义一个属性
	// 变量名.函数名= function(){} // 定义一个函数
	var obj = new Object();
	obj.name = "华仔";
	obj.age = 18;
	obj.fun = function () {
	alert("姓名：" + this.name + " , 年龄：" + this.age);
}
	// 对象的访问：
	// 变量名.属性/ 函数名();
	// alert( obj.age );
	obj.fun();
	</script>
</head>
<body>
</body>
</html>

在这里插入图片描述
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	// 对象的定义：
	// var 变量名= { // 空对象
	// 属性名：值, // 定义一个属性
	// 属性名：值, // 定义一个属性
	// 函数名：function(){} // 定义一个函数
	// };
	var obj = {
		name:"国哥",
		age:18,
		fun : function () {
	alert("姓名：" + this.name + " , 年龄：" + this.age);
	}
};
	// 对象的访问：
	// 变量名.属性/ 函数名();
	alert(obj.name);
	obj.fun();
	</script>
</head>
<body>
</body>
</html>

在这里插入图片描述
onload 加载完成事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript">
	// onload 事件的方法
	function onloadFun() {
		alert('静态注册onload 事件，所有代码');
	}
	// onload 事件动态注册。是固定写法
	window.onload = function () {
		alert("动态注册的onload 事件");
	}
	</script>
</head>
<!--静态注册onload 事件
onload 事件是浏览器解析完页面之后就会自动触发的事件
<body οnlοad="onloadFun();">
-->
<body>
</body>
</html>

onclick 单击事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick 事件");
}
// 动态注册onclick 事件
window.onload = function () {
// 1 获取标签对象
/*
* document 是JavaScript 语言提供的一个对象（文档）<br/>
* get 获取
* Element 元素（就是标签）
* By 通过。。由。。经。。。
* Id id 属性
*
* getElementById 通过id 属性获取标签对象
**/
var btnObj = document.getElementById("btn01");
// alert( btnObj );
// 2 通过标签对象.事件名= function(){}
btnObj.onclick = function () {
alert("动态注册的onclick 事件");
}
}
</script>
</head>
<body>
<!--静态注册onClick 事件-->
<button onclick="onclickFun();">按钮1</button>
<button id="btn01">按钮2</button>
</body>
</html>

onblur 失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 静态注册失去焦点事件
function onblurFun() {
// console 是控制台对象，是由JavaScript 语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
// log() 是打印的方法
console.log("静态注册失去焦点事件");
}
// 动态注册onblur 事件
window.onload = function () {
//1 获取标签对象
var passwordObj = document.getElementById("password");
// alert(passwordObj);
//2 通过标签对象.事件名= function(){};
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
</body>
</html>

onchange 内容发生改变事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("女神已经改变了");
}
window.onload = function () {
//1 获取标签对象
var selObj = document.getElementById("sel01");
// alert( selObj );
//2 通过标签对象.事件名= function(){}
selObj.onchange = function () {
alert("男神已经改变了");
}
}
</script>
</head>
<body>
请选择你心中的女神：
<!--静态注册onchange 事件-->
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>芳芳</option>
<option>佳佳</option>
<option>娘娘</option>
</select>
请选择你心中的男神：
<select id="sel01">
<option>--男神--</option>
<option>国哥</option>
<option>华仔</option>
<option>富城</option>
</select>
</body>
</html>

onsubmit 表单提交事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
// 静态注册表单提交事务
function onsubmitFun(){
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return flase;
}
window.onload = function () {
//1 获取标签对象
var formObj = document.getElementById("form01");
//2 通过标签对象.事件名= function(){}
formObj.onsubmit = function () {
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<!--return false 可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>

在这里插入图片描述
10.1、Document 对象（*****重点）

那么html 标签要对象化怎么办？

<body>
	<div id="div01">div01</div>
</body>

在这里插入图片描述
10.4、Document 对象中的方法介绍（*****重点）

在这里插入图片描述
注：

document 对象的三个查询方法，如果有id 属性，优先使用getElementById 方法来进行查询
如果没有id 属性，则优先使用getElementsByName 方法来进行查询
如果id 属性和name 属性都没有最后再按标签名查getElementsByTagName

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

getElementById 方法示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
/*
* 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
* 验证的规则是：必须由字母，数字。下划线组成。并且长度是5 到12 位。
* */
function onclickFun() {
// 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
var usernameObj = document.getElementById("username");
// [object HTMLInputElement] 它就是dom 对象
var usernameText = usernameObj.value;
// 如何验证字符串，符合某个规则，需要使用正则表达式技术
var patt = /^\w{5,12}$/;
/*
* test()方法用于测试某个字符串，是不是匹配我的规则，
* 匹配就返回true。不匹配就返回false.
* */
var usernameSpanObj = document.getElementById("usernameSpan");
// innerHTML 表示起始标签和结束标签中的内容
// innerHTML 这个属性可读，可写
usernameSpanObj.innerHTML = "国哥真可爱！";
if (patt.test(usernameText)) {
// alert("用户名合法！");
// usernameSpanObj.innerHTML = "用户名合法！";
usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
} else {
// alert("用户名不合法！");
// usernameSpanObj.innerHTML = "用户名不合法！";
usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" value="wzg"/>
<span id="usernameSpan" style="color:red;">
</span>
<button onclick="onclickFun()">较验</button>
</body>
</html>

getElementsByName 方法示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 全选
function checkAll() {
// 让所有复选框都选中
// document.getElementsByName();是根据指定的name 属性查询返回多个标签对象集合
// 这个集合的操作跟数组一样
// 集合中每个元素都是dom 对象
// 这个集合中的元素顺序是他们在html 页面中从上到下的顺序
var hobbies = document.getElementsByName("hobby");
// checked 表示复选框的选中状态。如果选中是true，不选中是false
// checked 这个属性可读，可写
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = true;
}
}
//全不选
function checkNo() {
var hobbies = document.getElementsByName("hobby");
// checked 表示复选框的选中状态。如果选中是true，不选中是false
// checked 这个属性可读，可写
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = false;
}
}
// 反选
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = !hobbies[i].checked;
// if (hobbies[i].checked) {
// hobbies[i].checked = false;
// }else {
// hobbies[i].checked = true;
// }
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp" checked="checked">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>

getElementsByTagName 方法示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 全选
function checkAll() {
// document.getElementsByTagName("input");
// 是按照指定标签名来进行查询并返回集合
// 这个集合的操作跟数组一样
// 集合中都是dom 对象
// 集合中元素顺序是他们在html 页面中从上到下的顺序。
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++){
inputs[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="cpp" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>

createElement 方法示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
// 现在需要我们使用js 代码来创建html 标签，并显示在页面上
// 标签的内容就是：<div>国哥，我爱你</div>
var divObj = document.createElement("div"); // 在内存中<div></div>
var textNodeObj = document.createTextNode("国哥，我爱你"); // 有一个文本节点对象#国哥，我
爱你
divObj.appendChild(textNodeObj); // <div>国哥，我爱你</div>
// divObj.innerHTML = "国哥，我爱你"; // <div>国哥，我爱你</div>,但，还只是在内存中
// 添加子元素
document.body.appendChild(divObj);
}
</script>
</head>
<body>
</body>
</html>

10.5、节点的常用属性和方法
节点就是标签对象
在这里插入图片描述
练习：05.DOM 查询练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom 查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
//1.查找#bj 节点
document.getElementById("btn01").onclick = function () {
var bjObj = document.getElementById("bj");
alert(bjObj.innerHTML);
}
//2.查找所有li 节点
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
var lis = document.getElementsByTagName("li");
alert(lis.length)
};
//3.查找name=gender 的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
var genders = document.getElementsByName("gender");
alert(genders.length)
};
//4.查找#city 下所有li 节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
//1 获取id 为city 的节点
//2 通过city 节点.getElementsByTagName 按标签名查子节点
var lis = document.getElementById("city").getElementsByTagName("li");
alert(lis.length)
};
//5.返回#city 的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
//1 获取id 为city 的节点
//2 通过city 获取所有子节点
alert(document.getElementById("city").childNodes.length);
};
//6.返回#phone 的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
// 查询id 为phone 的节点
alert( document.getElementById("phone").firstChild.innerHTML );
};
//7.返回#bj 的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
//1 查询id 为bj 的节点
var bjObj = document.getElementById("bj");
//2 bj 节点获取父节点
alert( bjObj.parentNode.innerHTML );
};
//8.返回#android 的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
// 获取id 为android 的节点
// 通过android 节点获取前面兄弟节点
alert( document.getElementById("android").previousSibling.innerHTML );
};
//9.读取#username 的value 属性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
alert(document.getElementById("username").value);
};
//10.设置#username 的value 属性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
document.getElementById("username").value = "国哥你真牛逼";
};
//11.返回#bj 的文本值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
alert(document.getElementById("city").innerHTML);
// alert(document.getElementById("city").innerText);
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj 节点</button></div>
<div><button id="btn02">查找所有li 节点</button></div>
<div><button id="btn03">查找name=gender 的所有节点</button></div>
<div><button id="btn04">查找#city 下所有li 节点</button></div>
<div><button id="btn05">返回#city 的所有子节点</button></div>
<div><button id="btn06">返回#phone 的第一个子节点</button></div>
<div><button id="btn07">返回#bj 的父节点</button></div>
<div><button id="btn08">返回#android 的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username 的value 属性值</button></div>
<div><button id="btn10">设置#username 的value 属性值</button></div>
<div><button id="btn11">返回#bj 的文本值</button></div>
</div>
</body>
</html>

JavaScript补充知识和一些坑

返回目录

一、JavaScript之预解析（补坑）

JavaScript预解析导读

目标：

能够知道解析器运行JS分为哪两步
能够说出变量提升的步骤和运行过程
能够说出函数提升的步骤和运行过程

1.1、预解析

 <script>
        //1问
        //console.log(num);
        //2问
        console.log(num);//报错，undefined （坑1）
        var num=10;
        //3问
        fn();
        function fn() {
            console.log(11);
        }
        //4问
        fun();//报错fun is not defined  （坑2）
        var fun=function () {
            console.log(22);
        }
    </script>

解释报错原因：JavaScript代码是由浏览器中的解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分两步：预解析和代码执行

我们JS引擎运行JS分为两步：预解析代码执行
- 预解析JS引擎会把JS里面所有的var还有function提升到当前作用域的最前面
- 代码执行按照代码书写的顺序从上往下执行
预解析分为变量预解析（变量提升）和函数预解析（函数提升）
- 变量提升就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作（解决方法只有先var赋值完再调用（顺序书写））
- 函数提升就是把所有的函数声明提升到当前的作用域最前面不调自动用函数

1.2、变量预解析和函数预解析

变量预解析：

	    console.log(num);//报错，undefined （坑1）
        var num=10;
        //相当于解析为以下代码:
        var num;
        console.log(num);
        num=10;

函数的预解析：

 		fn();
        function fn() {
            console.log(11);
        }
        //解析为以下代码：
        function fn() {
            console.log(11);
        }
        fn();
        //**********************************
        fun();//报错fun is not defined  （坑2）
        var fun=function () {
            console.log(22);
        }
        //解析为以下代码：
        var fun;
        fun();
        fun=function () {
            console.log(22);
        }

二、JavaScript之对象（知识补充）

2.1、对象导读

目标：

能够说出为什么需要对象
能够使用字面量创建对象
能够使用构造函数创建对象
能够说出new的执行过程
能够遍历对象

2.2、什么是对象以及为什么需要对象

什么是对象？
现实生活中：万事万物皆对象，对象是一个具体的事物，看得见摸的着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”
在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的：

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

为什么需要对象？
保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果想要保存一个人（事物）的完整信息呢？我们就需要使用对象了！！！
在这里插入图片描述

2.3、利用字面量创建对象（对象创建三大方法之一）

对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法

键：相当于属性名
值：相当于属性值，可以是任意类型的值

       //1.利用对象字面量创建对象{}
        //var obj={};//创建了一个空对象
        var obj={
            umame:"张三",
            age:18,
            sex:'男',
            o:new Object(),
            flg:true,
            sayHi:function (a) {
                console.log("hi~"+a);
            }
        }
        //(1) 里面的属性或者方法我们采用键值对形式 (键) 属性名: (值) 属性值
        //(2) 多个属性或者方法中间用逗号隔开，最后一个不写逗号，类似数据库书写规则
        //(3) 方法冒号后面跟的是一个匿名函数
        // 2.使用对象
        //(1) 调用对象的属性 我们采用 对象名.属性名  .我们理解为 的
        console.log(obj.umame);
        //(2)调用属性还有一种方式 对象名['属性名'];
        console.log(obj['sex']);
        //(3) 调用对象的方法 sayHi  对象名.方法名() 千万别忘了添加小括号
        obj.sayHi();//hi~undefined
        obj.sayHi("hi");//hi~hi

2.4、变量、属性、函数、方法的区别

1.变量、属性是相同的，他们都是用来存储数据的
变量单独声明并赋值使用的时候直接写变量名单独存在
属性在对象里面不需要声明var的使用的时候必须是对象.属性
2.函数和方法都是实现某种功能做某件事
函数是单独声明并且调用的函数名() 单独存在的
方法在对象里面调用的时候对象.方法();

2.5、利用new Object创建对象（对象创建三大方法之一）

       var objs = new Object();//创建了一个空的对象
        //属性和方法声明赋值
        objs.umame = "张三丰";
        objs.age = 18 ;
        objs.sayHi = function () {
            console.log('hi~');
        }
        //(1) 我们是利用等号 = 赋值的方法 添加对象的属性和方法
        //(2) 每个属性和方法之间用 分号结束
        console.log(objs.umame);
        console.log(objs['sex']);
        objs.sayHi();

2.6、我们为什么需要构造函数

       //我们为什么需要构造函数
        //就是因为我们前面两种创建对象的方式一次只能创建一个对象（把对象提升到类的层次）
        var ldh={
            name:'刘德华',
            age:55,
            sing:function () {
                console.log('冰雨');
            }
        }
        var zxy={
            name:'张学友',
            age:58,
            sing:function () {
                console.log('李香兰');
            }
            
        }
        // 因为我们一次创建一个对象，里面很多的属性和方法是相同的 我们只能只能复制
        // 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数
        // 又因为这个函数不一样，里面封装的不是普通代码，而是 对象
        // 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

2.7、构造函数创建对象（对象创建三大方法之一）

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面

		//利用构造函数创建对象
        //我们需要创建四大天王的对象 相同的属性：名字 年龄 性别 相同的方法：唱歌
        //格式：
        /*
        function 构造函数名(有无参数皆可) {
            this.属性名=值;
            this.方法名=function () {}
        }
        调用格式：new 构造函数名(对应参数);
        */
        // 1.构造函数名字首字母最好大写
        // 2.我们构造函数不需要return 就可以返回结果值(层次上升为类存储)
        // 3.我们调用构造函数就必须使用new关键字来实例化对象
        // 4.我们构造函数属性和方法前面必须加this.
        function Star(uname,age,sex) {
            this.name=uname;
            this.age=age;
            this.sex=sex;
            this.sing=function (sang) {
                console.log(sang);
            }
        }
        var ldh=new Star('刘德华',18,'男');
        // console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
        var zxy=new Star('张学友',19,'男');
        console.log(zxy.name);
        console.log(zxy['age']);
        zxy.sing('李香兰');

2.8、构造函数和对象区别

构造函数，如Stat(),抽取了对象的公共部分，封装到了函数里面，它泛指某一大类(class)
创建对象，如new Star(),特指某一个具体的事物，通过new关键字创建对象的过程我们也称为对象的实例化

2.9、遍历对象

for…in语句用于对数组或者对象的属性进行循环操作

		//for...in 遍历我们的对象
        /*
        格式:
        for (变量 in 对象){

        }
        */
        for (var k in ldh){
            console.log(k);//遍历属性名和方法名
        }
        for (var k in zxy){
            console.log(zxy[k]);//遍历属性值和函数定义（并不会运行函数）
        }

JQuery

返回目录
今日任务
1.jQuery Hello world
2.jQuery 选择器
3.jQuery 过滤器
4.jQuery 元素筛选
课堂笔记

1、jQuery 介绍

什么是jQuery ?
jQuery，顾名思义，也就是JavaScript 和查询（Query），它就是辅助JavaScript 开发的js 类库。
jQuery 核心思想！！！
它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
jQuery 流行程度
jQuery 现在已经成为最流行的JavaScript 库，在世界前10000 个访问最多的网站中，有超过55%在使用
jQuery。
jQuery 好处！！！
jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM 元素、
制作动画效果、事件处理、使用Ajax 以及其他功能

2、jQuery 的初体验！！！

需求：使用jQuery 给一个按钮绑定单击事件?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// window.onload = function () {
// var btnObj = document.getElementById("btnId");
// // alert(btnObj);//[object HTMLButtonElement] ====>>> dom 对象
// btnObj.onclick = function () {
// alert("js 原生的单击事件");
// }
// }
$(function () { // 表示页面加载完成之后，相当window.onload = function () {}
var $btnObj = $("#btnId"); // 表示按id 查询标签对象
$btnObj.click(function () { // 绑定单击事件
alert("jQuery 的单击事件");
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>

在这里插入图片描述

3、jQuery 核心函数

在这里插入图片描述

4、jQuery 对象和dom 对象区分

4.1、什么是jQuery 对象，什么是dom 对象
在这里插入图片描述
4.2、问题：jQuery 对象的本质是什么？

4.3、jQuery 对象和Dom 对象使用区别

4.4、Dom 对象和jQuery 对象互转

5、jQuery 选择器（*****重点）

**5.1、基本选择器（**重点）
在这里插入图片描述

**5.2、层级选择器（**重点）

5.3、过滤选择器
基本过滤器：

内容过滤器：

属性过滤器：

表单过滤器:

表单对象属性过滤器：

6、jQuery 元素筛选

在这里插入图片描述

今日任务
1.jQuery 的属性操作
2.jQuery 练习
3.jQuery CSS 样式操作
4.jQuery 动画操作
5.jQuery 事件操作
课堂笔记
今天课程内容：

1、jQuery 的属性操作

jQuery 属性操作
在这里插入图片描述

val 方法同时设置多个表单项的选中状态：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
/*
// 批量操作单选
$(":radio").val(["radio2"]);
// 批量操作筛选框的选中状态
$(":checkbox").val(["checkbox3","checkbox2"]);
// 批量操作多选的下拉框选中状态
$("#multiple").val(["mul2","mul3","mul4"]);
// 操作单选的下拉框选中状态
$("#single").val(["sin2"]);
*/
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]
);
});
</script>
</head>
<body>
<body>
单选：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
下拉多选：
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
下拉单选：
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</body>
</html>

在这里插入图片描述

2、jQuery 练习

2.全选，全不选，反选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// 给全选绑定单击事件
$("#checkedAllBtn").click(function () {
$(":checkbox").prop("checked",true);
});
// 给全不选绑定单击事件
$("#checkedNoBtn").click(function () {
$(":checkbox").prop("checked",false);
});
// 反选单击事件
$("#checkedRevBtn").click(function () {
// 查询全部的球类的复选框
$(":checkbox[name='items']").each(function () {
// 在each 遍历的function 函数中，有一个this 对象。这个this 对象是当前正在遍历到的dom 对象
this.checked = !this.checked;
});
// 要检查是否满选
// 获取全部的球类个数
var allCount = $(":checkbox[name='items']").length;
// 再获取选中的球类个数
var checkedCount = $(":checkbox[name='items']:checked").length;
// if (allCount == checkedCount) {
// $("#checkedAllBox").prop("checked",true);
// } else {
// $("#checkedAllBox").prop("checked",false);
// }
$("#checkedAllBox").prop("checked",allCount == checkedCount);
});
// 【提交】按钮单击事件
$("#sendBtn").click(function () {
// 获取选中的球类的复选框
$(":checkbox[name='items']:checked").each(function () {
alert(this.value);
});
});
// 给【全选/全不选】绑定单击事件
$("#checkedAllBox").click(function () {
// 在事件的function 函数中，有一个this 对象，这个this 对象是当前正在响应事件的dom 对象
// alert(this.checked);
$(":checkbox[name='items']").prop("checked",this.checked);
});
// 给全部球类绑定单击事件
$(":checkbox[name='items']").click(function () {
// 要检查是否满选
// 获取全部的球类个数
var allCount = $(":checkbox[name='items']").length;
// 再获取选中的球类个数
var checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked",allCount == checkedCount);
});
});
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反选" />
<input type="button" id="sendBtn" value="提交" />
</form>
</body>
</html>

4、DOM 的增删改

在这里插入图片描述

5、jQuery 练习二

2.从左到右，从右到左练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 页面加载完成
$(function () {
// 第一个按钮【选中添加到右边】
$("button:eq(0)").click(function () {
$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
});
// 第二个按钮【全部添加到右边】
$("button:eq(1)").click(function () {
$("select:eq(0) option").appendTo($("select:eq(1)"));
});
// 第三个按钮【选中删除到左边】
$("button:eq(2)").click(function () {
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
});
// 第四个按钮【全部删除到左边】
$("button:eq(3)").click(function () {
$("select:eq(1) option").appendTo($("select:eq(0)"));
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>
3.动态添加、删除表格记录
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
// 创建一个用于复用的删除的function 函数
var deleteFun = function(){
// alert("删除操作的function : " + this);
// 在事件响应的function 函数中，有一个this 对象。这个this 对象是当前正在响应事件的dom 对象。
var $trObj = $(this).parent().parent();
var name = $trObj.find("td:first").text();
/**
* confirm 是JavaScript 语言提供的一个确认提示框函数。你给它传什么，它就提示什么<br/>
* 当用户点击了确定，就返回true。当用户点击了取消，就返回false
*/
if( confirm("你确定要删除[" + name + "]吗？") ){
$trObj.remove();
}
// return false; 可以阻止元素的默认行为。
return false;
};
// 给【Submit】按钮绑定单击事件
$("#addEmpButton").click(function () {
// 获取输入框，姓名，邮箱，工资的内容
var name = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
// 创建一个行标签对象，添加到显示数据的表格中
var $trObj = $("<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
"</tr>");
// 添加到显示数据的表格中
$trObj.appendTo( $("#employeeTable") );
// 给添加的行的a 标签绑上事件
$trObj.find("a").click( deleteFun );
});
// 给删除的a 标签绑定单击事件
$("a").click( deleteFun );
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th>&nbsp;</th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>

6、CSS 样式操作。

在这里插入图片描述

7、jQuery 动画

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore , .showless{
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a , .showless a{
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
.showmore a span {
padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;
}
.showless a span {
padding-left: 15px;
background: url(img/up.gif) no-repeat 0 0;
}
.promoted a {
color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
// 基本初始状态
$("li:gt(5):not(:last)").hide();
// 给功能的按钮绑定单击事件
$("div div a").click(function () {
// 让某些品牌，显示，或隐藏
$("li:gt(5):not(:last)").toggle();
// 判断品牌，当前是否可见
if( $("li:gt(5):not(:last)").is(":hidden") ){
// 品牌隐藏的状态：1 显示全部品牌== 角标向下showmore
$("div div a span").text("显示全部品牌");
$("div div").removeClass();
$("div div").addClass("showmore");
// 去掉高亮
$("li:contains('索尼')").removeClass("promoted");
} else {
// 品牌可见的状态：2 显示精简品牌== 角标向上showless
$("div div a span").text("显示精简品牌");
$("div div").removeClass();
$("div div").addClass("showless");
// 加高亮
$("li:contains('索尼')").addClass("promoted");
}
return false;
});
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440) </i></li>
<li><a href="#">索尼</a><i>(27220) </i></li>
<li><a href="#">三星</a><i>(20808) </i></li>
<li><a href="#">尼康</a><i>(17821) </i></li>
<li><a href="#">松下</a><i>(12289) </i></li>
<li><a href="#">卡西欧</a><i>(8242) </i></li>
<li><a href="#">富士</a><i>(14894) </i></li>
<li><a href="#">柯达</a><i>(9520) </i></li>
<li><a href="#">宾得</a><i>(2195) </i></li>
<li><a href="#">理光</a><i>(4114) </i></li>
<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li><a href="#">明基</a><i>(1466) </i></li>
<li><a href="#">爱国者</a><i>(3091) </i></li>
<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>

8、jQuery 事件操作

在这里插入图片描述

//1.原生javascript 获取事件对象

window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}

//2.jQuery 代码获取事件对象

$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});

//3.使用bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。

$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});

☆练习07 事件图片跟随

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
text-align: center;
}
#small {
margin-top: 150px;
}
#showBig {
position: absolute;
display: none;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove",function (event) {
if (event.type == "mouseover") {
$("#showBig").show();
} else if (event.type == "mousemove") {
console.log(event);
$("#showBig").offset({
left: event.pageX + 10,
top: event.pageY + 10
});
} else if (event.type == "mouseout") {
$("#showBig").hide();
}
});
});
</script>
</head>
<body>
<img id="small" src="img/small.jpg" />
<div id="showBig">
<img src="img/big.jpg">
</div>
</body>
</html>