显隐特效
$btn.click(function(){
$('#div1').fadeIn( 1000,'swing',function(){ alert('done!'); } );
});
$('#div1').fadeIn() 淡入
.fadeOut() 淡出
.fadeToggle() 淡入/淡出 切换
.show() 显示 慢 隐藏后执行函数
.hide() 隐藏hide("slow",function(){alert("藏了");});
.toggle() 显示/隐藏 切换
.slideDown() 展开
.slideUp() 卷起
.slideToggle() 展开/卷起 切换
$(this).next().slideToggle(); 点击菜单 子元素展开/关闭
动画
样式（部分支持） 时间 速度(始,终慢 默认)
$('#div1').animate({width:300,height:300}, 1000, ‘swing’, function(){
alert('动画结束执行函数');
$(this).animate({height:'+=100'},1000,linear,function(){...}) 执行动画
}); 宽=宽+100px 匀速
$('#div1').stop(); 停止动画
$('.list li').html('111'); 数组元素 内容都为'111'
$('.list li').each( function(i){ $(this).html(i); } )
数组元素 每一个 内容为 其索引
获取元素的尺寸 设置用.css
.width() .height() 获取元素 宽 高
.innerWidth() .innerHeight() 包括padding
.outerWidth() .outerHeight() 包括padding、border
.outerWidth(true) .outerHeight(true) 包括padding、border、margin
$('div').offse() 获取元素相对页面的绝对位置
$('div').offse().left
$('div').offse().top
$(window).height(); 获取浏览器窗口高度
$(document).height(); 获取页面高度
$(window).scroll(function(){ ... }) 页面滚动时 执行函数
$(document).scrollTop(); 从顶端 总共滚动多少距离
$(document).scrollLeft(); 获取当前页面滚动位置到左端距离
$(window).scroll(function(){
if($(window).scrollTop() > 200){ //滚动大于200显示
$('.top').slideDown();
}else{
$('.top').slideUp();//hide()也行
}
});
事件 触发 动画
$('div').click( function(){ $(this).stop().animate({marginTop:100}) })
.blur() 元素失去焦点
.focus() 元素获得焦点
.change() 表单元素的值发生变化
.click() 鼠标单击
.dblclick() 鼠标双击
.mouseover() 鼠标进入 向外冒泡（子元素也触发）
.mouseout() 鼠标离开 冒泡
.mouseenter() 鼠标进入 不冒泡
.mouseleave() 鼠标离开 不冒泡
.hover( function(){...}, function(){...}) (鼠标进入函数, 鼠标离开函数)
.mouseup() 松开鼠标
.mousedown() 按下鼠标
.mousemove() 鼠标在元素内部移动
.keydown() 按下键盘
.keypress() 按下键盘
.keyup() 松开键盘 检查用户名已存在
.load() 元素加载完毕 $(window).load(function(){ ... })
.ready() DOM加载完成 $(document).ready(function(){...})
.resize() 浏览器窗口改变尺寸 $(window).resize(function(){ ... })
.scroll() 滚动条的位置发生变化
.select() 用户选中文本框中的内容
.submit() 用户递交表单
.toggle() 根据鼠标点击的次数，依次运行多个函数
.unload() 用户离开页面
自定义事件
element.bind("hello",function(){ alert("hello!"); }); 绑定hello事件
element.trigger("hello"); 触发hello事件
element.bind("click",function(){ alert("click"); }); 绑定click事件
element.trigger("click"); 触发事件
阻止事件
$('div').click( function(event){ alert(1); event.stopPropagation() })
阻止事件冒泡
$(document).contextmenu(function(event) {event.preventDefault();});
右键菜单 阻止右键
$(document).contextmenu(function(event) {return false;});
右键菜单 阻止 默认行为(弹出右键菜单)
$('div').click( function(event){ alert(1); return false; })
阻止 默认行为(冒泡—点击上层元素)
事件委托 （提高性能）
传统写法 <ul id="list">
$('#list li').click(function(event) { <li>1</li>
$(this).css({background:'red'}); <li>2</li>
}); <li>3</li>
</ul>
事件委托
$('#list').delegate('li', 'click', function(event) { //click绑了list 冒泡给li
$(this).css({background:'red'});
$('#list').undelegate(); 取消事件委托
});
插入节点
var $span = $('<span>这是一个span元素</span>'); jq元素
$('div').append($span); $span.appendTo('#div1');
.append() .appendTo()： 添加子元素 从后面插入
.prepend() .prependTo()： 添加子元素 从前面插入
.after() .insertAfter()： 添加弟元素 从后面插入
.before() .insertBefore()： 添加兄元素 从前面插入
删除节点
$('#div1').remove();