基本概念

背景

js原生DOM部分的不便之处：
单词太多-api不好记；
设置事件不方便，代码量较大；
调用繁琐，比如找父元素，遍历多个标签等。

概念

jQuery是第三方的js函数库。jQuery本质是一个js文件。内部以及写好了大量的函数用于进行快捷的DOM操作。jQuery旨在write less，do more。

版本

目前国内用的比较多的是3.5.1版本。以及能够支持ie的1.11.1版本。
从jQuery2.x开始，就不再支持ie8.

引入jQuery

通过script引入。
jQuery是先引入从才能使用。

<script src="./jquery.1.11.1.min.js"></script>
<script>
    //jQuery代码
</script>

jQuery的一般使用流程

页面引入了jQuery
利用jQuery选择器找到需要操作的HTML标签
通过jQuery提供的函数完成dom操作

注意点

如果页面使用了jQuery，那么用jQuery操作的HTML标签就不能再使用原生的dom api。比如innerHTML、appendChild、parentElement等。如果要用，那么必须先完成jQuery标签和原生DOM标签的转换。

获取jQuery标签以及和原生DOM标签的切换

通过jQuery获取页面上的标签

$("css选择器");
例子
var $box = $('#box');//获取id为box的HTML标签

通过css选择器去寻找匹配到的HTML标签，会根据返回的个数自动判断是返回一个元素或一个数组。

jQuery标签和DOM标签切换

jQuery转原生DOM

var 原生dom标签变量名 = jQuery标签变量名.get(0);
例子
var $box = $('#box');
//把jQuery转为原生dom标签
var box = $box.get(0);
console.log($box);
console.log(box);

原生DOM转jQuery

var jQuery标签变量名 = $(原生dom标签变量名);
例子
var box = document.querySelector('#box');
var $box = $(box);
console.log($box);

内容、属性操作

内容相关

html():类似于原生中的innerHTNL。用于获取某个标签的内部HTNL代码。
text():类似于原生的innerText，获取标签的内部文本。
val():类似于原生的value，主要获取表单元素的内容。

html
<div>
<p>p</p>
</div>
<input value="starnight">
获取：
var divText = $('div').text();
var divHTML = $('div').html();
var inputValue = $('input').val();
设置
$('div').text('新内容');
$('div').html("<a href='#'>百度</a>");
$('input').val("456");

属性相关

attr():获取或设置HTML标签的某个属性
prop():获取或设置HTML标签的某个属性
跟attr()的区别在于prop适用于标签的内置事件，而attr()更适用于用户自定义属性。
addClass():给某个标签追加一个class
removeClass():删除某个标签的指定class

html
<div class="item">
<p>p</p>
</div>
<input value="123">
js
//获取
var value1 = $('input').attr('value')
var value2 = $('input').prop('value')
//设置
$('div').addClass('box');
$('div').removeClass('item');

修改css

css()

语法
//设置
jQuery标签变量名.css('css属性名','css属性值');
//批量设置css
jQuery标签变量名.css({
    'css属性名1':'css属性值1',
    'css属性名2':'css属性值2',
    'css属性名3':'css属性值3',
});
//获取
jQuery标签变量名.css('css属性名');
例子：背景颜色为红色,字体颜色为白色，有一个白色的1px的边框
html
<div id="box"></box>
js
var $box = $('#box');
$box.css('background-color','red');
$box.css('color','white');
$box.css('border','1px solid white');

//批量设置
$box.css({
    'background-color':'red',
    'color':'white',
    'border':'1px solid white'
    })

添加、删除

添加

append():类似于原生的appendChild，在某个标签之后插入一个新标签，新标签会作为最后一个子标签。
before():在某个标签之前插入一个新标签，新标签会作为上一个兄弟标签。
after():在某个标签之后插入一个新标签，新标签会作为下一个兄弟标签。

语法
jQuery标签变量名.append("新标签的HTML代码");
jQuery标签变量名.before("新标签的HTML代码");
jQuery标签变量名.after("新标签的HTML代码");
例子
//添加或删除
var newTr = `<tr>
    <td>starnight</td>
    <td><img src="img/1.jpg" alt="" /></td>
    <td>20</td>
    <td>
    <button>-</button>
    <input type = "text" value = "1" />
    <button>+</button>
    </td>
    <td>0</td>
    </tr>`;
    //1.生成一个新商品tr作为tbody的最后一个子标签
    //$('tbody').append(newTr);
    //2.插入到总价tr之间 before
    //$('tbody tr:last-child').before(newTr);
    //3.作为tbody的第一个商品
    //$('tbody tr:first-child').before(newTr);
    //4.作为tbody的第二个商品:after
    //$('tbody tr:first-child').after(newTr);

删除

remove():删除找到的所有标签。

jQuery标签变量名.remove();

如果找到了多个标签，其中的每个标签都会被删除。

获取子、兄弟、父标签及遍历

获取子标签

children():获取某个标签的所有直接子标签。
find():根据css选择器获取某个标签的满足条件的所有后代标签。

jQuery标签变量名.children();
jQuery标签变量名.find("css选择器");

获取兄弟标签

prev():获取上一个兄弟标签
next():获取下一个兄弟标签
siblings();通过css选择器获取指定的兄弟标签，如果不带参数，获取的是所有的兄弟标签
``` jQuery标签变量名.prev(); jQuery标签变量名.next(); jQuery标签变量名.siblings("css选择器"); ```

获取父标签

