jQuery设置css样式、jQuery创建元素、jQuery动画等代码实例讲解
程序员文章站
2022-10-26 13:49:15
jquery设置css样式:
//$('#box').css('style', 'value');
$('...
jquery设置css样式:
//$('#box').css('style', 'value'); $('.box').css({ width: '100px', height: '314px' }) // json对象: $('.box').css({ 'width': '100px', 'height': '120px' })
jquery的css()函数如果只传样式名,则返回该样式的值,注意返回的颜色是rgb
多个符合条件的则返回第一个的值
//类名操作 $('.box').addclass('one two'); 不会覆盖掉已有的不同类 $('.box').removeclass('one'); //判断是否有这个类名: $('.box').hasclass('one') //有则删除,无则添加 $('.box').toggleclass('one');
jquery创建元素:
$('haha') //添加 $(document.body).append($('haha')); $(document.body).append('haha'); $(document.body).append(document.createelement('p')); /*append也有剪贴效果,如果是个jquery组调用append,则会每个下面都添加。 .after() 变为自己的下一个兄弟 .before() 变成自己的上一个兄弟 */ $('.box').html('') //相当于innerhtml
清空和删除元素:
empty()删除子元素
remove()删掉自己
clone(boolean) 复制节点,默认 false ,复制全部内容, 如果传 true , 会连同注册事件一起复制’不能复制用原生方式注册的事件
jquery动画:
.show / .hide / .toggle(speed, linear / swing, callback - function) 同时改变宽高透明度
.slidedown / .slideup / .slidetoggle(speed, linear / swing, callback - function)
.fadein / .fadeout / .fadetoggle(speed, linear / swing, callback - function)
animate:
animate(json , speed , linear / swing , callback)
注意属性必须是带数字的属性
$("button").click(function () { var p = $("p"); p.animate({ left: '100px' }, "slow"); p.animate({ fontsize: '3em' }, "slow"); });
stop(是否清除动画队列 , 是否跳到当前动画最终效果)解决动画队列问题,默认都是false
- f f 立即执行下一个动画 (默认)
- t f 定在当前(常用)常用在注册动画之前,加一个.stop(true)
- t t 直接展示当前动画最终效果,并停止
- f t 直接展示当前动画最终效果,并开始下一个动画