1.创建插入元素

①内部插入：产生的都是父子级关系（append、prepend、appendTo、prependTo）

两种写法：（语义化）

$(' xxx ').append/prepend(' yyy ') ------在xxx内部的最后面/最前面创建并添加元素yyy

yyy.appendTo/prependTo(' xxx ')------将yyy创建并添加到xxx内部的最后面/最前面

append--插入到内部的最后面、prepend--插入到内部的最前面

②外部插入：产生的是兄弟关系（after、before）

创建并添加与ul同级的元素

2.删除元素/文本

①remove() :    $('div').remove();---会将div元素直接删除

②empty:          $('div').empty();---清空div标签中文本

③html:            $('div').html('');---清空div标签文本

3.克隆元素

$( 'c1' ).clone( );

如果想要将元素中的事件一起克隆下来，直接给参数加上true即可

let newDiv = $('.c1').clone(true);

4.事件委托

①on----参数一为事件类型，参数二为目标元素，参数三为事件处理函数

通过on实现

②delegate----参数一为目标元素，参数二为事件类型，参数三为事件处理函数

通过delegete实现

5.元素尺寸---不需要加单位

①width、height：元素内容宽高

② innerWidth、innerHeight：元素内容+padding宽高

③outerWidth、outerHeight：元素内容+padding+border

④outerWidth(true)、outerHeight(true):元素内容+padding+border+margin

例：将div的innerWidth值设置为1000

  $('div').innerWidth(1000);

6.元素位置---不需要加单位

①offset：相对于文档位置，可以设置，忽略margin

设置方法：

相对于文档位置

②position：相对于定位父，不可以设置，从margin外面开始计算

7.卷起位置

scrollTop()

$('div').scrollTop()

8.基本动画

①show:显示

②hide：隐藏

③toggle：切换动画

普通动画实现代码

9.滑动动画

①slideDown：下滑

②slideUp：上滑

③slideToggle：切换动画

滑动动画实现代码

动画应用：新浪下拉菜单（样式）

根据结构选择后代选择器find找到操作的元素，给它添加事件

用hover方法分别封装鼠标进入离开时要做的上滑下滑动作

 stop用来在下一次动画之前停止对其它元素的操作，有点防抖的意思

hover方法使用切换滑动状态的slideToggle

10.hover方法

① hover两个参数的情况（两个函数）：鼠标进入和鼠标离开

hover(function () {mouseenter}, function () {mouseleave})

②如果hover里面只写一个函数，那么代表鼠标经过和鼠标离开都会触发这个函数

$('div').hover(function () {

      console.log('hover');

    })

//鼠标进入离开都会触发控制台打印hover事件

11.淡入和淡出

①fadeIn：淡入

②fadeOut：淡出

③fadeToggle：切换效果

④fadeTo：某个值

使用方法和基本动画，滑动动画基本一致，值得单独说明一下fadeTo方法（透明度取值范围是0-1，这是必写参数）

淡出到--0-1

12.自定义动画

animate可以设置要改变的值

自定义操作

13.延迟设置---delay

点击时立即将宽度改为600px,两秒后再将高度改成400px

14.停止动画---stop

① 一个true：中止动画

②两个true：终止动画

$('div').stop(true, true);

15.多库共存-----noConflict(）

让jquery和其它的js库不存在冲突，可以同时存在，这就叫多库共存

jq代替$使用

16.extend--合并对象

$.extend(o1, o2, o3);

如果要实现深拷贝，在方法最前面加true

$.extend(true, newObj, obj);

17.表单序列化

HTML 标签默认提交表单时会自动根据表单项的 name 属性将用户在表单中填写的数据提交至服务端，然而采用监听 DOM 事件对表单提交时，需要开发者自行获取表单英中用户填写的数据。

button默认的就是submit,表单提交的时候会触发到这个事件

注意这里只能获取到有name属性的表单数据，所以一定要记得给表单元素加name属性

获取表单数据的操作

注意：

①serialize()方法用于获取表单验证的数据（有name属性的）

②代码中打印部分的含义是，将获取到的结果通过字符串的split方法转换成数组，切割点就是&符号，按顺序打印对应的结果

字符串的split方法

③最后的return false；是用来终止对表单元素的验证并且阻止表单的提交，只写return只会终止对表单元素的验证，并不会阻止表单的提交。

18.插件

例：写一个插件，给元素添加背景色------通过  $.fn进行设置

插件编写

插件使用

19.遍历

①each------$(元素).each（function(i  elm) { } ）;          用于遍历元素

方法一

第一个参数是每一项的索引值，第二个参数是每个DOM对象

②$.each------$.each( 对象，function （i  elm）{ } );          用于遍历数据

方法二

案例：elm为取到的DOM对象，数值不能直接获取到，所以要调用.text方法得到数据

each的使用案例

通过text方法取到的数据是字符串类型，而求和的话就需要将字符串转化成数字类型才可以，不然会进行拼接，而不是累加求和，这里用到了数值的parseInt方法，获取一段字符串中出现的第一个数字，并取整，返回值为数字类型

20.jQuery插件的使用步骤（以轮播图为例）

基础结构和样式需要自己提前写好，我们要做的是引入样式和插件，根据插件已给参数配置轮播图的参数，以及图片显示（结构就是基础的ul包li结构）

需要的文件

①引入css 

下载css文件并引入html中

②引入jQuery 和 插件js 

引入jQuery插件和轮播图插件

③配置使用