JavaWeb学习篇10_JQuery初级、高级、Ajax、json学习、校验用户名是否存在案例、JQ小案例、

sichaolong

2024-06-28 帮助2人

开始

一、JQuery

1.1概念

学新通

JQuery是JavaScript的一个框架，简化js开发

宗旨是:write less do more

优化了HTML文档的操作
优化了事件处理
优化了动画设计
优化了Ajax交互

1.2快速入门

学新通

每个版本对应的有开发版本、生产版本（min）

导入外部JQuery
使用

学新通

1.3JQuery对象和JS原生对象的区别

原生方式获取的数组对象

学新通

JQ方式获取的数组对象

学新通

JQ可以直接 数组对象.html()

缺省参数是获取标签体内容
传入参数一键设置数组对象标签体内容，不用再向原生那样需要遍历设置

学新通

注意js对象的方法和JQ的方法是不通用的

学新通

因此我们将两者进行转换

js—>JQ对象：直接$(js对象)
JQ---->js对象：JQ对象[索引]或者 JQ对象.get(索引)

js----》JQ

学新通

JQ----》js

学新通

1.4选择器

筛选、获取具有相似特征的元素

基本语法学习：

事件绑定
入口函数
样式控制

学新通

需要注意的是上述只能写在<body>上面,如果想写在下面，就要使用预加载函数

学新通

注意：

相似功能的window.onload（）只能在页面定义一次，而JQ的可以出现多次

JQ结合CSS进行样式控制

学新通

JQ选择器：

学新通

一些练习

学新通

1.5DOM操作

内容操作
属性操作
CRUD操作

学新通

举栗

学新通

举栗

学新通

举栗

学新通

举栗

这里的remove()和empty(）可以使用对象调用自己删除自己

学新通

1.6案例

隔行换色

学新通

全选和全不选

学新通

qq表情克隆

学新通

下拉列表选中框条目移动

学新通

JQuery高级

动画
遍历
事件绑定
插件

1.7动画

对应动画特效

默认显示隐藏
滑动显示和隐藏
淡入淡出显示和隐蔽

学新通

举栗

学新通

1.8遍历

js的遍历方式：for(...;...;...)
JQ的遍历方式:

JQ对象.each(callback)
$.each(object,[calback])
for..of:

学新通

js原生遍历li
JQ第一种方式：JQ对象调用each()
JQ的第二种方式：$.each(object,[callback]) 区别上面一种，object可以是js对象，像js数组
JQ的第三种方式：for( i of object){...}类似增强for
需要JQ3.0版本之后才能用

1.9事件绑定

学新通

标准绑定
举栗

学新通

当调用的方法不传递回调函数，就会页面加载完默认提交

学新通

on\off绑定

学新通

toggle:注意高版本已经删除此用法，若想使用需要导入插件

学新通

案例：广告的动画显示与消失

分析
实现

案例：抽奖

页面部分、实现分析
实现

2.0插件

可以让开发者增强JQ的功能

实现方式：

$.fn.extends(object):增强通过Jquery获取的对象的功能
$.extend(object):增强Jquery对象$自身的功能

学新通

二、Ajax

2.1概念

ASynchronous JavaScript And XML 异步的JavaScript和XML

这个地方的同步合异步跟线程的关系并不大

此为建立在客户端和服务端通信的基础上的同步和异步

学新通

同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作
异步：客户端不需要等待服务端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作

学新通

2.2实现方式

原生JS实现（了解）
JQuery实现方式

$.ajax()
$.get()
$.post()

2.2.1原生JS实现

固定格式的书写，可以查阅文档

学新通

接受并处理来自服务器的响应结果

那什么时候获取呢？需要看服务器响应是否完成，readyState的值为4，status的值为200，则接受结果

学新通

2.2.2JQuery实现

$.ajsx()发送异步请求
参数是键值对

参数：

data 的值可以是url格式的，也可以写成json格式的
success 绑定回调函数，当成功请求后会自动执行绑定的函数
error 若出现错误的请求信息，会自动执行绑定的回调函数
dataType 设置响应的数据格式，一般指定为json格式
…

学新通

这种方式很简单，我们只需要找到对应功能的键来赋值添加实现借壳

常见的键功能：

学新通

$.get()更简单的方式发送异步请求
只需传参就行，不需要键名，后面3个参数可选

学新通

$.post()更简单的方式发送异步请求
只需传参就行，不需要键名，后面3个参数可选

学新通

三、json

3.1概念

JavaScript Object Notation JavaScript的对象表示法

JavaScrupt 对象表示法，为了将JavaScript一些零散的数据，封装成一个对象，便于数据处理传输

常见格式：var p = {"name":"xiaosi","age":20}，

现在json有了更广泛的应用

用于存储和交换文本信息的语法，类似于XML
比XML更小、传输更快、更易于解析

3.2语法

3.2.1基本规则

花括号中可以套中括号（数组）、花括号

对象中可以包含对象
对象中可以放数组
数组可以存放多个对象

学新通

3.2.2获取数据

对象.键名
对象["键名"]
数组对象[索引]

从对象获取数据

学新通

从数组对象获取数据

学新通

从对象数组获取数据

学新通

3.2.3遍历json对象的数据

注意：

遍历取值的时候需要对象名[]，而不用对象名.key

学新通

对象数组的遍历

学新通

3.3json数据和Java对象的相互转换

我们将来要做的是将json当做数据的载体进行数据传输

这就涉及到客户端到服务器端的通信

学新通

JSON解析器：封装好的工具类，供我们使用，不用写那么多的代码了

常见的解析器：Jsonlib、Gson、fastjson、jackson(Spring内置的解析器)

3.3.1json转为Java对象

了解一下使用的不是很多

解析器jackson的使用步骤：

导入jackson相关jar包
创建jackson核心对象ObjectionMapper
调用核对象的相关方法来转化：readValue(json字符串数据，Class)

学新通

3.3.2Java对象转化为json

解析器jackson的使用步骤：

导入jackson相关jar包
创建jackson核心对象ObjectionMapper
调用核对象的相关方法来转化:writeValueAsString(对象)

domain.Person

学新通

test.JacksonTest

学新通

注解的使用

@JsonIgnore忽略属性不转化
@JsonFormat按照指定格式转化（一般用于日期）

学新通

格式日期

学新通

复杂的集合List转化—》得到数组

学新通

复杂的集合Map转化—》得到对象

学新通

四、校验用户名是否存在案例

需求：当注册页面用户框失去焦点后，就去发送Ajax请求，验证用户名是否可用，并提示相关信息

学新通

FindUserServlet

学新通

一些问题：

数据虽然响应回来，仅仅是一个字符串，通过json的方式获取不到返回的信息
乱码问题

学新通

在服务器端设置返回数据类型为json格式，就不用再客户端请求的时候设置dataType了

学新通

这篇好文章是转载于：学新通技术网