當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

看几道JQuery试题后总结（下篇）

發布時間：2024/4/17 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了看几道JQuery试题后总结（下篇）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

感謝圓友的提醒

昨天下午完成了9道試題中的前4道，之后好多園友存在些疑惑和建議，在這里我一并說一下吧。首先對于昨天第一題可能存在誤導，在JQuery中并沒有innerHTML這個屬性，不過我們可以將JQuery對象轉換成DOM對象再使用innerHTML，還有對于那個innerTEXT也是操作DOM對象的，不過貌似用的比較少。其次是第三題，我們選擇表單元素，盡量使用表單元素選擇器?？傊?#xff0c;感謝圓友們的批評指正、、、

接下來我們繼續完成昨天沒有完成的試題......

第五題

題目：JQuery對象與dom對象的區別，以及兩者互相轉換的方法

var jquery = $("#x1"); //jquery對象 var dom = document.getElementById("#x1"); //dom對象

　　兩者區分：

　　jQuery對象就是通過jQuery包裝DOM對象后產生的對象，它是jQuery獨有的，使用JQuery對象可以使用JQuery對象中的方法。例如在JQuery中我們可以使用"對　　　　象.html()"來獲取元素內的內容，它等同于在DOM中使用"對象.innerHTML"。還有我們使用這兩種對象的時候必須分清情況，不能再JQuery對象中使用DOM對象的方法，也不能在BOM對象中使用JQuery對象的方法，小弟我昨天就犯錯了。

　　兩者互相轉換：

/*JQuery轉化成DOM*/

var x=$("#x1"); //jquery對象 var y = x[0]; //dom對象也可寫成 var y=x.get(0);
y.innerHTML = "斷橋殘雪";
/*DOM轉化成JQuery*/

var m=document.getElementById("x1"); //dom對象 var n = $(m); //轉換成jquery對象
n.html();

通過以上演示的方法，我們就可以任意的相互轉換jquery對象和dom對象。

第六題

題目：如何動態的為某個div添加class屬性，如何移除class屬性，以及如何獲取div中某個屬性的值，比如說Id的名稱或者其他屬性的值

　　首先看代碼：

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 <style type="text/css"> 6 .test{color:#0000FF;font-size:30px;} 7 </style> 8 <script src="jQuery/jquery-1.7.1.js" type="text/javascript"></script> 9 <script type="text/javascript"> 10 $(document).ready(function () { 11 var myp = $("#myp"); 12 $("#btnx").click(function () { 13 myp.addClass("test"); 14 }); 15 $("#btny").click(function () { 16 myp.removeClass("test"); 17 }); 18 function y() { 19 myp.removeClass(); 20 } 21 var a = $("#btnx").attr("type"); 22 alert(a); 23 }); 24 </script> 25 </head> 26 <body> 27 <form id="form1" runat="server"> 28 <div> 29 <p id="myp">斷橋殘雪——火云邪神</p> 30 <input id="btnx" type="button" οnclick="x()" value="添加Class" /><input id="btny" type="button" οnclick="y()" value="移除Class" /> 31 </div> 32 </form> 33 </body> 34 </html> View Code

點擊添加Class與點擊移除Class

同時我們可以看到，我們通過JQuery對象的attr()方法可以獲取對象中屬性存在的數據，如果沒有該屬性則返回undefined。

第七題

題目：JQuery里面的動畫函數一般用什么？時間設置函數都有哪些,setTimeout()與setInterval()有何區別

在JQuery中使用動畫(從上到下分組依次是基本，滑動，淡入淡出，自定義)

show()

hide()

toggle()　　

slideDown()

slideUp()

slideToggle()

fadeIn()

fadeOut()

fadeToggle()

animate()

stop()

delay()

對于setTimeout()與setInterval()的區別，setInterval()是按照指定的周期(毫秒)來調用函數或計算表達式，而setTimeout()是在指定的毫秒數后調用函數或表達式

第八題

題目：寫一個ajax例子出來，要標清楚各個參數的含義。以及ajax數據傳輸的時候有幾種數據格式

1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <title></title> 7 </head> 8 <body> 9 <form id="form1" runat="server"> 10 <div> 11 <p>我是火云邪神，已經超神了，大師你懂得！</p> 12 </div> 13 </form> 14 <script type="text/javascript"> 15 var xmlHttp = null; 16 function x(){ 17 /*建立一個xmlHttpReauest對象*/ 18 loadXmlHttp(); //創建XMLHttpRequest 19 var text = document.getElementById("myinput").value; 20 var url = "sex.ashx?text=" + text; //向后臺傳值 21 sendRequest(encodeURI(url)); 22 } 23 24 /*不同的瀏覽器，建立對應的xmlHttpRequset對象*/ 25 function loadXmlHttp() { 26 if (window.XMLHttpRequest) { 27 xmlHttp = new XMLHttpRequest(); //非IE 28 } else if (window.ActiveXObject) { 29 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 30 } 31 } 32 33 /*發送請求*/ 34 function sendRequest(url) { 35 if (xmlHttp) { 36 /*準備xml*/ 37 xmlHttp.open("GET", url, true); //此處一定要為true，也就是異步 38 xmlHttp.onreadystatechange = onCallback; //執行之后判斷返回成功或者失敗 39 xmlHttp.send(null); 40 } 41 } 42 function onCallback() { 43 if (xmlHttp.readyState == 4) { 44 if (xmlHttp.status == 200) { 45 if (xmlHttp.responseText == "") { 46 alert("成功"); 47 } 48 else { 49 alert("失敗"); 50 } 51 } 52 else { 53 alert('Error:' + xmlHttp.status); 54 } 55 } 56 } 57 </script> 58 <input id="myinput" type="text" value="斷橋殘雪" /><input type="button" οnclick="x()" value="調用Ajax" /> 59 </body> 60 </html> View Code

向后臺傳值：

第九題

題目：要做出一個demo具體功能如下：頁面中有一個按鈕，點擊按鈕后彈出一個遮罩層，在遮罩層上面有一個div,在點擊按鈕后5秒后div內部出現內容。在div下面有一個隱藏按鈕，點擊后，遮罩層消失，div緩慢消失?；氐巾撁娲蜷_狀態。（友情提示：遮罩要用到層級z-index,以及透明效果，5秒要用到時間函數，緩慢消失要用到動畫效果，自己查詢API文檔。）

　　類似這種題目曾經做過一次，都是基礎知識的拼湊，下次貼上代碼吧！

　　待續ing、、、、、、

結語

　　感覺這套題目一般般，不過覆蓋的面也挺全的，大家細細琢磨吧！這篇比上篇寫得水多了，話說會被移除首頁的，呵呵。今天遇到了些不爽的事兒，寫這博客期間中斷了好多次，抱歉！

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

轉載于:https://www.cnblogs.com/vchenpeng/p/3180949.html

總結

以上是生活随笔為你收集整理的看几道JQuery试题后总结（下篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ORA-01658:Unable to
下一篇：利用Jquery处理跨域请求