JQuery与AJAX

1 概念：一个javaScript框架，简化js开发
2 快速入门：
步骤：
1 下载JQuery
2 导入JQery的js文件。
版本的区别：
1 jquery-xxx.js:开发版本。给程序员看的，有良好的缩进和注释
2 jquery-xxx.min.js:生产版本。程序中使用，没有缩进。体积小一些。程序加载更快。
3 导入jquery包，引入 < script src=“js/jquery-3.3.1.min.js”>< /script>
4 使用：

例如：
//使用JQuery获取元素对象
var div1=${"#div1"};// 通过id获取到对象
alert( div1.html());//通过对象中的html()方法获取div1中的值

5 JQuery对象和JS对象的区别与相互转换：
例如:
// 通过js方式来获取名称叫div的所有html元素对象
var divs=document.getElementsByTagName(“div”); //这里其实是一个数组
//通过jq方式来获取名称叫div的多有html元素对象
var $divs=${“div”}; //这里其实也是一个数组
需求：分别用js和jq的方式设置 divs和$diva中的所有的元素都为"aaaaa";，那么用js的方式就需要遍历divs这个数组，而用jq的方式，就不需要,只需要：$divs.html(“aaaaaa”);
1 JQuery对象在操作时，更加方便
2 JQuery对象和js对象方法不通用的.
如果要用jquery对象操作js对象，那么就需要相互转换：
1 jq—> js:jq对象[索引] 或者 jq对象.get(索引)
2 js —>jq:$(js对象)然后调用jq对象的方法例如:.html()4选择器：筛选具有相似特征的元素(标签)<inputtype="button"value="点我"id="b1">1.事件绑定：$("#b1").click(function(){
alert(“abc”);
});
2 入口函数:
//jquery入口函数(dom文档加载完成之后执行该函数中的代码)
$(function(){

});
这段代码相当于: windows.οnlοad=function(){
}
注意：window.onload 和 ${function}的区别：
window.onload 只能定义一次，如果定义多次，后边的会将前边的覆盖掉
$(function)可以定义多次的。

3 样式控制:在JQuery中可以通过一个操作css样式的方法：
$(function(){
$("#div1").css(“background-color”,“red”);
或者这样写： $("#div1").css(“backgroundColor”,“pink”); 推荐这样写，如果写入按住ctrl键指在这个单词上面不会有提示。
})

