jQuery框架 - 《Java Maven 笔记》

一、框架入门介绍
1.1 jquery框架的概念
轻量级的前端框架，jquery框架实际上本身就是js函数库，在框架中封装了很多的js完成特定的功能，程序员调用指定的方法即可完成功能的编写。jquery不会封装css属性，但是提供了修改css的方法，在jquery框架中讲解的选择器都是js的选择器。

1.2 jquery框架的入口函数
入口函数：浏览器一旦打开该html文件就执行的js函数
jquery入口函数方式1
jQuery(document).ready(function(){
console.log(“jquery入口函数”);
})
jquery入口函数方式2
$(document).ready(function(){
console.log(“jqeury入口函数2”);
})
jquery入口函数3
jQuery(function(){
console.log(“入口函数3”);
})
jquery入口函数4,推荐使用
$(function(){
console.log(“入口函数4”);
})

原生js入口函数和jquery入口函数的区别
1、原生js的入口函数，后面的函数会将前面入口函数效果覆盖，而jquery入口函数有多少执行多少，相互之间没有影响。

2、原生js入口函数，会等到前端的所有标签及内容加载完毕才会执行，而jquery入口函数，只要标签加载完毕就执行。

二、jquery的选择器
jquery选择器：选择到指定的标签，一般是对标签进行css样式设置、对标签进行属性增删改查、对标签的值或者两个标签之间的文本内容操作以及对html标签的增删改查。
2.1 基本选择器
1、id选择器
$(“#list-2”).css(“border”,”2px red solid”);
2、class选择器
$(“.items”).css(“background-color”,”red”);
3、标签选择器
$(“li”).css(“border”,”2px yellow solid”);
4、全局选择器，将所有的标签都选择上，包括body标签
$(“*”).css(“border”,”2px aqua solid”);
5、多个选择器，只要写在里面的选择器所在的标签，都将被选择上
$(“#list-2,.items”).css(“background-color”,”red”);
2.2 层级选择器
1、组合选择器，前面的选择器用于筛选范围，后面的才是css的作用标签
$(“#two .items”).css(“border”,”2px red solid”);
2、选择出一个父标签中的直接子标签，其他后辈标签不被选择
$(“#one > li”).css(“border”,”2px red solid”);
3、选择出指定标签紧邻的下一个兄弟标签，只会选择到一个
$(“#list-4 + li”).css(“border”,”2px aqua solid”);
4、选择出指定标签下面所有的兄弟标签
$(“#list-2 ~ li”).css(“border”,”2px red solid”);

2.3 基本筛选器
1、从符合选择器标签中找出第一个标签
$(“#two li:first”).css(“border”,”2px red solid”);
2、从符合要求选择器标签中找出最后一个标签
$(“#two .items:last”).css(“border”,”2px red solid”);
3、从符合要求选择器里面找出指定下标的标签
$(“#two li:eq(2)”).css(“border”,”2px black solid”);
4、从符合要求选择器里面找出大于指定下标的标签
$(“#two li:gt(2)”).css(“border”,”2px red solid”);
5、从符合要求选择器里面找出小于指定下标的标签
$(“#two li:lt(2)”).css(“border”,”2px red solid”);
6、从符合要求选择器里面找出偶数的下标标签
$(“#two li:even”).css(“background-color”,”red”);
7、从符合要求选择器里面找出奇数的下标标签
$(“#two li:odd”).css(“background-color”,”red”);
8、找出符合要要求选择器里面找出没有使用指定选择器名称的标签
$(“#two li:not(‘#two-c’)”).css(“background-color”,”red”);

2.4 内容选择器
1、判断标签之间是否包含指定文本内容,只要符合了选择器，就会被选择，不管是本身内容包含指定文本还是
子标签中存在指定文本都将被选择
$(“li:contains(‘1’)”).css(“border”,”2px red solid”);
2、从符合选择器的标签中，再筛选出没有内容或者没有子标签的标签。
$(“li:empty”).css(“border”,”2px red solid”);
3、conf符合选择器标签中，再去找该标签的子标签，看子标签中是否使用了has里面指定的选择器，如果
使用了，则把符合要求的父标签选择上
$(“ul:has(‘.items’)”).css(“border”,”2px red solid”);
4、从符合选择器标签中，找出是否有父标签的标签
$(“ul:parent”).css(“border”,”2px red solid”);

2.5 可见性选择器
1、找出隐藏的标签
$(“div:hidden”).css(“border-radius”,”50%”).css(“display”,”block”);
2、//找出在页面显示的标签
$(“div:visible”).css(“background-color”,”yellow”);

2.6 属性选择器
1、选择出中含有指定属性的标签
$(“img[title]”).css(“border”,”2px red solid”);
2、选择出含有指定属性的标签并且该属性具有指定值
$(“img[title=’这是一只羊驼’]”).css(“border”,”3px red solid”);
3、选择出不包含指定标签，或者包含指定标签但是不等于指定值的标签。
$(“img[title!=’这是一只羊驼’]”).css(“border”,”3px red solid”);
4、选择出属性值是否以指定字符串开头
$(“img[title ^= ‘这’]”).css(“border”,”red solid 3px”);
5、选择出属性值是否以指定字符串结尾
$(“img[title $= ‘驼’]”).css(“border”,”red solid 3px”);
6、选择出属性值是否包含指定字符串
$(“img[title *= ‘羊’]”).css(“border”,”red solid 3px”);
7、多个属性一起使用，多个[属性=值]
$(“img[title][alt]”).css(“border”,”3px red solid”);

2.7 子元素选择器
1、从满足要求的标签中，再判断有没有作为该父标签的第一个子标签，如果符合则被选择
$(“.items:first-child”).css(“border”,”2px red solid”);
2、从满足要求的标签中，看该标签是否作为给父标签下的最后一个标签
$(“li:last-child”).css(“border”,”2px red solid”);
3、从满足要求的标签中，再找出该标签中是否有作为该父标签下的第几个标签，从1开始计算
$(“.items:nth-child(2)”).css(“border”,”2px red solid”);
4、从满足要求中，找出满足该选择器的标签是否是给父标签的唯一子标签
$(“li:only-child”).css(“border”,”2px red solid”);

2.8 表单选择器
1、将具有input特性或者表现形式的都选择上
$(“:input”).css(“border”,”2px red solid”).css(“width”,”50px”);
2、将type值为text的input标签选择出来
$(“:text”).css(“border”,”2px red solid”);
3、将type值为password的input标签选择出来
$(“:password”).css(“border”,”2px red solid”);
4、将type值为radio的input标签选择出来
$(“:radio”).css(“width”,”100px”);
5、将type值为checkbox的input标签选择出来
$(“:checkbox”).css(“width”,”100px”);
6、将input标签中type的值为submit的标签和button标签两个选择出来
$(“:submit”).css(“border”,”2px red solid”);
7、将input标签中type的值为reset的标签
$(“:reset”).css(“border”,”2px red solid”);
8、将input标签中type的值为button的标签,或者直接是button标签
$(“:button”).css(“border”,”2px red solid”);
9、将input标签中type的值为file的标签
$(“:file”).css(“border”,”2px red solid”);

2.9 表单对象选择器
1、选择出不能使用的表单标签
$(“:disabled”).css(“border”,”2px red solid”);
2、选择出可以使用的表单选择器
$(“:enabled”).css(“border”,”blue 2px solid”);
3、找出复选框中被选择了的选择器
$(“:checked”).css(“width”,”100px”);
4、找出下拉框中被选择的标签
$(“:selected”).css(“background-color”,”gray”);

三、jquery的事件
1、鼠标单击事件
$(“#btn”).click(function(){

})
2、鼠标双击事件
$(“#btn”).dblclick(function(){

})
3、鼠标按下事件
$(“#btn”).mousedown(function(){

})
4、鼠标松开事件
$(“#btn”).mouseup(function(){

})
5、鼠标移动到上面触发，移动到标签上面之后，只执行一次
$(“img”).mouseover(function(){

})
6、鼠标移除
$(“img”).mouseout(function(){

})
7、鼠标穿过
$(“img”).mouseenter(function(){

})

8、鼠标移除
$(“img”).mouseleave(function(){

})
9、鼠标移动
$(“img”).mousemove(function(){

})
10、键盘按下事件
$(window).keydown(function(event){
console.log(event.keyCode);
})
11、键盘松开事件
$(window).keyup(function(event){
console.log(event.keyCode);
})
12、失去焦点事件
$(“input”).blur(function(){

})
13、获取焦点事件
$(“input”).focus(function(){

})
14、改变事件
$(“input”).change(function(){

})
四、jquery的属性
4.1 jquery的属性操作
1、attr()函数有三个作用
1、如果attr(“属性名”)；只获取该属性的值
2、如果attr(“属性名”，”属性值”)，判断该标签中是否已经有该属性名，如果有，则表示将该属性的值修改
3、如果attr(“属性名”，”属性值”)，判断该标签中是否已经有该属性名，如果没有，则表示将该属性新增上，并赋值
2、removeAttr(“属性名”),将指定的属性名移除
4.2 class类的操作
主要的作用是为了操作css里面的class选择器，要想使用class类操作之前，必须先在style标签里面定义好class选择器
1、给指定标签增加一个class选择器，给class选择器已经被定义了
$(“#list-2”).addClass(“current”);
2、判断指定标签，是否存在指定class选择器
var flag = $(“#list-2”).hasClass(“current”);
3、将指定标签中的指定class选择器移除
$(“#list-2”).removeClass(“current”);
4、toggleClass();自带判断是否有该class属性，如果有则将其取消，如果没有，则添加上。
$(this).toggleClass(“current”);

4.3 文本、html和value值操作
1、向一个标签中新增标签
$(“#one”).html(“”)
2、操作两个标签之间的文本信息，包括：新增，修改、删除和获取值
$(“#one”).text(“”);
3、val(),只能操作具有value属性或者具有value特性的标签，如果val()没有值，则表示获取，val(有值)表示设置标签中的value值
var val = $(“#userName”).val(“张三”);

五、筛选
1、从符合要求的标签中找出指定的标签
$(“#two li”).eq(2).css(“border”,”2px red solid”);
2、从符合要求的标签中找出第一个标签
$(“#two li”).first().css(“border”,”2px blue solid”);
3、从符合要求的标签中找出最后一个标签
$(“#two li”).last().css(“border”,”2px blue solid”);
4、从符合要求的标签中，找出使用了指定class选择器的标签，该方法返回的是boolean，不能在跟方法
var flag = $(“#two-c”).hasClass(“items”);
5、判断父标签中是否有符合要求的子标签，如果有则把父标签选择上
$(“li”).has(“ul”).css(“border”,”2px red solid”);
6、从结果集中找出没有使用指定选择器的标签
$(“#two li”).not($(“#two .items”)[0]).css(“border”,”2px red solid”);
7、从集合中根据下标选定范围内的标签
$(“#two li”).slice(1,3).css(“border”,”2px yellow solid”);

8、从父标签中找到符合要求选择器的直接子标签
$(“#two”).children().eq(0).css(“border”,”2px red solid”);
9、从父标签中找到符合要求选择器的后代标签
$(“#one”).find(“.items”).css(“border”,”2px red solid”);
10、找出指定标签的下一个紧邻兄弟标签，可以使用选择器进行再次判断
$(“#two-c”).next(“.items”).css(“border”,”2px red solid”);
11、找出指定标签下面的所有兄弟标签，并且可以使用选择器再次筛选
$(“#two-c”).nextAll(“.items”).css(“border”,”2px red solid”);
12、prev找出指定标签的上一个紧邻兄弟标签，可以使用选择器进行再次判断
$(“#two-c”).prev(“.items”).css(“border”,”2px red solid”);
13、找出指定标签上面的所有兄弟标签，并且可以使用选择器再次筛选
$(“#two-c”).prevAll(“”).css(“border”,”2px red solid”);
14、选择出所有的兄弟标签
$(“#two-c”).siblings().css(“background-color”,”red”);
15、parent,找到指定原元素的父标签
$(“#li-42”).parent().css(“border”,”2px red solid”);

六、文档操作
6.1内部插入
在一个父标签中，添加上子标签，只能有两个选择，第一个子标签或者最后一个子标签
1、append();在一个父标签中，在尾部添加一个新的标签
$(“#out”).append(“”);
2、appendTo()方法，和上面的作用一致，先创建新的标签，再添加到指定的父标签中
$(“”).appendTo($(“#out”));
3、prepend方法，在一个父标签中的第一个位置添加子标签
$(“#out”).prepend(“”);
4、prependTo()方法，和上面的方法作用一致，先创建标签，再添加到指定的父标签中
$(“”).prependTo($(“#out”));

6.2外部插入
1、after，在指定的标签之后新增一个标签
$(“#out img”).eq(1).after(“”);
2、before,在指定的标签之前新增一个标签，占用之前的位置
$(“#out img”).eq(1).before(“”);
3、insertAfter，先创建标签，在找到在哪个标签之后新增
$(“”).insertAfter($(“#out img”)[1]);
4、insertBefore()
$(“”).insertBefore($(“#out img”)[1]);

6.3 包裹
1、wrap,先获取指定标签，并给改标签创建一个父标签
$(“#out img”).eq(1).wrap(“

6.4 删除
1、empty();将一个父标签下的所有子标签置为null，相当于删除
$(“#out”).empty();
2、remove(),将符合要求的标签删除
$(“#out img”).eq(1).remove();

七、ajax和json
7.1 原生ajax中get请求
function request(){
//1、创建请求的对象
var ajax = new XMLHttpRequest();

//2、设置请求路径和值
ajax.open(“get”,”/AjaxDemo/demo1?userName=”+$(“#userName”).val()+”&password=”+);

//3、发送请求
ajax.send();

//4、回调
ajax.onreadystatechange = function(data){
console.log(data)
}
}
7.2 原生ajax中post请求
function request(){
//1、创建对象
var ajax = new XMLHttpRequest();

//2、设置发送的路径
ajax.open(“post”,”/AjaxDemo/demo1”);

//多一步；设置请求头
ajax.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);

//3、发送
ajax.send(“userName=root&password=admin”);

//4、回调
ajax.onreadystatechange = function(data){
console.log(data);
}
}
7.3 jquery的ajax
jquery完成ajax请求
前后端结合（ajax+json）
@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);
  }
}

八、静态模板技术
8.1 入门示例代码
编写一个java基础的类，实现模板技术的文件替换
/*

@ClassName: Demo1
@Description:静态模板的入门程序
@author Alon
@date 2020年12月18日上午10:17:01

*/
public class Demo1 {
public static void main(String[] args) throws IOException {
//1、创建静态模板的对象,可以将其理解为引擎
TemplateEngine en = new TemplateEngine();

    //2、创建模板对象的文件，将一个前端页面作为模板
    FileTemplateResolver resolver = new FileTemplateResolver();
    //处理编码集
    resolver.setCharacterEncoding("UTF-8");
    //设置模板所在的前缀
    resolver.setPrefix("page/");
    //设置模板的后缀
    resolver.setSuffix(".html");
    //3、将模板对象添加到静态模板引擎中
    en.addTemplateResolver(resolver);
    //模板的目的，是将模板中需要替换的内容，将其替换成动态数据
    Context context = new Context();
    //将数据设置进去
    context.setVariable("userName", "李四");
    //由引擎生成文件
    en.process("a", context, new FileWriter("page/a.html"));
}

}

8.2 web端使用静态模板
@WebServlet(“/index”)
public class IndexServlet 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 {
    //实现模板技术
    //1、创建模板引擎对象
    TemplateEngine en = new TemplateEngine();
    //2、创建模板对象的文件,需要将request获取的ServletContext作为参数传递到构造函数中
    ServletContextTemplateResolver resolver = 
            new ServletContextTemplateResolver(request.getServletContext());
    //添加到引擎里面
    en.addTemplateResolver(resolver);
    //3、设置编码集
    resolver.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("UTF-8");
    response.setContentType("UTF-8");
    request.setCharacterEncoding("UTF-8");
    //4、设置前缀和后缀
    resolver.setPrefix("page/");
    //设置后缀
    resolver.setSuffix(".html");
    request.setAttribute("userName", "张三");
    //5、存数据的对象
    WebContext context = new WebContext(request, response, request.getServletContext());
    //6、完成模板
    en.process("a",context,response.getWriter());
}

}

九、邮件激活
/*

@ClassName: MailUtils
@Description:发送邮件的工具包
@author Alon
@date 2020年12月18日下午3:35:48

/
public class MailUtils {
/**

@Title: sendMail
@Description: 发送邮件的工具方法
@param @param email
@param @param code
@return void
@throws
*/
public static void sendMail(String email,String code,int id) {
//将邮箱的参数设置好
Properties prop = new Properties();
prop.put(“mail.transport”, “smtp”);
prop.put(“mail.smtp.port”, “25”);
prop.put(“mail.smtp.auth”, “true”);
prop.put(“mail.smtp.host”, “smtp.163.com”);

    //获取会话
    Session session = Session.getInstance(prop, new Authenticator() {
        //设置发送的邮箱及密码（该密码不是登录密码，是授权码）
        @Override
        protected PasswordAuthentication getPasswordAuthentication() {
            // TODO Auto-generated method stub
            return new PasswordAuthentication("private_lxl@163.com","XGZQGQWSALHDJADB");
        }
    });
    //获取邮件对象，发送邮箱，接受邮箱，邮件的主题，邮件的内容
    Message message = new MimeMessage(session);
    try {
        //设置发送邮箱
        message.setFrom(new InternetAddress("private_lxl@163.com"));
        //设置收件邮箱
        message.setRecipient(Message.RecipientType.TO, new InternetAddress(email));
        //设置主题：
        message.setSubject("来自于蜗牛的温暖激活码");
        //设置文件的内容
        message.setContent("请点击超链接进行激活<a href='http://58h9y5.natappfree.cc/WebDemo7/start'?id="+id+"&code="+code+"></a>","text/html;charset=utf-8");
        //发送邮件
        Transport.send(message);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

}

十、代理设计模式
概念：在代理设计模式里面，分为两个部分：目标对象和代理对象，调用的时候，用户不会直接调用目标对象，而是通过代理对象调用目标对象的实现。
10.1静态代理
public interface UserDao {

public void eat();

}
public class UserDaoImpl implements UserDao{

@Override
public void eat() {
    System.out.println("用户吃");
}

}
public class Mapper implements UserDao{
private UserDaoImpl userDaoImpl;
public Mapper(UserDaoImpl userDaoImpl) {
this.userDaoImpl = userDaoImpl;
}
@Override
public void eat() {
userDaoImpl.eat();
}

}
public class App {
public static void main(String[] args) {文件的上传下载
文件上传
前端代码

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", "textml;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();
    }   
}

}
文件下载
前端代码

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();
    }
}

//创建目标对象
UserDaoImpl userDaoImpl = new UserDaoImpl();

    //创建代理对象
    Mapper mapper = new Mapper(userDaoImpl);
    mapper.eat();
}

}