SSM——整合jQuery

一、认识jQuery
jQuery是目前最流行的JavaScript程序库，它通过封装原生的JavaScript函数得到一整套定义好的方法。是John Resig于2006年创建的一个开源项目，现今jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的喜爱和选用。

二、在SSM框架中使用jQuery
1 . 导入jQuery库
第一种方法：从这里写链接内容下载jQuery并放到项目（WEB-INF）中，再在需要用到jQuery的页面的标签里添加以下代码引入，注意正确填写放jQuery文件的地址。

<script src="jquery-1.10.2.min.js"></script>

第二种方法：如果不下载jQuery可以使用CDN（内容分发网络）代替：
在网页的标签里添加以下代码，这里用的是菜鸟教程的CDN，有需要可以找别的CDN使用

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">

2 . 为了在JSP中引用js,css等文件，在控制器的配置中添加静态资源访问映射,有需要就可以在中引用。

    <!--配置静态资源访问映射-->
    <mvc:default-servlet-handler/>
    <mvc:resources mapping="/js/**" location="/WEB-INF/js/"/>
    <mvc:resources mapping="/css/**" location="/WEB-INF/css/"/>
    <mvc:resources mapping="/img/**" location="/WEB-INF/img/"/>

3 . 语法
这里写图片描述
$()：将DOM对象转化为jQuery对象
selector：选择器，获取需要操作的DOM 元素
action()：jQuery中提供的事件处理的方法，其中包括绑定事件处理的方法
常用语法：
css(“属性”,”属性值”) ：为元素设置CSS样式的值
addClass() ：为元素添加类样式
next() ：获得元素其后紧邻的同辈元素
html() ：取得第一个匹配元素的html内容
4 . 选择器：准确地选取页面上的元素
（1）基本选择器
这里写图片描述
（2）层次选择器

（3）属性选择器

（4）过滤选择器

（5）表单选择器

表单属性过滤选择器：

5 . 事件
（1）鼠标事件

鼠标光标悬停事件演示：

$("#myaccound").hover(function(){
        $("#menu_1").css("display","block");
    },
    function(){
        $("#menu_1").css("display","none");
    }
);

（2）键盘事件
这里写图片描述
（3）表单事件

（4）绑定事件

演示：用on（）方法绑定多个鼠标事件

$("input[name=event_1]").on({
    mouseover: function () {
        $("ul").css("display", "none");
    },
    mouseout: function () {
        $("ul").css("display", "block");
    }
});

（5）移除事件
这里写图片描述
5 . Ajax
（1）简介
Ajax 全称为：“Asynchronous JavaScript and XML”（异步JavaScript 和XML），它并不是JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。它本身不是单一技术，是一串技术的集合，主要有：
（1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为；
（2.XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求；
（3.服务器上的文件，以XML、HTML 或JSON 格式保存文本数据；
（4.其它JavaScript，解释来自服务器的数据（比如JSP 从MySQL 获取的数据）并将其呈现到页面上。
（2）异步调用
使用Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步同步有什么区别呢？我们普通的Web 程序开发基本都是同步的，意为执行一段程序才能执行下一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务，感觉有多条线路，类似于短信，不会因为看一条短信而停止接收另一条短信。
Ajax 也可以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让Web 页面出现假死状态，所以，一般Ajax 大部分采用异步模式。
（3）$.Ajax():Ajax中最底层的方法
这里写图片描述

Ajax演示：注册用户名时判断用户名是否已被使用

$("#username").blur(function () {
            $.ajax({
                url: '/api/seller/isExist',
                type: 'GET',
                dataType:'JSON',
                data: {"username": $("#username").val()},
                success:function(response,status,xhr){
                    if(response.exist==1){
                        $("#msg").html("该用户名已被占用").css("color","red");
                        $("#username").focus();
                    }else {
                        $("#msg").html("该用户名可以使用").css("color","green");
                    }
                },
                error:function(){
                    alert("error");
                }
            });
        });

猜你喜欢