1：jq对象与原生相互转换
1：dom对象转换为jq对象
1：直接获取就是jq对象
$('video')
2:我们已经使用原生ji获取Dom对象
var myvideo = document.querySelector('video')
$(myvideo)
2:jq对象转换Dom对象（两种方式）
1： $('div')[index] index是索引号
2：$('div').get(index) index是索引号
3:jq常用API
1:JQ基础选择器
名称 用法 描述
id选择器 $('#id') 获取指定id元素
全选选择器 $('*') 匹配所有元素
类选择器 $('.class') 获取同一类class的元素
标签选择器 $('div') 获取同一类标签的所有元素
并集选择器 $('div,p,li') 选取多个元素
交集选择器 $('li.current') 交集元素
2：jq层级选择器
名称 用法 描述
子代选择器 $('ul>li') 使用>号，获取亲儿子层级元素；注意并不会获取孙子级
后代选择器 $('ul li') 使用空格，代表后代选择器，获取ul下所有的li元素，包括孙子
3：jq设置样式
$('div').css("属性","值")
隐式迭代
就是把所有匹配的元素内部进行循环便利，给每一个元素添加css这个方法
4：jq筛选选择器
语法 用法 描述
:first $('li:first') 获取第一个li元素
:last $("lli:last") 获取最后一个li元素
:eq(index) $("li:eq(2)") 获取li元素中，索引号为2的元素，索引号从0开始
:odd $("li:odd") 获取li元素中索引号为奇数的元素
:event $("li:event") 获取li元素索引号为偶数的元素
:checked $("li:checked") 被选中的li
5：jq筛选方法（重点）
语法 用法 说明
parent() $("li").parent() 查找父级
children(selector) $("ul").children("li") 相当于$("ul>li") 查找最近一级（亲儿子）
find(selector) $("ul").find("li") 相当于$("ul li") 后代选择器
siblings(selector) $(".first").siblings("li") 查找兄弟节点，不包括自己本身
nextAll([expr]) $(".first").nextAll() 查找当前元素之后所有的同辈元素
prevtAll([expr]) $(".first").prevAll() 查找当前元素之前的所有同辈元素
hasClass(class) $("div").hasClass("protected") 检查当前元素是否包含某个特定的类，如果有返回true
eq(index) $("li").eq(2) 相当于$("li:eq(2)") index从0开始
parents("selector") $("li").parents("ul") 获取指定的祖先级元素
6: 得到当前元素的索引号
$(this).index()
7:jq样式操作
1：jq可以使用css方法来修改简单的样式操作；也可以操作类，修改多个样式
1：参数致谢属性名，则是返回属性值
$(this).css("color")
2:参数是属性名，属性值，逗号分割。是设置一组样式，属性必须加引号，值如果是数字，可以不用跟单位和引号
$(this).css("color","red")
3：参数可以·是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号,如果是复合属性，必须采用驼峰命名法
$(this).css({"color":"pink","font-size":"20px"})
2：设置类样式操作方法
作用等同于以前的classList,可以操作类样式，注意操作类里面的参数不要加点
1：添加类
$("div").addClass("cuttrnt")//相当于追加类名，不影响以前的类名
2:删除类
$("div").removeClass("current")
3:切换类
$("div").toggleClass("current")
注意：原生js中className会覆盖元素原先的里面的类名
jq中里面类操作只是对指定类进行操作，不影响原先的类名
8：jq显示隐藏效果
1:语法：show/hide([speed,[easing],[fn]]) (切换) toggle([speed,[easing],[fn]])
2:显示参数
1：参数都可以省略，无动画直接显示
2：speed:三种预定速度之一的字符串（"slow","normal",or"fast"）或表示动画时长的毫秒数值（如：1000）
3：easing:用来指定切换效果，默认是swing(先快后慢)，可用参数"linear"(匀速)
4：fn:回调函数，在动画完成时执行的函数，每个元素执行一次
9：滑动效果
1：语法：（下滑）slideDown([speed,[easing],[fn]]) (上滑)slideUp([speed,[easing],[fn]]) （切换）slideToggle([speed,[easing],[fn]])
2:显示参数
1：参数都可以省略，无动画直接显示
2：speed:三种预定速度之一的字符串（"slow","normal",or"fast"）或表示动画时长的毫秒数值（如：1000）
3：easing:用来指定切换效果，默认是swing(先快后慢)，可用参数"linear"(匀速)
4：fn:回调函数，在动画完成时执行的函数，每个元素执行一次
10:事件切换
hover([over],out)
1:over:鼠标移到元素上要出发的函数（相当于mouseenter）
2:out:鼠标移出元素要触发的函数（相当于mouseleave）
3:如果只写一个函数，那么鼠标经过和离开都会触发这个函数
11:停止动画stop
语法：stop()
1:stop() 方法用于停止动画效果
2：stop()写道动画或者效果前面，相当于停止结束上一次的动画
12:淡入淡出效果
1：语法：1：淡入fadeIn() 2:淡出 fadeOut() 3:淡入淡出切换fadeToggle() 4：修改透明度fadeTo([spead],opacity,[easing],[fn])
2：显示参数
1：参数都可以省略，无动画直接显示
2：speed:三种预定速度之一的字符串（"slow","normal",or"fast"）或表示动画时长的毫秒数值（如：1000）
3：easing:用来指定切换效果，默认是swing(先快后慢)，可用参数"linear"(匀速)
4：fn:回调函数，在动画完成时执行的函数，每个元素执行一次
2：修改透明度
修改透明度fadeTo([spead],opacity,[easing],[fn])
1：opacity透明度必须写，取值0~1
2：speed:三种预定速度之一的字符串（"slow","normal",or"fast"）或表示动画时长的毫秒数值（如：1000）必须写
13:自定义动画
1：语法
animate(parms,[speed],[easing],[fn])
2:参数
1：params:想要更改的样式属性，以对象的形式进行传递，必须写，属性名可以不用带引号，如果是符合属性，则需要采用驼峰命名法。其余参数都可以省略
2：speed:三种预定速度之一的字符串（"slow","normal",or"fast"）或表示动画时长的毫秒数值（如：1000）
3：easing:用来指定切换效果，默认是swing(先快后慢)，可用参数"linear"(匀速)
4：fn:回调函数，在动画完成时执行的函数，每个元素执行一次
14:jq属性操作
1：设置或获取元素的固有属性值(元素本身自带的属性)
prop()
1：获取属性的方法
prop("属性")
2：设置属性语法
prop("属性","属性值")
2：设置或或获取元素的自定义属性
attr()
1:获取自定义属性值
attr("属性")//类似原生getAttribute()
2:设置属性语法
attr("属性","属性值")//类似原生setAttribute()
3:数据缓存data()
data()方法还可以在指定的元素上存取数据，并不会修改dom元素结构，一旦页面刷新，之前存放的数据将会被移除
$("div").data("uanme","andy")
console.log($("div").data("uname"))
4:内容文本值
1：普通元素内容
html() 相当于原生innerHtml
语法
html() //获取元素内容
html("内容") //设置元素内容
2：普通元素文本内容text() (相当于原生innerText)
语法
text() //获取元素的文本内容
text("文本内容") //设置元素的文本内容
3：表单的值 val() (相当于原生的value)
4：保留几位小数toFide("num")保留几位小数
15：jq元素操作
1：便利
语法1
$("div").each(function(index,domEle){xxx})
1:each() 方法遍历匹配的每一个元素。主要用于Dom处理。each每一个
2：里面的回调函数有两个参数：index是每个元素的索引号，doEle是每个dom元素，不是jq对象
3：所以要使用jq方法，需要$(doEle)
语法2
$.each(object,function(index,element){xxx})
1:$.each()方法可用于便利任何对象，主要用于数据处理，比如数组，对象
2：里面函数两个参数：index每个元素索引号，element便利内容
2:创建元素
语法
$("<li></li>")
3:添加元素
1：内部添加
element.append("内容") 把内容放到匹配元素的内部的最后面，类似原生的appendChild
element.prepend("内容") 把内容放到匹配元素的前面
2：外部添加
element.after("内容") //把内容放到目标元素的后面
element.before("内容") //把内容放入目标元素前面
注意：内部添加元素，生成之后是父子关系
外部添加元素，生成之后是兄弟关系
4：删除元素
1： element.remove() //删除匹配元素（本身）把自己本身删除
2： element.empty() //删除匹配元素集合中所有的子节点
3：element.html("") //清空匹配元素的元素内容
16：jq尺寸
语法 用法
width()/height() 取得匹配元素宽度和高度值只算width/height
innerWidth()/innerHeight() 取得匹配元素的宽度和高度值包含padding
outerWidth()/outerHeight() 取得匹配元素的宽度和高度值包含padding,border
outerWidth(true)/outerHeight(true) 取得匹配元素的宽度和高度值包含padding,border,marght
1:以上参数为空，则是获取相应的值，返回的是数字型
2：如果参数为数字，则是修改相应值
3：参数可以不必写单位
17：jq的位置
位置主要有三个：offset(),position(),scrollTop()/scrollLeft()
1:offset()设置或获取元素偏移
1：offset()方法设置或返回元素相对于文档的偏移坐标，跟父级没有关系
2:position()获取元素偏移
1：position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级内有定位，则以文档为标准
3：scrollTop()/scrollLeft()设置或获取元素被卷曲的头部和左侧
1：scrollLeft()方法设置或返回被选元素被卷曲的头部
4:带有动画的的返回顶部
1：核心原理：使用animate动画返回顶部
2：animation动画里面有个scrollTop属性，可以设置位置
3：但是是元素做动画，因此得把document文档改变成$("body,html"),animate({scrollTop:0})
18:
1:jq事件注册
on()
on()方法优势1：
1：可以绑定多个事件，多个事件处理程序
$("div").on({
mouseover:function(){},
mouseout:function(){},
click:function(){}
})
如果事件处理程序相同
$("div").on("mouseover mouseout",function(){
$(this).toggleClass("current")
})
2:on()优势2
可以事件委派操作，事件委派得定义就是把原来给子元素身上得事件绑定给父元素身上，就是把事件委派给父元素
$("ul").on("click","li",function(){
alert("helloword")
})
3:on()优势3
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
2:解绑事件
off()解绑事件
off()方法可以通过on()方法添加的事件处理程序
1：$("div").off() //解除div身上所有的事件
2：$("div").off("click") //解除div身上click事件
3：$("ul").off("click","li")//解除事件委托
3：只触发一次
one()只触发一次事件
4：自动触发事件 trigger()
1:简写形式
element.click()
2:自动触发模式
element.trigger("要触发的事件")
3：自动触发模式 注意，这种不会触发元素的默认行为
element.triggerHandler("要触发的事件")
19：事件对象
element.on(event,function(e){})
组织默认行为：e.preventDefault() 或者return false
组织冒泡： e.stopPropagation()
20:对象拷贝
语法
$.extend([deep],target,object,[objectN])
1:deep：如果为true为深拷贝，false浅拷贝
2：target要拷贝的第一个对象
3：object:待拷贝的第一个对象
4：//这种方法会覆盖targect原来的数据
5：浅拷贝把被拷贝对象负责的数据类型中地址拷贝给目标对象，修改目标对象会影响目标对象
22：多库共存
解决方案：
1：把里面$符号统一改为jQuery 比如jQuery("div")
2:jQ变量规定新名称 var xx = $.noConflict()
23:插件
jQ常用插件网站
1：Jq插件库 http://www.jq22.com
2:jq之家 http://www.htmleaf.com/
3:全屏滚动 fullpage.js 中文网站 http://www.dowebok.com.demo/2014/77/
