看幾道JQuery試題後總結（上篇）

無意中拿到的JQuery題目，拿來分享順便總結總結

在JQuery對象中區分.text();.val();.html();.innerHTML;.innerTEXT()的用法與區別，用例子證明
在JQuery選擇器中空格與大於號的區別
在一個表單中，查找所有選中的input元素,JQ的寫法
指定的為某個div內部動態添加一個div的寫法，外部添加一個div的寫法(包括在該節點的前面以及後面)
JQuery對象與dom對象的區別，以及兩者互相轉換的方法
如何動態的為某個div添加class屬性，如何移除class屬性，以及如何獲取div中某個屬性的值，比如說Id的名稱或者其他屬性的值
JQuery裏面的動畫函數一般用什麽？時間設置函數都有哪些,setTimeout()與setInterval()有何區別
寫一個ajax例子出來，要標清楚各個參數的含義。以及ajax數據傳輸的時候有幾種數據格式
要做出一個demo具體功能如下：頁面中有一個按鈕，點擊按鈕後彈出一個遮罩層，在遮罩層上面有一個div,在點擊按鈕後5秒後div內部出現內容。在div下面有一個隱藏按鈕，點擊後，遮罩層消失，div緩慢消失。回到頁面打開狀態

　　友情提示：遮罩要用到層級z-index,以及透明效果，5秒要用到時間函數，緩慢消失要用到動畫效果，自己查詢API文檔。

第一題

題目：在JQuery對象中區分.text();.val();.html();.innerHTML;.innerTEXT()的用法與區別，用例子證明

無參數情況

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title></title>
 5     <script src="jQuery/jquery-1.7.1.js" type="text/Javascript"></script>
 6     <script type="text/javascript">
 7         $(document).ready(function () {
 8             var x1 = $("#x1").val();
 9             console.log(x1);
10 
11             var x2 = $("#x1").text();
12             console.log(x2);
13 
14             var x3 = $("#x1").html();
15             console.log(x3);
16 
17             var x4 = $("#x1").innerHTML;    //undefined
18             var x4a = document.getElementById("x1").innerHTML;      //斷橋殘雪
19             console.log(x4);
20             console.log(x4a);
21 
22             var x5 = $("#x1").innerTEXT;
23             var x5a = document.getElementById("x1").innerTEXT;
24             console.log(x5);
25             console.log(x5a);
26         });
27     </script>
28 </head>
29 <body>
30     <form id="form1" runat="server">
31     <div>
32         <p id="x1">斷橋殘雪</p>
33     </div>
34     </form>
35 </body>
36 </html>

View Code

區別如下：
1. $("#x1").val();上述例子獲取的是空字符串，但是如果我們改成<input />標簽我們會發現返回的時input的value值
2. $("#x1").text();上述例子獲取的是標記的內容，但是如果我們改成<input />標簽我們會發現返回的是空字符串
3. Jquery沒有innerHTML這個屬性，當我們使用$("#x1").innerHTML得到的是undefined；在這裏我們可以通過$("#x1")[0].innerHTML或者使用document.getElementById("x1").innerHTML獲取標記中的值
4. 下面一個就用個例子吧
```
Hello world
火雲邪神！
```
 JQuery代碼：$("p").text();
 結果：Helloworld火雲邪神！

有參數情況

.html有參數情況

<div></div>

$("div").html("<p>Bigod超神</p>");

html

.text有參數情況

<p>火雲邪神超神！</p>

$("p").text("<i>斷橋殘雪</i>哇哇哇");

結果：[ 斷橋殘雪哇哇哇 ]

val有參數情況

<input type="text"/>

$("input").val("你們跌倒了沒？崩潰了沒？");

　　結果：你們跌倒了沒？崩潰了沒？

第二題

題目：在JQuery選擇器中空格與大於號的區別

　　看到這個是不是馬上想到了層級選擇器，說句實話額，在JQuery中的組合選擇器，層級選擇器，基本過濾選擇器以及子元素選擇器，我這個記得最清楚，不是別的什麽原因，而是這個用的方法最少，貌似只有4個來著。

　　還是給個例子吧：

然後將JQuery中的div>p改成div p，結果如下圖：

　　我們不難發現使用空格可以選取#main下的所有子孫元素的p標記，而使用>只能選取#main下的子元素p標記，註意前一個是子孫，後一個是子

第三題

題目：在一個表單中，查找所有選中的input元素,JQuery的寫法

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4     <script src="jQuery/jquery-1.7.1.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             var x = $("input:not(:checked)+span");
 8             alert(x.length);
 9         });
10     </script>
11 </head>
12 <body>
13     <form id="myform">
14         <input type="text" /><br />
15         <input type="checkbox" /><span>籃球</span><input type="checkbox" /><span>輪滑</span><br />
16         <input type="password" /><br />
17         <input type="submit" />
18     </form>
19 </body>
20 </html>

View Code

PS：使用JQuery的過濾選擇器：not()

第四題

指定的為某個div內部動態添加一個div的寫法，外部添加一個div的寫法(包括在該節點的前面以及後面)

內部添加一個div

<div id="parent"></div>

<script type="text/javascript">
        $(document).ready(function () {
            var parent = $("#parent");
            var obj = $("<div>火雲邪神</div>");
            obj.appendTo(parent);
        });
</script>

　　在某個div前面和後面分別添加一個div

　　思想：首先找到當前div的父節點，然後然後使用對應的函數（後面我會提到）添加節點

<div id="parent">xyz</div>

    
　　/*節點前*/
　　<script type="text/javascript">
        $(document).ready(function () {
            var parent = $("#parent");
            var obj = $("<div>火雲邪神</div>");
            parent.parent().prepend(obj);
        });
    </script>

    
　　/*節點後*/
　 <script type="text/javascript">
        $(document).ready(function () {
            var parent = $("#parent");
            var obj = $("<div>火雲邪神</div>");
            parent.parent().append(obj);
        });
   </script>

引申一下操作DOM對象(以下15點引申並非本人總結，來自http://www.jb51.net/article/35606.htm)

Append方法用來在元素的末尾追加元素（最後一個子節點）
Prepend在元素的開始添加元素（第一個子節點）
After:在元素之後添加元素（添加兄弟節點）
Before：在元素之前添加元素（添加兄弟節點）
子元素.appendTo(父元素)：在元素的末尾追加一個子元素
子元素.prependTo(父元素):在元素的開始追加一個子元素
A.insertBefore(B) 將A插入到B的前面，等同於B.before(A)
X.insertAfter(B) 將X插入到Y的後面，等同於Y.after(X)
Empty():清空該元素下的所有子節點
Clone()克隆節點，支復制節點，不復制節點
Clone(true):克隆節點帶事件
$("br").replaceWith("<hr/>");
$("br").replaceAll("<hr/>");
$("b").wrap("");將所有粗體字紅色顯示
wrapInner();在內部圍繞

停電，傷不起！

　　近兩天5點鐘光停電，木有寫完，本來把這些想一次寫完的，來不及了，木有辦法，下次寫完，各位就原諒下咯！

　　------如果你覺得此文對你有所幫助，別忘了點擊下右下角的推薦咯，謝謝！------

Tags: PUBLIC 大於號 ajax 動畫動態

文章來源：

看幾道JQuery試題後總結（上篇）

第一題

第二題

第三題

第四題

停電，傷不起！

相關文章