JQuery相关基础
原生javascript与jquery方法不能同时混合使用
1.操作属性
attr: $('xxx').attr('属性') //一个参数是获取属性
$('xxx').attr('属性','xxx') //两个参数是设置属性
filter: $('XXX').filter('xx') //筛选，过滤
$('XXX').filter('[title=XX]')
not: $('XXX').not('xx') //filter反义词，不包含XX属性的元素
has: $('XXX').has('xx') //XXX里面的元素内部是否包含XX元素,如果包含，则该元素包含在结果中。如果不包含，那么就排除。
<div id='xxx'><span id='xx'></span></div>
find: //find()方法是获得在当前结果集中每个元素的后代。满足过滤条件的则保留，保留的是后代.
//与has（）不同，而has()方法中，参数只做为条件，符合条件的，它的前元素加入新的结果集，而不是后代加入新的结果集。
next: //下一个兄弟节点
prev: //上一个兄弟节点
index: $('XXX').index() //在当前元素所在所有兄弟节点中的位置；
addClass: $('XXX').addClass('XX xx'); //添加class XX,xx;
removeClass: $('XXX').removeClass('XX'); //移除class;
width/height: $('XXX').width() //width
innerWidth/innerHeight: $('XXX').innerWidth() //width+padding
outerWidth/outerHeight: $('XXX').outerWidth() //width+padding+border
outerWidth/outerHeight: $('XXX').outerWidth(true)//width+padding+border+margin
2.DOM操作
insertBefore: $('b').insetBefor($('a')); //将b剪切到a前面
inserAfter: $('b').insetBefor($('a')); //将b剪切到a后面
appendTo: $('Fuji').appendTo($('Ziji')); //在Fuji中 末尾 插入Ziji;
prependTo: $('Fuji').prependTo($('Ziji')); //在Fuji中 开始 插入Ziji;
before,after,append,prepend: $('b').befor($('a')); //b的前面是a = 将a剪切到b前面；其他同理；
remove： $('a').remove(); //移除a；
scrollTop/scrollLeft: 纵向/横向滚动条距离
offset(): offset().left; //元素距屏幕左边的距离，无视父级；Top同理；
position: position().left; //到有定位的父级的left值，把当前元素转化为类似定位的形式；
offsetParent(): //获取有定位的父级
parent: //获取父级
parents: $('a').parents('XXX') //获取祖先节点，传入参数可筛选
closest: //获取最近的指定的祖先节点（包括当前元素自身）必须传入参数，只能找到一个元素
siblings: //获取兄弟节点,添加参数可筛选；
nextAll/preAll: //下面/上面所有兄弟节点，添加参数可筛选；
parentsUntil/nextUntil/preUntil: //截至到(参数)的筛选；
clone: $('a').clone().appendTo.... //克隆，如果clone中传入true，则会克隆其方法；
wrap: $('a').wrap('<div>') //在a外面包装一个div;
wrapAll:$('a').wrapAll('<div>') //在所有的a外面都包装一个div；会改变DOM节点方式，注意
wrapInner: $('a').wrapInner('<div>') //在所有a内部都包装一个div；
unwrap: $('a').unwrap() //方法删除被选元素的父元素
add: var a=$('a').add('b'); //a同时包含了a,b;
slice: //分割
serialize/serializeArray
3.event
ev.pageX: 鼠标坐标 //相对于文档 clientX:相对于可视区
ev.which：键值 //包括鼠标键值
ev,preventDefault: //阻止默认事件
ev.stopPropagation: //阻止冒泡操作
return false: //既阻止默认事件，又阻止冒泡操作
delegate: $('ul').delegate('li','click',function(){ })
//利用冒泡原理对Li添加事件；名称：事件委托
//优点：省去循环操作，对于后添加进来的元素同样成立，性能优；
undelegate: //阻止事件委托；
trigger: $('a').on('XXX',fn1); $('a').trigger('XXX') //主动触发XXX事件；
on: $('a').on('event',fn); $('a').on({'event':fn1,'event2':fn2});
$('a').on('event',{"XX":xx},fn(ev){
ev.date.XX //data为json格式；
ev.target //事件源，操作的是谁
ev.type //事件类型
});
off: 取消事件
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
$("a").bind("click",function(){alert("ok");});
live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的
$("a").live("click",function(){alert("ok");});
delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
$("#container").delegate("a","click",function(){alert("ok");})
on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
差别：
.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理，性能优于.live()
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制
4.其他
one:$('a').one('event',fn); //只触发一次事件
val: $('a').val; $('a').val(xxx); //获取value值,更改value值
size: //获取长度；
each: $('a').each(function(i,elem){}) //for in; 参数1：下表；参数2：每个元素
hover: //鼠标移入移出
hide/show: $('a').hide(time); //隐藏/显示；加了时间(time)会有动画；
fadeIn/fadeOut: $('a').fadeIn(time) //淡入淡出；默认400毫秒； 参数2：透明度
slideDown/slideUp: $('a').slideDown(time) //向上卷曲/向下展开
5.基础扩充
get: $('a').get(0).innerHTML; //使jq和js可以混合使用，get需要指定集合第几个使用；
for(var i=0;i<$('a').get().length;i++){ }
for(var i=0;i<$('a').length;i++){ } //源码中也有Length属性
outerWidth: //可以获取到隐藏元素的宽高，原生offsetWidth无法获取隐藏元素宽高
text: //只获取文本内容，不会获取到标签
detach: //跟remove方法一样，不过会保留删除这个元素被删除前的操作行为
6.动画
animate: //参数1：运动的值和属性
//参数2：运动的时间
//参数3：运动形式：swing(慢快慢)，linear(匀速)
//参数4：回调函数
stop: //阻止当前运动，
//参数1：true，阻止所有运动；
//参数2：true,立即让当前动画直接走完；
finish: //立即停止到所有指定的目标点；
delay: //延迟；
7.工具方法
$.type: js:typeof; //相比于typeof ，功能更强大，能判断更多的类型；
$.trim: js:无trim
$.inArray: var a=['a','b','c','d']; $.inArray('b',a); //类似于indexOf
$.proxy: $.proxy(fn1,xxxx) //改变this指向；将fn1中this的指向xxxx;
$.proxy(fn1,xxxx)(a,b) //传参a,b;会立即执行；
$.proxy(fn1,xxxx,a,b) //传参a.b;调用才执行；
$.noConflict: var xxx=$.noConflict(); //xxx可以当作$使用；例如：xxx('a').css....;
$.parseJSON; //转为json;
$.makeArray: //类数组转为真正数组；
8.ajax
$.ajax({
url:xxxx,
data:xxxxxx,
type:'POST/GET',
success:function(){ },
error:function(){ },.........
})
9.扩展
$.extend: 扩展工具方法下的插件形式 $.xxx() $.yyy();
$.extend({
leftTrim:function(str){
return str.replace(/^\s+/,'');
}
});
$.fn.extend: 扩展JQ对象下的插件形式 $().xxx() $().yyy();
