今天闲来无事看到一个jqueryAPI的东西。看了下入门指南。虽然经常使用jquery .但是里面还有很多不错的东西没有使用过。 下面把今天看的内容简单列出来。方便以后翻阅。
下面为学习代码:
1 <html> 2 <head> 3 <title></title> 4 <meta charset="utf-8"> 5 <script type="text/javascript" src="jquery-1.8.2.min.js"></script> 6 </head> 7 <body> 8 <h2>学习Jquery</h2> 9 10 <ul> 11 <li>First</li> 12 <li>Sencond</li> 13 <li>Third</li> 14 </ul> 15 16 <button id="btnRestFrom">RestForm</button> 17 <form id="testForm"> 18 name:<input type="text" name="name" /> 19 </form> 20 21 <hr> 22 FAQ: 23 <div id="faq"> 24 <dt>1.中国是否是人口大国？</dt> 25 <dd>是的，包括13亿之多的人口数量。</dd> 26 27 <dt>2.中国包括多少省份？</dt> 28 <dd>中国有34个省级行政区 其中，有23个省、5个自治区、4个直辖市、2个特别行政区。</dd> 29 </div> 30 <input type="checkbox"><input type="checkbox"> 31 32 <script type="text/javascript"> 33 34 $(function(){ 35 36 //jquery 的Hover 用法。 37 $("ul>li:last").hover(function(){ 38 $(this).css("background-color","red"); 39 },function(){ 40 $(this).css("background-color",""); 41 }); 42 43 //修改每个li的内容 44 $("ul>li").each(function(i){ 45 $(this).html($(this).html()+i); 46 }); 47 48 //jquery 的form对象不存在reset 方法。但是DOM 存在此方法。 以后清空编辑操作更方便了。 49 $("#btnRestFrom").click(function(){ 50 var form = $("#testForm"); 51 console.log(form); 52 console.log(form[0]); 53 form[0].reset(); 54 }); 55 56 //简单的FAQ页面，答案首先会隐藏，点击问题显示答案。 57 $("#faq").find("dd").hide().end().find("dt").click(function(){ 58 var answer = $(this).next(); 59 if(answer.is(':visible')){ 60 answer.slideUp(); 61 }else{ 62 answer.slideDown(); 63 } 64 }); 65 66 //写基于Jquery的插件时就是这样写的。 67 $.fn.check = function(){ 68 this.each(function(){ 69 this.checked = true; 70 }) 71 }; 72 73 //此处调用插件方法，选中所有checkbox 74 $("input[type='checkbox']").check(); 75 }); 76 77 </script> 78 79 80 </body> 81 </html>