jquery 基础

今天闲来无事看到一个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>
View Code

 

posted @ 2015-10-19 00:51  Mountains  阅读(204)  评论(0)  编辑  收藏  举报