Jquery的基础学习

简介:

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

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


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

 

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

(1.)id选择器的使用:


 
 
  1. <html xmlns="http://www.w3.org/1999/xhtml"
  2. <head> 
  3.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  4.     <title></title> 
  5.     <script type="text/javascript" src="jquery1.5.js"></script> 
  6.     <script type="text/javascript"
  7.         $(document).ready(function(){ 
  8.             //表示当“clickme”这个按钮被点击时,触发的事件 
  9.             $("#but").click(function(){ 
  10.                  
  11.                 //1.id选择器的用法。注意text()的用法 
  12.                 $("#mydiv").text("ok ,come on ,baby ..."); 
  13.  
  14.             }); 
  15.         }); 
  16.     </script> 
  17. </head> 
  18. <body> 
  19.     <div id="mydiv"
  20.         <span>hello1!</span><br /> 
  21.         <span>hello2!</span><br /> 
  22.         <span>hello3!</span> 
  23.     </div> 
  24.     <input type="button" value="clickme" id="but"/> 
  25. </body> 
  26. </html> 

(2.)层级选择器的使用:


 
 
  1. <html xmlns="http://www.w3.org/1999/xhtml"
  2. <head> 
  3.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  4.     <title></title> 
  5.     <script type="text/javascript" src="jquery1.5.js"></script> 
  6.     <script type="text/javascript"
  7.         $(document).ready(function(){ 
  8.             //表示当“clickme”这个按钮被点击时,触发的事件 
  9.             $("#but").click(function(){ 
  10.                  
  11.                 //1.层级选择器的用法。 
  12.                 $("div span:first").text("change the first span"); 
  13.                  
  14.                 //1.层级选择器的用法。 
  15.                 $("div span:last").text("change the last span");                 
  16.  
  17.             }); 
  18.         }); 
  19.     </script> 
  20. </head> 
  21. <body> 
  22.     <div id="mydiv"
  23.         <span>hello1!</span><br /> 
  24.         <span>hello2!</span><br /> 
  25.         <span>hello3!</span> 
  26.     </div> 
  27.     <input type="button" value="clickme" id="but"/> 
  28. </body> 
  29. </html> 

(3.)改变CSS的方法:(两种写法)


 
 
  1. <html xmlns="http://www.w3.org/1999/xhtml"
  2. <head> 
  3.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  4.     <title></title> 
  5.     <script type="text/javascript" src="jquery1.5.js"></script> 
  6.     <script type="text/javascript"
  7.         $(document).ready(function(){ 
  8.             //表示当“clickme”这个按钮被点击时,触发的事件 
  9.             $("#but").click(function(){ 
  10.                  
  11.                 //1.层级选择器的用法。 
  12.                 $("div span:first").text("change the first span"). 
  13.                 css("color","red").css("font-size","25px"); 
  14.                  
  15.                  
  16.                 //1.层级选择器的用法。注意,多个css属性时应该用下面的写法。 
  17.                 $("div span:last").text("change the last span"). 
  18.                 css({"color":"red","font-size":"24px","font-weight":"bold"});            
  19.  
  20.             }); 
  21.         }); 
  22.     </script> 
  23. </head> 
  24. <body> 
  25.     <div id="mydiv"
  26.         <span>hello1!</span><br /> 
  27.         <span>hello2!</span><br /> 
  28.         <span>hello3!</span> 
  29.     </div> 
  30.     <input type="button" value="clickme" id="but"/> 
  31. </body> 
  32. </html> 

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


 
 
  1. <html xmlns="http://www.w3.org/1999/xhtml"
  2. <head> 
  3.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  4.     <title></title> 
  5.     <script type="text/javascript" src="jquery1.5.js"></script> 
  6.     <script type="text/javascript"
  7.         $(document).ready(function(){ 
  8.             //表示当“clickme”这个按钮被点击时,触发的事件 
  9.             $("#but").click(function(){ 
  10.                      
  11.                 //如给div加个class属性,成功后应该是:<div class="tt" id="mydiv"> 
  12.                 $("#div").addClass("tt"); 
  13.                 alert("ok"); 
  14.             }); 
  15.         }); 
  16.     </script> 
  17. </head> 
  18. <body> 
  19.     <div id="mydiv"
  20.         <span>hello1!</span><br /> 
  21.         <span>hello2!</span><br /> 
  22.         <span>hello3!</span> 
  23.     </div> 
  24.     <input type="button" value="clickme" id="but"/> 
  25. </body> 
  26. </html> 

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

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

 

