常用的JQuery函数及功能小结(2)

$('#some-id').show('slow'); //指定显示速度,在指定时间内元素的高、宽、不透明度逐渐增加到属性值,有:slow是0.6秒,normal是0.4秒,fast是0.2秒,或者直接填入毫秒数
$('#some-id').hide(800); //与.show()指定速度显示一样,指定时间内高、宽、不透明度逐渐减小到0

淡入淡出

$('some-id').fadeIn('slow'); //指定时间内不透明度属性值由0增加到1
$('some-id').fadeOut('slow'); //指定时间内不透明度值由1减小到0

5.4构建具有动画效果的show

主要调用.animate()方法,其有4个参数:包含样式属性及值的映射;可选的速度参数;可选的缓动类型;可选的回调函数;

1.并发显示多个效果

$('#some-id').animate({height: 'show', width: 'show', opacity: 'show'}, 'slow', function(){ alert('动画显示元素');});
$('div .button').animate({left:600, height:44}, 'slow'); //水平位置从0移动到600,高度由0增加到44

2.排队显示多个效果,级联多个.animate(),一个效果显示完了再显示下一个效果

$('#some-id').animate({left:600}, 'slow').animate({height: 44}, 'slow');
6DOM操作

6.1属性操作

$('#some-id').attr('property'); //获取属性 $('#some-id').attr('property','value'); //设置属性 $('#some-id').attr({'property1': 'value1', 'property2': 'value2'}); //设置多个属性 修改一个段落中所有链接,并给每个链接附上新的id号 $('div p .content a').each(function(index){ $(this).attr({ 'rel': 'external', 'id': 'link_' + index }); }); // ********* JQuery的.each()类似一个迭代器,给其传递的参数index类似一个计数器 *********

6.2插入新元素

1.将元素插入到其他元素前面:.insertBefore()和.before()

2.将元素插入到其他元素后面:.insertAfter()和after()

3.将元素插入到其他元素内部或后面(相当于追加一个元素):appendTo()和append()

4.将元素插入到其他元素内部或前面(相当于追加一个元素):prependTo()和prepend()

6.3包装元素,将元素包装到其他元素中 .wrap();

$('#some-id').wrap('<li></li>'); // 将某一特定元素包装到li中,即在特定元素外围添加一个包围元素

6.4复制元素 .clone()

1.$('#some-id').clone().appendTo($('body'));

2.复制深度,当传入false参数时,只复制匹配上的元素,其内部的其他元素不复制

$('#some-id').clone(false)

注意:.clone()方法不会复制元素中的事件

6.5移除匹配元素中的元素,类似清空元素

$('#some-id').empty();

6.6从DOM中移除匹配的元素及其后代元素

$('#some-id').remove();

有关常用的JQuery函数及功能小结 小编就给大家介绍到这里,希望对大家有所帮助!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgydfd.html