属性
attr 从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说比较慢（可读可写）
$('div').attr('class') 读出div标签的class名)
$('div').attr('class=demo') 修改div标签的lacss名（可以设置多个属性名）
$('div').attr('data':'num','age':18) 在原有的div属性中添加特性
$('div').attr('class',function(){
…………
return list
})
满足函数内容后，改变div的class名
removeAttr 移除属性名
$('div')removeAttr('data') 移除data属性
prop
$('input').prop('checked') 实时的判断input的checked的属性返回true/false
removeProp
attribute和property，attr()和prop()的区别傻傻分不清
attr和prop区别
attr只能初始的第一次选中的当前元素里面初始状态属性值
prop 能实时监控改变后的状态CSS类
addClass $('div').addClass('active') 给div添加class属性
removeClass $('div').removeClass() 传参就去掉传参的class，不传就全部去除
toggleClass $('li').toggleClass('active') 把li标签中有class=active的class去除。其他的li添加上class=active
HTML
改变html的文本内容和文本结构
$('.wrap').html(); 获取当前属性里面的内容，包括文本内容和节点内容$('.wrap').html('内容已更改'); 传参了后整个节点和内容都被更改了
$('.wrap').html('<b>内容已更改</b>'); 全部替换当前html写的内容（能解析标签）
通过数据动态来渲染结构（拓展）
function addList(){var str='';
for(var i=0; i<10; i++){
str += '<li>1</li>'
}
$('.wrap').html(str);
}
addList();
text改变或者获取内容
$('.wrap').text(); 只获取当前元素下面的文本内容，包括子标签里面的文本
$('.wrap').text('我改变了你'); 添加内容后标签整个节点内容替换;包括标签在内所有内容全部替换
$('.wrap').text('<div>112</div>') ; text里面写标签,是把所有当成内容呈现在界面上；不能解析标签（与html不同）
位置
$('.wrap').offset() offset 当前视窗口位置偏移 可见元素有效 top和left
$('.con').position() poisition 根据父级偏移来定位top和left
尺寸获取
$('.wrap').height(); 代表当前css高度值height$('.wrap').innerHeight(); 代表当前css高度值 + padding高度值 = 总值
$('.wrap').outerHeight(); outerHeight不传参数css高度值 + css的padding值 + css的border值 = 总值
$('.wrap').outerHeight(true); 传参数css高度值 + css的padding值 + css的border值 + css的margin值 = 总值
文档处理
内部插入
链式调用（根据返回值实现）
$('.box').append('<p>111</p>').addClass('name1').addClass('name2')
.box调用了append，插入一个p标签。后面紧随着添加calss属性。（遵循着链式调用的规则。是$('.box')对象开始调用方法的
所以后面的一系列操作都针对$('.box')），所以class都添加到了$('.box')上
$('<p class="finte">1111</p>').appendTo($('.box')).addClass('name3').addClass('name4');
同理上，创建的p标签插入$('.box')，并链式调用添加属性。属性都添加到了P标签上
prepend 向一个元素的前面 （append是尾部添加）添加一个新的元素
prependTo 同appendTo用法
外部插入
$('.box').after('<span>后面</span>')
把一个元素插入到另一个元素的后面after
$('.box').before('<div class="uBefore">前面</div>');
把一个元素插入到另一个元素的前面 before
$('input').insertAfter($('.box'));
所匹配到的元素插入到一个元素的后面（剪切），会改变当前的dom的结构
$('input').insertBefore($('.max'));
所匹配到的元素插入（剪切）到一个元素的前面
事件
$('ul').on('click', 'li', fn)
事件委托机制（在父级添加事件，由子级触发（冒泡机制）），此时第二个参数代表li能够触发ul身上的事件；
$('ul').off(' 事件 ');
off把一个dom元素的事件移除,不传参移出改dom的所有事件
$('ul').one('事件' , 'fn' )
one是给dom元素添加事件，但是这个事件只能执行一次
$('ul').tirgger('事件')
trigger是主动触发的事件，如setTimeOut两秒后主动触发该事件；我们可以主动添加事件，后通过tirgger来执行。
将playChange传入tirgger('playChange')即可触发执行；（跟函数执行差不多，如：playChange（）;）
$('div').on('playChange',function(e ,date){});
需要注意的是自定义事件后面的函数，如果需要传参，需保留第一位，因为该位为event事件对象；
$('div').hover(function(){移入},function(){移出});
hover事件，传入两个函数，逗号隔开，移入触发第一个，移出触发第二个；
$('div').toggle(true/false);
切换div的显示状态，true为显示，false为隐藏（改变CSS中的display属性）
事件类型：
注意： $('div').click(fn) 所有事件都可以这样直接调用，建议用on方法；(①click事件是在页面加载后，获取的所有类名为btn1的元素，然后绑定了这个click事件，你要是通过其他操作再生成一个btn1元素，新的btn1就没有click这个事件；
②而on()事件起到了监听的效果,可以实现动态html元素绑定，比如一开始只有一个btn2元素，你通过某种方法又加了一个btn2元素，这个元素也可以点击，可以无限添加btn2。
那么怎么实现这个动态监听的过程呢？
on()事件相当于是$(document).click( function ( ) { if ( 点击的是btn ) { } } )，给document添加了一个click事件，点击的是btn，事件冒泡原理，从里到外，就相当于点击了document，那么就会执行后面的操作，本质上只给document添加了一个事件，而click()事件是给所有btn添加了click事件。
另外on()事件可以添加多个事件。
on()委托事件的优点：原来的事件绑定，要绑定好多事件，现在只需要绑定一个事件，大大提高了效率和页面性能，解决的动态添加元素导致不能触发的bug
$('inp').on('blur', function(){}) 失去鼠标焦点触发事件 -----> input
$('inp').on('change', function(){}) 改变input框的内容触发事件 ----> input
$('inp).on('focus', function(){}) 聚焦时触发事件 ----> input
$('div').on('click', function(){}) 点击触发事件
$('div').on('dblclick', function(){}) 双击触发事件
$('div').on('mousedown', function(){}) 鼠标按下触发
$('div').on('mouseup', function(){}) 鼠标抬起时触发
$('div').on('mouseenter', function(){}) 鼠标穿过元素时触发事件（穿过子元素不会触发）
$('div').on('mouseleave', function(){}) 鼠标离开元素时触发（离开子元素不会触发）
$('div').on('mouseover', function(){}) 鼠标覆盖，鼠标位于指定的元素上触发（覆盖子元素也会触发）
$('div').on('mouseout', function(){}) 鼠标移出指定的元素触发（离开子元素也会触发）
$('div').on('mousemove', function(){}) 鼠标在指定元素中移动连续触发事件（在子元素上移动也会触发）
$('div').on('keydown', function(){}) 键盘按下触发
$('div').on('keypress', function(){}) 键盘按下的触发
$('div').on('keyup', function(){}) 键盘抬起触发
$('div').on('scroll', function(){}) 当鼠标滚动条滚动时触发，适用于所有可滚动的元素和 window 对象（浏览器窗口）
$('div').on('resize', function(){}) 当调整浏览器窗口时触发
$("form:first").on('submit', function(){}) 当提交表单时，会发生 submit 事件。该事件只适用于表单元素。
$("form:first").on('unload', function(){}) 在当用户离开页面时，会发生 unload 事件。
具体来说，当发生以下情况时，会发生 unload 事件：(点击某个离开页面的链接,在地址栏中键入了新的 URL,使用前进或后退按钮,关闭浏览器,重新加载页面)
事件对象：
e.target 事件源对象e.pageX 获取事件对象相对于文档左边缘位置,包含滚动条距离
e.pageY 获取事件对象相对于文档上边缘位置,包含滚动条距离
e.clientX 获取事件对象相对于可视窗口的位置
e.clientY 获取事件对象相对于可视窗口的位置
e.preventDefault 阻止默认事件触发
e.stopPro 阻止事件冒泡
e.type 返回当前事件对象的事件类型
效果与动画
第一个参数: speed, 隐藏 / 显示的速度, 可传: slow(慢) / normal(正常) / fast(快) ，可以直接传数字，单位毫秒计；第二个参数: 切换效果: 默认为swing, 可传linear; (第二个参数一般不写)
第三个参数: fn, 当执行完之后执行的回调函数
$('div').hide('slow/normal/fast', fn) 将显示的元素隐藏，第一个参数控制快慢；第二个可传入回调函数；
$('div').show('slow/normal/fast', fn) 将隐藏的元素显示，第一个参数控制快慢；第二个可传入回调函数；
$('div').slideDown('speed', 'easing', fn) 动画向下滑动出现
$('div').slideUp('speed', 'easing', fn) 动画向上滑动隐藏
$('div').slideToggle('speed', 'easing', fn) 来回切换，隐藏状态切换成显示状态，显示的切换成隐藏状态
$('div').fadeOut ('speed', 'easing', fn) 淡出
$('div').fadeIn ('speed', 'easing', fn) 淡入
$('div').fadeToggle ('speed', 'easing', fn) 切换淡入淡出
创建自定义动画效果
$('div').animate({ obj }, speed, 'linear/swing', fn)
传入第一个参数为{ obj }, 里面是动画属性将变化的属性名跟属性终点值
如: { width: '100px', height: '100px', left: '100px', display: 'none'等等 }
$('div').stop() 停止所有在指定元素上正在运行的动画
$('div').delay(speed) 设定一个延时来延迟之后要执行的项目
如: $('div').delay(5000).fadeIn(1000, 'linear')，延迟匹配元素之后的淡入效果
工具类方法
$.merge(arr1,arr2,arr3) 合并数组，将所有数组合并到第一个并返回，而其后的数组不会改变
$.extend(true,obj1,obj2) 合并对象，跟merge同理（有相同属性名会覆盖属性值）将所有对象合并到第一个并返
回，而其后的对象不会改变
$.fn.extend() --> $.fn === prototype(原型上) --> $('div').add()这样调用
如果没有fn不是原型链上的就需要 $.add()这样按照工具类方法调用
因为是对象，方便调用，所以还可以用来扩展插件：
例1：(封装去掉左边空格的方法)
$.extend({
leftTrime:function (str){
var reg = /^\s+/g;
return str.replace(reg,"")
}
})
$.leftTrime(' d a dd ')
因为extend返回的是第一个对象，所以我们写在该对象里面的方法可用$调用
例2：(封装input全选方法--在fn原型上)
$.fn.extend({
check:function(flag){
return this.each(function (){
this.checked = flag;
})
}
})
$('input').check(true)
因为在fn（原型）上写方法，所以可以用$('input')直接调用
$.parseHTML(string,context,true/false) 将字符串转成dom标签，返回的是dom数组
第一个参数字符串解析成dom结构，第二个代表插入哪个documnet，第三个true可以解析<script>标签；false不可以解析<script>标签；
$.type(123) 返回数据类型，如：string array number;
$.trim(" ad dad ") 返回去掉前后空格的字符串（中间的不会去除）
$.noConfilct() 交出$符权限（权限剪切出来，原来的废除）
var my$ = $.noConfilct() 相当于用变量接收$符号，避免多重引用不同jQuery引发的$符覆盖问题
$.mackArray(arr) 将类数组转换成数组返回；（类数组条件：索引值，length属性）
$.inArray(1,arr) 相当于indexOf()用法一样，判断数字是否在数组里，返回索引值或者-1
回调函数
Callbacks('flag') 函数队列
Callback.add(fn) 添加函数
Callback.fire(data) 触发函数（传入data实参）
Callback.remove(fn) 将fn函数移除
结果为123 124 123 124
回调函数：Callbacks('flag')
flag的值：
noce（只触发一次fire） unique （添加的相同函数只触发一次）
memory （继续触发fire后面添加（Callback.add(fn)）的函数）
stopOnFalse （执行函数中返回值（return）为false的，后面的函数不会被执行）
可以并列使用传入多个flag值 如 'nonce unique'（只触发一次fire并且函数只执行一次）
问题：工具方法和实例方法的区别。
工具类方法直接调用。
实例类方法往往操作dom需要一个实例。如$('div').css(...)
先获取div元素，然后对他进行操作。