(6.)动画效果,I like

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

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

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

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

源码:


 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  5.     <title></title> 
  6.     <script type="text/javascript" src="jquery1.5.js"></script> 
  7.     <script type="text/javascript"
  8.         $(document).ready(function(){ 
  9.             //1.显现,注意:$(":button:first")的用法 
  10.             $(":button:first").click(function(){ 
  11.                 $("#animat").show(); 
  12.             }); 
  13.              
  14.              
  15.             //2.隐藏,注意:$(":button:eq(1)") 
  16.             $(":button:eq(1)").click(function(){ 
  17.                 $("#animat").hide(); 
  18.             }); 
  19.              
  20.             //3.转换, 
  21.             var flag = true
  22.             $(":button:eq(2)").click(function(){ 
  23.                 if(flag) { 
  24.                     $("#animat").hide(); 
  25.                     flag = false
  26.                 } else { 
  27.                     $("#animat").show(); 
  28.                     flag = true
  29.                 } 
  30.             }); 
  31.         }); 
  32.     </script> 
  33. </head> 
  34. <body> 
  35.  
  36.     <div id="animat" style="height:200px;width:200px;background:red"></div> 
  37.  
  38.     <input type="button" value="show" /> 
  39.     <input type="button" value="hidden" /> 
  40.     <input type="button" value="switch" /> 
  41.      
  42. </body> 
  43. </html> 

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


 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  5.     <title></title> 
  6.     <script type="text/javascript" src="jquery1.5.js"></script> 
  7.     <script type="text/javascript"
  8.         $(document).ready(function(){ 
  9.             //1.显示/隐藏 
  10.             $(":button:first").click(function(){ 
  11.                 $("#animat").toggle("show"); 
  12.             }); 
  13.              
  14.             //3.转换 
  15.             $(":button:eq(2)").click(function(){ 
  16.                 $("#animat").toggle();//表示快速消失或显示 
  17.              
  18.                 //,如果你想控制显示或消失的时间的快慢,下面表示5秒钟消失或显示 
  19.             //  $("#animat").toggle(5000); 
  20.             }); 
  21.              
  22.              
  23.         }); 
  24.     </script> 
  25. </head> 
  26. <body> 
  27.  
  28.     <div id="animat" style="height:200px;width:200px;background:red"></div> 
  29.  
  30.     <input type="button" value="show" /> 
  31.     <input type="button" value="hidden" /> 
  32.     <input type="button" value="switch" /> 
  33.      
  34. </body> 
  35. </html> 

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

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


 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  5.     <title></title> 
  6.     <script type="text/javascript" src="jquery1.5.js"></script> 
  7.     <script type="text/javascript"
  8.         $(document).ready(function(){ 
  9.             //1.向上滑动 
  10.             $(":button:first").click(function(){ 
  11.                 //$("#animat").slideUp(); 
  12.                  
  13.                 //①如果我们想滑动的快点 
  14. //              $("#animat").slideUp("fast"); 
  15.                  
  16.                 //②如果我们想让其滑动慢点 
  17.                 //$("#animat").slideUp("slow"); 
  18.                  
  19.                 //③如果我们想让其正常滑动 
  20.                 //$("#animat").slideUp("normal"); 
  21.                  
  22.                 //如果我们想让其滑动需要6秒钟 
  23.                 $("#animat").slideUp(6000); 
  24.             }); 
  25.              
  26.             //2.向下滑动 
  27.             $(":button:eq(1)").click(function(){ 
  28.                 //$("#animat").slideDown(); 
  29.                  
  30.                 //如果我们想让其滑下来需要6秒钟 
  31.                 $("#animat").slideDown(6000); 
  32.             }); 
  33.              
  34.             //3.转换 
  35.             $(":button:eq(2)").click(function(){ 
  36.                 $("#animat").slideToggle(); 
  37.          
  38.             }); 
  39.              
  40.              
  41.         }); 
  42.     </script> 
  43. </head> 
  44. <body> 
  45.  
  46.     <div id="animat" style="height:200px;width:200px;background:red"></div> 
  47.  
  48.     <input type="button" value="hidden" /> 
  49.     <input type="button" value="show" /> 
  50.     <input type="button" value="switch" /> 
  51.      
  52. </body> 
  53. </html> 

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

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

