您的位置：首页 > Web前端 > JQuery

jQuery学习笔记(1)

2014-03-23 22:25 363 查看

开始学习jQuery,先去官网下了个jQuery.它是个的JavaScript的类库.

在文件<head>中引用

例子:

<head>
<script src="jquery/jquery-2.1.0.js"></script>
</head>

jQuery中可以使hide()隐藏,show()显示,toggle()即可以隐藏又可以显示元素

例子:

<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>今天就到这里吧

晚安

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery html5 html

相关文章推荐

新的分享

章节导航