Jquery的基础学习-阿里云开发者社区

1.Jquery是Javascript的一个简单框架，它可以让我们写更少的代码，达到更高的效率，提供更完美的效果！

2.www.jquery.com(官网) → 下载(production版本即可。)

<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
//下面一行表示：当document这个文档全部
//显示完的时候去执行这个一个函数function()
$(document).ready(function(){
alert("Hello Jquery");
});
</script>

3.常用的jquery选择器有：id选择器，class选择器，标签选择器等。jquery真的非常的强大，方便，优越。这里只是简单的介绍几个常用的例子。有空了，大家一定要多看看API。

（1.）id选择器的使用：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//表示当“clickme”这个按钮被点击时，触发的事件
$("#but").click(function(){
//1.id选择器的用法。注意text()的用法
$("#mydiv").text("ok ,come on ,baby ...");
});
});
</script>
</head>
<body>
<div id="mydiv">
<span>hello1!</span><br />
<span>hello2!</span><br />
<span>hello3!</span>
</div>
<input type="button" value="clickme" id="but"/>
</body>
</html>

（2.）层级选择器的使用：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//表示当“clickme”这个按钮被点击时，触发的事件
$("#but").click(function(){
//1.层级选择器的用法。
$("div span:first").text("change the first span");
//1.层级选择器的用法。
$("div span:last").text("change the last span");
});
});
</script>
</head>
<body>
<div id="mydiv">
<span>hello1!</span><br />
<span>hello2!</span><br />
<span>hello3!</span>
</div>
<input type="button" value="clickme" id="but"/>
</body>
</html>

（3.）改变CSS的方法：（两种写法）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//表示当“clickme”这个按钮被点击时，触发的事件
$("#but").click(function(){
//1.层级选择器的用法。
$("div span:first").text("change the first span").
css("color","red").css("font-size","25px");
//1.层级选择器的用法。注意，多个css属性时应该用下面的写法。
$("div span:last").text("change the last span").
css({"color":"red","font-size":"24px","font-weight":"bold"});
});
});
</script>
</head>
<body>
<div id="mydiv">
<span>hello1!</span><br />
<span>hello2!</span><br />
<span>hello3!</span>
</div>
<input type="button" value="clickme" id="but"/>
</body>
</html>

（4.）addClass()的使用,给某个标签加个class属性

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//表示当“clickme”这个按钮被点击时，触发的事件
$("#but").click(function(){
//如给div加个class属性,成功后应该是：<div class="tt" id="mydiv">
$("#div").addClass("tt");
alert("ok");
});
});
</script>
</head>
<body>
<div id="mydiv">
<span>hello1!</span><br />
<span>hello2!</span><br />
<span>hello3!</span>
</div>
<input type="button" value="clickme" id="but"/>
</body>
</html>

（5.）表格中隔行换色：(:even匹配所有索引值为偶数的元素，从0开始计数)

$("tr:even").css("background","red");

（6.）动画效果，I like

<1>.show(),hide()方法

$(":button") → 匹配所有的按钮

:first → 匹配找到的第一个元素

eq(index) → 匹配一个给定的索引值的元素；

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1.显现,注意：$(":button:first")的用法
$(":button:first").click(function(){
$("#animat").show();
});
//2.隐藏,注意：$(":button:eq(1)")
$(":button:eq(1)").click(function(){
$("#animat").hide();
});
//3.转换，
var flag = true;
$(":button:eq(2)").click(function(){
if(flag) {
$("#animat").hide();
flag = false;
} else {
$("#animat").show();
flag = true;
}
});
});
</script>
</head>
<body>
<div id="animat" style="height:200px;width:200px;background:red"></div>
<input type="button" value="show" />
<input type="button" value="hidden" />
<input type="button" value="switch" />
</body>
</html>

<2>.toggle()方法 → 相当于“开关”的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1.显示/隐藏
$(":button:first").click(function(){
$("#animat").toggle("show");
});
//3.转换
$(":button:eq(2)").click(function(){
$("#animat").toggle();//表示快速消失或显示
//，如果你想控制显示或消失的时间的快慢,下面表示5秒钟消失或显示
// $("#animat").toggle(5000);
});
});
</script>
</head>
<body>
<div id="animat" style="height:200px;width:200px;background:red"></div>
<input type="button" value="show" />
<input type="button" value="hidden" />
<input type="button" value="switch" />
</body>
</html>

<3>.slideUp(),slideDown(),slideToggle();

上面三个方法中可以传的参数为：fast,slow,normal,毫秒数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1.向上滑动
$(":button:first").click(function(){
//$("#animat").slideUp();
//①如果我们想滑动的快点
// $("#animat").slideUp("fast");
//②如果我们想让其滑动慢点
//$("#animat").slideUp("slow");
//③如果我们想让其正常滑动
//$("#animat").slideUp("normal");
//如果我们想让其滑动需要6秒钟
$("#animat").slideUp(6000);
});
//2.向下滑动
$(":button:eq(1)").click(function(){
//$("#animat").slideDown();
//如果我们想让其滑下来需要6秒钟
$("#animat").slideDown(6000);
});
//3.转换
$(":button:eq(2)").click(function(){
$("#animat").slideToggle();
});
});
</script>
</head>
<body>
<div id="animat" style="height:200px;width:200px;background:red"></div>
<input type="button" value="hidden" />
<input type="button" value="show" />
<input type="button" value="switch" />
</body>
</html>