eg.

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

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

               alert("ok,come baby");

    });

});

 

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


 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  5.     <title></title> 
  6.     <script type="text/javascript" src="jquery1.5.js"></script> 
  7.     <script type="text/javascript"
  8.         $(document).ready(function(){ 
  9.             //1.显现,注意:$(":button:first")的用法 
  10.             $(":button:first").click(function(){ 
  11.                 //①淡入 
  12.                 //$("#animat").fadeIn(); 
  13.                  
  14.                 //②6秒后淡入 
  15.                 $("#animat").fadeIn(6000); 
  16.             }); 
  17.              
  18.              
  19.             //2.隐藏,注意:$(":button:eq(1)") 
  20.             $(":button:eq(1)").click(function(){ 
  21.                 //①淡出 
  22.                 //$("#animat").fadeOut(); 
  23.                  
  24.                 //②6秒后淡出 
  25.                 $("#animat").fadeOut(6000); 
  26.             }); 
  27.              
  28.             //3.转换, 
  29.             $(":button:eq(2)").click(function(){ 
  30.                 $("#animat").fadeTo(3000,0.3);//0.3表示透明度为30% 
  31.             }); 
  32.         }); 
  33.     </script> 
  34. </head> 
  35. <body> 
  36.  
  37.     <div id="animat" style="height:200px;width:200px;background:red"></div> 
  38.  
  39.     <input type="button" value="show" /> 
  40.     <input type="button" value="hidden" /> 
  41.     <input type="button" value="switch" /> 
  42.      
  43. </body> 
  44. </html> 

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

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

 

(7.)appendTo(),insertBefore(),attr()方法

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

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


 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
  5.     <title></title> 
  6.     <script type="text/javascript" src="jquery1.5.js"></script> 
  7.     <script type="text/javascript"
  8.         $(document).ready(function(){ 
  9.             $(":button").click(function(){ 
  10.                  
  11.                 //$("<div>") → 表示创建一个层  
  12.                 //注意:attr()方法的使用 
  13.                 //appendTo()是把一个层添加到另一个层中 
  14.                 $("<div>").text("auto").attr("class","img").appendTo($("#ad")); 
  15.                  
  16.             }); 
  17.         }); 
  18.     </script> 
  19.     <style type="text/css"
  20.         #ad{ 
  21.             width:400px; 
  22.             height:auto; 
  23.             overflow:auto; 
  24.             border:1px solid red; 
  25.             padding:20px; 
  26.         } 
  27.         .img{ 
  28.             border:1px dashed #ccc; 
  29.             padding:20px; 
  30.             margin-top:20px; 
  31.         } 
  32.     </style> 
  33. </head> 
  34. <body> 
  35.     <input type="button" value="add" /> 
  36.     <div id="ad"
  37.         <div class="img">images</div> 
  38.     </div> 
  39. </body> 
  40. </html>  

例子2:自动添加一个层

 源码:


 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
  5.     <title></title> 
  6.     <script type="text/javascript" src="jquery1.5.js"></script> 
  7.     <script type="text/javascript"
  8.         $(document).ready(function(){ 
  9.             var index = 0; 
  10.             $(":button").click(function(){ 
  11.                 //$("#ad>.img")表示#ad所有的儿子辈.img元素。 
  12.                 //$("#ad>.img").length表示对象中元素的个数。 
  13.                 if($("#ad>.img").length == 0) { 
  14.                     $("<div>").html("auto"+index).attr("class","img").appendTo($("#ad")); 
  15.                 } else { 
  16.                     $("<div>").text("text"+index).attr("class","img").insertBefore($("#ad>.img:first")); 
  17.                 } 
  18.                 index++; 
  19.             });  
  20.         }); 
  21.     </script> 
  22.     <style type="text/css"
  23.         #ad{ 
  24.             width:400px; 
  25.             height:auto; 
  26.             overflow:auto; 
  27.             border:1px solid red; 
  28.             padding:20px; 
  29.         } 
  30.         .img{ 
  31.             border:1px dashed #ccc; 
  32.             padding:20px; 
  33.             margin-top:20px; 
  34.         } 
  35.     </style> 
  36. </head> 
  37. <body> 
  38.     <input type="button" value="add" /> 
  39.     <div id="ad"
  40.     </div> 
  41. </body> 
  42. </html>  

 注意事项:

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

