jQuery 常用方法 & ajax

jQuery 常用方法 & ajax

1. jQuery 中, $(document).ready()是什么意思?和window.onload 的區(qū)別? 還有其他什么寫法或者替代方法?

  • $(document).ready() 方法接受一個函數(shù)作為參數(shù),將該函數(shù)作為 document 對象 DOMContentLoaded 時間的回調(diào)函數(shù)询一。
    當(dāng) DOM 解析完成后,該函數(shù)就執(zhí)行癌椿。且可以寫多個健蕊,都可以執(zhí)行。
  $(document).ready(fcuntion() {
    console.log('success');
  });

也可以簡寫為(直接把函數(shù)放在 jQuery 對象里面):

  $(function() {
    console.log('success');
  });
  • window.onload 是當(dāng)頁面全部加載完成后(頁面內(nèi)容踢俄、圖片等資源)執(zhí)行缩功。且不能同時寫多個,若寫多個褪贵,只會執(zhí)行最后一個掂之。

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

  • $node.html() 返回該元素包含的 html 代碼

  • $node.text() 返回該元素包含的文本

例子:

  <p><em>html and text</em></p>
  <script>
    $('p').html();  // 返回 <em>html and text</em>
    $('p').text();  // 返回 html and text
  </script>

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

$.extend() 方法用于將多個對象合并為一個對象

  var e1 = { a : 1, b : 2 };
  var e2 = { a : 3 };
  $.extend(e1, e2);
  e1.a;  // 3 

$.extend() 的另一種用法是生成一個新對象抗俄,用來繼承原有對象。這時世舰,它的第 1 個參數(shù)應(yīng)該為一個空對象

  var e1 = { a : 1, b : 2 };
  var e2 = { a : 3 };
  var e3 = $.extend( {}, e1, e2 );
  e3; // { a: 3, b : 2 }

默認(rèn)情況下动雹,.extend() 生成的對象是“淺拷貝”,也就是說跟压,如果某個屬性是對象或數(shù)組胰蝠,那么只會生成指向這個對象或數(shù)組的指針,不會復(fù)制值震蒋。
如果想要“深拷貝”茸塞,可以在 .extend() 的第 1 個參數(shù)傳入 true (這里不允許設(shè)置為 false,因為默認(rèn)為 fal)

  var e1 = { a : [1, 2] };
  var e2 = $.extend( {}, e1 );
  var e3 = $.extend( true, {}, e1);

  e1.a[0] = 3;
  e2.a;  // [3,2]  淺拷貝
  e3.a;  // [1,2]  深拷貝

4. jQuery 的鏈?zhǔn)秸{(diào)用是什么查剖?

jQuery 最方便的一點就是钾虐,它的大部分方法返回的都是 jQuery 對象,因此可以鏈?zhǔn)讲僮鳎ê笠粋€方法可以緊跟著前一個方法)笋庄,連續(xù)使用 jQuery 方法

  $('選擇器').方法1(回調(diào)函數(shù)1).方法2(回調(diào)函數(shù)2).方法3(回調(diào)函數(shù)3);

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

jQuery ajax 方法是利用 cache 參數(shù)來控制緩存
true --> 緩存
false --> 不緩存

6. jQuery 中 data 函數(shù)的作用

.data() 在匹配元素上存儲任意相關(guān)數(shù)據(jù)效扫,允許在 DOM 對象上存儲任意類型的數(shù)據(jù),避免循環(huán)引用的內(nèi)容泄漏風(fēng)險

另外:注意這兩種方法目前并不提供在 XML 文檔上跨平臺設(shè)置直砂,作為 Internet Explorer 不允許通過自定義屬性附加數(shù)據(jù)菌仁。

  $('body').data('foo', 52);  // 存儲數(shù)據(jù)
  $('body').data('foo')  // 讀取數(shù)據(jù)

代碼

1. 給元素 $node 添加 class active,給元素 $node 刪除 class active
  $node.addClass('active');
  $node.removeClass('active');
2. 展示元素 $node 静暂,隱藏元素 $node
  $node.show();
  $node.hide();
