jQuery的基本使用
一、 jQuery对象与DOM对象
DOM对象：原生js获取的对象
jQuery对象：用jQuery方法获取的对象
注意：
1. jQuery对象只能使用jQuery方法，DOM对象只能使用原生js提供的方法
2. jQuery对象与DOM对象的相互转换：
（1）DOM转换为jQuery对象：$(DOM对象)
var newli = document.querySelector('li');
$(newli);（2）jQuery转换为DOM对象：$(DOM对象)
$(DOM元素)[index] 或者 $(DOM元素).get(index)
$('.input')[0]; //方法一
$('.input').get(0) //方法二二、相关操作
1. 入口函数
原生：window.addEventListener('DOMContentLoaded',function(){})
现在：$(function(){})或$(document).ready(function(){}) 即等DOM结构渲染完毕后就执行
2. 设置样式
$('div').css('属性名','属性值')
注意：
（1）jQuery的隐式迭代：遍历匹配到的所有元素，即不需要我们再进行手动循环
（2）多个样式：$('div').css({width:200, height:200, backgroundColor:'blue'})
example:
3. 筛选选择器
$('li:first') - 取第一个li元素
$('li:last') - 取最后一个li元素
$('li:eq(2)') - 取索引号为2的li元素
$('li:odd') - 取索引号为奇数的li元素
$('li:even') - 取索引号为偶数的li元素
$('.checkinput:checked') - 被选中的复选框（可带length）
一些方法：
$('li').parent() - 查找父级
$('div').parents('选择器') - 查找指定的祖先元素
$('div').children('p') - 查找子集
$('ul').find('li') - 查找ul里面的li，即后代选择器
$('li:first').siblings('li') - 查找兄弟结点
$('li:first').nextAll() - 查找当前元素之后的所有同辈结点
$('li:last').prevAll() - 查找当前元素之前的所有同辈结点
$('li').eq(2) - 查找索引号为2的li元素
$('div').hasClass('current') - 判断div是否有current这个类名
$(this).index() - 获取当前索引号
ps: .toFixed(2) - 小数点后保留两位小数
4. 添加/删除/切换类
$('div').addClass('current'); -- 添加
$('div').removeClass('current'); -- 删除
$('div').toggleClass('current'); -- 切换
三、jQuery效果
1. 显示/隐藏
（1）show 显示 ([speed, [easing], [fn]])
speed：slow、normal、fast、值(毫秒数)
easing：swing（慢-快-慢）、linear（匀速）
fn：回调函数，动画完成时执行
（2）hide 隐藏 同 show
（3）toggle 切换 同 show
2. 滑动
（1）slideDown 下滑 ([speed, [easing], [fn]])
（2）slideUp 上滑 参数同上
（3）slideToggle 切换 参数同上
3. 事件切换
hover([over], out)
over：鼠标移到元素上时触发的函数
out：鼠标离开元素时触发的函数
注意：如果只写一个函数，则鼠标经过和离开都会触发这个函数，可以配合toggle方法使用
注意动画队列：即多次触发，会有多个动画排队现象出现
可以停止排队，使用stop() --stop()需写到要执行的动画前面
$('.nav>li').hover(function(){
$(this).children('ul').stop().slideToggle();
})4. 淡入淡出
（1）fadeIn 淡入 ([speed, [easing], [fn]])
（2）fadeOut 淡出 参数同上
（1）fadeToggle 切换 参数同上
（1）fadeTo 调整透明度 ([[speed], opacity, [easing], [fn]])
注意：opacity与speed必须写，其他参数同上
5. 自定义动画
animate(params, [speed], [easing], [fn])
params：样式属性（必须写，并以对象的形式传送）其他参数如上
PS手风琴操作：
ul>li*n 每个li设置较短的宽度（加上overflow:hidden），当鼠标移入到某个li时，当前li的宽度需要增加到图片的正常宽度，而此li的兄弟结点的宽度变为较短宽度。可以使用fadeIn与fadeOut再加上animate({width:xx})来完成手风琴效果，注意每个jQuery效果前最好都加上stop()防止动画队列中出现多个动画。
四、对元素的操作
1. 遍历对象
方法一：$('div').each(function(index, documentElement) {....})
（1）index -- 索引号
（2）documentElement -- DOM元素对象
（3）适用于遍历DOM对象
方法二：$.each(object, function(index, documentElement) {....})
（1）object 如：$('div')
（2）适用于遍历数组、对象：
var arr = ['red', 'blue', 'yellow']; $.each(arr, function(i, elem) { console.log(i,elem); })
2. 创建、添加和删除元素
（1）创建元素
var p = $("
我是创建的p
")（2）添加元素
$("div").append(p) - 放到div内部元素的最后面
$("div").prepend(p) - 放到div内部元素的最前面
$("div").after(p) - 放到原来div的后面
$("div").before(p) - 放到原来div的前面
（3）删除元素
$("div").remove() - 删除div元素
$("div").empty() - 删除div的所有子节点
$("div").html("") - 将里面的内容清除（即子节点也没了）
五、jQuery 尺寸以及位置
Size
1. width()、height() -- 得到或修改元素的宽、高
2. innerWidth()、innerHeight() -- 得到加了padding的宽、高
3. outerWidth()、outerHeight() -- 得到带有padding与border的宽、高，若在括号内加上true则会加上margin值
Location
1. offset() -- 返回或修改元素距离文档的偏移坐标值（对象），与父级元素无关
若要修改：offset({top:100,left:200})
2. position() -- 返回与父亲定位有关的偏移坐标值（对象），不能设置
3. scrollTop() / scrollLeft() -- 返回元素被卷去的头部或左侧，animate中也可以有scrollTop
六、on()绑定事件
element.on(events, [selector], fn) -- 可以绑定多个处理事件
1. events：事件类型（用对象形式）
2. selector：子元素选择器，可以实现事件委托
例子：
$("div").on({
mouseenter: function() {alert(123);},
click:function(){console.log(111)}
})
$("div").on("click", "p", function() {alert(123);}) -- div为p的父元素。可以冒泡
注意：
1. 若处理事件相同
$("div").on("mouseover mouseout", function() {$(this).toggleClass("red");})
2. on()可以给动态生成（比如后来生成的）的元素绑定事件
七、off()解绑事件
可移除由on创立的事件
1. $("div").off() -- 将div身上所有的事件都解绑
2. $("div").off("mouseover") -- 只解除div身上的mouseover事件
3. $("div").off("click","p"); -- 解除委托事件（div为p的父元素）
注意：用one()来绑定事件 -- 事件只触发一次，用法与on相似
八、自动触发事件trigger()
1. element.event();
2. element.trigger("event");
3. element.triggerHandler("event"); -- 特殊：不会触发元素的默认行为
九、jQuery拷贝对象
$.extend([deep], target, object1, [objectN])
1. deep：若设置为true则为深拷贝，默认为false，浅拷贝
2. target：需要拷贝的目标
3. object1：待拷贝到第一个对象的对象
注意：
1. 浅拷贝：将复杂对象的地址拷贝过去，target有而object1没有的数据会被覆盖掉，这样一修改数据，被拷贝对象的数据也会跟着变。
2. 深拷贝：拷贝的对象，而不是地址，target有而object1没有的数据继续保留。修改数据，被拷贝对象的数据不会跟着改变。