jQuery
$ 是jQuery的*对象 也可以使用 jQuery代替
jQuery的入口函数：
$(function(){
})
jQuery 对象和DOM对象
使用jQuery方法和原生js获取的元素是不一样的
1、用原生js获取来的对象就是DOM对象
2、jQuery方法获取的元素就是jQuery对象。
3、jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪书组形式存储）。
jQuery对象和DOM对象转换
// 1.DOM对象转换成jQuery对象方法只有一种
var box = document.getElementById('box'); //获取DOM对象
var jQueryobject = $(box); //把DOM对象转换为jQuery对象
//2、jQuery 对象 转换为 DOM对象有两种方法
// 2.1、jQuery对象[索引值]
var domObject1 = $('div)[0]
// 2.2jQuery对象.get(索引值)
var domObject2 = $('div)[0]
基础选择器
ID选择器 $(’#id’) 获取指定的元素
全选选择器 $(‘*) 匹配所有元素
类选择器 $(’.class’) 获取同一类 class的元素
标签选择器 $(‘div’) 选取同一类标签的所有元素
并集选择器 $(‘div, p , li’)选取多个元素
交集选择器 $(‘li.current’)交集元素
层级选择器
子代选择器 $(‘ul>li’) 使用>号，获取亲儿子层级的元素：注意，并不会获取孙子层级的元素
后代选择器 $('ul li '); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
层级选择器
:list $(“li:first”) 获取第一个li元素
:last $(‘li:last’) 获取最后一个li元素
:eq(index) $(‘li:eq(2)’) 获取到li元素中，选择索引号为2的元素，索引号 index从0开始
:odd $(‘li:odd’) 获取到li元素中，选择索引号为奇数的元素
:even $(‘li:even’) 获取到li元素中，选择索引号位偶数的元素
jQuery设置样式
$(‘div’).css(‘属性’，‘值’)
jQuery里的排他思想
// 想要多选一的效果，排他思想：当前元素设置样式，其余兄弟元素清除样式
$(this).css('color',''red);
$(this).siblings().css('color','');
隐式迭代
//遍历内部 DOM元素（伪书组形式存储）的过程 就叫做隐式迭代
。
//简单理解 ：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();//页面中的所有div全部隐藏，不用循环操作
链式编程
// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color','red').siblings().css('color','');
jQuery样式操作
jQuery中常用的操作有两种：css()和设置类样式方法
1、操作css方法
常用一下三种形式：
//1、参数只写属性名，则是返回属性值
var strColor = $(this).css('color');
// 2、 参数是属性名，属性值，逗号隔开，是设置一组样式，
属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css('color','red');
// 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值不用冒号隔开，属性可以不用加引号
$(this).css({'color':'white'},'font-size':'20px');
常用的三种设置类样式方法：
//1.添加类
$('div').addClass('current');
//2.删除类
$('div').removeClass('current');
//3.切换类
$('div').toggleClass('current');
jQuery效果
显示隐藏：show() / hide()/ toggle();
划入划出：slideDown() / slideUp()/slideToggle();
淡入淡出：fadeIn()/fadeOut()/fadeToggle();/fadeTo();
自定义动画:animate();
jQuery属性操作
jQuery常用属性操作有三种 ：prop()/attr()/data();
元素固有属性值prop()
固有属性就是元素本身自带的属性，比如元素里面的herf，比如元素里面的type。
语法获取属性语法
prop(‘属性’)
设置属性语法
prop(‘属性’，‘属性值’)
prop()除了普通属性操作，更适合操作表单属性：
disabled/checked/selected 等
元素自定义属性 attr()
用户自己给自己添加的属性，我们称为自定义属性。比如给div 添加index = 1
获取属性语法
attr(‘属性’) //类似原生getAttribute();
设置属性语法
attr(‘属性’,‘属性值’) //类似原生setAttribute()
attr()除了普通属性操作，更适合操作自定义属性。(该方法也可以获取H5自定义属性)
数据缓存data()
data()方法也可以在指定的元素上存取数据 并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都被移除。
附加数据语法
data(‘name’,‘value’)//向被选元素附加数据。
获取数据语法
data(‘name’) //向被选元素获取数据
注意：同时，还可以读取HTML5自定义属性 data-index,得到的是数字型。
jQuery文本属性值
jQuery的文本属性值常见操作有三种：html()/text()/val();
分别对应js中的innerHTML、innerText和value属性。
语法
1、普通元素内容html() （相当于inner HTML）
html() //获取元素的内容
html(‘内容’)//设置元素的内容
2、普通元素文本内容text() (相当于原生innerText)
text() //获取元素的文本内容
text(‘文本内容’)//设置元素的文本内容
3、表单的值 val() （相当于原生value）
val() //获取表单的值
val(‘内容’) //设置表单的值
遍历元素
语法1
$(‘div’).each(function (index,domEle){
xxx
});
1、each()方法遍历匹配的每一个元素。主要用DOM处理。each 每一个
2、里面的回调函数有两个参数，index是每个元素的索引号，domEle 是每个DOM元素对象，不是jQuery对象
3、所以要使用jQuery方法，需要给这个DOM元素转换为jQuery对象$(demEle)
注意：此方法用于遍历jQuery对象中的每一项，回调函数中元素为DOM对象，想要使用jQuery方法需要转换。
语法2
$.each(object,function(index,element){xxx;})
1、$.each()方法可用于遍历任何对象。主要用于数据处理，比如对象
2、里面的函数有2个参数；index是每个元素的索引号；element遍历内容
注意：此方法用于遍历jQuery对象中的每一项，回调函数中元素为DOM对象，想要使用jQuery方法需要转换。
创建、添加、删除
jQuery方法操作元素的创建、添加、删除方法很多。重点使用以下部分
语法总合
1、创建
$(’
- ’);
动态的创建一个li
2.1 内部添加
element.append(‘内容’)
把内容放入匹配元素内部最后面，类似原生 appendChild.
element.prepend(‘内容’)；
把内容放入匹配元素内部的最前面。
2.2外部添加
element.after(‘内容’) // 把内容放入目标元素后面
element.before(‘内容’) // 把内容放入目标元素前排
1、内部添加元素，生成之后，它们是父子级关系。
2、外部添加元素，生成之后，它们是兄弟级关系。
3.删除元素
element.remove() //删除匹配的元素（本身）
element.empty() //删除匹配的元素集合中所有的子节点
element.html(’’) //清空匹配的元素内容
3.1 remove 删除元素本身。
3.2 empty() 和html()作用等价，都可以删除元素里面的内容，只不过html还可以设置内容。
ps: 以上只是元素的创建、添加、删除方法的常用方法，其他方法自行去查阅API
jQuery尺寸、位置操作
jQuery尺寸操作
jQuery尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。
width()/height() 取得匹配元素宽度和高度值 只算width/height
innerWidth()/innerHieght() 取得匹配元素的宽度和高度包括padding
outerWidth() / outerHeight() 取得匹配元素宽度和高度值包括padding、border
outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度住包括padding、border、margin
以上参数为空，则是获得相应值，返回的是数字型。
如果参数为数字，则是修改相应的值。
参数可以不必写单位。
jQuery位置操作
jQuery的位置操作主要有上：offset()、position()、scrollTop()scrollLeft()
offset()设置或获取元素便宜
1、offset()方法设置或返回被元素相对于文档的偏移坐标，跟父级没有关系。
2、该方法有两个属性 left、top、offset().top 用于获取文档顶部的距离，offset().left 用于获取文档左侧的距离。
3、可以设置元素的偏移 ：offset({top:10,left:30});
position() 获取元素便宜
1.position（）方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
2.该方法有2个属性left、top、position().top用于获取距离定位父级顶部的距离，position().left用于获取距离父级左侧的距离。
3.该方法只能获取
scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
1、scrollTop()方法设置或返回被选元素被卷去的头部。
2.不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
jQuery事件注册
jQuery为我们提供了方便的事件注册机制。
优点：操作简单，且不用担心事件覆盖等问题
缺点:普通的事件注册不能做事件委托，且无法实现事件节绑，需要借助其他方法。
语法：
element.事件(function(){})
$(‘div’).click(function(){事件处理程序})
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、keydown、keyup、resize、scroll等
jQuery事件处理
on(): 用于事件绑定，目前最好用的事件绑定方法
off():事件解绑
trigger()/triggerHandler():事件触发
语法
on的优势1
可以绑定多个事件，多个处理事件处理程序。
$('div').on({ mouseover:function(){}, mouseout:function(){}, click:function(){}, }); 如果事件处理程序相同 $('div).on('mouseover','mouseout',function(){ $(this).toggleClass('current'); });on()方法优势2
可以事件委派操作。事件委派定义是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$('ul').on('click','li',function(){ alter('hello world'); })on()方法优势3
动态创建的元素，click()没有办法绑定事件，on可以给动态生成的元素绑定事件
$('div').on('click','p',function(){ alert('俺可以给动态生成的元素绑定事件') }); $('div').append($('<p>我是动态创建的p</p>))事件处理off()解绑事件
当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery为我们提供了多种事件解绑方法：die()/undelegate()/off()等甚至还有支出法一次的事件绑定方法one(),
off()语法
$(‘p’).off() //解绑p元素的所有事件处理程序
$(‘p’).off(‘click’) //解绑p元素上面的点击事件
$(‘ul’).off(‘click’,‘li’) // 解绑委托事件
如果有的事件只想触发一次，可以使用one()来绑定事件。
事件处理trigger()自动触发事件
有些时候，在某些特定的条件下，我们希望某些事件能够自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。jQuery为我们提供了两个自动触发事件trigger()和triggerHandler();
语法
第一种：trigger()
element.click() //第一种简写形势
element.trigger（‘type’） //第二种自动触发模式
第二种：triggerHandler()
element.triggerHandler(type) //第三种自动触发模式
triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。
triggerHandler模式不会触发元素的默认行为，这是前面两种的区别。
jQuery事件对象
jQuery对DOM中的事件对象event进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。
语法：
element.on(events[selector],function(event){})
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡：event.stopPropagation()
jQuery拷贝对象
jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用。
语法：
$.extend([deep],target,object1,[objectN])
1.deep：如果设为true为深拷贝，默认为false 浅拷贝
2.target:要拷贝的目标对象
3.object1:待拷贝到第一个对象的对象。
4.objectN：待拷贝到第N个对象的对象。
5.浅拷贝目标对象引用的1被拷贝的对象地址，修改目标对象会影响被拷贝对象
6.深拷贝，前面加ture，完全克隆，修改目标对象不会影响被拷贝对象。
多库共存问题
实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。
语法：
jQuery解决方案
1、把里面的$符号统一改为jQuery。比如jQuery(‘div’)
2、jQuery变量规定新的名称：$.noConflict()
var xx = $.noConflict()
ps ：该用插件就用插件 别整那么没用的