注意事项：上面的方法还可以有“回调函数”。

格式：slideUp(speed,[callback]);

eg.

$(":button:first").click(function(){

$("#animat").slideUp(3000,function(){

alert("ok,come baby");

});

<4>.fadeIn(),fadeOut(),fadeTo();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//1.显现,注意：$(":button:first")的用法
$(":button:first").click(function(){
//①淡入
//$("#animat").fadeIn();
//②6秒后淡入
$("#animat").fadeIn(6000);
});
//2.隐藏,注意：$(":button:eq(1)")
$(":button:eq(1)").click(function(){
//①淡出
//$("#animat").fadeOut();
//②6秒后淡出
$("#animat").fadeOut(6000);
});
//3.转换，
$(":button:eq(2)").click(function(){
$("#animat").fadeTo(3000,0.3);//0.3表示透明度为30%
});
});
</script>
</head>
<body>
<div id="animat" style="height:200px;width:200px;background:red"></div>
<input type="button" value="show" />
<input type="button" value="hidden" />
<input type="button" value="switch" />
</body>
</html>

注意事项：上面的函数依然可以有“回调函数”

eg.fadeTo(3000,0.3,[callback]);

（7.）appendTo(),insertBefore()，attr()方法

注意：appendTo() →插入到另一个层

insertBefore() → 插入到指定层的前面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":button").click(function(){
//$("<div>") → 表示创建一个层
//注意：attr()方法的使用
//appendTo()是把一个层添加到另一个层中
$("<div>").text("auto").attr("class","img").appendTo($("#ad"));
});
});
</script>
<style type="text/css">
#ad{
width:400px;
height:auto;
overflow:auto;
border:1px solid red;
padding:20px;
}
.img{
border:1px dashed #ccc;
padding:20px;
margin-top:20px;
}
</style>
</head>
<body>
<input type="button" value="add" />
<div id="ad">
<div class="img">images</div>
</div>
</body>
</html>

例子2：自动添加一个层

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var index = 0;
$(":button").click(function(){
//$("#ad>.img")表示#ad所有的儿子辈.img元素。
//$("#ad>.img").length表示对象中元素的个数。
if($("#ad>.img").length == 0) {
$("<div>").html("auto"+index).attr("class","img").appendTo($("#ad"));
} else {
$("<div>").text("text"+index).attr("class","img").insertBefore($("#ad>.img:first"));
}
index++;
});
});
</script>
<style type="text/css">
#ad{
width:400px;
height:auto;
overflow:auto;
border:1px solid red;
padding:20px;
}
.img{
border:1px dashed #ccc;
padding:20px;
margin-top:20px;
}
</style>
</head>
<body>
<input type="button" value="add" />
<div id="ad">
</div>
</body>
</html>

注意事项：

innerHTML html → 可以插入其他的div或html元素

innerTEXT text → 只能添加文本

(8.)表格的增加和删除→ appendTo(），live(），$(this)方法的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<style type="text/css">
table{
width:400px;
height:auto;
overflow:auto;
border-collapse:collapse;
text-align:center;
}
</style>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var index = 0;
$("#add").click(function(){
$("<tr><td>name"+index
+"</td><td>"+index
+"</td><td><input type='button' id='del' value='delete' /></td></tr>").
appendTo($("table"));
index++;
});
//删除表格
//live()方法：给所有当前以及将来会匹配的元素绑定一个事件处理函数。
//注意$(this)的使用
$("#del").live("click",function(){
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<input type="button" value="add-line" id="add"/>
<table border="1" cellspacing="0">
<tr>
<td>name</td>
<td>age</td>
<td>
<input type="button" value="del" id="del"/>
</td>
</tr>
</table>
</body>
</html>

(9.)表格的增加和删除→clone()方法的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<style type="text/css">
table{
width:400px;
height:auto;
overflow:auto;
border-collapse:collapse;
text-align:center;
}
</style>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("tr:first").clone().appendTo($("table"));
});
//删除表格
//live()方法：给所有当前以及将来会匹配的元素绑定一个事件处理函数。
//注意$(this)的使用
$("#del").live("click",function(){
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<input type="button" value="add-line" id="add"/>
<table border="1" cellspacing="0">
<tr>
<td>name</td>
<td>age</td>
<td>
<input type="button" value="del" id="del"/>
</td>
</tr>
</table>
</body>
</html>

(10.)$(this).attr("rel"); → 拿到某个属性的属性值：attr();

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<script type="text/javascript" src="jquery1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
if(confirm("您确定要删除吗？")) {
var id = $(this).attr("rel");
window.location.href = "del.jsp?id="+id;
}
});
});
</script>
</head>
<body>
<input type="button" value="add-line" id="add"/>
<table border="1" cellspacing="0">
<tr>
<td>name</td>
<td>age</td>
<td>
<input type="button" value="del" id="del"/>
</td>
</tr>
</table>
</body>
</html>

本文转自韩立伟 51CTO博客，原文链接：http://blog.51cto.com/hanchaohan/929972，如需转载请自行联系原作者