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插件和轮播图插件
③配置使用
网友评论