innerTEXT   text  → 只能添加文本

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

 


 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  5.     <title></title> 
  6.     <style type="text/css"
  7.         table{ 
  8.             width:400px; 
  9.             height:auto; 
  10.             overflow:auto; 
  11.             border-collapse:collapse; 
  12.             text-align:center; 
  13.         } 
  14.     </style> 
  15.     <script type="text/javascript" src="jquery1.5.js"></script> 
  16.     <script type="text/javascript"
  17.         $(document).ready(function(){ 
  18.             var index = 0; 
  19.             $("#add").click(function(){ 
  20.                 $("<tr><td>name"+index 
  21.                 +"</td><td>"+index 
  22.                 +"</td><td><input type='button' id='del' value='delete' /></td></tr>"). 
  23.                 appendTo($("table")); 
  24.                  
  25.                 index++; 
  26.             }); 
  27.              
  28.             //删除表格 
  29.             //live()方法:给所有当前以及将来会匹配的元素绑定一个事件处理函数。 
  30.             //注意$(this)的使用 
  31.             $("#del").live("click",function(){ 
  32.                 $(this).parent().parent().remove(); 
  33.             }); 
  34.         }); 
  35.     </script> 
  36. </head> 
  37. <body> 
  38.     <input type="button" value="add-line" id="add"/> 
  39.     <table border="1" cellspacing="0"
  40.         <tr> 
  41.             <td>name</td> 
  42.             <td>age</td> 
  43.             <td> 
  44.                 <input type="button" value="del" id="del"/> 
  45.             </td> 
  46.         </tr> 
  47.     </table> 
  48. </body> 
  49. </html> 

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


 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  5.     <title></title> 
  6.     <style type="text/css"
  7.         table{ 
  8.             width:400px; 
  9.             height:auto; 
  10.             overflow:auto; 
  11.             border-collapse:collapse; 
  12.             text-align:center; 
  13.         } 
  14.     </style> 
  15.     <script type="text/javascript" src="jquery1.5.js"></script> 
  16.     <script type="text/javascript"
  17.         $(document).ready(function(){ 
  18.             $("#add").click(function(){ 
  19.  
  20.                 $("tr:first").clone().appendTo($("table")); 
  21.  
  22.             }); 
  23.              
  24.             //删除表格 
  25.             //live()方法:给所有当前以及将来会匹配的元素绑定一个事件处理函数。 
  26.             //注意$(this)的使用 
  27.             $("#del").live("click",function(){ 
  28.                 $(this).parent().parent().remove(); 
  29.             }); 
  30.         }); 
  31.     </script> 
  32. </head> 
  33. <body> 
  34.     <input type="button" value="add-line" id="add"/> 
  35.     <table border="1" cellspacing="0"
  36.         <tr> 
  37.             <td>name</td> 
  38.             <td>age</td> 
  39.             <td> 
  40.                 <input type="button" value="del" id="del"/> 
  41.             </td> 
  42.         </tr> 
  43.     </table> 
  44. </body> 
  45. </html> 

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

 


 
 
  1. <html xmlns="http://www.w3.org/1999/xhtml"
  2. <head> 
  3.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  4.     <title></title> 
  5.     <script type="text/javascript" src="jquery1.5.js"></script> 
  6.     <script type="text/javascript"
  7.         $(document).ready(function(){ 
  8.             $("#add").click(function(){ 
  9.              
  10.                 if(confirm("您确定要删除吗?")) { 
  11.                     var id = $(this).attr("rel"); 
  12.                     window.location.href = "del.jsp?id="+id; 
  13.                 } 
  14.              
  15.             }); 
  16.         }); 
  17.     </script> 
  18. </head> 
  19. <body> 
  20.     <input type="button" value="add-line" id="add"/> 
  21.     <table border="1" cellspacing="0"
  22.         <tr> 
  23.             <td>name</td> 
  24.             <td>age</td> 
  25.             <td> 
  26.                 <input type="button" value="del" id="del"/> 
  27.             </td> 
  28.         </tr> 
  29.     </table> 
  30. </body> 
  31. </html> 

 




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





相关文章
|
JavaScript 前端开发
jQuery学习(十二)—jQuery中对象的查找方法总结
jQuery学习(十二)—jQuery中对象的查找方法总结
|
JavaScript
jQuery学习(九)—常用的包裹方法
jQuery学习(九)—常用的包裹方法
|
JavaScript
jQuery学习(七)— append方法与appendTo方法
jQuery学习(七)— append方法与appendTo方法
|
JavaScript
jQuery学习(六)—jQuery对象的创建
jQuery学习(六)—jQuery对象的创建
|
JavaScript
jQuery学习(五)—课堂实训题专栏
jQuery学习(五)—课堂实训题专栏
|
JavaScript
jQuery学习(八)—before方法、after方法、insertBefore方法、insertAfter方法
jQuery学习(八)—before方法、after方法、insertBefore方法、insertAfter方法
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
6月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
46 0
|
7月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
7月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
78 0