jQuery中的常用到的技巧有哪些呢，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、庫(kù)車網(wǎng)站維護(hù)、網(wǎng)站推廣。

1.當(dāng)document文檔就緒時(shí)執(zhí)行JavaScript代碼。

我們?yōu)槭裁词褂胘Query庫(kù)呢？原因之一就在于我們可以使jQuery代碼在各種不同的瀏覽器和存在bug的瀏覽器上***運(yùn)行。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>          <script>              // Different ways to achieve the Document Ready event              // With jQuery             $(document).ready(function(){ /* ... */});              // Short jQuery             $(function(){ /* ... */});              // Without jQuery (doesn't work in older IE versions)             document.addEventListener('DOMContentLoaded',function(){                 // Your code goes here             });              // The Trickshot (works everywhere):              r(function(){                 alert('DOM Ready!');             })              function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}          </script>

2.使用route。

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>          <script>              var route = {                 _routes : {},    // The routes will be stored here                  add    : function(url, action){                     this._routes[url] = action;                 },                  run : function(){                     jQuery.each(this._routes, function(pattern){                         if(location.href.match(pattern)){                             // "this" points to the function to be executed                             this();                         }                     });                 }             }              // Will execute only on this page:             route.add('002.html', function(){                 alert('Hello there!')             });              route.add('products.html', function(){                 alert("this won't be executed : (")             });              // You can even use regex-es:             route.add('.*.html', function(){                 alert('This is using a regex!')             });              route.run();          </script>

3.使用JavaScript中的AND技巧。

使用&&操作符的特點(diǎn)是如果操作符左邊的表達(dá)式是false，那么它就不會(huì)再判斷操作符右邊的表達(dá)式了。所以：

// Instead of writing this: if($('#elem').length){     // do something }  // You can write this:  $('#elem').length && log("doing something");

4. is()方法比你想象的更為強(qiáng)大。

下面舉幾個(gè)例子，我們先寫一個(gè)id為elem的div。js代碼如下：

// First, cache the element into a variable: var elem = $('#elem');  // Is this a div? elem.is('div') && log("it's a div");  // Does it have the bigbox class? elem.is('.bigbox') && log("it has the bigbox class!");  // Is it visible? (we are hiding it in this example) elem.is(':not(:visible)') && log("it is hidden!");  // Animating elem.animate({'width':200},1);  // is it animated? elem.is(':animated') && log("it is animated!");

其中判斷是否為動(dòng)畫我覺得非常不錯(cuò)。

5.判斷你的網(wǎng)頁(yè)一共有多少元素。

通過(guò)使用$(“*”).length（）;方法可以判斷網(wǎng)頁(yè)的元素?cái)?shù)量。

// How many elements does your page have? log('This page has ' + $('*').length + ' elements!');

6.使用length()屬性很笨重，下面我們使用exist()方法。

/ Old way log($('#elem').length == 1 ? "exists!" : "doesn't exist!");  // Trickshot:  jQuery.fn.exists = function(){ return this.length > 0; }  log($('#elem').exists() ? "exists!" : "doesn't exist!");

7.jQuery方法$()實(shí)際上是擁有兩個(gè)參數(shù)的，你知道第二個(gè)參數(shù)的作用嗎？

// Select an element. The second argument is context to limit the search // You can use a selector, jQuery object or dom element  $('li','#firstList').each(function(){     log($(this).html()); });  log('-----');  // Create an element. The second argument is an // object with jQuery methods to be called  var div = $('<div>',{     "class": "bigBlue",     "css": {         "background-color":"purple"     },     "width" : 20,     "height": 20,     "animate" : {   // You can use any jQuery method as a property!         "width": 200,         "height":50     } });  div.appendTo('#result');

8.使用jQuery我們可以判斷一個(gè)鏈接是否是外部的，并來(lái)添加一個(gè)icon在非外部鏈接中，且確定打開方式。

這里用到了hostname屬性。

<ul id="links">     <li><a href="007.html">The previous tip</a></li>     <li><a href="./009.html">The next tip</a></li>    <li><a href="http://www.google.com/">Google</a></li>  </ul>  // Loop through all the links $('#links a').each(function(){      if(this.hostname != location.hostname){         // The link is external         $(this).append('<img src="assets/img/external.png" />')                .attr('target','_blank');     }  });

