jquery实例演练01

JQuery基础用法

JQuery 效果 - 隐藏和显示
JQuery.hide()=> 隐藏文本
JQuery.show()=> 显示文本
范例

<div>
  <h2>This is a heading</h2>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
  <button id="hide" type="button">隐藏</button>
  <button id="show" type="button">显示</button>
</div>

$(document).ready(function () {
  $("#hide").click(function () {
      $("p").hide();
  });
  $("#show").click(function () {
      $("p").show();
  });
});

如果带入callBack function会有什麽不同呢？

范例一

$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });
  });
});

JQuery效果 - 使三个方块淡入 + 淡出画面

$(selector).fadeIn(speed,callback) => 用於淡入已隐藏的元素
$(selector).fadeOut(speed,callback) => 用於淡入可见的元素
范例二

<button>点击这里，使三个矩形淡入+淡出</button>
 <br><br>
 <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
 <br>
 <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
 <br>
 <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
 
<script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("#div1").fadeIn(1000);
      $("#div2").fadeIn(2000);
      $("#div3").fadeIn(3000);
      $("#div1").fadeOut(1000);
      $("#div2").fadeOut(1000);
      $("#div3").fadeOut(1000);
    });
  });
</script>

按钮切换淡入淡出效果

这种方法类似於vue的v-if 效果
$(selector).fadeToggle(speed,callback) => 在 fadeIn() 与 fadeOut() 之间进行切换
范例三

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle(1000);
    $("#div2").fadeToggle(2000);
    $("#div3").fadeToggle(2000);
  });
});

点击方块达成不透明效果

$(selector).fadeTo(speed,opacity,callback) => 可设置不透明度给对象
范例四

$(document).ready(function(){
  $("div").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});

JQuery效果 - Menu滑动效果

$(selector).slideDown(speed,callback) => 向下滑动
范例五

    <div class="panel">
        <p>XXXXXXXXX</p>
    </div>
    <p class="flip">Click Me</p>
    
    $(document).ready(function(){
      $(".flip").click(function(){
        $(".panel").slideDown("slow");
  });
});

$(selector).slideDown(speed,callback) => 向上滑动
范例六

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});

$(selector).slideToggle(speed,callback) => 向上与向下切换
范例七

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});

JQuery 效果 - 动画

$(selector).animate({params},speed,callback)
范例八

<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div class="box"></div>

$(document).ready(function(){
  $(".box").click(function(){
    $(".box").animate({left:'250px'}, 'slow');
  });
});

animate()操控多属性

范例九

$(document).ready(function(){
  $(".box").click(function(){
    $(".box").animate({left:'250px'}, 'slow');
  });
});

animate()操控toggle

范例十

$(document).ready(function(){
  $("button").click(function(){
    $(".box").animate({
      height:'toggle',
    });
  });
});

JQuery 效果 - 文字变色
范例十一

<p id="p1">jQuery 有兴趣一起学Vue吗！</p>
<button>Click Me</button>

$(document).ready(function(){
  $("button").click(function(){
    $("#p1").css("color","red");
  });
});