Jquery属性操作
1.属性
attr(attrName [,attrValue]) 操作所有属性（自定义和内置的） prop(attrName [,attrValue))操作HTML元素内置属性 removeAttr(attrNam) 删除属性 removeProp(attrName)并不能删除HMTL元素上的属性
2.CSS类
addclass()添加一个class值
removeClass()删除一个class值
toggleClass()切换一个class值(有则删掉该class，没有则加上，其他class不动)
hasClasss()判断是否有指定class
3.HTML代码/文本/值
html([html]) 相当于innerHTML
text([text)相当于innerText
val([value]) 设置/获取表单控件的值
Jquery样式操作
1.CSS操作
css(atr,[value])设置/获取CSS值
参数可以是一个对象的形式
css({atr: value,})
2.位置
offset()[.left/.top]元素在页面中的坐标
设置只需要传一个对象即可
{"left:num,top:num"}
position()[.left/.top]元素在第一个定位的祖先元素内的坐标 (只读！)
scollTop ...
scollLeft ...
3.尺寸
width()/height()内容尺寸
innerwidth()/ innerHeight()内容尺寸+ padding
outerWidth()/ outerHeight() 盒子的尺寸
如图: [图片上传失败...(image-961bff-1572771228666)]
Jquery筛选操作
1. 过滤操作
first ()
last()
eq()
not()
filter()
slice ()
has()
3.串联
add0把选中的元素加入当前集合 · addBack0把调用该方法的元素加入当前集合 ·end0返回最后一次破会性操作之前的DoM · contents0返回所有子节点的集合
4 jQuery DOM对象操作
·each0遍历 ·map0返回新的集合 · length集合中元素的数量index（返回该元素在父元素中的索引位置 get（【index】返回集合指定索引的dm对象，还可以吧 iquerydom集合转为纯数组没参数
文档处理
1.内部插入
append(content|fn) appendTo(content) prepend(content|fn) prependTo(content)
2.外部插入
after(content|fn) before(content|fn) insertAfter(content) insertBefore(content)
3.包裹
wrap(html|ele|fn) unwrap() wrapAll(html|ele) wrapInner(html|ele|fn)
4.替换
replaceWith(content|fn) replaceAll(selector)
5.删除
empty() remove([expr]) detach([expr])
6.复制
clone([Even[,deepEven]])
jQuery事件
1.事件绑定
-
on(event,fn) 标准的事件绑定方式
on({}) 可以同时绑定多个事件
one(event,fn) 只能绑定一次事件
把事件名作为对象
2.解除事件绑定
- off(["event"]) 可以去除所有，也可以解除指定事件
３.事件委派
-
on(event,selector,fn) 给父元素添加事件
给新添加的元素绑定与之前存在的元素相同的方法（利用冒泡）
4. 控制事件触发
trigger()
triggerHandler()
① trigger返回的是 jqDOM可以连贯操作 ② trigger可以触发元素自带的事件( input自带的事件， focus，submit...) ③ trigger会触发集合中所有元素的事件；trigger值触发集合中第一个元素的事件
5.事件列表（新增）
ready 页面中DOM加载完毕（不同于onload）
focusin 获取焦点，绑定给输入框的父元素
focusout 失去焦点 ，绑定给输入框的父元素
mouseenter 代替mouseover
moouseleave 代替mouseout
hover moouseleave和mouseenter集合
6.事件对象
pageX 鼠标x坐标
pageY 鼠标y坐标
target 当前触发事件的元素
which 键盘按键的ASCII码
type 事件类型（事件名称）
preventDefault阻止默认操作（例如a标签跳转，致使页面刷新） [图片上传失败...(image-5eaf9b-1572771228665)]
Jquery动画
基本效果
hide([time,fn]) 隐藏
show([time,fn]) 显示
-
toggle([time,fn])
- 基本效果的CSS属性变化：透明度变化，元素大小相关的样式 padding, border width/height外边距
- fn() 表示动画结束执行的函数
滑动效果
slidedown 显示
slideup 隐藏
slidetoggle
垂直方向的变化
淡入淡出效果
fadeOut() 隐藏
fadeIn() 显示
fadeToggle()
fadeTo(time,opicity,fn)
自定义动画
- animate({},time,fn)
{}中为需要变化的值
取值可以是toggle，可变化可恢复原样
stop() 暂停动画
finish() 结束动画（提前完成）
delay(time) 延迟动画（动画连续调用时加在中间，会等time时间执行后面的）
动画设置
jQuery. fx. off 清除所有动画，恢复为默认效果
jQuery. fx interval 动画帧数
动画队列
所有的动画操作会加入到队列中，依次执行
其他操作不会加入动画队列
jQuery动画与CSs3动画
·兼容性，CS53的动画和过渡需要E9+， jQuery可以使用版本的
CSS3的动画或者过渡必须给元素指定具体的CSS属性值
jQuery工具方法
1.数组对象方法
$.each（Aray,fn）遍历数组或类数组对象
$.grep（Array, fn）过滤数组
$.map（ Array, fn）从数组取出信息，返回新的数组
$.makeArray(likeArray) 把类数组对象转化为纯数组
$inArray(val，Array) 判断元素在数组中的位置，不存在返回-1
$.merge() 合并数组
toArray() jQuery DOM方法，把jQueryDOM直接转化为纯数组
2.函数方法
- $.proxy() 改变函数中this指向
3.类型判断
$.type()判断类型
$.isFunction()判断是否是函数/方法
$.isEmptyobject()判断是否是空的对象
$.Plainobject()判断是否是纯的对象（构造函数是obeject)
$.window()判断是否是 window对象
$.isNumeric()判断是否是数字(NaN虽然是number类型，但这个是false)
4.字符串
$.trim()取出两边的空格
-
$.param() 把对象序列化成字符串
{name:"lili",age:18} ----> name=lili&age=18
5. 版本
- $.fn.jquery
jQuery插件
1. select2 下拉框搜索插件
用法
$(dom).select2()
$(dom).select2({
width:,
data:,
ajax:,
...
})
2.datetimepicker 时间日期插件
用法
//设置语言
$.datetimepicker.setLocal("zh");
//调用插件
$(dom).datetimepicker({
datepicker:,
timepicker:,//false||true
format:"Y-m-d H:i"//H表示24小时制，h表示12小时制
value:,
...
})
3.全屏滚动插件
<!--HTML部分-->
<div id="fulPage">
<div class="section"></div>
<div class="section">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<div class="section"></div>
</div>
<!--自定义的导航，写在包裹元素的外面-->
<!--JS部分-->
<script>
$("#fullPage").fullpage({
navigation:true,
sectionsColor:[]
...
})
</script>
4.lazeload 图片懒加载
-
用法：
$("#lazyWrapper img").lazyload()
