jQuery
jQuery重点讲解知识点 *
一 选择器
1 基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">类选择器</div>
<div class="box">类选择器</div>
<span>元素选择器</span>
<a id="it" href="#">ID选择器</a>
<script>
// 类选择器
var div1 = document.getElementsByClassName("box")[0]
var div2 = document.getElementsByClassName("box")[1]
div1.innerHTML = "JS类选择器1"
div2.innerHTML = "JS类选择器2"
// 元素选择器
var span = document.getElementsByTagName("span")[0]
span.innerHTML = "JS元素选择器"
// ID选择器(ID是唯一的)
var a = document.getElementById("it");
a.innerHTML = "JSID选择器"
</script>
</body>
</html>
类选择器
元素选择器
ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="box">类选择器</div>
<div class="box">类选择器</div>
<span>元素选择器</span>
<a id="it" href="#">ID选择器</a>
<script>
// $就是jQuery的缩写，他就代表了jQuery
// 类选择器
$(".box").html("jQuery类选择器")
// 元素选择器
$("span").html("jQuery元素选择器")
// ID选择器
$("#it").html("jQuery ID选择器")
</script>
</body>
</html>
子元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="topnav">
<li>Item 1</li>
<li>
<ul>
<li>child item 1</li>
<li>child item 2</li>
<li>child item 3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<script>
// // 1. 给所有ul标签下的li标签添加一个边框（直接子元素）
// var topnav = document.getElementsByClassName("topnav")[0];
// // 读取到topnav下面所有的子元素
// var children = topnav.childNodes;
// for(var i = 0;i<children.length;i++){
// if(children[i].nodeName !== "#text"){
// children[i].style.border = "3px solid green"
// }
// }
// 2. 给所有ul标签下的li标签添加一个边框（后代元素）
var topnav = document.getElementsByClassName("topnav")[0];
var children = topnav.getElementsByTagName("li");
for(var i = 0;i<children.length;i++){
children[i].style.border = "3px solid green"
}
</script>
</body>
</html>
后代元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul class="topnav">
<li>Item 1</li>
<li>
<ul>
<li>child item 1</li>
<li>child item 2</li>
<li>child item 3</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<script>
// jQuery子元素选择器
// .css(样式属性，样式属性值)
$(".topnav > li").css("border","3px solid red")
// jQuery后代元素选择器
//$(".topnav li").css("border","3px solid red")
</script>
</body>
</html>
2 属性选择器
完美匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<input type="radio" name="user" value="username">
<span>name</span>
</div>
<div>
<input type="radio" name="user" value="age">
<span>age</span>
</div>
<script>
// 利用属性选择器：选中第一个input，修改对应的span文本：name -> username
// next(): 找到同级的下一个标签
// html() === innerHTML
$("input[value='username']").next().html("useranme");
</script>
</body>
</html>
包含
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="#" alt="sxt">sxt</a>
<a href="#" alt="sxt-itbaizhan">sxt-itbaizhan</a>
<a href="#" alt="sxtitbaizhan">sxtitbaizhan</a>
<a href="#" alt="itbaizhan">itbaizhan</a>
<script>
// 属性选择器，匹配包含关系即可 匹配sxt
$("a[alt*='sxt']").css("border","2px solid red")
</script>
</body>
</html>
前缀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="#" alt="sxt">sxt</a>
<a href="#" alt="sxt-itbaizhan">sxt-itbaizhan</a>
<a href="#" alt="sxtitbaizhan">sxtitbaizhan</a>
<script>
// 1. 属性选择器，完美匹配或者前缀匹配(-)
$('a[alt|="sxt"]').css("border","2px solid red")
</script>
</body>
</html>
开头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input name="sxt-itbaizhan" />
<input name="sxt web" />
<input name="bjsxtweb" />
<script>
// 属性选择器，匹配开头元素 匹配sxt
$("input[name^='sxt']").css("border","2px solid red")
</script>
</body>
</html>
结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input name="sxt-itbaizhan" />
<input name="sxt web" />
<input name="bjsxtweb" />
<script>
// 属性选择器，匹配给定结尾的字符串 咱们匹配web
$("input[name$='web']").css("border","2px solid red")
</script>
</body>
</html>
空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" name="sxt-itbaizhan">
<input type="text" name="sxt web">
<input type="text" name="bjsxtweb">
<script>
// 属性选择器，空格隔开的独立的单词可以匹配 匹配sxt
$("input[name~='sxt']").css("border","2px solid red")
</script>
</body>
</html>
3 jQuery扩展选择器
eq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
<script>
// jquery 扩展选择器：:eq(index) index：下标从0开始 选中第三个li标签
$("li:eq(2)").css("border","2px solid red")
</script>
</body>
</html>
even
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>Row with Index #0</td>
</tr>
<tr>
<td>Row with Index #1</td>
</tr>
<tr>
<td>Row with Index #2</td>
</tr>
<tr>
<td>Row with Index #3</td>
</tr>
</table>
<script>
// jquery扩展选择器，even偶数选择器 注意，从0开始
$("tr:even").css("background-color","red")
</script>
</body>
</html>
odd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>Row with Index #0</td>
</tr>
<tr>
<td>Row with Index #1</td>
</tr>
<tr>
<td>Row with Index #2</td>
</tr>
<tr>
<td>Row with Index #3</td>
</tr>
</table>
<script>
// jquery扩展选择器，odd奇数选择器 注意，从0开始
$("tr:odd").css("background-color","red")
</script>
</body>
</html>
first
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</table>
<script>
// jQuery扩展选择器 first第一个元素选择器
$("tr:first").css("background-color","red")
</script>
</body>
</html>
last
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</table>
<script>
// jQuery扩展选择器 last最后一个元素选择器
$("tr:last").css("background-color","red")
</script>
</body>
</html>
gt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>TD #0</td>
<td>TD #1</td>
<td>TD #2</td>
</tr>
<tr>
<td>TD #3</td>
<td>TD #4</td>
<td>TD #5</td>
</tr>
<tr>
<td>TD #6</td>
<td>TD #7</td>
<td>TD #8</td>
</tr>
</table>
<script>
// jQuery扩展选择器，gt(index) 大于index的值
$("td:gt(5)").css("background-color","red")
</script>
</body>
</html>
lt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>TD #0</td>
<td>TD #1</td>
<td>TD #2</td>
</tr>
<tr>
<td>TD #3</td>
<td>TD #4</td>
<td>TD #5</td>
</tr>
<tr>
<td>TD #6</td>
<td>TD #7</td>
<td>TD #8</td>
</tr>
</table>
<script>
// jQuery扩展选择器，lt(index) 小于index的值
$("td:lt(5)").css("background-color","red")
</script>
</body>
</html>
二 DOM操作
1 Class操作
javascript操作
<div class="error">hello</div>
<script>
// js方式添加class
var div = document.getElementsByTagName("div")[0];
div.className = "txt error"; // 添加
div.className = ""; // 移除
</script>
addClass() ；removeClass()； toggleClass() ； hasClass() ；
<div class="error">Hello</div>
<span class="txt">Hello</span>
<a href="#" class="active">itbaizhan</a>
<img src="" alt="" class="img">
<script>
/**
* 1. addClass() :添加class，不会覆盖原有的class 可以添加多个class，用个空格隔开
* 2. removeClass() :移除class，可以移除一个或者多个，也可以全部移除
* 3. toggleClass() :开关，如果存在则删除，如果不存在则添加
* 4. hasClass() :判断一个元素是否存在某个class，存在返回true，不存在返回false
*
* 补充知识点：在jQuery中，有个链式调用
* */
// $("div").addClass("txt success");
// $("div").removeClass("txt error");
// $("div").removeClass(); // 全部移除
// $("span").toggleClass("txt")
// var flag = $("a").hasClass("active");
// console.log(flag);
// if(flag){
// console.log("a标签存在active");
// }else{
// console.log("a标签不存在active");
// }
// 给某个元素添加一个class然后在移除一个class
// 把img的class="img"移除掉，在添加个class="image"
// $("img").addClass("image");
// $("img").removeClass("img")
$("img").removeClass("img").addClass("image") // 链式调用
</script>
* 2. removeClass() :移除class，可以移除一个或者多个，也可以全部移除
* 3. toggleClass() :开关，如果存在则删除，如果不存在则添加
* 4. hasClass() :判断一个元素是否存在某个class，存在返回true，不存在返回false
链式调用
2 文本操作
html()
<div class="box">Hello, jQuery</div>
<script>
// 1. html() :设置一个元素内容和获取一个元素内容
// var content = $(".box").html(); // 获得内容
// console.log(content);
// $(".box").html("你好啊") // 设置内容
// 在js中，innerHTML和innerText 在jQuery html() text()
// var content = $(".box").text();
// console.log(content);
// $(".box").text("<a href='#'>itbaizhan</a>");
$(".box").html("<a href='#'>itbaizhan</a>");
</script>
text()
val()
3 属性操作
attr()
<img class="img1" src="./1.jpg" alt="小姐姐">
<img class="img2" src="" alt="">
<script>
var content = $(".img1").attr("alt");
$(".img2").attr("src","./1.jpg")
// 同时设置多个属性
$(".img2").attr({
src:"./1.jpg",
alt:"美女",
title:"小姐姐"
})
</script>
removeAttr()
<a href="#" alt="测试">itbaizha</a>
<script>
// $("a").removeAttr("alt"); // 删除属性alt
</script>
4 DOM 插入并包裹现有内容
javascript操作
<p id="text">Hello</p>
<script>
// 创建一个div容器，包裹p标签
// 1. 创建div元素
var root = document.createElement("div");
// 2. 找到p标签
var text = document.getElementById("text");
// 3. 将p标签放入到div中
root.appendChild(text)
// 4. 将div放入到body中显示
document.getElementsByTagName("body")[0].appendChild(root);
</script>
.wrap()
.unwrap()
<div>
<p id="text">Hello</p>
</div>
<div>
<p>Hello</p>
</div>
<script>
// 删除p标签的父级元素
$("#text").unwrap();
</script>
.wrapAll()
<p>sxt</p>
<p>itbaizhan</p>
<span>Hello</span>
<p>web</p>
<script>
// 将三个p标签包裹在一个容器中div
$("p").wrapAll("<div></div>");
</script>
.wrapInner()
<p>Hello</p>
<script>
// 包裹p标签里的内容
$("p").wrapInner("<i></i>");
</script>
5 DOM 插入现有元素内
javascript操作
<div id="root"></div>
<script>
// 创建一个p标签带有内容，然后插入到div中
var root = document.getElementById("root");
// 创建p标签
var p = document.createElement("p");
p.innerHTML = "Hello";
// 插入 appendChild:将一个元素插入到另一个元素中
root.appendChild(p);//p为子元素
</script>
.append()
<div id="root">
<p>分割线</p>
</div>
<script>
// 在一个元素的尾部添加内容
$("#root").append("<p>Hello World</p>");
</script>
.prepend()
<div id="root">
<p>分割线</p>
</div>
<script>
// 在一个元素的头部添加内容
$("#root").prepend("<p>Hello World</p>");
</script>
6 DOM 插入现有元素外
.after()
<p>Hello</p>
<script>
// 在p标签的同级下面增加一个p标签，内容为world
$("p").after("<p>world</p>");
</script>
.before()
<p>Hello</p>
<script>
// 在p标签的同级上面增加一个p标签，内容为world
$("p").before("<p>world</p>");
</script>
7 DOM 移除
.empty()
<div id="box">
<p>Hello</p>
<span>Wrold</span>
</div>
<script>
// 清空div中的内容：empty
$("#box").empty();
</script>
.remove()
<div id="box">
<p>Hello</p>
<span>Wrold</span>
</div>
<script>
// 移除div元素，同时移除掉里面所有的内容 remove
// 在JS中：函数就是方法，方法就是函数，无论是函数还是方法后面添加括号
// Array: 方法：push() pop() 属性：length
$("#box").remove();
</script>
8 DOM 替换
.replaceAll()
<div>
<p id="text">Hello</p>
</div>
<script>
// 将p标签替换成span标签: replaceAll
$("<span>World</span>").replaceAll("#text")
</script>
.replaceWith()
<div>
<p id="text">Hello</p>
</div>
<script>
// 将p标签替换成span标签: replaceWith
$("#text").replaceWith("<b>World</b>")
</script>
三 CSS操作
1 尺寸
.css()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container"></div>
<script>
// 通过.css获取当前元素的样式
var color = $(".box").css("background-color");
$(".container").css("height","200px")
$(".container").css({
width:"200px",
height:"200px",
// 如果涉及到-的形式，写成驼峰命名法：font-size -> fontSize
backgroundColor:"green"
})
</script>
</body>
</html>
.height()
.width()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
background-color: green;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<script>
// 获取box1宽度和高度
var width = $(".box1").width();
var height = $(".box1").height();
console.log(width,height);
// 设置box2的宽度和高度 链式调用
$(".box2").width(200).height(200);
</script>
</body>
</html>
.innerHeight()
.innerWidth()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
border: 10px solid green;
margin: 30px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// innerHeight和innerWidth获取一个元素的宽度高度+padding
var height = $(".box").innerHeight();
var width = $(".box").innerWidth();
console.log(height,width); // 240 240
</script>
</body>
</html>
.outerHeight()
.outerWidth()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
border: 10px solid green;
margin: 30px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 获取一个div的宽度高度+padding+border
var height1 = $(".box").outerHeight();
var width1 = $(".box").outerWidth();
console.log(height1,width1); // 260 260
// 获取一个div的宽度高度+padding+border+margin
var height2 = $(".box").outerHeight(true);
var width2 = $(".box").outerWidth(true);
console.log(height2,width2); // 320 320
</script>
</body>
</html>
2 位置
.offset()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 100px;
top: 50px;
}
.root{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="root"></div>
<script>
// 获取元素相对文档的位置 offset-> left top
var offset = $(".box").offset()
$(".root").offset({
top:offset.top + 200,
left:offset.left
})
</script>
</body>
</html>
.position()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.container {
width: 300px;
height: 200px;
border: 2px solid #000;
margin-left: 100px;
position: relative;
}
.box {
width: 100px;
height: 100px;
padding: 15px;
background-color: red;
position: absolute;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
<script>
// 1. 利用offset获取当前元素距离左边的值
// 2. 利用position获取当前元素距离左边的值
var offset = $(".box").offset();
console.log(offset);
var position = $(".box").position();
console.log(position);
</script>
</body>
</html>
.scrollLeft()
.scrollTop()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
.container {
background: #CCCCCC;
border: 3px solid #666666;
margin: 5px;
padding: 5px;
width: 200px;
height: 200px;
overflow: auto;
}
p {
margin: 10px;
padding: 5px;
border: 2px solid #666;
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div class="container">
<h1>itbaizhan</h1>
<p>sxt</p>
</div>
<span class="text"></span>
<script>
// 设置父级容器左右和上下滚动
$(".container").scrollTop(200);
$(".container").scrollLeft(200);
// 获取元素的滚动距离
console.log($(".container").scrollTop());
console.log($(".container").scrollLeft());
</script>
</body>
</html>
四 事件处理
1 绑定事件处理器
.on()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<script>
// 绑定事件处理器：on
$("#btn").on("click",function(){
//事件类型 事件函数
console.log("事件触发了");
})
// 事件委托
$("ul").on("click","li",function(event){
// 事件类型 事件函数
console.log(event.target);
//点谁打印谁
})
</script>
</body>
</html>
.one()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
// one事件处理器，只能触发一次
$("#btn").one("click",function(){
console.log("一次性事件");
})
</script>
</body>
</html>
.off()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
function clickHandle(){
console.log("事件处理器");
}
$("#btn").on("click",clickHandle)
// 移除on事件处理器
$("#btn").off("click",clickHandle)
</script>
</body>
</html>```
### 2 鼠标事件
.click()
<button id="btn">按钮</button>
<script>
// $("#btn").on("click",function(){
// console.log("点击事件");
// })
$("#btn").click(function(){
console.log("点击事件");
})
</script>
.hover()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
#box{
width: 100px;
height: 100px;
background-color: red;
}
#container{
width: 200px;
height: 100px;
background-color: gray;
position: absolute;
left: 108px;
top: 8px;
display: none;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="container"></div>
<script>
// hover：鼠标移入和鼠标移出
$("#box").hover(
// 鼠标划入
function(){
console.log("鼠标进入元素");
$("#container").css("display","block")
},
// 鼠标划出
function(){
console.log("鼠标移开元素");
$("#container").css("display","none")
}
)
//必须有2个函数？有无顺序？
</script>
</body>
</html>
.mouseenter()
.mouseleave()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
// 鼠标进入 鼠标移除
$("div").mouseenter(function(){
console.log("鼠标进入");
})
$("div").mouseleave(function(){
console.log("鼠标移除");
})
//把hover一个事件变成2个事件
</script>
</body>
</html>
.mousemove()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
// 鼠标滑动事件 防抖和节流！！！
$("div").mousemove(function(){
console.log("滑动");
})
</script>
</body>
</html>
.mouseover()
.mouseout()
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
.root{
width: 300px;
height: 300px;
background-color: red;
}
.box{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="root">
<div class="box"></div>
</div>
<script>
// mouseover mouseout
$(".root").mouseover(function(){
console.log("鼠标进入元素");
})
$(".root").mouseout(function(){
console.log("鼠标离开元素");
})//可触动事件冒泡
// $(".root").mouseenter(function(){
// console.log("鼠标进入元素");
// })
// $(".root").mouseleave(function(){
// console.log("鼠标离开元素");
// })//不支持冒泡
</script>
</body>
</html>
3 表单事件
.focus()
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="username">
<script>
// 表单事件：获取焦点事件focus
$("#username").focus(function(){
console.log("获取到焦点");
$("#username").css("border","5px solid red")
})
//进入input才会触发焦点事件
</script>
</body>
</html>
.blur()
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.js"></script>
</head>
<body>
<input type="text" id="username">
<script>
// 表单事件：失去焦点事件blur
$("#username").blur(function(){
console.log("失去焦点");
$("#username").val(""); // 清空输入框中的内容
})
//离开input触发失去焦点事件
</script>
</body>
</html>
.change()
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="username">
<script>
// 表单事件：内容发生改变，失去焦点，或者回车都会触发
$("#username").change(function(e){
console.log(e.target.value); // js的方法，如果想用jq：val
console.log($(e.target).val()); // $() // 1. 选择器 2. 转换成一个jQuery对象
console.log($(this).val()); // this代表当前元素，也就是input输入框
})
</script>
</body>
</html>
.submit()
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<input type="text">
// <input type="submit">
</form>
<script>
// submit表单提交事件：只能绑定在form表单上
$("form").submit(function(){
alert("提交触发了")
// 将表单的数据提交给服务器
})
</script>
</body>
</html>
4 键盘事件
.keydown()
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="username">
<script>
// 键盘事件：keydown
$("#username").keydown(function(e){
console.log(e.keyCode); // 每个按钮的唯一标识
})
</script>
</body>
</html>
.keypress()
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="username">
<script>
// 键盘事件：keypress
$("#username").keypress(function(e){
console.log(e.keyCode); // 每个按钮的唯一标识
})
//没有按下和抬起概念
</script>
</body>
</html>
.keyup()
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="username">
<script>
// 键盘事件：keyyp
$("#username").keyup(function(e){
console.log(e.keyCode); // 每个按钮的唯一标识
})
</script>
</body>
</html>
5 浏览器事件
.resize()
窗口发生变化会触发事件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
// 浏览器事件：resize：当浏览器的可视窗口发生变化时触发
$(window).resize(function(){
console.log("浏览器窗口大小发生变化");
// 窗口发生变化要隐藏一些元素
// 当浏览器的可视窗口小于800的时候，隐藏div
if($(window).width() <= 800){
$("div").css("display","none");
}
})
//有弊端：只是窗口变化。如果本来窗口宽度就小于800。即使突然窗口变大0.000000000000000000000000001px,也不会显示div;
</script>
</body>
</html>
.scroll()
浏览器滚动事件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
p{
height: 500px;
}
</style>
</head>
<body>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容4</p>
<script>
// 浏览器事件：滚动事件 scroll
$(window).scroll(function(){
// 获得滚动高度的方法
if($(window).scrollTop() >= $(window).height() ){
console.log("浏览器滚动到了最底下，被你看光了");
}
})
//只取决于滚动条底端是否在窗口下面才触发事件，在窗口里面不触发
</script>
</body>
</html>
6 事件对象
event.type
//事件类型
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
$("#btn").on("click",function(e){
console.log(e.type); // click
})//e就是event缩写
</script>
</body>
</html>
event.target
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
$("#btn").on("click",function(e){
// e.target:js对象
console.log(e.target); // button
// js中
console.log(e.target.innerHTML);
// jQuery中
// jquery对象才能调用jquery方法，js对象能调用js的方法，不能混淆
// 把一个js对象变成一个jquery对象 $(js对象)
console.log($(e.target).html());
})
</script>
</body>
</html>
点击按钮才会触发事件
event.currentTarget
target 指向
currenttarget 指向
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button id="button">按钮</button>
<div id="container">
<button id="btn">按钮</button>
</div>
<script>
$("#button").on("click",function(e){
console.log(e.currentTarget);
})
$("#container").click(function(e){
console.log("container-target:",e.target);
console.log("container-currentTarget:",e.currentTarget);
})
$("#btn").click(function(e){
console.log("btn-target:",e.target);
console.log("btn-currentTarget:",e.currentTarget);
})
</script>
</body>
</html>
点击上面的按钮
点击下面的按钮
target：指向触发事件元素
currentTarget：指向添加事件的元素
event.preventDefault()
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="https://itbaizhan.com">itbaizhan</a>
<script>
$("a").click(function(e){
e.preventDefault();//阻止事件跳转
console.log("哈哈");
})
</script>
</body>
</html>
event.stopPropagation()
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<button>按钮</button>
</div>
<script>
//div添加事件
$("div").click(function(){
console.log("我是div");
})
//button 添加事件
$("button").click(function(e){
e.stopPropagation(); // 阻止事件冒泡
console.log("我是button");
})
</script>
</body>
</html>
五 遍历
1 列表遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<script>
var lis = document.getElementsByTagName("li");
for(var i = 0;i<lis.length;i++){
console.log(lis[i]);
}
</script>
</body>
</html>
.map()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<script>
/*
jQuery遍历
map
函数类型的参数：
index：每个元素的下标
element：每个元素
对象类型的区分：
jquery：S.fn.init(4) [li, li, li, li, prevObject: S.fn.init(1)]
js：原始的元素效果
*/
$("li").map(function(index,element){
console.log(index,element);
element.innerHTML = "item" + index + "new"
if(index == 2){
element.style.color = "red"
}
})
</script>
</body>
</html>
.each()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<script>
/*
jQuery遍历
each
函数类型的参数：
index：每个元素的下标
element：每个元素
对象类型的区分：
jquery：S.fn.init(4) [li, li, li, li, prevObject: S.fn.init(1)]
js：原始的元素效果
*/
$("li").each(function(index,element){
console.log(index,element);
if(index == 2){
element.style.color = "red"
}
})
//map 与each区别不大，现阶段可忽略
</script>
</body>
</html>
2 列表中获得一个JS对象的DOM元素
.get()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<script>
// 通过get获取列表中的其中一个元素
// 下标从0开始
$("li").get(1).innerHTML = "我是一个全新的item"
/*
为什么要有js和jQuery对象的相互转换
解：因为他们的方法和属性是不能互相调用的
1. js对象转换成jquery对象：$(lis)
2. jquery对象转换成js对象
1. 获取一个元素：get();
2. 获取每一个元素:each map
*/
// var lis= document.getElementsByTagName("li");
// console.log($(lis));//s.fn.init(4)[li,li,li,li]
console.log($("li").get(1));
</script>
</body>
</html>
3 树遍历（关系）
.children()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul class="first">
<li>item 1</li>
<li>
<ul class="second">
<li>child item1</li>
<li>child item2</li>
</ul>
</li>
<li>item 3</li>
<span>Hello</span>
</ul>
<script>
// jquery元素关系 children：获取子元素
// $(".first").children().css("border","2px solid red")
$(".first").children("li").css("border","2px solid red")
</script>
</body>
</html>
.find()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul class="first">
<li>item 1</li>
<li>
<ul class="second">
<li>child item1</li>
<li>child item2</li>
</ul>
</li>
<li>item 3</li>
<span>Hello</span>
</ul>
<script>
// jquery元素关系 find：获取后代元素
console.log($(".first").find("li"));
$(".first").find("li").css("border","2px solid red")
</script>
</body>
</html>
.next()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>第一个元素</div>
<span>第二个元素</span>
<p>第三个元素</p>
<script>
// 关系：next：同级的下一个元素
$("span").next().css("border","2px solid red")
</script>
</body>
</html>
.parent()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>Hello</p>
</div>
<script>
// 关系：parent：读取元素的父级
$("p").parent().css("border","3px solid red")
</script>
</body>
</html>
.siblings()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>Hello1</p>
<p>Hello2</p>
<p class="text">Hello3</p>
<p>Hello4</p>
<span>World</span>
<p>Hello5</p>
<script>
// 关系：siblings：获取所有同级元素
$(".text").siblings("p").css("border","2px solid red")//不包括自己
</script>
</body>
</html>
六 动画
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
// 淡出的动画
var div = document.getElementsByTagName("div")[0];
var val = 1;
var timer = setInterval(function(){
if(val <0){
clearInterval(timer)
}else{
val -= 0.05;
div.style.opacity = val;
}
},60)
</script>
</body>
</html>
.show()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<div></div>
<script>
// jquery动画：show(time) time:动画执行的时常 单位是毫秒
$("div").show(2000);
</script>
</body>
</html>
.hide()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<script>
// jquery动画：hide(time) time:动画执行的时常 单位是毫秒
$("#show").click(function(){
$("div").show(1000)
})
$("#hide").click(function(){
$("div").hide(1000)
})
</script>
</body>
</html>
.fadeIn()
.fadeOut()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div></div>
<script>
// 淡入淡出
$("#show").click(function(){
$("div").fadeIn(1000)
})
$("#hide").click(function(){
$("div").fadeOut(1000)
})
</script>
</body>
</html>
.slideDown()
.slideUp()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<script>
// jquery动画： slideDown和slideUp：滑动动画
$("#show").click(function(){
$("div").slideDown(2000);
})
$("#hide").click(function(){
$("div").slideUp(2000);
})
</script>
</body>
</html>
.animate()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<button id="btn">执行动画</button>
<button id="btn2">执行动画</button>
<script>
// 自定义动画:animate({ }) 宽度和透明度一起执行动画
$("#btn").click(function(){
$("div").animate({
width:"400px",
opacity:0.5
},2000) // 第二个参数是动画执行的时常
})
$("#btn2").click(function(){
$("div").animate({
width:"200px",
opacity:1
},2000) // 第二个参数是动画执行的时常
})
</script>
</body>
</html>