9.jQuery中的end()方法可以使你的jQuery鏈更加高效。

<ul id="meals"> <li> <ul class="breakfast"> <li class="eggs">No</li> <li class="toast">No</li> <li class="juice">No</li> </ul> </li> </ul> // Here is how it is used:  var breakfast = $('#meals .breakfast');  breakfast.find('.eggs').text('Yes')                       .end() // back to breakfast                       .find('.toast').text('Yes')                       .end()                       .find('.juice').toggleClass('juice coffee').text('Yes');  breakfast.find('li').each(function(){     log(this.className + ': ' + this.textContent) });

10.也許你希望你的web 應(yīng)用感覺更像原生的，那么你可以阻止contextmenu默認(rèn)事件。

<script> // Prevent right clicking on this page $(function(){ $(document).on("contextmenu",function(e){ e.preventDefault(); }); }); </script>

11.一些站點(diǎn)可能會(huì)使你的網(wǎng)頁(yè)在一個(gè)bar下面，即我們所看到在下面的網(wǎng)頁(yè)是iframe標(biāo)簽中的，我們可以這樣解決。

// Here is how it is used:  if(window != window.top){     window.top.location = window.location; } else{     alert('This page is not displayed in a frame. Open 011.html to see it in action.'); }

12.你的內(nèi)聯(lián)樣式表并不是被設(shè)置為不可改變的，如下：

// Make the stylesheet visible and editable $('#regular-style-block').css({'display':'block', 'white-space':'pre'})                          .attr('contentEditable',true);

這樣即可改變內(nèi)聯(lián)樣式了。

13.有時(shí)候我們不希望網(wǎng)頁(yè)的某一部分內(nèi)容被選擇比如復(fù)制粘貼這種事情，我們可以這么做：

<p class="descr">In certain situations you might want to prevent text on the page from being selectable. Try selecting this text and hit view source to see how it is done.</p>       <script>             // Prevent text from being selected             $(function(){                 $('p.descr').attr('unselectable', 'on')                            .css('user-select', 'none')                            .on('selectstart', false);           });      </script>

這樣，內(nèi)容就不能被選擇啦。

14.從cdn中引入jQuery，這樣的方法可以提高我們網(wǎng)站的性能，并且引入***的版本也是一個(gè)不錯(cuò)的主意。

下面會(huì)介紹四種不同的方法。

<!-- Case 1 - requesting jQuery from the official CDN --> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- Case 2 - requesting jQuery from Google's CDN (notice the protocol) --> <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> --> <!-- Case 3 - requesting the latest minor 1.8.x version (only cached for an hour) --> <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js"></script> --> <!-- Case 4 - requesting the absolute latest jQuery version (use with caution) --> <!-- <script src="http://code.jquery.com/jquery.min.js"></script> -->

15.保證最小的DOM操作。

我們知道js操作DOM是非常浪費(fèi)資源的，我們可以看看下面的例子。

CODE // Bad //var elem = $('#elem'); //for(var i = 0; i < 100; i++){ //    elem.append('<li>element '+i+'</li>'); //}  // Good var elem = $('#elem'),     arr = [];  for(var i = 0; i < 100; i++){     arr.push('<li>element '+i+'</li>'); }  elem.append(arr.join(''));

16.更方便的分解URL。

也許你會(huì)使用正則表達(dá)式來(lái)解析URL，但這絕對(duì)不是一種好的方法，我們可以借用a標(biāo)簽來(lái)實(shí)現(xiàn)它。

// You want to parse this address into parts: var url = 'http://tutorialzine.com/books/jquery-trickshots?trick=12#comments';  // The trickshot: var a = $('<a>',{ href: url });  log('Host name: ' + a.prop('hostname')); log('Path: ' + a.prop('pathname')); log('Query: ' + a.prop('search')); log('Protocol: ' + a.prop('protocol')); log('Hash: ' + a.prop('hash'));

17.不要害怕使用vanilla.js。

// Print the IDs of all LI items $('#colors li').each(function(){      // Access the ID directly, instead     // of using jQuery's $(this).attr('id')      log(this.id);  });