3. 獲取元素 $node 的屬性:id济丘、src、title洽蛀,修改以上屬性
  $node.attr('id);
  $node.attr('src);
  $node.attr('title1', 'title2');
4. 給 $node 添加自定義屬性 data-src
  $('.node').attr('data-src', 'xxx');
5. 在 $ct 內(nèi)部最開頭添加元素 $node
  $ct.prepend($node);
6. 在 $ct 內(nèi)部最末尾添加元素 $node
  $ct.append($node);
7. 刪除 $node
  $node.remove();
8. 把 $ct 里內(nèi)容清空
  $ct.empty();
9. 在 $ct 里設(shè)置 <div class="btn"></div>
  $ct.html('<div class='btn'></div>');
10. 獲取摹迷、設(shè)置 $node 的寬度、高度(分別不包括內(nèi)邊距郊供、包括內(nèi)邊距泪掀、包括邊框、包括外邊距)
  $node.width()  // content
  $node.height()
  $node.innerWidth()  // content + padding
  $node.innerHeight()
  $node.outerWidth()  // content + padding + border
  $node.outerHeight()
  $node.outerWidth(true)  // content + padding + border + margin
  $node.outerHeight(true)
11. 獲取窗口滾動條垂直滾動距離
  $(window).scrollTop();
12. 獲取 $node 到根節(jié)點水平颂碘、垂直偏移距離
  $node.offset()
  // 在匹配的元素集合中,獲取的第一個元素的當(dāng)前坐標(biāo)椅挣,或設(shè)置每一個元素的坐標(biāo)头岔,坐標(biāo)相對于文檔
13. 修改 $node 的樣式,字體顏色設(shè)置紅色鼠证,字體大小設(shè)置 14px
  $node.css( {
    'color' : 'red',
    'font-size' : '14px'
  });
14. 遍歷節(jié)點峡竣,把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍
  $node.each(function() {
    $(this).text();
  });
15. 從 $ct 里面查找 class 為 .item 的子元素
  $ct.find('.item')
16. 獲取 $ct 里面的所有孩子
  $ct.children();
17. 對于 $node,向上找到 class 為 '.ct' 的父親量九,在從該父親找到 '.panel' 的孩子
  $node.parents('.ct').find('.panel')
18. 獲取選擇元素的數(shù)量
  $node.length
19. 獲取當(dāng)前元素在兄弟中的排行
  $node.index()

task26-2 預(yù)覽
task26-3 預(yù)覽-已測試通過

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末适掰,一起剝皮案震驚了整個濱河市颂碧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌类浪,老刑警劉巖载城,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異费就,居然都是意外死亡诉瓦,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進店門力细,熙熙樓的掌柜王于貴愁眉苦臉地迎上來睬澡,“玉大人,你說我怎么就攤上這事眠蚂∩反希” “怎么了?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵逝慧,是天一觀的道長昔脯。 經(jīng)常有香客問我,道長馋艺,這世上最難降的妖魔是什么栅干? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮捐祠,結(jié)果婚禮上碱鳞,老公的妹妹穿的比我還像新娘。我一直安慰自己踱蛀,他們只是感情好窿给,可當(dāng)我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著率拒,像睡著了一般崩泡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上猬膨,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天角撞,我揣著相機與錄音,去河邊找鬼勃痴。 笑死谒所,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的沛申。 我是一名探鬼主播劣领,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼铁材!你這毒婦竟也來了尖淘?” 一聲冷哼從身側(cè)響起奕锌,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎村生,沒想到半個月后惊暴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡梆造,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年缴守,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片镇辉。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡屡穗,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出忽肛,到底是詐尸還是另有隱情村砂,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布屹逛,位于F島的核電站础废,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏罕模。R本人自食惡果不足惜评腺,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望淑掌。 院中可真熱鬧蒿讥,春花似錦、人聲如沸抛腕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽担敌。三九已至摔敛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間全封,已是汗流浹背马昙。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留刹悴,地道東北人给猾。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像颂跨,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子扯饶,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,762評論 2 345

推薦閱讀更多精彩內(nèi)容