jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
使用jquery可以更好完成以下操作：
\1. html文档操作，对于dom相关操作优化
\2. jquery提供更加方便与丰富事件处理
\3. jquery提供简单动画特效
\4. jquery提供ajax交互
要使用任何一个js框架，都是需要导入相关的js文件。
jquery的插件机制特别丰富,在开发中可以选择非常多的相关插件，例如，表单校验插件，树型结构等
其它常用js框架:
1.dojo 面向对象的js框架
2.extjs 学习成本比较高 它提供大量的丰富组件，它的效果展示（动画）非常好
3.prototype 早期比较流行js框架
4.angularJS 它是一个mvc js框架，它提供双向数据绑定
http://jquery.com/ jquery官网
jquery最新版本3.5.1 现在学习的版本1.8.3
因为jquery从jquery2.x以后对浏览器支持不是特别好，在pc端开发使用比较主流的是1.x版本
对于开发中， 我们需要导入的是min.js文件，在学习阶段我们导入 jquery-1.8.3.js
完成操作:页面加载完成后，弹出一个框显示hello jquery
第一步:新建一个web工程，2.5版本。将jquery复制到项目的webcontent中
导入js文件
第二步：完成操作
注意:源生的js绑定，它只能绑定一次（第二次绑定时会将第一次的覆盖掉），而jquery允许绑定多次（都可以显示出来）
源生的js绑定：
jQuery的核心函数
jQuery.holdReady（hold）暂时不讲
1.jQuery(callback)
jQuery(callback)是$(document).ready()的简写
$(document).ready(function(){});页面加载完成后，指定的函数执行
2.jQuery(html,[ownerDocument])
jQuery(html代码)它的作用是将一个dom对象包装成jquery对象
jquery对象：jquery中定义的方法与属性，只有jquery对象可以调用
这个核心函数的作用是将一个dom对象包装成了jquery对象，它的第一个参数是html代码，第二个参数是可选，它用于设置dom的相关属性
3.jQuery([selector,[context]])
这个核心函数的主要作用是用于在页面上查找，根据css选择器。参数1就是css选择器 jquery中提供了九种选择器；参数2 context 就是指定要查找的dom集
4.关于jquery对象与dom对象转换
dom对象—–àjquery对象 $(dom)
jquery对象—-àdom对象 jquery对象[0] 或 jquery对象.get(0)
*jQuery选择器*****（**重要**）****
一、基本选择器
#id 根据 id属性查找一个元素
element 根据元素的标签名称查找元素
.class 根据元素的class属性查找元素
*匹配所有元素（通配符）
selector1,selector2…将每一个选择器匹配到元素合并后一起返回
举例：
1.得到id=d1的元素中的内容显示出：
var html =$(“#d1”).html(); //获取所有html
alert(html);
var html =$(“#d1”).text(); //获取所有文本
alert(text);
2.将class=d元素中的内容后面添加XXX：
$(“.d”).each(function(i){
$(this).html($(this).html()+”XXX”);
}
3.得到id=d1这个div在整个页面上的div是第几个.：
var index =$(“this”).index($(“#d1”)); //序号是从0开始
alert(index);
4.得到class=d的元素有几个：
var size =$(.d).size();
alert(size);
5.将所有的class=d或id=d1元素中的内容设置为java:
$(“.d,#d1”).html(“java”);
$(“.d,#d1”).text(“java”);
方法总结：
1.html ()方法，无参数代表获取元素中的html代码，如果有参数代表设置元素的html信息
2.text()方法，无参数代表获取元素中的文本信息，如果有参数代表设置元素的文本信息
3.each()方法，它的使用可以帮助我们遍历元素，可以传递一个函数 each(function(n)),n就代表的是每一个元素的序号，在函数中可以通过this来获取其dom对象（注意dom对象和jQuery对象的转换）
4.index()方法，它可以判断元素的序号
二、层级选择器
层级选择器是根据元素的关系来获取。关系是指父子关系，兄弟关系(可以看tab键的位置确定，同级的关系，父子的关系)
1.空格 得到元素下的所有子元素(包含直接子元素与间接子元素（子元素的子元素）)
2.大于号> 只获取直接的子元素
3.加号+ 只获取直接的下一个兄弟元素
4.波浪线~ 所有的后边的兄弟元素
举例：
\1. 获取id=d的所有子元素：$(“#d a”) //3个
\2. 获取id=d 的直接子元素:$(“#d>a”) //2个
\3. 获取id=d第一个
兄弟元素:$(“#d+p”) //1个
\4. 获取id=d的所有
兄弟元素:$(“#d~p”) //2个
5.将id=d下的所有子元素的文字颜色设置成红色
方法总结：
css()方法，它可以设置元素的样式,如果只有一个值 css(name,value),如果有多个值,css({name:value,name:value})
三、过滤器
过滤器它是在基本选择器与层次选择器获取到一批元素后，在进行过滤操作，使用过滤选择器基本都是”:”开头，除了属性过滤选择器[]
1.基本过滤选择器
odd是奇数，even是偶数
可以查文档使用
举例：
2.内容过滤选择器
内容过滤选择器它是根据元素内部文本内容进行选中
举例：
可以先创建一个css样式的divColor，然后这里可以用addClass()方法调取。
3.可见性过滤选择器
可见性过滤选择器它匹配display:none或表单中input hidden这样的元素
举例：
方法总结：
1.val() 获取元素当前的值 就是value值
2.show() 让元素显示出来
3.hide() 让元素隐藏起来
4.属性过滤选择器：根据元素的属性来过滤
^=匹配开始
$=匹配结尾
*=匹配包含
举例：
方法总结：
attr()设置或返回被选元素的属性值
5.子元素过滤选择器
根据子元素顺序来获取。
nth-child根据序号来选择，*序号是从1开始* *（2）* 也可以设置odd even 根据奇偶来设置（odd）（even） 也可以通过倍数来设置（3n）
first-child 获取第一个
last-child 获取最后一个
only-child 获取只有一个子元素
举例：
6.表单过滤选择器：表单过滤选择器是用于选取表单中的元素
举例：
方法总结：
1.trim()它是去掉字符串左右空格 $.trim(value)
常用事件处理：
2.失去焦点事件 blur(function(){})
3.click(function(){}) 点击事件
4.submit() 表单提交
7.表单对象属性过滤选择器
checked是用于radio,checkbox 判断选中
selected是用于select下拉框选中
举例：
在开发中，使用比较多的选择器有:
\1. 基本选择器 class id element
\2. 层次选择器 父子关系 兄弟关系
3.过滤选择器 属性过滤 基本过滤 内容过滤 关于表单过滤
*jQuery DOM操作*
一、文档处理
1.插入操作
内部插入是在该标签的内部的最开始（prepend）和最后（append）插入
外部插入是在该标签某一项的前面（before）或者后面（after）插入
举例：
2.删除
举例：
3.替换与克隆
替换：
克隆：
第二个参数生效的情况下，第一个参数必须为true
举例：
综合练习：
二、筛选
1.过滤
过滤操作它相当于是我们在jquery中使用的过滤选择器，
例如 eq可以根据序号来获取元素（从0开始计数） first与last来获取第一个元素与最后一个元素
2.查找
是通过当前元素，获取祖先元素，父元素子元素等。
find方法，它可以直接来查找指定的元素.
*jQuery事件机制*
一、jQuery事件介绍
Jquery中的事件与传统的javascript中事件区别:Jquery中事件允许绑定多个函数，而javascript中一个事件只能绑定一个函数.
事件中的方法：javascript是onblur，而jquery中是blur
二、事件绑定
1.传统的javascript中事件绑定操作
写法1：
写法2：
2.Jquery事件绑定操作
bind与live它们的区别：
三、一次性事件和自动触发
1.一次性事件
one()为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数
2.事件触发
trigger()在每一个匹配的元素上触发某类事件
四、事件切换
1.hover：这个操作它可以绑定两个函数，当触发mouseover时第一个函数执行，当触发mouseout时第二个函数执行
2000是一个时间，2000ms
2.toggle：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
*jQueryAjax编程*
一、jquery ajax开发介绍
1.$.ajax()它是jquery提供的最基本的ajax编程方式。它的功能比较强大，但是使用比较麻烦，一般不使用，它是将远程数据加载到XMLHttpRequest对象中。
2.load get post 它们简化了$.ajax操作，get post针对get与post请求的，它们是开发中使用的比较多。
3.getScript getJSON 它们是用于解决ajax跨域问题的
二、load（仅了解，用的不多）
载入远程 HTML 文件代码并插入至 DOM 中
load(url,参数，回调函数)
服务器端的load对应的servlet下的get方法下的代码：
load方法是将服务器响应的数据直接插入到指定的dom元素中。jquery中的load方法如果有参数请求方式是post，如果没有参数请求方式是get
三、$.ajax（了解）
$.ajax它是jquery中最基本的ajax操作，load get post都简化了$.ajax操作
上述的代码不使用load操作，使用原始的$.ajax操作
四、$.post与$.get（重要）
$.get与$.post它们针对于get与post请求
五、$.getJSON和$.getScript
jQuery ajax开发基于json（重点）
json介绍：
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，是javascript的一个子集.
json简单说就是javascript中的对象和数组.
对象: {key：value,key：value,…}
数组: [“java”,”javascript”,”vb”,…]
注意:在json中它的两种结构可以互相嵌套
{key:[value1,value2],key:value}
[{name:xxx},{key:value},{key:value}]
Fastjson介绍：
将java的对象转换成json数据,也可以将一个json转换成java对象(不常用)
Fastjson是阿里提供的一个开源json插件（工具）
对于json处理的插件有很多： fastjson jsonlib flexjson Jackson
Fastjson的使用介绍：
\1. 导入相应的jar包
\2. 演示fastjson将java对象转换成json数据：
String json=JSONObject.toJsonString(java对象);
问题1:将java对象转换成json时，名称是否可以自己来指定?
用注解@JSONField(name=”xxx”)，下面那个属性的名字就会变成xxx
问题2:如果java对象中存在日期类型属性java.util.Date,是否可以用指定的格式来转换成json
问题3:如果java类中的某些属性不想生成json中
String json=JSONObject.toJsonString(java对象，fiter); 添加一个过滤器
问题4:关于fastjson将java对象转换成json时的循环引用问题
这里的后面重复元素会显示为引用，但我们不想这样，所以可以通过以下设置可以取消循环引用
jQuery ajax开发基于xml(了解)
XStream介绍：可以使用XStream工具来完成xml与java对象之间的转换。它也可以完成java对象与json之间的转换
XStream使用时需要导入的jar包：
XStream怎样将java对象转换成xml：
XStream相关的常用方法
1.设置别名（在转换前设置，在new后设置）
2.忽略属性（在转换前设置，在new后设置）
3.将类的属性设置成xml中字段的属性
上述的操作都可以用注解使用
要想使用XStream的注解，必须开启注解扫描.（在转换前设置，在new后设置）
在java类中的上面加注解
*Ajax跨域问题*
跨域它是不同的域名(服务器)之间的相互的资源的访问
当协议，域名，端口号任意一个不相同，它们就是不同的域。
正常情况下，因为浏览器安全问题，不同域的资源是不可以访问的
跨域解决方案
什么情况下会使用到跨域？
一般情况是在自己的内部的工程中会出现跨域情况。
有三种解决方案:
1.代理方案 前端页面访问本地的服务器，本地服务器访问其它域的资源，它是服务器端的跨域问题解决。
2.jsonp JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server2.example.com的服务器沟通，而 HTML 的
缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true