摘要:JQuery的常用方法及使用教程JQuery的常用方法及使用教程

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

JQuery的常用方法及使用教程

 <!DOCTYPE html>   <html>   <head>       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />       <title></title>       <meta charset="utf-8" />       <style>           .canvas {               background-color: red;               border: solid 1px green;               width: 100px;               height: 50px;               cursor: pointer;           }              .colorRed {               background-color: red;           }              .colorBlue {               background-color: blue;           }              #p_bgcolor {               width: 500px;               height: 500px;           }       </style>       <script src="Scripts/jquery-2.0.0.min.js"></script>       <script type="text/javascript">              $(function () {               $("#btnClone").click(function () {                   $("body").append($("#p_template").clone().removeAttr("id"));                   $("#p_button").append($("#btnTemplate").clone(true));//true带事件,但是属性onclick里面的方法依然有效                  });               $("#btnTemplate").click(function () {                   //alert("ab");//属性上的onclick依然有效                     });               $("#btnHasClass").click(function () {                   alert($("#p_template").hasClass("canvas"));               });                  $("#btnToggle").click(function () {                   $("#p_template").toggle(3000);               });                  $("#btnToggleClass").click(function () {                   $("#p_bgcolor").toggleClass("colorRed");               });                  $("#btnFind").click(function () {                   alert($("body").find(".canvas").attr("id"));                  });                  $("#btnEach").click(function () {                   var obj = new Object();                   obj["name"] = "hhw";                   obj["age"] = 23;                   obj["sex"] = "female";                   $.each(obj, function (key, val) {                       alert(key + "&" + val);                   });               });               $("#btnEach2").click(function () {                   var arr = new Array();                   arr[0] = "jack";                   arr[1] = "abc";                   arr[2] = "hhw";                   $.each(arr, function (i, val) {                       alert(i + "&" + val);                   });               });                 });       </script>   </head>   <body>       <ul>           <li><button type="button" id="btnClone">克隆</button></li>           <li><button type="button" id="btnHasClass">HasClass</button></li>           <li><button type="button" id="btnToggle">开关</button></li>           <li><button type="button" id="btnToggleClass">ToggleClass</button></li>           <li><button type="button" id="btnFind">Find</button></li>           <li><button type="button" id="btnEach">Each</button></li>           <li><button type="button" id="btnEach2">Each2</button></li>       </ul>       <p id="p_button">           <button onclick="alert('a')" id="btnTemplate">按钮</button>       </p>       <p class="canvas" id="p_template">          </p>       <p id="p_bgcolor">          </p>   </body>   </html> 

JQuery的常用方法及使用教程

 <!DOCTYPE html>   <html>   <head>       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />       <title></title>       <meta charset="utf-8" />       <style>           .canvas {               background-color: red;               border: solid 1px green;               width: 100px;               height: 50px;               cursor: pointer;           }              .colorRed {               background-color: red;           }              .colorBlue {               background-color: blue;           }              #p_bgcolor {               width: 500px;               height: 500px;           }       </style>       <script src="Scripts/jquery-2.0.0.min.js"></script>       <script type="text/javascript">              $(function () {               $("#btnClone").click(function () {                   $("body").append($("#p_template").clone().removeAttr("id"));                   $("#p_button").append($("#btnTemplate").clone(true));//true带事件,但是属性onclick里面的方法依然有效                  });               $("#btnTemplate").click(function () {                   //alert("ab");//属性上的onclick依然有效                     });               $("#btnHasClass").click(function () {                   alert($("#p_template").hasClass("canvas"));               });                  $("#btnToggle").click(function () {                   $("#p_template").toggle(3000);               });                  $("#btnToggleClass").click(function () {                   $("#p_bgcolor").toggleClass("colorRed");               });                  $("#btnFind").click(function () {                   alert($("body").find(".canvas").attr("id"));                  });                  $("#btnEach").click(function () {                   var obj = new Object();                   obj["name"] = "hhw";                   obj["age"] = 23;                   obj["sex"] = "female";                   $.each(obj, function (key, val) {                       alert(key + "&" + val);                   });               });               $("#btnEach2").click(function () {                   var arr = new Array();                   arr[0] = "jack";                   arr[1] = "abc";                   arr[2] = "hhw";                   $.each(arr, function (i, val) {                       alert(i + "&" + val);                   });               });                 });       </script>   </head>   <body>       <ul>           <li><button type="button" id="btnClone">克隆</button></li>           <li><button type="button" id="btnHasClass">HasClass</button></li>           <li><button type="button" id="btnToggle">开关</button></li>           <li><button type="button" id="btnToggleClass">ToggleClass</button></li>           <li><button type="button" id="btnFind">Find</button></li>           <li><button type="button" id="btnEach">Each</button></li>           <li><button type="button" id="btnEach2">Each2</button></li>       </ul>       <p id="p_button">           <button onclick="alert('a')" id="btnTemplate">按钮</button>       </p>       <p class="canvas" id="p_template">          </p>       <p id="p_bgcolor">          </p>   </body>   </html> 

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_1458.html