JQ中的方法、事件及动画

时间：2023-12-28 14:27:38
css( )

除了可以为元素添加样式外，还可用来查询元素，某样式值
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宽高
添加节点

JQ中的方法、事件及动画
删除节点

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包含起来
复制节点 clone( )                           $('a.no').clone( ).appendTo('.one');           克隆$('a.no')并把它添加到('.one')节点里的后面
offset( ) 设置匹配元素相对于文档的偏移（位置）                                               属性1:top    属性2:left
delay( ) 延迟多少毫秒后触发
index( ) 获取当前元素索引
点击  $('#one').click(function( ){

});
绑定

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('资料一但确定就无法修改,您确定吗?'); });
点击切换  $('.toggle').toggle(function( ){ },function( ){ },function( ){ },...）
hover  hover事件                        $('button').hover(function( ){ },function( ){ });                    当hover只添加一个回调函数时 则效果相当于mouseover
animate( )

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( ) 停止动画队列

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

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

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

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

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

相关文章