开始学习jQuery,先去官网下了个jQuery.它是个的JavaScript的类库.
在文件<head>中引用
例子:
<head>
<script src="jquery/jquery-2.1.0.js"></script>
</head>例子:
<head><script src="jquery/jquery-2.1.0.js"></script>//先引用
<script type="text/javascript">
//在写jQuery
//启动加载文档
$(document).ready(function(){
//当button控件点击时候就使p元素消失或显示之间切换
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>jQuery中可以使元素fadeIn()淡入fadeout()淡出fadetoggle()淡入淡出之间切换,fadeTo()变的透明
例子:
<head>
<script src="jquery/jquery-2.1.0.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.4);
$("#div2").fadeToggle();
});
});
</script>
</head>
<body>
<button>点击这里绿色变的半透明,红色变的可以淡入淡出</button>
<br>
<div id="div1" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:red;"></div>
</body>jQuery中可以使元素slideDown()向下滑动,slideUp()向上滑动,slidetoggle()可以向上和下切换
例子:
<head>
<script src="jquery/jquery-2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>这里会滑动(⊙o⊙)…</p>
</div>
<p class="flip">请点击这里</p>
</body>晚安
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
