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");  });});