JQ

过滤器选择器

选择器	语法
首元素选择器	$(“A:first”)
尾元素选择器	$(“A:last”)
非元素选择器	$(“A:not(B)”)
偶数选择器	$(“A:even”)
奇数选择器	$(“A:odd”)
等于索引选择器	$(“A:eq(index)”)
大于索引选择器	$(“A:lt(index)”)

表单属性选择器

选择器	语法
可用元素选择器	$(“A:enabled”);
不可用元素选择器	$(“A:disabled”)
单选/复选框被选中的元素	$(“A:checked”)
下拉框被选中的元素	$(“A:selected”)

选择器小结

选择器：类似于CSS的选择器，可以帮助我们获取元素

JQuery中选择器的语法：$(\”\”);

最重要的基本选择器：

$(“元素的名称”)
$(\”#id的属性值\”)
$(\”.class的属性值\”)

JQuery操作文本

html() 获取标签的文本
html(value): 获取或设置标签的文本

JQuery操作对象

方法	作用
$(“元素”)	创建指定的元素
append(element)	添加成最后一个子元素，由添加者对象调用
appendTo(element)	添加成最后一个子元素，由被添加者对象调用
prepend(element)	添加成第一个子元素，由添加者对象调用
prependTo(element)	添加成第一个子元素，由被添加者对象调用
before(element)	添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
after(element)	添加到当前元素的后面，两者之间是兄弟关系，又添加者对象调用
remove()	删除指定元素（自己删除自己）
empty	清空指定元素的所有子元素

样式操作

方法	作用
css(name)	根据样式名称获取css样式
css(name,value)	设置css样式
addClass(value)	给指定的对象添加样式类名
removeClass(value)	给指定的对象删除样式类名
toggleClass(value)	如果没有样式类名，则添加。如果有，则删除

操作属性

attribute 属性

attr(“name”),获取name属性的值
attr(“name”,“value”) 设置值

propertie 属性

prop(“name”,\”[value]\”) 单选框复选框默认被选中

综合案例复选框

1.为全选按钮添加单击事件

$(\"#selectAll\").click(function(){$(\".item\").prop(\"checked\",true);});

2.为反选按钮添加单击事件

$(\"#reverse\").click(function(){let items=$(\".item\");items.each(function(){$(this).prop(\"checked\",!$(this).prop(\"checked\"));})})

随机图片案例

//1.准备一个数组let imgs = [\"img/01.jpg\",\"img/02.jpg\",\"img/03.jpg\",\"img/04.jpg\"];//2.定义计数器变量let count = 0;//3.声明定时器对象let time = null;//4.声明图片路径变量let imgSrc = \"\";//5.为开始按钮绑定单击事件$(\"#startBtn\").click(function(){//6.设置按钮状态//禁用开始按钮$(\"#startBtn\").prop(\"disabled\",true);//启用停止按钮$(\"#stopBtn\").prop(\"disabled\",false);//7.设置定时器，循环显示图片time = setInterval(function(){//8.循环获取图片路径let index = count % imgs.length; // 0%10=0  1%10=1  2%10=2 .. 9%10=9  10%10=0//9.将当前图片显示到小图片上imgSrc = imgs[index];$(\"#small\").prop(\"src\",imgSrc);//10.计数器自增count++;},10);});//11.为停止按钮绑定单击事件$(\"#stopBtn\").click(function(){//12.取消定时器clearInterval(time);//13.设置按钮状态//禁用开始按钮$(\"#startBtn\").prop(\"disabled\",false);//启用停止按钮$(\"#stopBtn\").prop(\"disabled\",true);//14.将图片显示到大图片上$(\"#big\").prop(\"src\",imgSrc);$(\"#big\").prop(\"style\",\"width: 400px;\");});

AJAX

AJAX: 异步的JavaScript和XML
本身不是一种新技术，而是多个技术综合，用于快速创建动态网页的技术
一般的网页如果需要更新内容，必须重新加载整个页面。
通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新

原生JavaScript实现AJAX

核心对象：XMLHttpRequest

用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

JQuery的AJAX

1.get方式

url：请求的资源路径
data：发送给服务器端的请求参数，格式可以是key=value,也可以是js对象
callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type：预期的返回数据的类型，取值可以是xml，js，json，text等。

//1.为姓名绑定失去焦点事件$(\"#username\").blur(function () {let username = $(\"#username\").val();//3.打开链接$.get(//请求的资源地址\"userServlet\",//请求参数\"username=\"+username,//回调函数function (data) {//将响应的数据显示到span标签$(\"#uSpan\").html(data);},//响应数据形式\"text\");});

2.post方式

3.通用方式实现 $.ajax({name:value…});

url:请求的资源路径
async:是否异步请求，true-是，false-否（默认是true）
data:发送到服务器的数据，可以是键值对形式，也可以是js对象形式
type:请求方式，post或get（默认是get）
dataType:预期返回数据的类型，取值可以是xml，html，js，json，text
success:请求成功时调用的回调函数
error:请求失败时调用的回调函数。

同步和异步

同步：服务器端在处理过程冲，无法进行其他操作
异步：服务器端在处理过程冲，可以进行其他操作

JSON转换

JSON的转换工具是通过JAVA封装好的一些JAR工具包。

可以将java对象或集合转换成JSON格式的字符串，也可以将JSON格式的字符串转成JAVA对象

Jackson：开源免费的JSON转换工具，SpringMVC转换默认使用Jackson。

导入jar包（具有依赖关系）

2.创建核心对象

3.调用方法完成转码

private ObjectMapper mapper = new ObjectMapper();/*1.User对象转json, json转User对象json字符串 = {\"name\":\"张三\",\"age\":23}user对象 = User{name=\'张三\', age=23}*/@Testpublic void test01() throws Exception{//User对象转jsonUser user = new User(\"张三\",23);String json = mapper.writeValueAsString(user);System.out.println(\"json字符串：\" + json);//json转User对象User user2 = mapper.readValue(json, User.class);System.out.println(\"java对象：\" + user2);}

User(“张三”,23);
String json = mapper.writeValueAsString(user);
System.out.println(“json字符串：” + json);

//json转User对象User user2 = mapper.readValue(json, User.class);System.out.println(\"java对象：\" + user2);}

JQuery选择器和基础操作 && AJAX基础知识

JQ