后端程序员关于Jquery必须会的基础使用

Jquery基础

jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），它使HTML文档的遍历和操纵，事件处理，动画和Ajax等事情变得更加简单,极大的简化了js的dom和bom操作。
接下来我们看看JQuery的基础使用

引入jq插件三种方式

1.使用相对路径

2.实现dom操作

html(): 获取/设置元素的标签体内容 相当于 js:innerHTML
text(): 获取/设置元素的标签体纯文本内容 相当于 js:innerText
val() : 获取/设置元素的value属性值 相当于 js:value
实例代码

    
    


我们要好好学习天天向上

3.基本事件

1.click 点击事件
2.blur 失去焦点事件
3.change 当值改变触发事件
实例代码

    
    





    成熟
    青涩
    单纯
    轻浮
    激情

Jquery实现ajax

1.ajax请求

$.get()
$.post()

异步请求get的4个参数：
1.url 请求路径，访问服务器servlet的路径
2.请求参数，发送到服务器的参数
3.回调函数，接收并处理服务器响应的数据的函数
4.希望服务器响应的数据格式，通常有 text(字符串) ，json （键值对形式的字符串)

以下需求示例代码：
姓名输入框失去焦点的瞬间，就自动携带name参数，去后台查找，是否名称冲突，而不是点击了注册后才提交整个表单，此处只携带一个参数去后台，表单并没有提交

实现步骤：
1.姓名输入框绑定一个失去焦点事件
2.失去焦点事件实现函数中，发送异步请求，携带参数name和参数值去后台servlet
3.在servlet中： 接收参数name ,判断是否重名 ，给出不同的反馈，响应给浏览器客户端不同的值
4.客户端接收到servlet的反馈信息后，在姓名输入框的后面显示出来

    
    <%--动态上下文路径--%>
    



    

        姓名：

        密码：

        
    

servlet代码

@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
  
    //异步请求处理中，不做页面跳转，只是用response对象响应数据即可
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("异步请求进来啦");
        //1.获取异步请求发送的参数
        String name = request.getParameter("name");
        System.out.println(name);
        //2.判断姓名是否冲突--简化业务：和 null比较
        response.setContentType("text/html;charset=utf-8");
        if(name.equals("null")){
            //3.响应不同的数据 -- 处理响应中文乱码问题
            response.getWriter().write("用户名冲突！");
        }else {
            response.getWriter().write("用户名正常！");
        }
    }
}

2.遍历

$.each()
示例代码：

    
    <%--动态上下文路径--%>