jQuery 效果 - 隐藏和显示
turanaishangn
# jQuery 效果 - 隐藏和显示
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();//隐藏 可以取以下值："slow"、"fast" 或毫秒。
});
$("#show").click(function(){
$("p").show();//显示 可以取以下值："slow"、"fast" 或毫秒。
});
$("#show").click(function(){
$("p").toggle();//切换hide和show方法 可以取以下值："slow"、"fast" 或毫秒。
});
});
</script>
# jQuery 效果 - 淡入淡出
<script>
$(document).ready(function(){
$("button").click(function(){
//淡入 可以取以下值："slow"、"fast" 或毫秒。
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
//淡出 可以取以下值："slow"、"fast" 或毫秒。
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
//切换fadeIn和fadeOut方法 可以取以下值："slow"、"fast" 或毫秒。
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
//取以下值："slow"、"fast" 或毫秒。
//淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
# jQuery 效果 - 滑动
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
//用于向下滑动元素。可以取以下值："slow"、"fast" 或毫秒。
$(".panel").slideDown("slow");
//用于向上滑动元素。可以取以下值："slow"、"fast" 或毫秒。
$("#panel").slideUp();
//在 slideDown() 与 slideUp() 方法之间进行切换。
//可以取以下值："slow"、"fast" 或毫秒。
$("#panel").slideToggle();
//停止滑动
$("#stop").click(function(){
$("#panel").stop();
});
});
});
</script>
# jQuery 效果 - 动画
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({//操作多个属性
left:'+=250px',//在值的前面加上 += 或 -=：使用相对值
opacity:'0.5',//透明度
width:'150px',//
height:'toggle'//属性的动画值设置为 "show"、"hide" 或 "toggle"：
},3000,function(){/*动画效果完成后执行函数*/});//取以下值："slow"、"fast" 或毫秒。
});
//队列功能
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
$("div").stop();//按钮会停止当前活动的动画，但允许已排队的动画向前执行。
$("div").stop(true);//按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。
$("div").stop(true,true);//会立即完成当前活动的动画，然后停下来。
});
</script>
# jQuery 效果 - Callback
<body>
<button>点我</button>
<p>啦啦啦啦德玛西亚</p>
</body>
<script>
$("button").click(function(){
$("p").toggle(1000,function(){
alert("buttom事件完成");
});
})
</script>
# jQuery 效果 - Chainiing
<body>
<button>点我</button>
<p>啦啦啦啦德玛西亚</p>
</body>
<script>
$("button").click(function(){
$("p").css("color","red").slideUp(2000).slideDown(2000);
})
</script>
# jQuery HTML - 获取于与设置
<body>
<button id="btn1">显示所选元素文本内容</button>
<button id="btn2">显示所选元素全部内容（包括HTML标记）</button>
<button id="btn3">显示input框中的内容</button>
<button id="btn4">显示属性的值</button>
<p id="p1">啦啦啦啦<b>德玛西亚</b></p>
<input id="input1" type="text" value="">
<a href="https://www.baidu.com" style="display: inline-block;">baidu</a>
</body>
<script>
$(Document).ready(function() {
$("#btn1").click(function(){
$("#input1").val($("#p1").text())
alert("Test:"+$("#p1").text())
});
$("#btn2").click(function(){
alert("Test:"+$("#p1").html())
});
$("#btn3").click(function(){
alert("Test:"+$("#input1").val())
});
$("#btn4").click(function(){
alert("Test:"+$("a").attr("style")+$("a").attr("href"))
})
})
</script>
# jQuery HTML - 添加
<body>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<button id="btn4">btn4</button>
<ol>
<li>11111111111</li>
<li>22222222222</li>
<li>3333333333</li>
<li>4444444444</li>
<li>5555555555555</li>
</ol>
<p>6666666666666666666</p>
<p>7777777777777777777</p>
</body>
<script>
$(Document).ready(function() {
$("#btn1").click(function(){
$("p").append(" 结尾.")
})
$("#btn2").click(function(){
$("ol").append("<li>结尾</li>")
})
$("#btn3").click(function(){
$("p").prepend("开头.")
})
$("#btn4").click(function(){
$("ol").prepend("<li>开头</li>")
})
})
</script>
jQuery after() 方法在被选元素之后插入内容。 jQuery before() 方法在被选元素之前插入内容。
$("img").after("Some text after");
$("img").before("Some text before");