jquery的介绍

jQuery 是一个 JavaScript的类库，包含了大量的，有助于项目开发的属性和方法，jQuery 极大地简化了 JavaScript 编程。
jQuery的版本
- 第一代版本1.xx.xx，例如1.11.3，特点兼容所有浏览器(包含IE6~IE8)，没有vue/react/angular等框架之前（数据驱动），项目都是基于DOM操作完成的。基本上项目都是jQuery。
- 第二代版本2.xx.xx，放弃了低版本浏览器的兼容处理，迎合了一些移动端的开发处理（同时诞生一个比JQ更懂移动端的类库Zepto，所以二代版本是个鸡肋）
- 第三代版本3.xx.xx，没有处理低版本浏览器的兼容，但是此时项目进入到框架开发时代，传统操作DOM的思想逐步被摒弃，所以JQ已经没落下了。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

常用的jQuery的选择器

获取需要操作的DOM元素，得到的结果是（JQ对象=>类数组集合），只有JQ对象才可以调取JQ提供的一操作DOM的方法。

操作DOM的方法

筛选、遍历方法 `children/find/filter/eq(get)/prevAll/next/nextAll/siblings/index...`

获取DOM元素

eq(index)返回被选元素的指定索引的元素，返回值是一个JQ对象（init(1)），依然可以继续调用JQ方法
```
let $div = $('div')
$div.eq(0).css('color','red') //给第一个div设置字体颜色为红色
复制代码
```
get(index)返回被选对象的指定索引的元素，返回值是一个原生的DOM对象，可以使用原生浏览器提供的属性和方法。
```
$("div").click(function() {
   x = $("div").get(0);
   $("div").text(x.nodeName + ": " + x.innerHTML);
});
复制代码
```
children(select)方法返回返回被选元素的所有直接子元素,selcet一般是字符串值，包含匹配元素的选择器表达式。
```
$("ul").children()//返回ul下所有的子元素，返回值是JQ对象
复制代码
```

find(select) //返回所有被选中的select元素，返回值也是JQ对象

$("p").find("span").css('color','red');//返回p标签中所有span标签，并将字体颜色设置成红色
复制代码

遍历方法

prevAll('select')，返回select同级的所有元素，但是必须是同一个父级下的。

prev('select')，返沪select同级的上一个元素，必须是同一个父级下的。

<ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </li>
    <li class="item-iii">III</li>
    </ul>

    console.log($('.item-3').prevAll());// li.item-1 li.item-2
    console.log($('.item-3').prev());// li.item-2
复制代码

next('select'),返回同级的下一个元素，必须是同一个父级元素下。

nextAll('select'),返回同级下的所有元素，必须是同一个父级元素下。

console.log($('.item-1').next())//返回与类型为item-1同级元素的下一个元素，必须是同一个父级哦
console.log($('.item-1').nextAll())// li.item-2 li.item-3
复制代码

siblings('select')获取选中元素同一父级元素下的所有同级元素。
```
console.log($('.item-2').siblings())// li.item-1 li.item-3
复制代码
```
index('select')获取选中元素在同级元素的index索引位置，必须是同一个父级元素下
```
console.log($('.item-3').index()) // 2
复制代码
```

操作样式 `css/addClass/removeClass/toggleClass/hasClass/innerWidth...`

css()用于返回所选样式的值或者设置单个以及多个样式

$('item-2').css('color') // 返回类名为item-2元素的color样式

$('item-2').css(background: 'red')// 设置类名为item-2元素的background颜色为红色

// 设置多个样式的语法
$('item-2').css({color:'red',background:'black'})
复制代码

addClass('select')给所选元素添加类名

removeClass('select')给所选元素移出类名

$('item-2').addClass('lis')

$('item-2').removeClass('lis')
复制代码

toggleClass(class,switch),给所选元素添加类名或者删除类名，class必须，switch可选，switch可规定是添加或者删除值是true或者false，一般不用写，因为如果没有类型就会自动添加，如果类名存在就会进行删除操作。
```
$('item-2').toggleClass('lis') //添加或者删除类名 看所选元素是否存在lis类名
复制代码
```
hasClass('select'),返回所选元素是否存在这个select类名，返回true或者false
```
console.log($('li').hasClass('lis')) // true
复制代码
```
innerWidth()返回所选元素的内部宽度，包含padding，不包含border和margin。
outerWidth()返回所选元素的外部宽度，包含padding和border，如果需要margin则用outerWidth(true)

操作内容 `html/text/val/append/appendTo/insertAfter/attr...`

