[TOC]
- 概念：jquery是一个轻量级的前端框架，在该框架里面封装的是js函数代码，和css样式无关，但是可以通过jquery里面的提供的方法动态的修改操作css属性。
- 要想使用jquery框架，必须在html文件中引入jquery框架
jQuery的入口函数
- 概念：浏览器一旦打开，就默认调用的方法。
原生js的入口函数
//原生js的入口函数 window.onload = function(){ console.log("原生的入口函数"); }jquery的入口函数
第一种方式
$(document).ready(function(){ console.log("jquery的入口函数方式1"); })第二种方式
jQuery(document).ready(function(){ console.log("jquery 入口函数方式2"); })第三种方式
jQuery(function(){ console.log("jquery的入口函数方式3"); })第四种方式（推荐）
$(function(){ console.log("juqery的入口函数推荐方式"); })
原生js入口函数和jquery入口函数的区别
- 1、原生js的入口函数需要等待body中标签全部加载完毕才会执行，而juqery直接执行
- 2、原生js的入口函数如果存在多个，后面的会把原来的值覆盖，而jquery都会执行。
jquery的选择器（重点）
基本选择器
//id选择器 $("#id名称").css("border","2px red solid"); //class选择器 $(".class名称").css("border","2px red solid"); //element（标签选择器） $("标签名").css("border","2px red solid"); //全局选择器 $("*").css("border","2px red solid"); //多选择器同时生效 $("选择器1，选择器2，选择器n").css("border","2px red solid");层级选择器
//1、选择器1 选择器2，在第一个选择器满足条件的情况下，再用第二个选择器进行选择相应的标签 $("#one .items").css("background-color","red"); //2、选择器1 > 选择器2,只会在直接子标签中寻找符合要求的标签 $("parent > child").css("background-color","red"); //3、选择器1 + 选择器2，选择出用了选择器1标签的下一个兄弟标签，兄弟标签满足第二个选择器 $("#flag + li").css("background-color","red"); //4、选择器1 ~ 选择器2,选择出用了选择器1的所有标签，选出符合要求的下面所有的兄弟标签。 $("#flag ~ li").css("background-color","red");
筛选选择器
//:first 从满足条件的标签中再次筛选出第一个标签
$("#two li:first").css("border","red 2px solid");
//:last 从满足条件的标签中再次筛选出最后一个标签
$("#two li:last").css("border","2px red solid");
//not(selector),从满足条件的标签中，再次筛选出没有使用selector选择器的标签
$("#two li:not('.items')").css("background-color","red");
//:even,从满足条件的标签中，找出下标为偶数的标签，下标从0开始计算
$("#two li:even").css("background-color","grey");
//:odd,从满足条件的标签中，找出下标为奇数的标签，下标从0开始计算
$("#two li:odd").css("background-color","yellow");
//:gt(index),从满足条件的标签中，找出比index下标要大的标签，不包含index位置，index从0开始计算
$("#two li:gt(2)").css("background-color","red");
//:lt(index),从满足条件的标签中，找出比index下标要小的标签，不包含index位置，index从0开始计算
$("#two li:lt(2)").css("background-color","red");
//:eq(index),从满足条件的标签中，选择出指定下标处的标签，下标从0开始计算
$("#two li:eq(2)").css("background-color","black");
内容选择器
//1:contains(text),从满足条件的标签中再次根据内容选择出指定标签
$("#two li:contains('A')").css("background-color","red");
//2:empty,从满足条件的标签中找到两个标签之间没有任何内容的标签
$("#two li:empty").css("background-color","red");
//3:has(selector)，冒号左边为父标签，右边为子标签，从结果集中找出父标签下面，是否有指定的子标签，或者子标签中是
否使用了指定的选择器，如果使用了，则将父标签选择上。
$("li:has('.items')").css("border","red solid 2px");
//4:parent,从结果集中找出有子标签或者有内容的标签
$("#one #flag:parent").css("border","2px red solid");
可见性选择器
//选择出隐藏的标签
$("div:hidden")
//选择出显示的标签
$("#two:visible")
属性选择器
//选择出有指定属性名的标签
$("img[title]").css("border","2px red solid");
//多个属性同时存在才能被选择上的标签
$("img[title][alt]").css("border","2px red solid");
//选择出指定标签名的指定属性值
$("img[title='这是一只猫']").css("border","2px red solid");
//选择出指定标签名不等于指定值，如果标签中没有该属性名，也将被选择出来。
$("img[title != '这是一只猫']").css("border","2px red solid");
//选择出指定标签名，要求该标签名的值要以指定值开始
$("img[title ^= '是']").css("border","2px red solid");
//选择出指定标签名，要求该标签名的值要以指定值结尾
$("img[title $= '猫']").css("border","2px red solid");
//选择出指定标签名，要求该标签名的值包含指定字符即可
$("img[title *= '懒']").css("border","2px red solid");
子元素选择器
//选择出符合要求的第一个元素，要求：该标签必须是在同一个父标签下的第一个孩子标签
$("li:first-child").css("border","2px red solid");
//选择出符合要求的最后一个元素，要求：该标签必须是在同一个父标签下的最后一个孩子标签
$("li:last-child").css("border","2px red solid");
//:nth-child(count)，count表示第几个，从1开始计算。
$("li:nth-child(2)").css("background-color","red");
//only-child，选择出本身作为唯一的一个子标签
$("li:only-child").css("background-color","red");
表单选择器（重点）
//1、:input,选择出所有的input标签，包括button标签
$("*:input").css("border","2px red solid");
//:text，选择出type的值为text的所有标签
$("*:text").css("border","2px red solid");
//:password，选择出type的值为passwor的标签
$("*:password").css("border","2px blue solid");
//:radio,选择出type的值为radio的标签
$("*:radio").css("width","100px");
//:checkbox，选择出所有的checkbox标签
$("*:checkbox").css("width","100px");
//:submit，找出所有的submit标签，也会找出<button></button>
$("*:submit").css("border","2px red solid");
//:reset,找出所有的重置按钮
$("*:reset").css("border","2px red solid");
//:button,找出所有的button按钮
$("*:button").css("border","2px red solid");
//:file,选择出所有的文件按钮
$("*:file").css("border","2px red solid");
jQuery中的事件（重点）
1、鼠标单击事件
$(".btn").click(function(){
alert("单击事件");
})
2、鼠标双击事件
$(".btn").dblclick(function(){
alert("鼠标双击事件");
});
3、mourseenter，当鼠标放在标签上就触发
$("img").mouseenter(function(){
$("img").css("width","400px").css("height","400px");
});
4、mouseleave,当鼠标离开标签就触发
$("img").mouseleave(function(){
$("img").css("width","200px").css("height","200px");
})
5、失去焦点事件（重要）
$("#userName").blur(function(){
alert("已经失去焦点");
})
6、获取焦点
$("#userName").focus(function(){
console.log("获取了焦点");
})
7、键盘被摁下事件
$(window).keydown(function(event){
console.log(event.keyCode);
})
8、键盘被松开
$(window).keyup(function(event){
console.log(event.keyCode);
})
jquery中的属性
属性
1、向一个标签中增加一个属性或者修改一个属性值
区分：如果该标签中没有该属性，作用是新增属性和属性值
如果该标签中已经有该属性了，作用是修改该属性的值。
$("img").attr("title","这是一只猫");
//删除一个属性
$("img").removeAttr("title");
css类
//操作新增class属性
$("img").mouseenter(function(){
$("img").addClass("current");
})
//删除一个class
$("img").mouseleave(function(){
$("img").removeClass("current");
})
//判断一个标签中是否包含指定的class名称
var flag = $("img").hasClass("current");
HTML代码/文本/值
1、html(),在一个标签中嵌入一个新的html代码，和原生js中的innerHtml作用一致。
$("#one").html("<img>");
2、text();获取两个标签之间的文本内容，如果text()括号中给了值，那作用改为修改标签之间的文本或者新增。
var val = $("#one").text();
3、val();获取者输入框中的值。如果括号中有值，则添加在输入框中
var val = $("#userName").val("aaaa");
jQuery的筛选
过滤
1、eq(index)，从符合条件的标签结果中，找出指定的标签
$("#one li").eq(0).css("border","2px red solid");
2、//first()，从符合要求的结果中，找出第一个标签
$("#one li").first().css("border","2px red solid");
3、//last()，从符合要求的结果中，找出最后一个标签
$("#one li").last().css("border","2px red solid");
4、is()，主要用于判断，判断是否是指定标签名或者指定标签中是否使用了指定选择器
var bool = $("#temp").is("li");
5、has(),找到指定的标签，通过has方法，判断子标签中是否有满足要求的，如果有满足的，则自身被选择。
$("li").has("ul").css("border","2px red solid");
6、not(),从符合要求的标签结果中，找出没有使用指定属性的标签
$("li").not(".items").css("border","2px red solid");
7、slice(start,end),从符合要求的结果集中找到指定范围的标签（包前不包后）
$("#two li").slice(0,3).css("border","2px red solid");
查找
1、children()，找到指定标签的直接子标签，后代标签找不到。
$("#one").children().css("border","2px red solid");
2、find(),从符合要求的标签结果中，再找到筛选出find中符号要求的标签。
$("ul").find(".items").css("border","2px red solid");
3、next(),找到指定标签的下一个兄弟标签
$("#aa").next().css("border","2px red solid");
4、nextAll(),找到指定标签下面所有的兄弟标签。
$("#aa").nextAll().css("border","2px red solid");
5、parent(),找到指定标签的直接父标签。
$("#flag").parent().css("border","2px red solid");
6、parents(),找到指定标签的所有长辈标签
$("#flag").parents().css("border","2px red solid");
7、prev()，找到指定标签的上一个兄弟标签
$("#aa").prev().css("border","2px red solid");
8、prevAll(),找到 指定标签的上面所有兄弟标签
$("#aa").prevAll().css("border","2px red solid");
9、siblings()，找到指定标签的所有兄弟标签
$("#aa").siblings().css("border","2px red solid");
jQuery文档操作
内部插入
1、append(),通过父标签，添加到自己的子标签中，并且是在后面追加
var img = $("#out").append("<img src='../img/1.jpg'>");
2、appendTo(),先创建要添加的子标签，在通过该方法放到指定父标签中
$("<img src='../img/2.jpg'>").appendTo("#out");
3、prepend(),在父目录中添加子标签，在前面追加。
$("#out").prepend("<img src = '../img/3.jpg'>");
prependTo()，先创建要添加的子标签，再将子标签添加到父标签中。
$("<img src = '../img/4.jpg'>").prependTo("#out");
外部插入
//after(),在指定标签的后面追加标签
$("img:eq(1)").after("<img src = '../img/1.jpg'>");
//before()，在指定标签之前追加标签
$("img:eq(1)").before("<img src = '../img/2.jpg'>");
删除标签
1、empty(),将一个父标签中的子标签，全部清空，也可以清空标签之间的内容
$("#out").empty();
2、remove();删除指定标签
$("img:eq(1)").remove();
ajax异步请求
原生ajax的get方式请求
<script type="text/javascript">
function test(){
//实现ajax异步请求
//创建ajax对象
var ajax =new XMLHttpRequest();
//开启open方法
ajax.open("get","/WebDemo6/ajax?userName=root&password=admin");
//发送请求
ajax.send();
//回调数据
ajax.onreadystatechange = function(){
console.log(ajax.responseText);
}
}
</script>
原生ajax的post请求
<script type="text/javascript">
//post请求
function test(){
//创建ajax对象
var ajax =new XMLHttpRequest();
//开启
ajax.open("post","/WebDemo6/ajax");
//请求头声明
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//发送请求
ajax.send("userName=root&password=admin");
//回调
ajax.onreadystatechange = function(){
console.log(ajax.responseText);
}
}
</script>
jquery完成ajax请求
<script type="text/javascript" src = "../js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
$.ajax({
//指定请求方式
type:"post",
//请求url地址
url:"/WebDemo6/ajax",
//传递到后端的数据
data:"userName=root&password=admin",
//回调函数
success:function(data){
console.log("回调数据："+data);
}
})
})
</script>
前后端结合（ajax+json）
<script type="text/javascript" src = "../js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
$.ajax({
//请求方式
type:"post",
//请求url:
url:"/WebDemo6/ajax",
//规定返回数据格式
dataType:"json",
//数据
data:{"userName":$("#userName").val(),"password":$("#password").val()},
//回调
success:function(data){
for(var i = 0;i < data.length;i++){
console.log(data[i]);
}
}
})
})
</script>
@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// String userName = request.getParameter("userName");
// String password = request.getParameter("password");
// System.out.println("用户名："+userName+",密码："+password);
// System.out.println("请求成功");
User user = new User();
user.setUserName("123123");
user.setPassword("abcd");
user.setAge(19);
user.setSex("man");
User u2 = new User();
u2.setUserName("qqqq");
u2.setPassword("aaaa");
u2.setAge(20);
u2.setSex("0");
User u3 = new User();
u3.setUserName("wwww");
u3.setPassword("bbbb");
u3.setAge(22);
u3.setSex("00");
List<User> list = new ArrayList<>();
list.add(user);
list.add(u2);
list.add(u3);
//将对象转换成json字符串格式
String json = JSON.toJSONString(list);
response.getWriter().write(json);
}
}
文件的上传下载
文件上传
前端代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 如果表单中有文件标签，必须声明数据方式 --> <form action = "/WebDemo6/upload" method = "post" enctype="multipart/form-data"> 商品名称:<input type="text" id = "prodName" name = "prodName" /><br /> 商品单价：<input type="text" id = "price" name = "price" /><br /> 商品描述：<input type="text" id = "description" name = "description" /><br /> 商品封面：<input type="file" name = "img" id = "img" /><br /> <input type = "submit" value = "提交" /> </form> </body> </html>后端代码
@WebServlet("/upload") @MultipartConfig public class UploadServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { //编码集 request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); response.setHeader("Content-type", "text/html;charset=utf-8"); //获取参数 String prodName = request.getParameter("prodName"); String price = request.getParameter("price"); String description = request.getParameter("description"); //处理前端传递过来的流 Part part = request.getPart("img"); InputStream in = part.getInputStream(); //获取真实的绝对路径 String proPath = this.getServletContext().getRealPath("/"); //替换斜杠 proPath = proPath.replace("\\","/"); //去掉最后一个斜杠 proPath = proPath.substring(0,proPath.length()-1); //去掉项目名 proPath = proPath.substring(0, proPath.lastIndexOf("/")); //拼接文件夹名 String folder = proPath+"/image"; //判断该文件夹是否存在 File file = new File(folder); if(!file.exists()) { file.mkdirs(); } //获取文件的后缀 String temp = part.getHeader("content-disposition"); String suffix = temp.substring(temp.indexOf("."),temp.length()-1); String uuid = UUID.randomUUID().toString(); String fileName = folder+"/"+uuid+suffix; //创建文件输出对象 FileOutputStream fos = new FileOutputStream(new File(fileName)); //定义数组 byte[] buf = new byte[1024]; int len = 0; while((len = in.read(buf)) != -1) { fos.write(buf, 0, len); } //关闭资源 fos.close(); System.out.println("有图片过来了......"); }catch(Exception e) { e.printStackTrace(); } } }文件下载
前端代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> #btn{ width:80px; height:30px; border:1px red solid; border-radius:10px; float:left; cursor: pointer; text-align:center; line-height:30px; } </style> </head> <body> <div id = "btn">下载</div> <script type="text/javascript" src = "../js/jquery-3.4.1.js"></script> <script type="text/javascript"> //监听单击事件 $("#btn").click(function(){ var action = "/WebDemo6/download"; var form = $("<form>").attr("action",action).attr("method","post").appendTo("body"); form.submit(); }) </script> </body> </html>后端java代码 ```java @WebServlet(“/download”) public class DownloadServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try { //获取项目中的文件。 String fileName = this.getServletContext().getRealPath("/image/cat.jpg");
response.setHeader("content-disposition", "attachment;filename=cat.jpg");
//创建输入流对象
InputStream in = new FileInputStream(new File(fileName));
//获取输出流
OutputStream out = response.getOutputStream();
//复制文件的过程
byte[] buf = new byte[1024];
int len = 0;
while((len = in.read(buf)) != -1) {
out.write(buf, 0, len);
}
//关闭资源
in.close();
}catch(Exception e) {
e.printStackTrace();
}
}
```
若有收获，就点个赞吧
0 人点赞
