jquery显隐特效 动画 事件

显隐特效

$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 >

$('#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();