jquery 常用方法&ajax

1.Jquery 中， $(document).ready()是什么意思？和window.onload 的區別？ 還有其他什么寫法或者替代方法？

$(document).ready()是當文檔中的DOM節點加載完成后，在加載外部圖片和資源前，執行ready()里面的操作。
window.onload是整個頁面加載完成（包括圖片、CSS、腳本等）后，執行onload()中的操作。
還有$(window).load()方法和window.onload類似。
舉例：

<html>
<head>
    <meta charset="utf-8">
    <title>輸出</title>
    <style>
        iframe {
            width: 400px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        console.log( "document loaded" );
    });
 
    $( window ).load(function() {
        console.log( "window loaded" );
    });
        document.onload=function() {
        console.log( "window loaded" );
    };
        window.onload=function() {
        console.log( "window loaded" );
    };
    </script>
</head>
<body>
    <iframe src="http://www.sogou.com"></iframe>
</body>
</html>

結果：


運行上述代碼時，控制臺document loaded先顯示，等到搜狗頁面加載完后，window loaded才顯示。

2.$node.html()和$node.text()的區別?

$node.html()獲取集合中第一個匹配元素的HTML內容或設置每一個匹配元素的HTML內容。()沒有參數時，獲取node的HTML內容。(htmlstring)括號中有內容時，設置node的HTML內容。
而$node.text()得到匹配元素集合中每個元素的文本內容結合，包括他們的后代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容。()沒有參數時，得到匹配元素集合中每個元素的合并文本，包括他們的后代。(htmlstring)括號中有內容時，設置node的文本內容。
可以舉個例子：
HTML部分代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作</title>
</head>
<body>
<div>
    <p>這是<b>段落一</b></p>
    <p>這是<b>段落二</b></p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
    
</script>
</body>
</html>

3.$.extend 的作用和用法?

$.extend也是jQuery.extend將兩個或更多對象的內容合并到第一個對象。
寫法：

jQuery.extend( [deep ], target, object1 [, objectN ] )

[deep]可選。類型: Boolean。如果是true，合并成為遞歸（又叫做深拷貝）。不能設置成false。
target對象擴展。將接收新的屬性。可以寫成{}。
object1合并到新的屬性的第一個參數。
[,objectN]可選。合并到新的屬性的第N個參數。
主要有以下三種用法:
1.合并兩個對象，并修改第一個對象。
代碼：

<html>
<head>
<meta charset="utf-8">
<title>jQuery.extend()</title>
</head>
<body>
   <div id="log"></div> 
     <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
 // Merge object2 into object1
$.extend( object1, object2 );
 // Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
    </script>
</body>
</html>

結果：



可以看到，object1和object2重復的屬性被object2的屬性值修改了。object1沒有而object2有的屬性也被添加到了object1。object1有而object2沒有的屬性還存在且沒有改變。
2.采用遞歸方式合并兩個對象，并修改第一個對象。
把

$.extend(  object1, object2 );

改為

$.extend( true, object1, object2 );

則結果變為：



object1的banana屬性并沒有被object2的banana屬性完全覆蓋，深層的屬性的修改也和上例類似。
3.合并 defaults 和 options 對象，并且不修改 defaults 對象。這是常用的插件開發模式。

<html>
<head>
<meta charset="utf-8">
<title>jQuery.extend() 3</title>    
</head>
<body>
   <div id="log"></div> 
     <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar","limit":10 };
 
// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
    </script>
</body>
</html>

結果：


4.JQuery 的鏈式調用是什么？

鏈式調用就是分步驟地對jQuery對象實現各種操作。
對上述代碼可以進行如下操作：



相當于先把加粗文字字體顏色變成紅色，再隱藏這些文字，然后顯示，最后把加粗文字改為其它文字。
它的原理在于每一步的jQuery操作，返回的都是一個jQuery對象，所以不同操作可以連在一起。
優點：
1.代碼更精簡。鏈式調用能大大精簡代碼量，多項操作一行代碼一氣呵成，搞定；
2.優化性能。使用鏈式調用，所有操作代碼共享一個jQuery對象，省去了逐步查詢DOM元素的性能損耗。

5.JQuery ajax 中緩存怎樣控制?

如果沒有進行額外設置的話，如果請求的地址和參數及參數的值完全一樣，就會發生jquery ajax使用緩存的情況。
jquery ajax禁用緩存的解決方案：
1.在請求的url后面加上一個隨機參數（***.do?random=Math.random）這不失為一個好方法，缺點就是在所有的jquery ajax請求的地方都要加上這個隨機參數，新項目還行，老項目的話，這是個巨大的工作量。
2.給jquery ajax請求設置禁用緩存的全局設置
我們都知道在jquery ajax的的方法中有個cache參數，如果設置為false，那么就不進行緩存。用ajaxSetup() 方法，該方法可以為所有的ajax請求統一設置默認參數。那么可以設置如下代碼：

$(function(){
     $.ajaxSetup ({
         cache: false //關閉AJAX緩存
     });
});

參考如何禁用jquery ajax緩存

6.jquery 中 data 函數的作用

.data( key, value )在匹配元素上存儲任意相關的數據。
key存儲的數據的名稱。
value數據的值。除了undefined都可以。
.data( obj )更新數據。
舉例：


可以看出，.data()可以用于數據的拷貝。
還可以改變頁面內容。
代碼：

  <!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
  <div>
    The values stored were
    <span></span>
    and
    <span></span>
  </div>
<script>
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
</script>
 
</body>
</html>

結果：


本文版權歸本人和饑人谷所有，轉載請注明出處

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容