1. jQuery与DOM 的转换
jquery → DOM： jQuery对象[ ]
DOM → jQuery：$(dom对象 )
2. 注册事件
简单方式： $('选择器').事件名(事件处理程序)
on的方法： jQuery对象.on( '事件名', 事件处理程序)
事件委托： jQuery对象.on('事件名', '选择器', 事件处理程序)
移除事件
简单：jQuery对象.off('click', 事件程序名)
事件委托：jQuery对象.off(‘事件名’, '选择器', 事件处理程序名)
bind 和 unbind方法操作事件
注册：jQuery对象.bind('事件名', 事件处理程序)
移除：jQuery对象.unbind('事件名', 事件处理程序名)
3. 操作css样式
jquery对象.css('width', 500)
3.0 操作元素
4. 选择器
基本：id、类、标签、交集、并集
层级：
| 名称 | 用法 | 描述 |
|
:eq(index) |
$('li:eq(2)') | 获取li中索引为2的元素 |
| :odd | $('li:odd') | 获取li中索引为奇数的元素 |
| :even | $('li:even') | 获取li中索引为偶数的元素 |
筛选选择器：
| 名称 | 用法 | 描述 |
| children() | $('ul').children('li') | 相当于子类选择器 |
| find() | $('ul').find('li') | 相当于后代选择器 |
| siblings() | $('#a').sibling('li') | 查找兄弟节点，不包括自己 |
| parent() | $('#a').parent() | 查找父亲 |
| eq() | $('li').eq(1) | 查找索引为1的节点，从0开始 |
| next() | $('li').next() | 下一个兄弟元素 |
| prev() | $('li').prev() | 上一个兄弟元素 |
| prevAll() | $('li').prevAll() | 之前所有的元素 |
5. 入口函数
$(function(){ })
$(document).ready(function(){ })
区别：
window.onload = function(){
当页面中所有资源【DOM树，媒体】加载完毕后才执行
}
$(function(){
仅仅等DOM树加载完毕后执行
})
6. 操作类名
添加：$('div').addClass('xx')
移除：$('div').removeClass('xx')
检测类名是否存在：$('div').hasClass('xx')
切换类名：$('div').toggleClass('xx') //有则删没有则添加
7. 操作标签属性
设置：$('div').attr('pid', 110)
获取：$('div').attr('pid')
移除：$('div').removeAttr('pid', 100)
prop方法：针对表单属性selected、checked、disabled操作使用prop方法
获取： $('input').prop( 'checked' )
设置： $('input').prop('selected', true)
8. 操作标签内容
文本： jquery对象.text() jquery对象.text('xxx')
所有： jquery对象.html() jquery对象.html('xxxx')
表单： jquery对象.val() jquery对象.val('xxx')
9. 操作元素尺寸
width 和 height 【内容部分】
jQuery对象.width(‘数字’)
innerWidth 和 innerHeight 【内容+padding】
jQuery对象.innerWidth()
10. 操作元素位置
元素距离文档位置
jQuery对象.offset()；返回一个对象，包含元素位置
元素距离上级定位元素位置
jQuery对象.position()；返回一个对象包含位置
操作卷去的页面间距
jQuery对象.scrollTop()
$('div').scroll(function(){
// 获取被卷起的间距
var v = $(this).scrollTop();
console.log(v);
});
$('button').click(function(){
// 设置卷起的间距
$('div').scrollTop(0);
});
10. 动画
speed:运动时长； easing：运动方式，默认swing缓冲，linear匀速
显示：jQuery对象.show(speed, easing, fn)
隐藏：jQuery对象.hide(speed, easing, fn)
切换：jQuery对象.toggle(speed, easing, fn)
下拉上卷：
显示：jQuery对象.slideDown(speed, easing, fn)
隐藏：jQuery对象.slideUp(speed, easing, fn)
切换：jQuery对象.slideToggle(speed, easing, fn)
淡入淡出
显示：jQuery对象.fadeIn(speed, easing, fn)
隐藏：jQuery对象.fadeOut(speed, easing, fn)
自定义动画：
animate(params, [speed],[easing],fn)
params传入一个对象
animate({
样式属性名：目标值
})
停止动画
jQuery对象.stop(clearQueue, jumpToEnd)
clearQueue布尔值 true：请空该物体所有动画；false默认：仅清除当前这一动画
jumpToEnd布尔值 true：停止动画并直接完成运动目标；false默认：停止动画保持当前状态，不会运动到当前目标
11. 事件对象
鼠标事件对象相关属性
事件对象.clientX/Y 参照浏览器
事件对象.pageX/Y 参照文档
事件对象.offsetX/Y 参照事件源
公共属性和方法
事件对象.target
事件对象.preventDefault()；阻止默认行为
事件对象.stopPropagation()；阻止事件冒泡
12. 链式编程
jQuery对象调用一些方法做设置操作时，方法完毕后，内部会重新返回当前jQuery对象，所以可以继续调用jQuery的其他方法，这种现象就是链式编程
end方法在链式编程上返回上一jQuery对象
13. 多库共存
① jQuery.noConflict()； 释放 $ 用其他变量接收，jQuery中不使用$,使用jQuery
②jQuery库释放$符合的使用权，用其他简单的符号代替