jQuery 使用总结
使用jQuery前首先需要导如jQuery包: https://jquery.com/ （点击下载按钮，进入后点击鼠标右键另存为即可下载）
例如：<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
jQuery选择器
- 标签选择器
- id选择器 $("#id")
- 类选择器 $(".class")
- 群组选择器 $("选择器1,选择器2,...,选择器n")
- 兄弟选择器 **** $("兄弟") 平级关系
- 相邻元素选择器 +
- 父子选择器 > $("父>子")
- 祖先子孙选择器 \((" 空格 ")  \)("祖 子")
- 表单元素选择器 $(":表单元素")
- 元素属性选择器 $("html元素[属性名称=属性值]")
- 伪类选择器 $("真实选择器:伪类属性")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
#div1,#div2,#div3{
width: 50px;
height: 50px;
border: 3px solid teal;
float: left;
line-height: 50px;
text-align: center;
}
ul li{
list-style-type: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(function(){
// 设置所有div向右移动10px
$("div").css({"margin-left":"10px"});
// 兄弟选择器
$("h1~div").css("color","red");
// 相邻元素选择器
$("h1+div").css("color","blue");
// 表单元素选择器
$(":text").val("Hello jQuery");
// 元素属性选择器
$("input[type=password]").val("123456");
// 伪类选择器(第一个元素)
$("ul>li:first-child").css("background-color","pink");
// 最后一个元素
$("ul>li:last-child").css("background-color","green");
// 第三个元素
$("ul>li:nth-child(3)").css("background-color","yellow");
// 倒数第三个元素
$("ul>li:nth-last-child(3)").css("background-color","teal");
// 把除第4个以外的字体样式都设置为"黑体"
$("ul>li:not(:nth-child(4))").css("font-family","黑体");
// 奇数项
$("ul>li:nth-child(odd)").css("border","2px dashed red");
// 偶数项
$("ul>li:nth-child(even)").css("border","2px solid");
/**
* eq()：匹配一个给定索引值的元素
* gt()：匹配所有大于给定索引值的元素
* lt()：匹配所有小于给定索引值的元素
* 注意：索引从0开始的
*/
$("ul>li:eq(1)").css("color","orange");
// $("ul>li:gt(2)").css("color","orange");
// $("ul>li:lt(2)").css("color","orange");
// :header 匹配如 h1, h2, h3之类的标题元素
$("h1:header()").css("color","teal");
})
</script>
</head>
<body>
<h1>我是一级标题</h1>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<br /><br /><br />
<input type="text" id="in_txt" name="inText" placeholder="文本框" /><br />
<input type="password" id="in_psd" name="inPsd" placeholder="密码框" />
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
</ul>
</body>
</html>
jQuery事件
单击事件 click()
双击事件 dblclick()
焦点事件 focus()：触发焦点， blur() ：失去焦点
鼠标事件
mouseOver()：鼠标悬停事件
mouseMove()：鼠标移动事件
mouseDown()：鼠标按下事件
mouseUp()：鼠标释放事件
mouseOut()：鼠标离开事件
键盘事件
keyUp()：键盘释放事件
keyDown()：键盘按下事件
keyPress()：键盘按下和释放之间的事件
选项改变事件 change()
hover事件：
一次能够绑定多个事件，它在鼠标事件上进行了扩充，在hover事件上能够将鼠标悬停和离开绑定在一起
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hover事件</title>
<style>
#div1{
width:200px;
height:200px;
border: 1px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(function(){
//悬停显示背景颜色，离开清除背景颜色
$("#div1").hover(function(){
$(this).css("background-color","teal");
},function(){
$(this).css("background-color","");
});
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
绑定/解绑事件 on()/off()
on()：在选择元素上绑定一个或多个事件的事件处理函数。
off()：在选择元素上移除一个或多个事件的事件处理函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绑定/解绑事件</title>
<style>
#div1{
width:120px;
height:auto;
border:3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(function(){
//on是绑定事件的函数
//参数1：事件名称
//参数2：选择器(一个或者多个)
//参数3：一旦事件源触发事件，执行的回调函数
$("#div1").on("click",".p1,.p3",function(){
$(this).css("color","red");
})
// off()：解除绑定
// 参数1：之前绑定的事件 参数2：选择器
$("#div1").off("click",".p1,.p2");
})
// Servlet+Jquery+ajax
</script>
</head>
<body>
<div id="div1">
<p class="p1">晴川历历汉阳树</p>
<p class="p2">芳草萋萋鹦鹉洲</p>
<p class="p3">烟波江上使人愁</p>
</div>
</body>
</html>
操作节点的属性
val()：获得匹配元素的当前值。 对应js的value属性
attr()：设置或返回被选元素的属性值。 对应js的setAttribute和getAttribute
prop()：获取在匹配的元素集中的第一个元素的属性值。 用户input标签 type='checkbox' checked属性值的设置
text()：取得所有匹配元素的内容。 对应js的innerText
html()：取得第一个匹配元素的html内容。 对应js的innerHTML
遍历节点 each()
遍历祖先节点：parent()、遍历后代节点：children()、遍历同辈节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery遍历节点</title>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 遍历祖先节点 -->
<script>
$(function(){
// 获取上一级父元素$("#sixth").parent()
$("#sixth").parent().css("color","pink");
// each()：规定为每个匹配元素规定运行的函数（遍历）
$("#sixth").parent().each(function(){
console.log("遍历#sixth的父节点");
var att = $(this).attr("id");
console.log(att);
});
// .parents().each()：遍历所有父节点
$("#sixth").parents().each(function(){
// this.tagName：获取标签名称
console.log(this.tagName);
});
// .parents("").each()：获取指定的父元素
$("#sixth").parents("#div-zhuxian").each(function(){
var att = $(this).attr("id");
console.log(att);
});
})
</script>
<!-- 遍历后代节点 -->
<script>
$(function(){
// children()：只能获取父元素下的一级子元素
$("#div-zhuxian").children().each(function(){
// this.tagName：获取标签名称
console.log("遍历后代节点：" + this.tagName);
if(this.tagName=="P"){ // 注意：标签名称必须大写
$(this).css("background-color","pink");
}
if($("#first")){
var val1 = $(this).innerText = "666";
console.log(val1);
// on()：在选择元素上绑定一个或多个事件的事件处理函数
$("#div-zhuxian").on("click","#first",function(){
$(this).css("background-color","teal");
});
}
});
})
</script>
<!-- 遍历同辈节点（不涉及父元素和子元素） -->
<script>
$(function(){
// next()：获取下一个同辈元素
$("#third").next().css("background-color","salmon");
// nextAll()：查找当前元素之后所有的同辈元素
$("#third").nextAll().css("background-color","teal");
// 获取上一个同辈元素
$("#fourth").prev().css("font-size","20px");
// prevAll()：查找当前元素之前所有的同辈元素
$("#fourth").prevAll().css("font-size","30px");
// siblings()：获取所有的同辈元素
$("#fourth").siblings().css("color","red");
})
</script>
</head>
<body>
<div id="div-zhuxian">
<p id="first">AAA</p>
<p id="second">BBB</p>
<div id="div-father">
<p id="third">CCC</p>
<p id="fourth">DDD</p>
<div id="div-son">
<p id="fifth">EEE</p>
<p id="sixth">FFF</p>
</div>
</div>
</div>
</body>
</html>
节点操作
内部插入节点
首部插入：prepend()/prependTo()，尾部插入：append()/appendTo()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery节点操作</title>
<style>
#div1{
width: 100px;
height: 150px;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 将子元素插入到父元素的首部 -->
<script>
$(function(){
var newElement = $("#div1").prepend("<p id='p0'>P0标签</p>");
$("#p0").css("font-size","12px");
// 为所有的P标签增加class属性
newElement.addClass("label");
// 为所有类为label的标签添加样式
$(".label").css("color","red");
// prepend()：向每个匹配的元素内部前置内容。
$("#div1").prepend("<p>BBBBBB</p>")
/*prepend：正向插入子元素 $("父选择器").prepend("字符串")；
prePend使用父元素为参照物 */
// prependTo()：把所有匹配的元素前置到另一个、指定的元素元素集合中
$("<p>AAAAAA</p>").prependTo("#div1"); // 把p标签添加到id为div1的盒子中
/*prependTo：反向插入子元素 $("子选择器").prependTo("父选元素择器"):
prependTo使用子元素为参照物 */
})
</script>
<!-- 将子元素插入到父元素的尾部 -->
<script>
$(function(){
// append：附加
// $("父元素选择器").append("子元素选择器")：将子元素追加到父元素的末尾，正向追加
$("#div1").append("<h6>我是6级标签</h6>");
//$("子元素选择器").appendTo("父元素选择器")：资源元素追加到父元素的末尾，反向追加
$("<P>P标签</P>").appendTo("#div1");
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是P标签</p>
</div>
</body>
</html>
外部插入节点
之前插入：before()/insertBefore()，之后插入：after()/insertAfter()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery节点操作</title>
<style>
#div1{
width: 100px;
height: 50px;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 外部插入节点 -->
<!-- 外部之前插入节点 -->
<script>
$(function(){
// bofore()：在每个匹配的元素之前插入内容，正向插入
$("#div1").before("<div>短歌行 （曹操）</div>")
// insertBefore()：把所有匹配的元素插入到另一个、指定的元素元素集合的前面，反向插入
$("<p>对酒当歌，人生几何！</p>").insertBefore($("#div1"));
$("<p>譬如朝露，去日苦多。</p>").insertBefore("#div1");
})
</script>
<!-- 外部之后插入节点 -->
<script>
$(function(){
// after()：在每个匹配的元素之后插入内容，正向插入
$("#div1").after($("<p>山不厌高，海不厌深。</p>"));
$("#div1").after("<p>何以解忧，唯有杜康。</p>");
// 把所有匹配的元素插入到另一个、指定的元素元素集合的后面，反向插入
// 后插入的元素离div最近
$("<p>慨当以慷，忧思难忘。</p>").insertAfter("#div1");
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是P标签</p>
</div>
</body>
</html>
删除节点：remove()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>remove()：删除节点</title>
<style>
#div1{
width: 100px;
height: 50px;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 删除节点 -->
<script>
$(function(){
$("#p1").click(function(){
// remove()：删除指定节点
$("#p1").remove();
});
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是P标签</p>
</div>
</body>
</html>
清空节点：empty()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>empty()：清空节点</title>
<style>
ul>li{
list-style-type: none;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
<script>
$(function(){
$("#btn").click(function(){
// 清空ul下面所有的li
$("ul>li").empty();
})
})
</script>
</head>
<body>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
<input type="button" id="btn" value="清空" />
</body>
</html>
克隆节点：clone()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clone()：克隆节点</title>
<style>
#div1{
width: 100px;
height: auto;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 克隆节点 -->
<script>
$(function(){
$("#c_btn").click(function(){
// 将id为p1的标签克隆到id为div1中
$("#p1").clone().prependTo("#div1");
});
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">我是P标签</p>
</div>
<input type="button" id="c_btn" value="克隆" />
</body>
</html>
动画操作
隐藏和显示：hide()/show()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery隐藏和显示</title>
<style>
#div1{
width: 130px;
height: auto;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 隐藏和显示 -->
<script>
$(function(){
$("#h_btn").click(function(){
// hide()：隐藏 ()中是隐藏所用的时间，毫秒为单位
// $("#div1").hide();
$("#div1").hide(1000);
});
$("#s_btn").click(function(){
// show()：显示 ()中是显示所用的时间，毫秒为单位
// $("#div1").show();
$("#div1").show(1000);
});
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">别有幽愁暗恨生，此时无声胜有声。</p>
</div>
<input type="button" id="h_btn" value="隐藏" />
<input type="button" id="s_btn" value="显示" />
</body>
</html>
淡出和淡入
fadeOut()：淡出(亮--->暗)，fadeIn()：淡入(暗--->亮)，fadeTo()： 渐变，fadeToggle()：淡入淡出切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery淡出和淡入</title>
<style>
#div1{
width: 130px;
height: auto;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 淡入和淡出 -->
<script>
$(function(){
$("#btn1").click(function(){
// fadeOut()：淡出
$("div").fadeOut(1000);
})
$("#btn2").click(function(){
// fadeIn()：淡入
$("div").fadeIn(1000,function(){
alert("成功淡入");
})
})
// 淡入和淡出之间切换
$("#btn3").click(function(){
//fadeToggle()：在淡入和淡出之间切换
// 一旦淡出执行完毕，按钮变为淡入,否则变为淡出
$("div").fadeToggle(1000,function(){
if($("#btn3").val()=="淡出"){
$("#btn3").val('淡入');
}else{
$("#btn3").val('淡出');
}
})
})
// 渐变
$("#btn4").click(function(){
// 参数1：渐变的时间 参数2：0.0~1.0之间的透明度
$("div").fadeTo(1000,0.7);
$("div").fadeTo(1000,0.4);
$("div").fadeTo(1000,0.1);
})
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">别有幽愁暗恨生，此时无声胜有声。</p>
</div>
<input type="button" id="btn1" value="淡出" />
<input type="button" id="btn2" value="淡入" />
<input type="button" id="btn3" value="淡出" />
<!-- 透明度在1.0~0.0之间慢慢的变暗 -->
<input type="button" id="btn4" value="渐变" />
</body>
</html>
收起和展开
slideUp(): 收起，slideDown()：展开，slideTo()：收起和展开之间切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery收起与展开</title>
<style>
#div1{
width: 130px;
height: auto;
border: 3px solid teal;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<!-- 收起与展开 -->
<script>
$(function(){
$("#btn1").click(function(){
//slideUp()：收起（上下收起）
$("div").slideUp(1000);
})
$("#btn2").click(function(){
//slideDown()：展开（上下展开）
$("div").slideDown(1000);
})
// slideToggle()：收起跟展开之间切换
$("#btn3").click(function(){
$("div").slideToggle(2000,function(){
if($("#btn3").val()=='收起'){
$("#btn3").val('展开');
}else{
$("#btn3").val('收起');
}
})
})
})
</script>
</head>
<body>
<div id="div1">
<p id="p1">别有幽愁暗恨生，此时无声胜有声。</p>
</div>
<input type="button" id="btn1" value="收起" />
<input type="button" id="btn2" value="展开" />
<input type="button" id="btn3" value="收起" />
</body>
</html>
jQuery在线API文档： http://jquery.cuishifeng.cn/
jQuery离线API文档： https://www.lanzous.com/i6zz7yh
