一、事件绑定
除了使用事件名绑定事件外，还可以通过其他方式绑定事件
bind事件绑定>>delegate事件绑定>>on事件绑定。
bind事件绑定：缺点:不支持动态事件绑定
//第一个参数:事件类型
//第二个参数;事件处理程序
// 第一种：bind(事件类型，事件处理函数)
$("div").bind("click", function() {
$(this).css("color", "red")
})
$("div").bind("mouseover", function() {
$(this).css("background-color", "green")
})
$("div").bind("mouseout", function() {
$(this).css("background-color", "pink")
})
on事件绑定：
// 第二种：一次绑定多个事件
$("div").on({
"click": function() {
$(this).css("color", "red")
},
"mouseover": function() {
$(this).css("background-color", "green")
},
"mouseout": function() {
$(this).css("background-color", "pink")
}
})
// 第三种：on进行绑定事件时可以实现动态绑定
$("#btn").click(function() {
$("body").append("<div>这个是新增加的div</div>")
})
$("body").on("click", "div", function() {
$(this).css("color", "red")
})
事件解绑：
$(selector).unbind(;//解绑所有的事件
$(selector).unbind("c1ick");//解绑指定的事件
键盘事件：
<!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: #3498db;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>点击A、B、C、D有惊喜哦！</div>
<script>
$(function() {
$(document).on("keydown", function(event) {
switch (event.keyCode) {
case 65:
$("div").css("background-color", "red")
break;
case 66:
$("div").css("background-color", "green")
break;
case 67:
$("div").css("background-color", "yellow")
break;
case 68:
$("div").css("background-color", "blue")
break;
case 39:
x += 10
$("div").css("left", x + "px")
break;
default:
break;
}
})
})
</script>
</body>
</html>二、jQuery动画：
显示隐藏：
show():显示隐藏的元素.
参数有slow表示慢慢的,fast表示快点,normal表示中间速度.还可以设置具体的时间数.参数单位是毫秒。
s( "div" ) . show( "fast ');
hide(;隐藏显示的元素.参数和show一样。
s( 'div').hide(" s1ow ' ) ;
toggle(): hide()和show()方法之间的切换
$(C " div" ).toggle('s1ow' ) ;
淡入淡出：
fadelno把显示的元素通过慢慢变淡隐藏起来。
$( " div").fadeIn("slow ' );
fadeOut()把隐藏的元素慢慢显示出来，他们的参数和show/hide一样。
参数1是速度(fast,normal,slow或者写一个时间数单位毫秒)参数2是透明度.值是一个0-1的数字
.s('div").fadeout(;
fadeToggle(在淡入和淡出之间切换,如果事显示就淡入,如果是隐藏就是淡出。
$( "div" ).fadeToggle( ;
滑动：
slideUp():把元素使用往上收的方式隐藏起来,参数也是三个单词或者写时间数。
$( 'div').s1ideup( 's1ow');//表示把div缓慢的收起来
slideDown():把元素使用向下展开的方式显示出来,参数同上,把div缓慢的显示出来。
$( 'div').slideDown( 's1ow ' ); //如果本身就是显示的,这个是没有效果的
slideToggle():在向上卷和向下卷之间切换,如果是显示的,就卷上去隐藏,如果是隐藏的就向下卷显示。
$( 'div ').slideToggle('s1ow ' );
<!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: red;
display: none;
}
</style>
</head>
<body>
<input type="button" value="toggle" id="btn0">
<input type="button" value="淡入" id="btn1">
<input type="button" value="淡出" id="btn2">
<input type="button" value="淡入/淡出交替" id="btn3">
<input type="button" value="上滑" id="btn4">
<input type="button" value="下滑" id="btn5">
<input type="button" value="上滑/下滑交替" id="btn6">
<div></div>
<script>
$(function() {
$("#btn0").on("click", function() {
$("div").toggle(200) //指的是show()和hide()的交替
})
$("#btn1").on("click", function() {
$("div").fadeIn(200) //显示(淡入)
})
$("#btn2").on("click", function() {
$("div").fadeOut(200) //隐藏(淡出)
})
$("#btn3").on("click", function() {
$("div").fadeToggle(200) //显示/隐藏交替(淡入/淡出交替)
})
$("#btn4").on("click", function() {
$("div").slideUp(200) //显示(上滑)
})
$("#btn5").on("click", function() {
$("div").slideDown(200) //隐藏(下滑)
})
$("#btn6").on("click", function() {
$("div").slideToggle(200) //显示/隐藏交替(上滑/下滑交替)
})
})
</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>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
width: 790px;
height: 340px;
margin: 100px auto;
position: relative;
}
.slider li {
display: none;
position: absolute;
}
.slider li:first-child {
display: block;
}
.arrow {
display: none;
}
.slider:hover .arrow {
display: block;
}
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
width: 30px;
height: 60px;
font-size: 30px;
background-color: rgba(0, 0, 0, 0.1);
color: white;
position: absolute;
top: 50%;
margin-top: -30px;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
</style>
<body>
<div class="slider">
<ul>
<li>
<a href="#"><img src="img/1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/3.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/4.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/5.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/6.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/7.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/8.jpg" alt=""></a>
</li>
</ul>
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
<script>
$(function() {
var index = 0;
$(".arrow-right").on("click", function() {
index++
if (index > ($("ul li").lenght - 1)) {
index = 0
}
$("ul li").eq(index).fadeIn().siblings().fadeOut()
})
$(".arrow-left").on("click", function() {
index--
if (index == -1) {
index == $("ul li").lenght - 1
}
$("ul li").eq(index).fadeIn().siblings().fadeOut()
})
})
</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>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0;
top: 50px;
}
</style>
</head>
<body>
<input type="button" id="btn" value="点击">
<div>自定义动画</div>
<script>
$(function() {
$("#btn").click("click", function() {
$("div").animate({
"left": "500px"
}).animate({
"top": "400px"
}).animate({
"left": "0"
}).animate({
"top": "50px"
})
// $("div").animate({
// "left": "500px",
// "top": "400px"
// }).animate({
// "font-size": "30px",
// })
})
})
</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>
<style>
* {
margin: 0;
padding: 0;
}
#navigation li {
height: 50px;
width: 120px;
text-align: center;
position: relative;
}
#navigation li a {
position: absolute;
left: -100px;
top: 0px;
display: block;
width: 120px;
height: 50px;
line-height: 50px;
color: white;
text-decoration: none;
}
#navigation li:first-child a {
left: 0px;
}
.nav0 a {
background: #f66;
}
.nav1 a {
background: rgb(226, 112, 12);
}
.nav2 a {
background: rgb(11, 58, 231);
}
.nav3 a {
background: #f66;
}
.nav4 a {
background: rgb(12, 31, 171);
}
.nav5 a {
background: rgb(237, 4, 4);
}
.nav6 a {
background: rgb(51, 243, 12);
}
.nav7 a {
background: rgb(26, 214, 173);
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="navigation">
<li class="nav0 current_page"> <a href="">我的日志</a></li>
<li class="nav1"><a href="">菜单1</a></li>
<li class="nav2"><a href="">菜单2</a></li>
<li class="nav3"><a href="">菜单3</a></li>
<li class="nav4"><a href="">菜单4</a></li>
<li class="nav5"><a href="">菜单5</a></li>
<li class="nav6"><a href="">菜单6</a></li>
<li class="nav7"><a href="">菜单7</a></li>
</ul>
</div>
<script>
$(function() {
$("ul li a").hover(function() {
$(this).animate({
"left": "0px"
})
}, function() {
$(this).stop(true) //停止上一个动画
$(this).animate({
"left": "-100px"
})
})
})
</script>
</body>
</html> 
三、表单
表单有两个较特殊的属性，一个是method，是规定用于发送表单的HTTP方法(提交表单的方式);还有一个是action，是规定当提交时向何处发送表单的数据（要提交表单的地址)。Form表单有一个自动提交的功能(submit)有时候不写submit也会自动提交。可以默认不写。如果不想要表单自动提交就要写阻止表单自动提交的方法(οnsubmit="return false;") 。表单的提交方式有两种:分别是get提交（(为表单的默认提交方式)与post提交。
get提交：
请求参数放到请求的地址后面，参数大小受限只能传递几k的数据。由于参数再地址后面安全性不能保证。但是速度较快。
应用场景:地址栏发出的请求/超链接发出的请求。
post请求：
请求参数放到请求体里面，参数大小没有限制，请求参数不可见，所以安全性更高，速度慢。
应用场景:当form表单指定请求方式为post时发出请求。
Get与Post的区别：
Get方法是用来向服务器上获取数据;而Post是用来向服务器上传递修改数据。
表单提交的原则：
表单提交主要是通过表单元素的name值等于value值进行传递数据的，但是表单提交时需要注意一下原则;name相同的表单提交格式
如果name值相同的表单提交，该name值会出现多次，且对应不同表单的值。
没有name的表单、disabled的表单元素
表单元素没有name属性、含有disabled属性都会被禁止提交。
serialize()：
serialize()方法通过序列化表单值创建URL编码文本字符串。
您可以选择一个或多个表单元素(如输入和/或文本区)，或表单元素本身。
序列化的值可在生成AJAX请求时用于URL查询字符串中。
语法：
console.log(s (""form") . serialize());
serializaxArray():
serializeArray)方法通过序列化表单值来创建对象(name和value）的数组。
语法:
$(selector).serializeArrayo
<!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>
<form action="" id="nav" method="get">
<p>用户名：<input type="text" name="uname"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
性别：<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女
</p>
<p>备注：
<textarea name="remark" id="" cols="30" rows="10"></textarea></p>
<p><input type="submit" value="提交" id="btn"></p>
</form>
<script>
$(function() {
$("#nav").submit(function() {
// console.log($(this).serialize())
// console.log(decodeURIComponent($(this).serialize(),true))
// console.log()
var arr = $(this).serializeArray()
for (var i = 0; i < arr.length; i++) {
console.log(arr[i].value)
}
return false
})
})
</script>
</body>
</html>
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
