Jquery基础2

课程目的

  • 熟练使用jquery特效方法
  • 熟练使用jquery操作DOM

课程内容

Jquery特效方法

1. 隐藏展示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

本质上是修改dom.style.display属性

//展示p1
$("#btn1").on('click', function(e){
    $(".p1").show();
});
//隐藏p1
$("#btn2").on('click', function(){
    $(".p1").hide();
});
//隐藏p1,持续时间1s,之后再执行回调
$("#btn3").on('click', function(){
    $(".p1").hide(1000, function(){
        $(".p2").hide(2000, function(){
            $(".p3").hide(3000);
        });
    });
});
$("#btn4").on('click', function(){
    $(".p1").show(1000, function(){
        $(".p2").show(2000, function(){
            $(".p3").show(3000);
        });
    });
});
//状态切换
$("#btn5").on('click', function(){
    $(".p1").toggle();
});
2. 淡入淡出
$(selector).fadeIn(speed,callback);  //淡入
$(selector).fadeOut(speed,callback);  //淡出
$(selector).fadeToggle(speed,callback); //淡入淡出切换
$(selector).fadeTo(speed,opacity,callback);  //渐变到透明度


var $div1 = $(".div1");
$("#btn6").on('click', function(e){
    $div1.fadeIn();
});
$("#btn7").on('click', function(e){
    $div1.fadeIn(4000, function(){
        alert('over');
    });
});
$("#btn8").on('click', function(){
    $div1.fadeOut();
});
$("#btn9").on('click', function(){
    $div1.fadeToggle();
});
$("#btn10").on('click', function(){
    $div1.fadeTo('slow', 0.5);
});

3.滑入滑出

$(selector).slideDown(speed,callback);  //滑入
$(selector).slideUp(speed,callback);  //滑出
$(selector).slideToggle(speed,callback); //切换

var $div2 = $(".div2");
$("#btn11").on('click', function(e){
    $div2.slideUp();
});
$("#btn12").on('click', function(e){
    $div2.slideDown();
});
$("#btn13").on('click', function(){
    $div2.slideToggle(10000);
});

4.动画

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);
  • 必需的 params 参数定义形成动画的 CSS 属性。
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是动画完成后所执行的函数名称。

var $div3 = $(".div3");
$("#btn14").on('click', function(e){
    $div3.animate({width: '200px'});
});
$("#btn15").on('click', function(){
    $div3.animate({
        width:'80px',
        height: '80px',
        left: '0px',
        top: '0px'
    }, 500);
});
$("#btn16").on('click', function(){
    $div3.animate({
        width:'150px',
        height: '150px',
        left: '100px',
        top: '100px'
    }, 500);
});
$("#btn17").on('click', function(){
    $div3.animate({width:'150',height:'150px'})
         .animate({left:'200px'})
         .animate({top:'200px'});

    $div3.animate({left:'0px'});
    $div3.animate({top:'0px'});
    $div3.animate({width:'80px',height:'80px'});
});

Jquery Dom操作

获取与设置值

三个简单实用的用于 DOM 操作的 jQuery 方法:

  • text() 设置或返回所选元素的文本内容
  • html() 设置或返回所选元素的内容(包括 HTML 标记)
  • val() 设置或返回表单字段的值
  • attr() 设置或返回元素的属性

获取

<p id="test">这是段落中的<b>粗体</b>文本。</p>
<input id="test-input" type="text" placeholder="测试表单val">
<a id="test-a" href="http://www.jirengu.com">这是链接</a>
<img id="test-img" data-src="real.png" src="blank.png">
<script>
    console.log( $('#test').html() );  // 这是段落中的<b>粗体</b>文本。
    console.log( $('#test').text() );  // 这是段落中的粗体文本
    console.log( $('#test-input').val() );
    console.log( $('#test-a').attr('href') );
    console.log( $('#test-img').attr('data-src') );
</script>

设置

    $('#test').html('<span>hello</span>');  
    $('#test').text('<span>hello2</span>');
    $('#test-input').val('小明');
    $('#test-a').attr('href','http://www.baidu.com');
    $('#test-img').attr('src',  $('#test-img').attr('data-src'));