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,如需转载请自行联系原作者