jquery学习基础
这篇博客将会给大家带来jquery中的一些基础操作。
使用click绑定事件
使用click为div绑定点击事件
<div>
testclick
</div>
$(function($) {
$("div").click(
function() {
alert("hello world");
}
);
});
点击增加样式
点击div时候，改变其字体颜色和背景色
<div>
click to change the backgroundcolor
</div>
$(function($) {
$("div").click(
function(){
$(this).css({ color: "#ff0011", background: "blue" });
}
);
});
隐藏和显示
使用show()和hide()
先看下效果：
代码如下：
body{
margin:0 auto;
width:500px;
height:100%;
}
a{
text-decoration:none;
hover:#ff0000;
}
a:hover{
color:#ff0000;
}
div{
height:200px;
width:200px;
background:rgb(200,100,150);
display:none;
}
<a href="#" id="show">显示</a>
<a href="#" id="hidden">隐藏</a>
<div>
</div>可以看到首先将div隐藏了。
jquery代码如下：
$(function($) {
$("#show").click(
function() {
$("div").show("slow");
}
);
$("#hidden").click(
function() {
$("div").hide("fast",
function() {
alert("隐藏完成");
}
);
}
);
});这里当点击隐藏的时候，在隐藏完成的时候会触发一个匿名函数，会弹出一个alert。
使用toggle()
效果：
代码和上面是一样的，看下js代码：
$(function($) {
$("#toggle").click(
function() {
$("div").toggle("slow");
}
);
});这里为id=”toggle”的元素绑定了一个click方法，使用了jquery提供的toggle方法，隐藏和显示div元素。
滑动显示隐藏
先看效果：
jquery代码如下：
$(function($) {
$(".down").click(
function() {
$("div").slideDown("slow","linear",function(){
alert("slide down ok");
});
}
);
$(".up").click(
function() {
$("div").slideUp();
}
);
});这里，slideDown和slideUp可以接受 三个参数：
1.speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
2.easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
3.fn在动画完成时执行的函数，每个元素执行一次。
fadeIn和fadeOut淡入淡出
先看效果：
jquery代码如下：
$(function($) {
$(".in").click(
function() {
$("div").fadeIn(3000,"linear",function(){
alert("slide down ok");
});
}
);
$(".out").click(
function() {
$("div").fadeOut();
}
);
});这里，在淡入的时候我指定了需要三秒时间，淡入完成以后触发匿名函数。
使用delay()延迟执行
可以使用delay函数，延迟执行动画，先看效果：
$(".delay").click(
function() {
$("div").fadeIn(4000).delay(800).slideUp("slow");
}
);这里我首使用4秒时间，将div淡入，然后在800毫秒以后又将该div隐藏。
hover的用法
hover表示当鼠标移动到元素上的情况。先看效果：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>jquery lazyLoad</title>
<script type="text/javascript" src="../jquery/jquery-2.1.4.js"></script>
<script type="text/javascript"> $(function($) { $("ul li").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } ); }); </script>
<style type="text/css"> body{ margin:0 auto; width:500px; height:100%; } ul{ list-style-type:none; } li{ float:left; width:60px; background:#fff000; text-align:center; margin:3px; } .hover{ border:2px solid blue; } </style>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</body>
</html>
可以看到当鼠标滑过的时候，为当前的li元素添加了一个class。这里就是为其添加了一个样式。
toggleClass学习
toggleClass:如果存在（不存在）就删除（添加）一个类。 看效果：
table{ border:none; width:70%; border-collapse:collapse; }
td{ border: solid #000 1px; }
.clicked{ background:#58a936; }这里我提前定义好了一个class=”clicked”的样式。
$(function($) {
$("table tr").click(
function() {
$(this).toggleClass("clicked");
}
);
});为table下的所有tr元素绑定click事件，并且在该事件中添加或删除该元素的class。
mouseover和mouseout
mouseover和mouseout分别定义鼠标移动到元素上和鼠标移出时的事件。看效果：
关键代码：
$(function($) {
$("table tr").mouseover(
function(){
$(this).css({background:"#ff0892"});
}
);
$("table tr").mouseout(
function(){
$(this).css({background:"#ffffff"});
}
);
});这里我动态的为选中的元素设置背景色，也可以提前定义好一个样式然后通过addClass和removeClass来实现。
each和find的用法
each：以每一个匹配的元素作为上下文来执行一个函数
find：搜索所有与指定表达式匹配的元素
$(function($) {
$("ul").find("li").each(function(i){
$(this).html($(this).html()+"---"+i);
});
});
<ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> </ul>效果如下：
源码下载
css上下左右垂直居中
最后给大家带来一个上下左右垂直居中的demo：
效果如下：
css代码如下：
body{ margin:0px; padding:0px; width:100%; height:100%; }
div{ position:absolute; top:50%; left:50%; width:600px; height:150px; margin-top:-75px;/*注意这里必须是DIV高度的一半*/ margin-left:-300px;/*这里是DIV宽度的一半*/ background:#f78644; border:2px solid rgb(123,200,89); }这样的居中方式，非常适合做登陆界面。大家需要的可以收藏了哈。
ok，今天关于jquery的学习就到这里了。该休息了。