jQuery 笔记
jQuery下载
Section titled “jQuery下载”我们可以进入jquery.com下载jQuery文件，如jquery-3.7.1.min.js。
在HTML文件中引入jQuery，放在自己写的js文件前面：
<html> <head> <title>jQuery</title> <script src="./js/jquery-3.7.1.min.js"></script> </head>
<body> <div id="a"> <p>abc</p> <p> <span id="span1">span1</span> <span>span2</span> <span>span3</span> </p> </div> <div id="b"></div> <div class="c">a</div> <div class="c">b</div> <div class="c">c</div>
<script src="./js/index.js"></script> </body></html>jQuery准备
Section titled “jQuery准备”两种jQuery的准备方法，后面可以在花括号内编写代码，代码将会在文档加载后执行：
// 方法1$(document).ready(function(){
})
// 方法2$(function(){
})点击事件click
Section titled “点击事件click”用click添加点击事件，例如点击id=“a”的元素时弹出警告框：
$(document).ready(function(){ $("#a").click(function(){ alert(123) })})在jQuery中可以使用CSS选择器来选取元素，#开头代表id，.开头代表class，用:eq()选择下标，例如：
//选取id="a"的元素$("#a")//选取class="c"的第1个元素（下标为0）$(".c:eq(0)")//选取第5个<div>元素（下标为4）$("div:eq(4)")//选取id="a"的<div>元素内的第1个<p>元素$("div#a p:eq(0)")//选取id="a"的元素内的第2个<p>元素内的第3个<span>元素$("#a p:eq(1) span:eq(2)")弹出所选元素的内容：alert($("#a").html())
悬停事件hover
Section titled “悬停事件hover”用mouseenter添加鼠标进入事件，mouseleave添加鼠标移出事件。
可以用hover添加悬停事件，传入2个函数，对应鼠标进入和移出，例如：
$("#span1").hover( function(){ $(this).html("123") }, function(){ $(this).html("abc") })提交事件submit
Section titled “提交事件submit”检查表单提交的值：
<form id="f" action="https://www.baidu.com"> <input type="text" id="name"> <input type="submit" value="提交"></form>$("#f").submit(function(){ if($("#name").val() == "baidu"){ alert("是baidu") return true } else { alert("不是baidu") return false }})在准备方法之外定义函数，用不带参数的submit触发submit事件：
function c(){ alert("触发submit事件") $("#f").submit()}隐藏和显示的效果
Section titled “隐藏和显示的效果”用hide隐藏，show显示：
<p id="a">abc</p>
<button id="h">hide</button><button id="s">show</button>$("#h").click(function(){ $("#a").hide()})
$("#s").click(function(){ $("#a").show()})使用toggle显示和隐藏
Section titled “使用toggle显示和隐藏”用toggle切换显示和隐藏：
<button id="t">toggle</button>$("#t").click(function(){ $("#a").toggle()})给隐藏和显示增加执行时间和回调函数
Section titled “给隐藏和显示增加执行时间和回调函数”给隐藏和显示增加执行时间和回调函数：
$("#h").click(function(){ $("#a").hide(3000, function(){ $("#s").click() })})
$("#s").click(function(){ $("#a").show(1000)})淡入淡出fadeIn和fadeOut
Section titled “淡入淡出fadeIn和fadeOut”用fadeIn淡入，fadeOut淡出，fadeToggle淡入淡出切换：
$("#h").click(function(){ $("#a").fadeOut(3000, function(){ $("#s").click() })})
$("#s").click(function(){ $("#a").fadeIn(1000)})
$("#t").click(function(){ $("#a").fadeToggle()})滑入和滑出slideUp和slideDown
Section titled “滑入和滑出slideUp和slideDown”用slideDown划入，slideUp划出，slideToggle划入划出切换：
$("#h").click(function(){ $("#a").slideUp(3000, function(){ $("#s").click() })})
$("#s").click(function(){ $("#a").slideDown(1000)})
$("#t").click(function(){ $("#a").slideToggle()})动画效果animate
Section titled “动画效果animate”用left和top属性设置移动后的位置：
<div style="background-color:#66ccff;width:200px;height:200px;position:relative;top:10px;right:10px" id="a"> abc</div>function move(){ $("#a").animate({ left:"200px", top:"300px", })}修改动画时间
Section titled “修改动画时间”修改动画时间为4秒：
function move(){ $("#a").animate({ left:"+=200px", top:"+=300px", }, 4000)}动画修改字体大小
Section titled “动画修改字体大小”用fontSize属性修改字体大小，增加30px：
function move(){ $("#a").animate({ left:"+=200px", top:"+=300px", fontSize:"+=30px", }, 4000)}动画修改宽高
Section titled “动画修改宽高”用width和height属性修改宽高，减少60px：
function move(){ $("#a").animate({ left:"+=200px", top:"+=300px", width:"-=60px", height:"-=60px", }, 4000)}