web-03-jQuery
1、jQuery->轻量级js库（属于工具，里面封装许多方法）属于方法库，本质就是一个数组
特点：
1）封装了对js、css、dom一致简介的API操作
2）兼容各种浏览器和兼容css3的写法
3）封装了对Ajax的支持和对动画的支持
4）实现了html页面的内容和代码的分离
注意：JQ2.x ，不支持IE6/7/8
2、如何使用JQ（三个步骤）
1）在页面中引入JQ
2）通过JQ查找节点
3）通过JQ方法对节点进行相关的操作（增删改查）
注：
1）JQ本身是一个扩展了的数组
2）JQ绝大部分的方法都会返回一个JQ对象，所以有这样的写法：JQuery().方法().方法()...
3、JQ和原生js对象的转换
1）原生js对象转jQuery（原生对象就是DOM对象）
$(dom对象) -> 得到一个jQuery对象
2）jQuery转原生对象
jQuery对象[下标] -> 得到一个原生对象
4、JQ常见选择器
1）$("#id值") -根据id查找节点
2）$(".class值") -根据class查找节点
3）$("tagName值") -根据标签名查找节点
4）$("tagName值,#id值") -根据标签名或id查找
5）$("选择器1 选择器2") -后代选择器，找后代节点，如：$("div p")
6）$("选择器1>选择器2") -找儿子节点，如：$("div>span")
7）$("选择器1~选择器2") -找所有的弟弟节点，如：$("div~span")
8）$("选择器1+选择器2") -找下一个弟弟，如：$("div+span")
注：以下是常用于表格或列表
9）$("选择器:first") -找第一个
10）$("选择器:last") -找最后一个
11）$("选择器:not(选择器2)") -排除符合选择器2的情况
12）$("选择器:even") -偶行（从0开始）
13）$("选择器:odd") -奇行（从0开始）
注：通过jq修改js样式，$().css(属性,值);
14）$("选择器:eq(index)") -找下标为index节点
15）$("选择器:lt(index)") -找下标小于index节点
16）$("选择器:gt(index)") -找下标大于index节点
17）$("选择器:hidden") -找出隐藏的元素
18）$("[class^=]") -查找class值以指定字符串开头
如：
$("[class]").css("color","red");
$("[class=on]").css("color","blue");
form表单相应的选择器
19）$("选择器:enable") -找可编辑元素 状态过滤
20）$("选择器:disable") -找不可编辑元素
21）$("选择器:checked") -找选中元素
22）$("选择器:selected") -找选中元素
23）$("选择器:text") -找普通文本
根据input节点的type： type值=$("input[type=值]")
24）$("选择器:contains(text)") -找包含指定文本的节点
如：找出包含“开”字的节点
$("div:contains(开)").css("color","red");
25）$("选择器:empty") -找出空的双标记
如：将空双标记内容赋值为你好
$("div:empty").html("你好");
注：JQ常用方法
$(选择器).css() -用来获取css样式
$(选择器).css(属性,值) -修改css样式
$(选择器).val() -用来获取val值（单标记获取值的方法）
$(选择器).val(值) -修改val值
$(选择器).html() -用来获取html值（适应双标记）
$(选择器).html(值) -修改html值
5、JQ操作dom（对象指 $(选择器)）
1）增加
JQ对象.append(); -对象内部追加
如：ul.append(li); -li在最后
对象.prepend() -对象内部最前面追加
如：ul.prepend(li) -li在最前面
对象.after() -对象后面添加
如：ul.after(div) -div是ul的下一个弟弟
对象.before() -对象前面添加
如：ul.before(div) -div是ul的上一个哥哥
2）删
对象.remove([选择器]) -完全删除节点（包含结构），可以根选择器
对象.empty() -清空节点内容，结构保留
3）改
-1）改值
改value值 -对象.val(值);
改html值 -对象.html(值)
改属性值 -对象.attr(属性名,属性值)
获取属性值：对象.attr(属性名);
-2）改样式
对象.css("属性","值");
对象.css({"属性":"值","属性":"值"});
注：不推荐使用，因为修改的样式会成为行内式，优先级比较高
通过修改class，推荐使用
对象.addClass(className) -给对象添加一个class
对象.removeClass(className) -删除对象的指定class
-3）改事件
6、JQ遍历节点
1）对象.children() -找所有的子节点
2）对象.next() -找下一个兄弟节点
3）对象.prev() -找上一个兄弟节点、
4）对象.siblings() -找所有的兄弟节点
5）对象.parents("选择器") -找祖先（由内向外找）
7、JQ操作dom事件
1）对象.事件名(); //给某个对象绑定某个事件
如：obj.click(function(){}); //function(){}，为匿名函数，对象被点击时立刻执行里面的匿名函数
2）对象.on(事件名,function(){});
3）原生onload方法：
window.onload=function(){} -当页面加载完成之后会产生一个load事件，对应的事件函数就会被执行，当页面加载完成（dom树已经完全生成），此时查找任何dom节点都能被找到，这个是原生写法
4）JQ写法
$(function(){}); -页面加载完成立刻执行该函数
这个写法等同于：
function fn(){}
$(fn);
8、JQ动画
* show() -显示
* hide([动画时长][动画的轨迹][动画完成之后执行的内容]) -隐藏
* fadeIn(); -淡入
* fadeOut(); -淡出
* 自定义动画
animate(效果,动画时长,[动画完成之后执行的内容])
补充：es6中js的面向对象
9、json java对象->json（前提进入json的jar包） 是一种数据转换格式
将后台的数据展示在前台页面-解析
*若为java单个对象，通过，JSONObject.from(java对象).toString();
*若为多个对象，通过，JSONArray.from(java数组|集合).toString();