html()返回或者设置所选元素的内容。如果该方法未写任何参数就是返回内容，如果写了内容（html(content)）就是设置参数。content包含html标签。
text()设置或返回被选元素的文本内容。
val()返回或者设置被选元素的值，一般用于input表单。
append(content)在所选元素的内部的最后面插入内容，可以是HTML标签。
appendTo(),在所选元素内部的最后面插入内容，作用和append一样，但是写法不同。

insertAfter()，在所选元素外部的后面插入内容。

$('content').appendTo('selector')// content是要添加的内容，selector是所选的元素的选择器。
$('content').insertAfter('selector') // 语法如上
复制代码

attr()设置或返回被选元素的属性值。

控制动画 `animate/finish/fadeIn/fadeOut/hidde/show/slideDown/slideUp...`

animate()用于创建动画,只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。

$(selector).animate({params},speed,callback)
// params必需，参数是形成动画的css属性，speed可选，参数规定动画时长，可以取slow、fast或者毫秒，callback可选，是动画执行后所执行的函数。
$('div').animate({
    width:'100px',
    height:'+=120px'
})
复制代码

finish()方法停止当前运行的动画，移除所有排队的动画，并为被选元素完成所有动画。
fadeIn()使用淡入效果来显示被选元素，假如该元素是隐藏的。
fadeOut()使用淡出效果来隐藏被选元素。
$(selector).hide(speed,callback),隐藏所选元素，speed和callback都是可选。
slideDown()被选元素被隐藏的前提下，则以下拉的动画显示被选元素。
slideUp()以上拉的形式隐藏被选元素

操作事件绑定 `on/off/bind/unbind/delgate/one`

off()通常用于移除通过 on() 方法添加的事件处理程序。
one()事件触发一次后就移除。
bind()被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
unbind()移除被选元素的事件处理程序。
delegate()方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

工具类方法 `each/ajax...`

$(selector).each(function(index,element)),循环每个li并执行函数

ajax

Ajax用于浏览器与服务器通信而无需刷新整个页面，服务器将不再返回整个页面，而是返回少量数据，通过JavaScript DOM更新一部分节点。期间数据传输可采用xml，json等格式，Ajax最早用于谷歌的搜索提示。其实不刷新整个页面便可与服务器通信的方法有很多，比如Flash，Java applet，iframe等，但Ajax是目前最为常见的一种。
浏览器与服务器之间传输数据所采用的格式，比较常见的有xml，html，text，json，jsonp等，目前json由于占用更小存储，且是JavaScript原生格式，因此很受欢迎。
常见的语法$.ajax({name: val, name: val...}),其中name的可选字段如下
- url：链接地址字符串形式
- data:需要发送到服务器的参数格式为键值对形式
- type:请求数据的形式，有get和post
- timeout：请求超时时间，时间单位为毫秒
- cache：是否缓存请求结果，val用boolean表示
- contentType：内容格式，默认为"application/x-www/form-urlencoded"
- dataType:服务器响应的数据类型，val是字符串格式，有json、jsonp等等
- success:请求成功后服务器回调的函数。
- error：请求失败后，服务器的回调函数
- complete：请求完成后调用的函数，无论请求成功或者失败都会执行，该函数在sucess和error之后执行
- async：是否异步处理，val是boolean类型，默认为true，如果是false，js会等待请求函数执行完毕后才会执行后面的代码。
- username：访问认证请求中携带的用户名，val字符串格式
- password：返回认证请求中携带的密码，val字符串格式
```
//最原始的调用方法
$.ajax({
    url: '/greet',
    data: {name: 'hello'},
    type: 'POST',
    dataType: 'json',
    success: function(data){
        data: jQuery.parseJSON(data) //dataType指明了返回数据为json类型，故不需要再反序列化
    }
})

// 简化写法
$.post(
    '/greet',
    {naeme: 'hello'},
    function(data){
        ....
    },
    'json'
)

$.get(
      '/greet',
    {naeme: 'hello'},
    function(data){
        ....
    },
    'json'
)

/** 
$getJSON,该方法使用get执行ajax请求，从服务器加载json数据，形式：$.getJSON(url, data, func)。
$.load()，该方法将服务器加载的数据直接插入到指定DOM中，其中data如果存在则使用POST方式发送请求，不存在则使用GET方式发送请求。
**/
<div id="ret"></div>
    $('#ret').load(
    "/greet",
    {name: 'Brad'}
)
复制代码
```

常用的JQ事件

Event函数	绑定函数至
`$(document).ready(function===$(function(){})`	当文档加载完毕后执行函数
`$(select).click(function)===$(select).on('click',function(){})`	当所选元素被点击时出发函数
`$(select).dbclick(function)`	当所选元素被双击时触发函数
`$(selectselect).focus(function)`	当所选元素的获得焦点时触发函数
`$(select).mouseover(function(){})`	当鼠标经过所选元素时，触发函数