五种选择器：
一：基本选择器：
1 标签选择器(元素选择器)
* 语法：$(“html标签名”) 获得所有匹配标签名称的元素
2 id选择器：
$("#id的属性值") 获得与指定id属性值匹配的元素
3 类选择器
$(".class的属性值") 获得与指定的class属性值匹配的元素
4 并集选择器：
$("#div1,#div2,.div3…");获取多个选择器
例如:
$("#b4").click(function(){
KaTeX parse error: Expected 'EOF', got '#' at position 8: ("span,#̲two").css("back…(“A B”) 选择A元素内部的所有B元素，包括孙子辈的选择器
2 子选择器:
语法：$(“A > B”) 选择A元素内部的所有B子元素 只包含儿子辈的

3 属性选择器:
1 属性名称选择器：
语法：$(“A[属性名]”) 包含指定属性的选择器
例如：含有属性title的div元素背景色为红色 id=“b1”
$("div[title]").css()2属性选择器:语法：$(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
$(“div[title=‘test’]”).css()
以te开头的属性值颜色变化：
$(“div[title^=‘te’]”).css("");
以est结束的div元素背景为红色。
$("div[title$=‘est’]").css(“backgroundColor”,“pink”);
包含es的div元素背景为红色
$(“div[title*=‘es’]”).css();
3 复合选择器
选择有属性id的div元素，然后在结果中选取属性title值含有"es"的div
语法: $(“A[属性名=‘值’] [ ]…”) 包含多个属性条件的选择器
$(“div[id][title=‘es’]”).css();
4 过滤器选择器：
1 首元素选择器:
语法：first 获得选择的元素中的第一个
例如：改变第一个div元素的背景色为红色
$(“div:first”).css();
2 尾元素选择器:
语法：:last 获得选择的元素中的最后一个元素
改变最后一个div元素的背景色为红色
$(“div:first”).css();
3 非元素选择器:
语法： :not(selector) 不包含指定内容的元素
改变class不为one的所有div元素的背景色为红色
$(“div:not(.one)”)
4 偶数选择器:
语法：:even 偶数, 从 0 开始计数
$(“div:even”).css
5 奇数选择器：
语法: :odd 奇数，从0开始计数
$(“div:odd”).css()
6 等于索引选择器:
语法：:eq(index) 指定索引元素

   7  大于索引选择器:
      语法： :gt(index) 大于指定索引元素
      $("div:gt(3)").css()
   8 小于索引选择器:
      语法：:lt(index) 小于指定索引元素
   9 标题选择器:
       语法：:header 获得标题(h1~h6)元素，固定写法。 
       $(":header")

5 表单过滤选择器
1 可用元素选择器
语法: :enabled 获得可用元素
例如：利用JQuery对象的val()方法改变表单内可用< input> 元素的值
$(“input[type=‘text’]:enabled”).val(“aaaa”);
例如：利用JQuery对象的val()方法改变表单内不可用< input> 元素的值
$("input[type{=}^{\prime }tex{t}^{\prime }]:disabled").val("aaa");利用JQuery对象的length属性获取复选框选中的个数alert($("input[type=‘checkbox’]:checked’’).length);

2 不可用元素选择器
   语法: :disabled 获得不可用元素
3 选中选择器：
   语法：:checked 获得单选/复选框选中的元素
 4 选中选择器
     语法：: selected 获得下拉框选中的元素。
      $("#job > option:selected").length

例如：
< select name=“job” id=“job” multiple=“multiple” size=4> //下拉列表，加上了multiple属性就变成了多选下拉列表。
程序员
中级程序员

DOM操作
1内容操作
1 html():获取/设置元素的标签体的内容 内容 —> 内容
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲myinput").html(…("#myinput").text(); 将标签里的div下的所有设置成文本text()里的内容。
3 val():获取/设置元素的value属性值的. 相当于js中的的value属性值
var value=$("#myinut").val(“李四”);
2 属性操作：
1 通用属性操作：意味着可以操作所有的属性
1 attr():获取/设置元素的属性值: $("#bj").attr(“name”);
2 removeAttr():删除属性: $("#bj").removeAttr(“name”);
3 prop():获取/设置元素的属性值 $("#hobby").prop(“checked”); 获得hobby的选中状态
4 removeProp():删除属性
attr和prop区别？
1如果操作的是元素的固有属性，则建议使用prop
2如果操作的是元素的自定义属性，则建议使用attr.

2 对class属性操纵：
1 addClass():添加class属性
//采用属性增加样式(改变id=one的样式)
$("#one").prop(“class”,“second’); 等价于 $(”#one").addClass(“second’);
2 removeClass():删除class属性
$(”#one").removeClass(“second”);
3 toggleClass():切换class属性。
$("#one").toggleclass(“second”); 如果有样式就删除原来的样式，如果没有就添加上样式。
toggleclass(“one”):判断如果元素对象上存在class=“one”,则将属性值one删除掉。如果元素对象上不存在class=“one”,则添加。

CRUD操作：
append():父元素将子元素追加到末尾
对象1.append(对象2):将对象2添加到对象1元素内部，并且在末尾
prepend():父元素将子元素追加到开头
对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头。
appendTo():
对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
preperidTo():
对象1.prependTo(对象2):将对象1添加到对象2内部，并且在 开头
5 afterr():添加元素到元素后边
对象1.after(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系
6 before():添加元素到元素前边
对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
7 insertAfterr()
对象1.insertAfter(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系
$(function(){

})
8 insertBefore():
对象1.insertBefore(对象2):将对象2添加到对象1前边。对象1和对象2是兄弟关系。
9 remove():移除元素
对象.remove():将对象删除掉
10 empty():清空元素的所有后代元素
对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点。

1 动画：
1 三种方式显示
1默认显示和隐藏显示
1 show
2 hide
3 toggle
2 滑动显示：
1 slideDown
2 slideUp
3 slideToggle
3 淡入浅出显示和隐藏方式

AJAX:概念：ASynchronous JavaScript And XML 异步的JavaScript 和 XML
1异步和同步：客户端和服务器端相互同信的基础上
同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作
同步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

  Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
  通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
  传统的网页(不使用 Ajax) 如果需要更新内容，必须更新整个网页页面呢。

实现方式：
1 原生的JS实现方式

JQeury实现方式:
1 $.ajax()语法：$.ajax({键值对});

2 $.get():发送get请求语法:$.get(url,[data],[callback],[type])
url:请求路径
data:请求参数
callback:回调函数
type:响应结果的类型
例如：$.get(“ajaxServlet”,{username:“rose”},function(data){
alert(data)
},“text”);
3 $.post():发送post请求

JSON:
1概念：JAVAScript Object Notation JAVAScript对象表示法
语法: var p={“name”:“张三”,“age”:23,“gender”:“男”};
json现在多用于存储和交换文本信息的语法
进行数据的传输
json 比 xml 更小 更快 更易解析。
语法：
基本规则
数据在名称/值对中:json数据是由键值对构成的
键用引号(单双都行)引起来，也可以不适用引号
值的取值类型:
1数字(整数或浮点数)
2字符串(在双引号中)
3逻辑值(true或false)
4数组(在方括号中){"persons’’:[{},{}]}
5对象(在华括号中){"address’’:{“province”:"陕西’’…}}
6 null
数组由逗号分隔:多个键值对由逗号分隔
花括号保存对象:使用{}定义json格式
方括号保存数组:[]
1 定义基本格式:
var person={"name’’:“张三”,age:23,‘gender’:true};
2嵌套格式: {}->[]
例如：
var persons={“persons”:[{"name’’:“张三”,"age’’:23,“gender”:true},{"name’’:"李四’’，“age”:24,“gender”:true}]};
var name1=persons.persons[2].name;

  var ps=[{},{},{}]

双层for循环遍历json数组:
for(var i=0;i<ps.length;i+=){
var p=ps[i];
for(var key in p){
alert(key+":"+p[key]);
}
}
var persons=ps[1].name;
2 获取数据:
1 json对象.键名
2 json对像["键名’’]
3数组对象[索引]

获取person对象中所有的键和值
json的遍历 for in循环
for(var key int person){

alert(key+":"+person[key]);

}

3 JSON数据和Java对象的相互转换
JSON解析器:
常见的解析器: JsonLib,Gson,fastJson,jackson
1java对象转换JSON
1使用步骤:
1导入jackson的相关jar包
1jackson-annotation-2.2.3.jar
2jackson-core-2.2.3.jar
3jackson-databind-2.2.3.jar
2创建jackson核心对象 ObjectMapper
3调用ObjectMapper的相关方法进行转换。
例如：
创建Jackson的核心对象 ObjectMapper
ObjectMapper mapper =new ObjectMapper();
转换
转换方法:
writeValue(参数1,obj):
obj:对象。
参数1：
File:将obj对象转换为JSON字符串，并保存到指定的文件中
Writer:将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream:将obj对象转换为JSON字符串，并将json数据填充到字节输出流中。
writeValueAsString(obj):将对象转为json字符串。
String json=mapper.writeValueAsString§; {“name”:“张三”,"age’’:23,}

        mapper.writeValue(new File("d://a.txt"),p)；

2 注解：
@JsonIgnore //忽略该属性,排除属性。放在某个成员变量上，就忽略这个成员变量
@JsonFormat(pattern = “yyyy-MM-dd”)：属性值的格式转换。

JSon转java对象：
String json="{“gender”:“男”,“name”:“张三”}";
//创建ObjectMapper对象
ObjectMapper mapper=new ObjectMapper();
//3转换为java对象 Person对象
Person person=mapper.readValue(json,Person.class);
校验用户名是否存在
1 服务器响应的数据,在客户端使用时，要想使用json数据格式使用
1 $.get(type):将最后一个参数type指定为"json’’
2 在服务器端设置MIME类型
response.setcontentType("application/json;charset=utf-8’’);

案例:
< script>
$(function(){
//给username绑定blur事件，失去焦点事件
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲username").blur…(this).val();
//发送ajax请求
//期望服务器响应json数据格式
KaTeX parse error: Expected '}', got 'EOF' at end of input: … var span=("#s_username");
if(data.userExsit){
//用户存在
span.css(“color”,“red”);
span.html(data.msg);
}else{
//用户名不存在
span.css(“color”,“green”);
span.html(data.msg);
}

},“json”);
})

});
< /script>

< form>
< input type=“text” id=“username” name=“username” placeholder=“请输入用户名”>

< input type=“password” name=“password” placeholder=“请输入密码”>

< input type=“submit” value=“注册”>
</ form>

在后台servlet中可以这样写：
response.setContentType(“application/json;charset=utf-8”);//设置响应的数据格式为json
//在Tomcat的config文件中可以查json的MIME格式。
Map< String,Object> map=new HashMap< String,Object>();
if(“tom”.equals(username)){
map.put(“userExsit”,true);
map.put(“msg”,“此用户太受欢迎，请更换一个”);
}else{
map.put(“userExsit”,false);
map.put(“msg”,“用户名可用”);
}
//将map转为json，并且传递给客户端
//将map转为json
ObjectMapper mapper=new ObjectMapper();
mapper.writeValue(response.getWriter(),map);

注意在 ajax中设置响应为json格式的方法,在 dataType：json
在服务器设置响应格式为json格式的方法, response.setContentType(“Application/json;charset=utf-8”);

用hidden是占位置的而none是不占位置的。