Asp.Net 之Jquery知識點運用

        1.先把要用的body內的代碼寫好。

 1  <div id="ulBox">
 2         <h3>下面的Ulid爲"ulList1"</h3>
 3         <ul id="ulList1">
 4             <li class="fruit">蘋果(class=fruit)</li>
 5             <li class="fruit">西瓜(class=fruit)</li>
 6             <li class="vegetable" id="cucumber">黃瓜(id=cucumber)(class=vegetable)</li>
 7             <li id="tomato" class="vegetable">西紅柿(id=tomato)(class=vegetable)</li>
 8             <li class="fruit">菠蘿(class=fruit)</li>
 9         </ul>
10         <h3>下面的Ulid爲"ulList2"</h3>
11         <ul id="ulList2">
12             <li class="fruit">香蕉(class=fruit)</li>
13             <li class="fruit">椰子(class=fruit)</li>
14             <li id="flower">西蘭花(id=flower)(class=vegetable)</li>
15             <li class="fruit">火龍果(class=fruit)</li>
16             <li id="potato" class="vegetable">土豆(id=potato)(class=vegetable)</li>
17         </ul>
18 
19         <hr />
20         <input type="button" value="重置頁面樣式" id="btnRest" />
21     </div>
22     <div id="inputBox">
23         <input type="button" value="jq的id選擇器" id="btnId" /><input type="text" id="textId" /><br />
24         <input type="button" value="jq的標籤選擇器" id="btnTag" />頁面元素限制,這裏只讓你們使用li標籤<br />
25         <input type="button" value="jq的class選擇器" id="btnClass" /><input type="text" id="textClass" /><br />
26         <input type="button" value="jq的text方式設置值" id="btnText" /><input type="text" id="textText" /><br />
27         <input type="button" value="jq的html方式取值" id="btnHtml" /><input type="text" id="textHtml" /><br />
28         <input type="button" value="jq的value方式取值-取文本框→" id="btnValue" /><input type="text" id="textValue" /><br />
29 
30     </div>

         2.而後把標籤中的樣式寫好，主要是好看，對吧，嘻嘻

 1     <style type="text/css">
 2         body {
 3             padding: 0px;
 4             margin: 0px;
 5         }
 6 
 7         div {
 8             margin: 0px;
 9             border: 1px solid #00942b;
10             text-align: center;
11         }
12 
13         #ulBox {
14             float: left;
15         }
16 
17         #inputBox {
18             float: right;
19             text-align: left;
20         }
21 
22         ul {
23             text-align: left;
24             border: 1px solid #00942b;
25             padding: 0px;
26         }
27 
28         h2 {
29             text-align: center;
30         }
31 
32         input {
33             width: 200px;
34         }
35 
36         table {
37             height: 200px;
38             border: 1px solid black;
39             border-collapse: collapse;
40         }
41 
42         td {
43             border: 1px solid #0094ff;
44         }
45     </style>

               3.而後就開始運用Jquery的知識點了。

 1 <script type="text/javascript">
 2         //頁面資源加載完畢調用
 3         $(function () {
 4             //-----------------設置樣式適應屏幕-----------------------
 5             //1.設置ul的外部div 的寬度
 6             $("#ulBox").css({ "width": window.innerWidth / 2 - 2 + "px" });
 7             //2.設置ul的外部div 的寬度
 8             $("#inputBox").css({ "width": window.innerWidth / 2 - 2 + "px" });
 9             //注意,由於兩邊的邊框各佔了1個像素,因此上面須要減2
10 
11             //------------------爲全部li添加高亮選中------------------
12             //保存選中的li標籤
13             var liSel;
14             $("li").click(function () {
15                 $(this).css("color", "red");
16                 liSel = this;
17             })
18 
19             //-----------------註冊各個按鈕的點擊事件-----------------
20             //1.重置按鈕的點擊事件--將全部的li標籤的背景顏色還原
21             $("#btnRest").click(function () {
22                 //刷新頁面
23                 window.location = window.location;
24             })
25             //2.id選擇器
26             $("#btnId").click(function () {
27                 //獲取文本值
28                 var Text = $("#textId").val();
29                 //設置背景顏色
30                 $("#"+Text).css("backgroundColor","#00942b");
31                 //打印代碼
32                 alert("$(\"#" + Text + ").css(\"backgroundColor\", \"#00942b\");");
33             })
34 
35             //3.標籤選擇器
36             $("#btnTag").click(function () {
37                 //設置背景顏色
38                 $("li").css("backgroundColor", "pink");
39                 //打印代碼
40                 alert("   $(\"li\").css(\"backgroundColor\", \"pink\");");
41             })
42 
43             //4.class選擇器
44             $("#btnClass").click(function () {
45                 //獲取文本值
46                 var etext = $("#textClass").val();
47                 //設置背景顏色
48                 $("." + etext).css("backgroundColor","yellow");
49                 //打印代碼
50                 alert("$(\"." + etext + ").css(\"backgroundColor\", \"yellow\");");
51             })
52 
53             //5.Text()方法
54             $("#btnText").click(function () {
55                 //非空判斷
56                 if (liSel != null) {
57                     //獲取文本值
58                     var text = $("#textText").val();
59                     //設置選中li標籤的文本值
60                     $(liSel).text(text);
61                     //打印代碼
62                     alert("$(lisel).text("+text+");");
63                 }
64             })
65 
66             //6.html()方法
67             $("#btnHtml").click(function () {
68                 //非空判斷
69                 if (liSel != null) {
70                     //獲取文本值
71                     var htmls = $("#textHtml").val();
72                     //設置選中li標籤的文本值
73                     $(liSel).html(htmls);
74                     //打印代碼
75                     alert("$(lisel).html(" + htmls + ");");
76                 }
77             })
78 
79             //7.val()方法
80             $("#btnValue").click(function () {
81                 //打印value值
82                 alert($("#textValue").val());
83                 //打印代碼
84                 alert("$(\#textValue\").val()\")");
85             })
86 
87         })
88     </script>