18.***化你的選擇器

// Let's try some benchmarks!  var iterations = 10000, i;  timer('Fancy');  for(i=0; i < iterations; i++){     // This falls back to a SLOW JavaScript dom traversal     $('#peanutButter div:first'); }  timer_result('Fancy');  timer('Parent-child');  for(i=0; i < iterations; i++){     // Better, but still slow     $('#peanutButter div'); }  timer_result('Parent-child');  timer('Parent-child by class');  for(i=0; i < iterations; i++){     // Some browsers are a bit faster on this one     $('#peanutButter .jellyTime')

19.緩存你的selector。

// Bad: // $('#pancakes li').eq(0).remove(); // $('#pancakes li').eq(1).remove(); // $('#pancakes li').eq(2).remove();  // Good: var pancakes = $('#pancakes li');  pancakes.eq(0).remove(); pancakes.eq(1).remove(); pancakes.eq(2).remove();  // Alternatively: // pancakes.eq(0).remove().end() //           .eq(1).remove().end() //           .eq(2).remove().end();

20.對(duì)于重復(fù)的函數(shù)只定義一次

如果你追求代碼的更高性能，那么當(dāng)你設(shè)置事件監(jiān)聽程序時(shí)必須小心，只定義一次函數(shù)然后把它的名字作為事件處理程序傳遞是不錯(cuò)的方法。

