JQ中的方法、事件及动画

除了可以为元素添加样式外，还可用来查询元素，某样式值
alert($(‘.cls1’).css(‘width’)); //100px(返回带单位的值)
注意:原生CSS样式中有-的去掉并且将后面的单词第一个字母大写

alert($(‘.box’).width( ));             alert($(‘.box’).height( ));              获取元素的原始宽高(不带单位)

alert($(‘.box’).innerWidth( ));     alert($(‘.box’).innerHeight( ));      获取元素的宽度+padding 不计入border

alert($(‘.box’).outerWidth( ));     alert($(‘.box’).outerHeight( ))       获取元素的宽度+padding+border

alert($(document).width( ));       alert($(document).height( ));      浏览器inner宽高

empty( )                    $(‘a’).empty( );                清空a的所有子节点

remove()                   $(‘a:eq(3)’).remove( );      删除$(‘a:eq(3)’)这一整个节点

replaceAll( )           $(‘<a href=”http://www.baidu.com”>百度链接地址</a>’).replaceAll(‘a’);                 用<a href=”http://www.baidu.com”>百度链接地址</a>替换全部a

replaceWith( )                 $(‘a’).replaceWith(‘<a href=”http://www.baidu.com”>百度链接地址</a>’);    ( 与replaceAll()效果一样 )

wrap( )                           $(‘a’).wrap(‘<li class=”one”>’);                用每个li分别包含每个a

unwrap( )                        $(‘a’).unwrap(‘<li class=”one”>’);            取消全部包含在a外面的li

wrapAll( )                        $(‘a’).wrapAll(‘<li class=”one”>’);             一个li包含全部a

$(‘a:not(.no)’).wrapAll(‘<li class=”one”>’);     如果a.no下面有a的话 则a.no会被顶到li节点后

wrapInner( );                  $(‘a’).wrapInner(‘<li class=”one”>’);        将a的文本用li包含起来

});

on绑定                            $(‘#one’).on(‘click’,function( ){ })           取消on事件 用off( )

bind绑定                          $(‘#one’).bind(‘click’,function(){ })

unbind取消绑定                $(‘.unbind’).bind(‘click’,function( ){ $(‘.bind’).unbind(‘click’); });

动态添加的按钮要绑定事件的话  则使用live                                          $(‘.live’).live(‘click’,function( ){ });

one一次性事件                  $(‘.one’).one(‘click’,function(){ alert(‘资料一但确定就无法修改,您确定吗?’); });

animate(json,时间,回调函数) 以json形式传参 回调函数为可选项
$(‘button’).click(function( ){
　　$(‘#one’).animate({left:’900px’,top:’600px’,},1000,function( ){
　　　　$(‘#one’).animate({width:’100px’,height:’100px’},1000);
　　　　});
});

动画目标值的设定可以是累加或者累减                    $(this).animate({left:’+=500px’},500）

动画按顺序执行                                                  $(this).animate({left:’600px’},2000).animate({top:’550px’},2000)

使用stop( )会立即停止当前的动画
如果下面有动画没有执行完 会立即执行下一个动画

stop(true)                   如果鼠标移除元素的时候会停止当前的动画而执行下一个动画而不是立即执行hover移开的动画 如果想移开的同时立即执行hover的移除动画 则添加true参数

slideDown(500);向下展开      slideUp(500);向上缩起                   参数为执行动画的时间 无透明度效果

show(1000);展示                  hide(1000);                                隐藏有伸缩效果和透明度改变效果

fadeIn(1000);淡入                fadeOut(1000);                           淡出无伸缩效果