jQuery-方法篇

1. 操作样式的方法

1. 设置css单个样式：css("样式名","样式值")

2. 设置css多个样式：css({width:"100px",height:"50px"}) 样式名建议用驼峰式,值是数字可以不用引号;

3. 获取css样式：css("样式名") 返回样式值为String类型

注：隐式迭代：设置操作的时候会给jquery内部所有对象设置上相同的值。获取的时候：只会返回第一个元素对应的值

2. 操作类的方法

1. 添加类：addClass("类名")

2. 移除类：removeClass("类名")

3. 判断类：hasClass("类名") 判断有没有这个类，返回boolean

4. 切换类：toggleClass("类名") 有则移除，无则添加，实现切换效果

3. 操作属性的方法（标签里的属性）

1. 设置或获取元素的固有属性：prop()
   获取：prop('属性')
   设置：prop('属性','属性值')

2. 设置或获取元素自定义属性：attr()
   获取：attr('属性')
   设置：attr('属性','属性值')

3. 数据缓存：data()
   data() 方法可以在指定的元素上存取数据，并不会改变DOM元素结构，一旦页面刷新，之前存放的数据会被移除。
   获取H5的自定义属性，不需要写data-,数值型数据返回为数字类型
   获取：data('name')
   设置：data('name', 'value')

4. 移除属性：removeAttr("属性名")

4. 操作动画的方法

以下动画函数里面的参数有两个：执行时间、回调函数, 可都不填,不填就是不做动画效果

4.1 显示隐藏

1. 显示元素：show([speed], [easing], [fn])
   显示加动画效果：show(time)

2. 隐藏元素：hide([speed], [easing], [fn])
   隐藏加动画效果：hide(time)

3. 显示隐藏切换：toggle([speed], [easing], [fn])

4. 我们一般使用的时候不传参数，不做动画效果

   1. 参数可以省略，无动画直接显示
   2. speed：动画时间，有三种预设置"slow"、"normal"、"fast",也可以直接写毫秒值（如：1000）
   3. easing：切换效果，默认是"swing"（满快慢）、可用参数 "linear"（匀速）
   4. fn：动画执行完的回调函数
   5. 预设值要加双引号
   

4.2 滑动

1. 滑入（显示）：slideDown([speed], [easing], [fn])

2. 滑出（隐藏）：slideUp([speed], [easing], [fn])

3. 切换滑入滑出：slideToggle([speed], [easing], [fn]) 如果是滑出状态就执行滑入，否则反之

4.3 淡入淡出

1. 淡入(显示)：fadeIn(speed, opacity, [easing], [fn])

2. 淡出（隐藏）：fadeOut(speed, opacity, [easing], [fn])

3. 透明度：fadeTo(time, 1)

4. 切换淡入淡出：fadeToggle(speed, opacity, [easing], [fn]) 如果是淡出状态就执行淡入，否则反之
   

4.4 自定义动画

1. 自定义动画：animate({left : 800}, 2000, 'swing', function () {})
   第一个参数：对象，里面可以传需要的动画样式（必填）
   第二个参数：动画执行的时间(毫秒值)
   第三个参数：动画执行效果"swing"（慢快慢），"linear"（匀速）;不写默认为"swing"
   第四个参数：为函数,动画执行完毕后执行

4.5 动画队列及停止排队方法

1. 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

2. 停止排队：stop()
   a. stop() 方法用于停止动画或效果
   b. 注意：stop() 写到动画或者效果的前面，相当于停止结束上一次动画，避免多次触发。

3. 让动画停滞一段时间：delay(2000)

5. 操作节点的方法

1. 生成节点：$("<p>我是p标签</p>")

2. 添加子节点到最后：$(父节点).append($(子节点))

3. 添加子节点到最前：$(父节点).prepend($(子节点))

4. 添加到父节点的最后：$(子节点).appendTo($(父节点)) （推荐用法， 适合链式编程）

5. 添加到父节点的最前：$(子节点).prependTo($(父节点)) （推荐用法，适合链式编程）

6. 添加兄弟节点到后面：$(节点).after($(兄弟节点))

7. 添加兄弟节点到前面：$(节点).before($(兄弟节点))

8. 清空节点内容：empty() 清空自己里面所有的内容，只留自己

9. 删除节点: remove() 删除自己里面的所有内容包括自己

10. 克隆节点：clone()
    参数：false，为默认参数，复制标签及内容
    参数：true，复制标签及内容还有事件

6. 操作表单value值的方法

1. 获取表单的value值：val()

2. 修改表单的value值：val("内容")

7. 操作标签文本内容的方法

1. html() 不传参数为获取，传参为设置，可以设置标签及内容

2. text() 不传参数为获取，传参数为设置，只操作内容

8. 操作元素的宽高的方法

1. 元素宽：传参为设置（可不写单位），不传参为获取

   序号	方法	描述
   1	width()	获取元素的内容盒宽度
   2	innerWidth()	获取元素的宽度（内容区+padding）
   3	outerWidth()	获取元素的边框盒

2. 元素高：传参为设置，不传参为获取

   序号	方法	描述
   1	height()	获取元素的内容盒高度
   2	innerHeight()	获取元素的高度（内容区+padding）
   3	outerHeight()	获取元素的边框盒

9. 获取页面的卷曲值

1. 向上卷曲值：$(document).scrollTop()

   // 配合页面滚动事件使用
   $(window).scroll(function() {
   
   })
   

2. 向左卷曲值：$(document).scrollLeft()

10. 元素的偏移

1. offset() 获取元素距document页面边缘的距离，返回left，top值

   // offset() 操作的是元素相对于文档的偏移
   // 1. 获取
   ele.offset().left
   ele.offset().top
   
   // 2. 设置：
   ele.offset({
   	left: 200,
   	top: 300
   })
   

2. position() 获取相对于自己最近的定位的父元素边缘的值，只读属性不能传参数，返回left，top值

   // position() 操作的是元素相对于定位父元素的偏移
   ele.position()
   

11. 遍历jQuery对象的方法

1. 用for循环

2. 用jQuery的方法 each()

   each(function(index,element){
     $(element).css("","");
   }) 
   //函数里第一个参数为jQurey对象里每个DOM对象的索引，第二个参数为DOM对象
   //在函数里面操作的时候转换成jQuery对象即可
   

12. 其它方法

1. 找索引：index() 返回当前元素在所有兄弟元素中的索引

2. 获取DOM对象：get(0)

3. end() 筛选选择器会改变jQuery对象中的DOM对象，想要回复到上一次的状态，返回匹配元素之前的状态

4. 鼠标进入、离开简写：hover()

   // hover 里面的两个函数相当于，鼠标进入、离开事件的处理函数
   $('div').hover(function() {}, function(){})
   
   // 也可以只写一个函数，鼠标进入、离开都会执行这个函数
   $('div').hover(function() {})
   

5. 拷贝：$.extend

   // 浅拷贝
   let obj = {name: 'zs'}
   let obj1 = {}
   $.extend(obj1, obj)
   // 1. 将 obj1 的内容拷贝到 obj 中
   // 2. 浅拷贝会覆盖之前对象中相同的数据
   
   // 深拷贝(第一个参数true)
   let obj = {name: 'zs'}
   let obj1 = {}
   $.extend(true, obj1, obj)
   // 深拷贝会合相同的引用属性内容
   // 深拷贝会单独创建引用的数据对象