$(document).ready(function(){     function showMenu(){         alert('Showing menu!');         // Doing something complex here     }      $('#menuButton').click(showMenu);     $('#menuLink').click(showMenu);  });

21.像對(duì)待數(shù)組一樣地對(duì)待jQuery對(duì)象

由于jQuery對(duì)象有index值和長(zhǎng)度，所以這意味著我們可以把對(duì)象當(dāng)作普通的數(shù)組對(duì)待。這樣也會(huì)有更好地性能。

var arr = $('li'),     iterations = 100000;  timer('Native Loop');  for(var z=0;z<iterations;z++){      var length = arr.length;     for(var i=0; i < length; i++){       arr[i];     } } timer_result('Native Loop');  timer('jQuery Each');  for(z=0;z<iterations;z++){      arr.each(function(i, val) {       this;     }); } timer_result('jQuery Each');

22.當(dāng)做復(fù)雜的修改時(shí)要分離元素。

修改一個(gè)dom元素要求網(wǎng)頁(yè)重繪，這個(gè)代價(jià)是高昂的，所以如果你想要再提高性能，就可以嘗試著當(dāng)對(duì)一個(gè)元素進(jìn)行大量修改時(shí)先從頁(yè)面中分離這個(gè)元素，修改完之后再添加到頁(yè)面。

// Modifying in place var elem = $('#elem');  timer('In place');  for(i=0; i < iterations; i++){      elem.width(Math.round(100*Math.random()));     elem.height(Math.round(100*Math.random()));  }  timer_result('In place');  var parent = elem.parent();  // Detaching first timer('Detached');  elem.detach();  for(i=0; i < iterations; i++){      elem.width(Math.round(100*Math.random()));     elem.height(Math.round(100*Math.random()));  }  elem.appendTo(parent);  timer_result('Detached');

23.不要一直等待load事件。

我們已經(jīng)習(xí)慣了把我們所有的代碼都放在ready的事件處理程序中，但是，如果你的html頁(yè)面很龐大，decument ready恐怕會(huì)被延遲了，所以對(duì)于一些我們不希望ready后才可以觸發(fā)的事件可以放在html的head元素中。

<script>              // jQuery is loaded at this point. We can use             // event delegation right away to bind events             // even before $(document).ready:              $(document).on('click', '#clickMe', function(){                 alert('Hit view source and see how this is made');             });              $(document).ready(function(){                  // This is where you would usually bind event handlers,                 // but as we are using delegation, there is no need to.                  // $('#clickMe').click(function(){ alert('Hey!'); });             });              // Note: You should place your script tags at the bottom of the page.             // I have included them in the head only to demonstrate that we can bind             // events before document ready and before the elements are created.  </script>

24.當(dāng)使用js給多個(gè)元素添加樣式時(shí)更好的做法是創(chuàng)建一個(gè)style元素。

我們之前提到過(guò)，操作dom是非常慢的，所以當(dāng)添加多個(gè)元素的樣式時(shí)創(chuàng)建一個(gè)style元素并添加到document中是更好的做法。

<ul id="testList">  <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li>  </ul>  var style = $('<style>');  // Try commenting out this line, or change the color: style.text('#testList li{ color:red;}');  // Placing it before the result section so it affects the elements style.prependTo('#result');

25.給html元素分配一個(gè)名為JS的class。

現(xiàn)代的web apps非常的依賴js，這里的一個(gè)技巧就是只有當(dāng)js可用時(shí)才能顯示特定的元素?？聪旅娴拇a。

$(document).ready(function(){     $('html').addClass('JS'); });    html.JS #message { display:block; }  #message {display:none;}

這樣，只有js可用的時(shí)候id為message的元素才會(huì)顯示；如果不支持js，則該元素不會(huì)顯示。

26.監(jiān)聽不存在的元素上的事件。

jQuery擁有一個(gè)先進(jìn)的事件處理機(jī)制，通過(guò)on()方法可以監(jiān)聽還不存在的事件。 這是因?yàn)閛n方法可以傳遞一個(gè)元素的子元素選擇器作為參數(shù)?？聪旅娴睦樱?/p>

<ul id="testList"> <li>Old</li> <li>Old</li> <li>Old</li> <li>Old</li> </ul>  var list = $('#testList');  // Binding an event on the list, but listening for events on the li items: list.on('click','li',function(){     $(this).remove(); });  // This allows us to create li elements at a later time, // while keeping the functionality in the event listener  list.append('<li>New item (click me!)</li>');

這樣，即使li是后創(chuàng)建的，也可以通過(guò)on()方法來(lái)監(jiān)聽。

27.只使用一次事件監(jiān)聽。

有時(shí)，我們只需要綁定只運(yùn)行一次的事件處理程序。那么one()方法是一個(gè)不錯(cuò)的選擇，通過(guò)它你就可以高枕無(wú)憂了。

<button id="press">Press me!</ul> var press = $('#press');  // There is a method that does exactly that, the one(): press.one('click',function(){     alert('This alert will pop up only once'); });  // What this method does, is call on() behind the scenes, // with a 1 as the last argument: // press.on('click',null,null,function(){alert('I am the one and only!');}, 1);

28.模擬觸發(fā)事件。

我們可以通過(guò)使用trigger模擬觸發(fā)一個(gè)click事件。

<button id="press">Press me!</ul> var press = $('#press');  // Just a regular event listener: press.on('click',function(e, how){     how = how || '';     alert('The buton was clicked ' + how + '!'); });  // Trigger the click event press.trigger('click');  // Trigger it with an argument press.trigger('click',['fast']);

29.使用觸摸事件。

使用觸摸事件和相關(guān)的鼠標(biāo)事件并沒有太多不同，但是你得有一個(gè)方便的移動(dòng)設(shè)備來(lái)測(cè)試會(huì)更好。看下面這個(gè)例子。

// Define some variables var ball = $('<div id="ball"></div>').appendTo('body'), startPosition = {}, elementPosition = {};  // Listen for mouse and touch events ball.on('mousedown touchstart',function(e){     e.preventDefault();      // Normalizing the touch event object     e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e;      // Recording current positions     startPosition = {x: e.pageX, y: e.pageY};     elementPosition = {x: ball.offset().left, y: ball.offset().top};      // These event listeners will be removed later     ball.on('mousemove.rem touchmove.rem',function(e){         e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : e;          ball.css({             top:elementPosition.y + (e.pageY - startPosition.y),             left: elementPosition.x + (e.pageX - startPosition.x),         });      }); });  ball.on('mouseup touchend',function(){     // Removing the heavy *move listeners     ball.off('.rem'); });

30.更好地使用on()/off()方法。

在jQuery1.7版本時(shí)對(duì)事件處理進(jìn)行了簡(jiǎn)化，看看下面的例子吧。

<div id="holder"> <button id="button1">1</button> <button id="button2">2</button> <button id="button3">3</button> <button id="button4">4</button> <button id="clear" style="float: right;">Clear</button> </div>  // Lets cache some selectors  var button1 = $('#button1'),     button2 = $('#button2'),     button3 = $('#button3'),     button4 = $('#button4'),     clear = $('#clear'),     holder = $('#holder');  // Case 1: Direct event handling button1.on('click',function(){     log('Click'); });  // Case 2: Direct event handling of multiple events button2.on('mouseenter mouseleave',function(){     log('In/Out'); });  // Case 3: Data passing button3.on('click', Math.round(Math.random()*20), function(e){      // This will print the same number over and over again,     // as the random number above is generated only once:     log('Random number: ' + e.data);  });  // Case 4: Events with a namespace button4.on('click.temp', function(e){     log('Temp event!'); });  button2.on('click.temp', function(e){     log('Temp event!'); });  // Case 5: Using event delegation $('#holder').on('click', '#clear', function(){     log.clear(); });  // Case 6: Passing an event map var t; // timer  clear.on({      'mousedown':function(){          t = new Date();      },      'mouseup':function(){          if(new Date() - t &gt; 1000){              // The button has been held pressed             // for more than a second. Turn off             // the temp events              $('button').off('.temp');             alert('The .temp events were cleared!');         }      } });

31.更快地阻止默認(rèn)事件行為。

我們知道js中可以使用preventDefault()方法來(lái)阻止默認(rèn)行為，但是jQuery對(duì)此提供了更簡(jiǎn)單的方法。如下：

<a href="http://google.com/" id="goToGoogle">Go To Google</a> $('#goToGoogle').click(false);

32.使用event.result鏈接多個(gè)事件處理程序。

對(duì)一個(gè)元素綁定多個(gè)事件處理程序并不常見，而使用event.result更可以將多個(gè)事件處理程序聯(lián)系起來(lái)?？聪旅娴睦?。

<button id="press">點(diǎn)擊</button>  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  <script>  var press = $('#press'); press.on('click',function(){     return 'Hip'; });  // The second event listener has access // to what was returned from the first  press.on('click',function(e){     console.log(e.result + ' Hop!'); });  </script>

這樣，控制臺(tái)會(huì)輸出Hip Hop!

33.創(chuàng)建你自己習(xí)慣的事件。

你可以使用on()方法創(chuàng)建自己喜歡的事件名稱，然后通過(guò)trigger來(lái)觸發(fā)。舉例如下：

<button id="button1">Jump</button> <button id="button2">Punch</button> <button id="button3">Click</button> <button id="clear" style="float: right;">Clear</button> <div id="eventDiv"></div>      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>       <script>  var button1 = $('#button1'),     button2 = $('#button2'),     button3 = $('#button3'),     clear = $('#clear'),     div = $('#eventDiv');  div.on({     jump : function(){         alert('Jumped!');     },      punch : function(e,data){         alert('Punched '+data+'!');     },      click : function(){         alert('Simulated click!');     }  });  button1.click(function(){     div.trigger('jump'); });  button2.click(function(){     // Pass data along with the event     div.trigger('punch',['hard']); });  button3.click(function(){     div.trigger('click'); });  clear.click(function(){     //some clear code });       </script>

34.在下載文件旁顯示文件大小。

你知道如何在不下載一個(gè)文件的情況下通過(guò)發(fā)送一個(gè)ajax請(qǐng)求頭得到一個(gè)文件的大小嗎？ 使用jQuery就很容易。

<a href="001.html" class="fetchSize">First Trickshot</a> <br />  <a href="034.html" class="fetchSize">This Trickshot</a> <br />  <a href="assets/img/ball.png" class="fetchSize">Ball.png</a> <br />  // Loop all .fetchSize links $('a.fetchSize').each(function(){      // Issue an AJAX HEAD request for each one     var link = this;      $.ajax({         type        : 'HEAD',         url            : link.href,         complete    : function(xhr){              // Append the filesize to each             $(link).append(' (' + humanize(xhr.getResponseHeader('Content-Length')) + ')');          }     });  });  function humanize(size){     var units = ['bytes','KB','MB','GB','TB','PB'];      var ord = Math.floor( Math.log(size) / Math.log(1024) );     ord = Math.min( Math.max(0,ord), units.length-1);      var s = Math.round((size / Math.pow(1024,ord))*100)/100;     return s + ' ' + units[ord]; }

注意：這個(gè)例子如何我們直接使用瀏覽器是沒法得到的，必須使用本地的web服務(wù)器打開運(yùn)行才可以。

35.使用延遲簡(jiǎn)化你的Ajax請(qǐng)求

延遲(deferreds)是一個(gè)強(qiáng)大的工具。jQuery對(duì)于每一個(gè)Ajax請(qǐng)求都會(huì)返回一個(gè)deferred對(duì)象。 deferred.done()方法接受一個(gè)或多個(gè)參數(shù)，所有這些都參數(shù)可以是一個(gè)單一的函數(shù)或一個(gè)函數(shù)數(shù)組。當(dāng)Deferred（延遲）解決時(shí)，doneCallbacks被調(diào)用?；卣{(diào)是依照他們添加的順序執(zhí)行。一旦deferred.done()返回Deferred（延遲）對(duì)象，Deferred（延遲）可以鏈接其它的延遲對(duì)象，包括增加額外的.done()方法。下面這樣就會(huì)使你的代碼更易讀：

// This is equivalent to passing a callback as the // second argument (executed on success):  $.get('assets/misc/1.json').done(function(r){     log(r.message); });  // Requesting a file that does not exist. This will trigger // the failure response. To handle it, you would normally have to // use the full $.ajax method and pass it as a failure callback, // but with deferreds you can can simply use the fail method:  $.get('assets/misc/non-existing.json').fail(function(r){     log('Oops! The second ajax request was "' + r.statusText + '" (error ' + r.status + ')!'); });

36.平行的運(yùn)行多個(gè)Ajax請(qǐng)求。

當(dāng)我們需要發(fā)送多個(gè)Ajax請(qǐng)求是，相反于等待一個(gè)發(fā)送結(jié)束再發(fā)送下一個(gè)，我們可以平行地發(fā)送來(lái)加速Ajax請(qǐng)求發(fā)送。

// The trick is in the $.when() function:  $.when($.get('assets/misc/1.json'), $.get('assets/misc/2.json')).then(function(r1, r2){     log(r1[0].message + " " + r2[0].message); });

37.通過(guò)jQuery獲得ip

我們不僅可以在電腦上ping到一個(gè)網(wǎng)站的ip，也可以通過(guò)jQuery得到。

$.get('http://jsonip.com/', function(r){ log(r.ip); });  // For older browsers, which don't support CORS // $.getJSON('http://jsonip.com/?callback=?', function(r){ log(r.ip); });

38.使用最簡(jiǎn)單的ajax請(qǐng)求

jQuery（使用ajax）提供了一個(gè)速記的方法來(lái)快速下載內(nèi)容并添加在一個(gè)元素中。

<p class="content"></p> <p class="content"></p>  var contentDivs = $('.content');  // Fetch the contents of a text file: contentDivs.eq(0).load('1.txt');  // Fetch the contents of a HTML file, and display a specific element: contentDivs.eq(1).load('1.html #header');

39.序列化對(duì)象

jQuery提供了一個(gè)方法序列化表單值和一般的對(duì)象成為URL編碼文本字符串。這樣，我們就可以把序列化的值傳給ajax()作為url的參數(shù)，輕松使用ajax()提交表單了。

<form action=""> First name: <input type="text" name="FirstName" value="Bill" /><br /> Last name: <input type="text" name="LastName" value="Gates" /><br /> </form>  // Turn all form fields into a URL friendly key/value string. // This can be passed as argument of AJAX requests, or URLs.  $(document).ready(function(){     console.log($("form").serialize()); // FirstName=Bill&LastName=Gates });  // You can also encode your own objects with the $.param method: log($.param({'pet':'cat', 'name':'snowbell'}));

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

網(wǎng)站欄目：jQuery中的常用到的技巧有哪些呢
鏈接URL：http://aaarwkj.com/article22/gojgjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)頁(yè)設(shè)計(jì)公司、動(dòng)態(tài)網(wǎng)站、網(wǎng)站維護(hù)、全網(wǎng)營(yíng)銷推廣、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)