parent()：获取某个标签的直接父标签
parents(css选择器)：获取某个标签的某个祖先标签，具体是通过css选择器来指代

jQuery标签变量名.parent();
jQuery标签变量名.parents(css选择器);

如果parents不给参数时，会获得其所有的祖先标签。

遍历

first():获取遍历标签中的第一个。等同于jQuery标签变量名.eq(0)
last():获取遍历标签中的最后一个.等同于jQuery标签变量名.eq(jQuery标签变量名.length-1)
each():jQuery专门用于对jQuery标签的快捷遍历，用于替代传统的for循环遍历
eq(i):获取找到标签中指定下标的标签，即第i个jQuery标签

语法
//旧-遍历找到的input标签：eq（）
for(var i = 0;i<$inputs.length;i++){
    var $input = $inputs.eq(i); //等同于$inputs[i]
    }
//jQuery遍历
$jQuery待遍历标签变量名.each(function(index){
    //index是当前遍历数据的下标，从0开始
    this指的是当前遍历的标签，原生dom ->$(this)转为jQuery标签
})
$jQuery待遍历标签变量名.first();
$jQuery待遍历标签变量名.last();
例子
//each
var $items = $('.item');
$items.each(function(index,elem){
    //index是当前遍历下标，elem就是指的this，可选
    var old = Number($(this).text());
    $(this).text(old + 1);
    })
 //获取这些div中的第一个和最后一个
 console.log($items.first(),$items.last())

事件（on-默认使用事件委托）

on()

$父标签标签变量名.on('事件名','要执行事件的标签css选择器',function(e) {
    //触发事件时要执行的代码
    });
例子
html
<div id='box'></div>
js
$('body').on('click','#box'.function(e){
    当id为box的标签发生点击事件要执行的代码
});

支持同时给多个标签设置。
支持js动态添加的标签

其他快捷方法

click()
当点击元素时，会发生 click 事件。
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。
click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

语法
$(selector).click()
$(selector).click(function)
例子：点击按钮时，隐藏或显示元素
$("button").click(function(){
  $("p").slideToggle();
});

hover()
规定当鼠标指针悬停在被选元素上时要运行的两个函数。
方法触发mouseenter和mouseleave事件。
注意：如果只指定一个函数，则mouseenter和mouseleave都执行它。

语法
$(selector).hover(inFunction,outFunction)
//调用
$(selector).hover(handlerIn,handlerOut)
//等同于一下方式
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
例子：当鼠标指针悬停在上面时，改变<p>元素的背景颜色
$("p").hover(function(){
    $("p").css("background-color","yellow");
},function(){
    $("p").css("background-color","pink");
});

dblclick()
当双击元素时，会发生 dblclick 事件。
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。
在很短的时间内发生两次 click，即是一次 double click 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。
提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

语法
$(selector).dblclick()
$(selector).dblclick(function)
例子：当双击按钮时，隐藏或显示元素
$("button").dblclick(function(){
  $("p").slideToggle();
});

其他api

show():等同于css('display','block'),显示某个标签
hide():等同于css('display','none')，隐藏某个标签

动画

提供了多个api来使用常见的动画以及自定义动画

内置动画

淡入淡出
fadeIn()
fadeOut()
下拉上滑
slideDown()
slideUp()

jQuery标签变量名.slideDown(动画毫秒时间);
jQuery标签变量名.slideUp(动画毫秒时间);
jQuery标签变量名.fadeIn(动画毫秒时间);
jQuery标签变量名.fadeOut(动画毫秒时间);

如果对同一个标签设置了多个动画，按照动画代码的书写顺序依次执行。

自定义动画

animate():用户自定义动画

jQuery标签变量名.animate({
    "css属性名1":"css属性值1"，
    "css属性名2":"css属性值2"
    "css属性名3":"css属性值3"
    },动画持续时间);
例子：id为box的标签在3s内实现标签缩放到1.5倍，并且向右移动到距离页面左边300px
$('#box').animate({
    "transform":"scale(1.5) translate(300px)"
    },3000);

animate基本上只支持跟位置和尺寸相关的动画。其他的基本都不支持。
如果要颜色的动画，可以使用css3，用js来切换class达到控制动画的目的。

动画结束后执行js代码

jQuery的每个动画函数都可以支持额外的参数，该参数必须是一个函数，用于表示在动画结束后要执行的代码。

jQuery标签变量名.动画函数名(其他参数,function(){
    //动画结束后要执行的代码
    });
例子
html
<div></div>
js
//2s淡入后改变div的内容为123
$("div").fadeIn(2000,function(){
    $(this).text('123')
    })
//2s向右移动300px后改变div背景颜色为蓝色
$('div').animate({
    "margin-left":"300px"
    },2000,function(){
    $(this).css('background-color','blue');
    })

链式调用

背景

如果需要对同一个标签执行多句的jQuery代码，那么会导致不断的获取jQuery标签以及代码量过多。

html
<div></div>
js
//div设置width为300px，向右移动300px，改变div的内容为123 再隐藏div
$('div').css('width','300px');
$('div').animate({"margin-left":"300px"},1000);
$('div').text('123');

概念

即对同一个标签的多句代码可以整合成一句。

作用

代码整齐
减少一定的代码量

语法

jQuery标签变量名.函数名1().函数名2().函数名3()....函数名n();
例子
$('div').css('width','300px').animate({"margin-left":"300px"},1000).text('123');

以上的每个函数都是接着前一个函数的执行结果继续执行。
如果某个函数本身就是返回某个文字，后续就不能再使用链式调用。