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

Jquery的基础学习

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件