進階15:jQuery與jQuery ajax

題目1： jQuery 中， $(document).ready()是什么意思杈笔？

定義和用法:

當 DOM（文檔對象模型） 已經加載，并且頁面（包括圖像）已經完全呈現(xiàn)時，會發(fā)生 ready 事件逗旁。
由于該事件在文檔就緒后發(fā)生，因此把所有其他的 jQuery 事件和函數(shù)置于該事件中是非常好的做法舆瘪。
ready() 函數(shù)規(guī)定當 ready 事件發(fā)生時執(zhí)行的代碼片效。
ready() 函數(shù)僅能用于當前文檔，因此無需選擇器英古。

允許使用以下三種語法:
$(document).ready(function)
$().ready(function)
$(function)

jQuery中$(document).ready與Javascript中window.onload區(qū)別:

window.onload:
window.onload在頁面的DOM加載完成淀衣，所有的圖片、子frame等所有的元素都加載完成的時候才會觸發(fā)召调。
$(document).ready():
$(document).ready方法發(fā)生在DOM樹構造完成膨桥，而不會等到其余的所有的元素都加載完成。其實說白了就是ready方法在onload之前發(fā)生唠叛，一般發(fā)生在DOM樹構造完成的時候只嚣。

具體一些，可以從以下幾方面對比$(document).ready和window.onload的區(qū)別:

1.執(zhí)行時間
window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執(zhí)行艺沼。
$(document).ready是DOM結構繪制完畢后就執(zhí)行册舞，不必等到圖片等資源加載完成后才執(zhí)行。

2.編寫個數(shù)不同
window.onload不能同時編寫多個障般，如果有多個window.onload方法调鲸，后面會覆蓋前面，并且只會執(zhí)行一個onload方法挽荡。
$(document).ready可以同時編寫多個藐石，并且都可以得到執(zhí)行。
如下例:

window.onload = function(){
    console.log("window.onload event1");
}
window.onload = function(){
    console.log("window.onload event2");
}
$(document).ready(function(){
    console.log("jquery ready event1");
})
$(document).ready(function(){
    console.log("jquery ready event2");
})

執(zhí)行結果如下:


輸出結果

可以看出ready先于onload事件定拟。并且onload只能有一個贯钩，后面覆蓋前面，而ready恰好相反办素。

3.簡化寫法
window.onload沒有簡化寫法角雷。
$(document).ready(function(){})可以簡寫成$(function(){});
在一些開發(fā)中，大多數(shù)時候性穿，第一行寫的是：

$(document).ready(function(){
    //coding...
});

關于$(window).load:

$(window).load與window.onload其實沒什么大的區(qū)別
jquery API中提到$(window).load方法是$(window).on('load',handler)的shortcut,而且$(window).on('load',handler)相當于window.onload方法

$(window).load(function (){  
    // coding
});  
//等價于 JavaScript 中的以下代碼  
window.onload = function (){  
    // coding
}

如果真要說區(qū)別的
$(window).load(handler)可以用多次使用勺三，并且handler都會依次執(zhí)行。但是window.onload就不行需曾，就像上面介紹的一樣,window.onload = handler后面的hanlder會覆蓋之前的handler吗坚。

注意：由于在$(document).ready()方法內注冊的事件祈远，只要 DOM 就緒就會被執(zhí)行，因此可能此時元素的關聯(lián)文件未下載完商源。例如與圖片有關的 html 下載完畢车份，并且已經解析為 DOM 樹了，但很有可能圖片還沒有加載完畢牡彻，所以獲取圖片的高度和寬度這樣的屬性此時不一定有效扫沼。要解決這個問題，可以使用 jquery 中另一個關于頁面加載的方法 ---load() 方法庄吼。 Load() 方法會在元素的 onload 事件中綁定一個處理函數(shù)缎除。如果處理函數(shù)綁定給 window 對象，則會在所有內容 ( 包括窗口总寻、框架器罐、對象和圖像等 ) 加載完畢后觸發(fā)，如果處理函數(shù)綁定在元素上渐行，則會在元素的內容加載完畢后觸發(fā)轰坊。

用原生JS實現(xiàn)jQuery的ready方法

那么，對于某些特殊需求祟印，不希望使用jQuery衰倦，但又想實現(xiàn)jQuery的ready方法。該如何用原生JS實現(xiàn)jQuery的ready方法呢旁理？下面是其中之一的做法：

function ready(fn){  
    if(document.addEventListener){      
        //標準瀏覽器  
        document.addEventListener('DOMContentLoaded',function(){  
            //注銷事件樊零，避免反復觸發(fā)  
            document.removeEventListener('DOMContentLoaded',arguments.callee,false); 
            //執(zhí)行函數(shù)   
            fn();
        },false);  
    }else if(document.attachEvent){     
        //IE瀏覽器  
        document.attachEvent('onreadystatechange',function(){  
            if(document.readyState=='complete'){  
                document.detachEvent('onreadystatechange',arguments.callee);  
                //執(zhí)行函數(shù)   
                fn();  
            }  
        });  
    }  
}

下面用一段代碼驗證ready函數(shù)的正確性：

window.onload = function(){
    console.log("window.onload event");
}
ready(function(){
    console.log('window ready event')
})

執(zhí)行效果如下:


執(zhí)行效果

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

  • 相同點:
    html()和text()都是讀寫兩用方法。

  • 區(qū)別:

    • html()對jQuery對象的html進行操作孽文，相當于原生js的innerHTML驻襟；text()對jQuery對象的text進行操作，相當于原生js的innerText
    • 沒有傳遞參數(shù)時芋哭，html()獲取的是第一個匹配元素的innerHTML沉衣；text()獲取的是所有匹配元素的innerText
    • 傳遞了string參數(shù)時，html()修改所有匹配元素的innerHTML為參數(shù)值减牺，text()修改所有匹配元素的innerText為參數(shù)值
      如例:
<body>
    <ul>
        <li><span>item1 </span></li>
        <li><span>item2 </span></li>
        <li><span>item3 </span></li>

    </ul>
    <script>
        console.log($('li').html())//<span>item1 </span>
        console.log($('li').text())//item1 item2 item3

        console.log($('li').html('<span>insert span</span>'))//
        console.log($('li').text('insert text'))//
    </script>
</body>

下面代碼打印結果:

 console.log($('li').html())//<span>item1 </span>
 console.log($('li').text())//item1 item2 item3

下面代碼打印結果:

console.log($('li').html('<span>insert span</span>'))
console.log($('li').text('insert text'))

題目3： $.extend 的作用和用法?

定義
jQuery.extend() 函數(shù)用于將一個或多個對象的內容合并到目標對象豌习。相同屬性后面對象的值覆蓋前面對象的值，target將被修改并通過$.extend()返回拔疚。參數(shù) deep 為布爾值true/false肥隆，用來設置合并操作是否遞歸（深拷貝）。$.extend( [deep ], target, object1 [, objectN ] )
注意：

  1. 如果只為$.extend()指定了一個參數(shù)稚失，則意味著參數(shù)target被省略栋艳。此時，target就是jQuery對象本身句各。通過這種方式吸占，我們可以為全局對象jQuery添加新的函數(shù)晴叨。
  2. 如果多個對象具有相同的屬性，則后者會覆蓋前者的屬性值矾屯。

用法:
如果我們想保留原對象兼蕊，可通過傳遞一個空對象作為目標對象：
var object = $.extend({}, object1, object2); //將object1, object2合并到{}中
默認$.extend()合并操作是淺復制，如果第一個對象的屬性本身是一個對象或數(shù)組件蚕，那么它將完全用第二個對象相同的key重寫一個屬性孙技。這些值不會被合并。如果將 true作為該函數(shù)的第一個參數(shù)骤坐，那么會在對象上進行遞歸的合并绪杏。

語法:

$.extend( target [, object1 ] [, objectN ] )

如例:

<script>
    var object1 = {
        amy: 0,
        tom: {
            height: 180, user: {
                age: 20
            }
        },
    }
    var object2 = {
        jim: 100,
        tom: {
            weight: 100, user: {
                age: 100
            }
        }
    }
    console.log($.extend(object1, object2))//淺復制下愈，將object2合并到object1中
    console.log(object1)//object1為返回的最終結果
    console.log(object2)//object2值不變
    console.log($.extend(true, object1, object2))//深復制纽绍，將object2合并到object1中
</script>

打印結果:

console.log($.extend(object1, object2))
//淺復制，將object2合并到object1中,tom對象屬性完全被object2中的tom屬性取代

console.log(object1)//object1為返回合并后的最終結果

 console.log(object2)//object2值不變

console.log($.extend(true, object1, object2))
//深復制势似，將object2合并到object1中


關于深復制和淺復制的區(qū)別參考:https://www.cnblogs.com/tracylin/p/5346314.html

題目4： jQuery 的鏈式調用是什么拌夏？

鏈式調用適用于異步編程，可避免線程阻塞履因，實現(xiàn)原理是在當前函數(shù)執(zhí)行完后return this障簿，即返回該函數(shù)的執(zhí)行環(huán)境，下一個函數(shù)就可以繼續(xù)在這個函數(shù)下運行了栅迄，結果就是多種方法在一個jQuery對象上一個接一個地調用
示例:

<body>
    <p>hello world</p>
    <h2>bybe world</h2>
    <script>
        $('p').on('mouseenter', function () {
            $(this).css('background-color', 'red')
        }).on('mouseleave', function () {
            $(this).css('background-color', 'blue')
        }).parents('body').find('h2').toggle(500)
    </script>
</body>

執(zhí)行效果:


初始狀態(tài)
500ms后bybe world消失

鼠標放置上去

鼠標移開

本例中站故，mouseenter和mouseleave是事件監(jiān)聽，只有事件觸發(fā)后才會執(zhí)行相應函數(shù)中的代碼毅舆，屬于異步執(zhí)行西篓，與以上所說的在同一jQuery上一個接一個地調用方法并不沖突。
結果就是無論如何js引擎都會先執(zhí)行$('p').parents('body').find('h2').toggle(500)切換h2的顯示狀態(tài)為隱藏憋活，再根據(jù)用戶是否觸發(fā)鼠標事件來計算結果岂津。

題目5： jQuery 中 data 函數(shù)的作用?

  • jquery data()的作用

data() 方法向被選元素附加數(shù)據(jù)，或者從被選元素獲取數(shù)據(jù)悦即。
通過data()函數(shù)存取的數(shù)據(jù)都是臨時數(shù)據(jù)吮成，一旦頁面刷新，之前存放的數(shù)據(jù)都將不復存在辜梳。
該函數(shù)屬于jQuery對象(實例)粱甫。如果需要移除通過data()函數(shù)存放的數(shù)據(jù)，請使用 removeData() 函數(shù)作瞄。

  • jquery data的使用方式

1魔种、獲取附加的data的值
$(selector).data(name)
參數(shù)說明
name：可選。規(guī)定要取回的數(shù)據(jù)的名稱粉洼。
如果沒有規(guī)定名稱节预，則該方法將以對象的形式從元素中返回所有存儲的數(shù)據(jù)叶摄。

2、用name和value為對象附加數(shù)據(jù)
$(selector).data(name,value)
參數(shù)說明
selector：為需要附加或者獲取數(shù)據(jù)的對象安拟。
name：參數(shù)為數(shù)據(jù)的名稱蛤吓。
value：參數(shù)為數(shù)據(jù)的值。

3糠赦、使用對象向元素附加數(shù)據(jù)
使用帶有名稱/值對的對象向被選元素添加數(shù)據(jù)会傲。
除了以提供 name 和 value 的方式進行賦值，我們還可以直接傳入另一個對象（ “another” ）作為參數(shù)拙泽。這種情況下淌山，“another” 的屬性名稱和屬性值將被視為多個鍵值對，從中提取的 “name” 和 “value” 都會被復制到目標對象的緩存中顾瞻。
$(selector).data(object)
參數(shù)說明
object：必需泼疑。規(guī)定包含名稱/值對的對象。

示例:

$('body').data('name', 'haha')
$('body').data('hobby', { fav: 'music', love: 'chicken' })
$('body').data({ arr: [1, 2, 3, 4, 5] })

console.log($('body').data('name'))//haha
console.log($('body').data())
//{ name: "haha",hooby: { fav: "music", love: "chicken" },arr: [1,2,3,4,5] }

打印結果:


image.png

題目6：寫出以下功能對應的 jQuery 方法：

  • 給元素 $node 添加 class active荷荤，給元素 $noed 刪除 class active
$node.addClass('active')
$node.removeClass('active')
  • 展示元素$node, 隱藏元素$node
//方法1:
$node.show()
$node.hide()
//方法2:
$node.css('display','block')
$node.css('display','none')
//方法3:
//給node設置css屬性{display: none;},默認隱藏; 增加active屬性 node.active{display: block;}顯示
$node.addClass('active'); //顯示
$node.removeClass('active'); //隱藏
  • 獲取元素$node 的 屬性: id退渗、src、title蕴纳， 修改以上屬性
//獲取屬性
$node.attr('id')
$node.attr('src')
$node.attr('title')
//修改屬性
$node.attr('id','newId')
$node.attr('src','newSrc')
$node.attr('title','newTitle')
  • 給$node 添加自定義屬性data-src
$node.prop('data-src')
  • 在$ct 內部最開頭添加元素$node
$ct.prepend($node)
//或
$node.prependTo($ct)
  • 在$ct 內部最末尾添加元素$node
$ct.append($node)
//或者
$node.appenTo($ct)
  • 刪除$node
$node.remove()
$ct.detach($node)
  • 把$ct里內容清空
$ct.empty()
$ct.text('')
  • 在$ct 里設置 html<div class="btn"></div> 
$ct.html('<div class="btn"></div>')
  • 獲取会油、設置$node 的寬度、高度(分別不包括內邊距古毛、包括內邊距翻翩、包括邊框、包括外邊距)

獲取寬高:

//不包括內邊距
$node.width()
$node.height()
$node.css('width')
$node.css('height')

//包括內邊距
$node.innerWight()
$node.innerHeight()

//包括內邊距,包括邊框
$node.outerWidth() //不傳參數(shù)或參數(shù)為false
$node.outerHeight() //不傳參數(shù)或參數(shù)為false

//包括內邊距,邊框,外邊距
$node.outerWidth(true)
$node.outerHeight(true)

設置寬高:

//不包括內邊距
$node.width(100) //如果沒有規(guī)定長度單位稻薇，則使用默認的 px 單位
$node.height(100)
$node.css({width:'200px',height:'300px'})//設置元素的寬度和高度嫂冻，也可以不要引號和單位

//包括內邊距
$node.innerWidth(30)
$node.innerHeight(30)

//包括內邊距，包括邊框
$node.outerWidth(60)
$node.outerHeight(30)

//包括內邊距颖低，包括邊框絮吵，包括外邊距
$node.outerWidth(70,true)
$node.outerHeight(70,true)
  • 獲取窗口滾動條垂直滾動距離
$(window).scrollTop()
  • 獲取$node 到根節(jié)點水平、垂直偏移距離
$node.offset().left
$node.offset().top
  • 修改$node 的樣式忱屑，字體顏色設置紅色蹬敲，字體大小設置14px
$node.css({
  'color': 'red',
  'font-size': '14px' 
})
  • 遍歷節(jié)點，把每個節(jié)點里面的文本內容重復一遍
$node.each(function(){
  $(this).text($(this).text() + $(this).text())
})
  • 從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
$ct.children('.item')
  • 獲取$ct 里面的所有孩子
$ct.children()
  • 對于$node莺戒，向上找到 class 為'.ct'的父親伴嗡，再從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel')
  • 獲取選擇元素的數(shù)量
$node.length
  • 獲取當前元素在兄弟中的排行
node.index()

題目7：

  • 用jQuery實現(xiàn)以下操作
    • 當點擊$btn 時，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色
<body>
  <button class="btn">按鈕</button>
  <script>
    var $btn = $('.btn')
    $btn.on('click',function(){
            $btn.css({
              'background': 'red'
            })
            setTimeout(function(){
              $btn.css({'background': 'blue'})
            },500)
            })
  </script>
</body>

效果預覽:http://js.jirengu.com/maqihelosa/1/edit

  • 當窗口滾動時从铲，獲取垂直滾動距離
<script>
    $('.content').on('scroll',function(){
      var num = $('.content').scrollTop()
      $('span').text(num)
    })
  </script>

效果預覽:http://js.jirengu.com/bajivefije/1/edit

  • 當鼠標放置到$div 上瘪校，把$div 背景色改為紅色，移出鼠標背景色變?yōu)榘咨?/li> 
<script>
    var $box = $('.box')
    $box.on('mouseenter',function(){
      $(this).css('background','red')
    }).on('mouseleave',function(){
      $(this).css('background','white')
    })
  </script>

效果預覽:http://js.jirengu.com/tayoxeyeye/1/edit

  • 當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色，當輸入框內容改變時把輸入框里的文字小寫變?yōu)榇髮戁逖铮斴斎肟蚴ソ裹c時去掉邊框藍色泣懊，控制臺展示輸入框里的文字
<script>
    var $input = $('.ipt')
    $input.focus(function(){
      $(this).css('border-color','blue')
      .on('keyup',function(){
        $(this).val($(this).val().toUpperCase())
      })
    })
    $input.blur(function(){
      $(this).css('border-color','black')
      console.log($(this).val())
    })
  </script>

效果預覽:http://js.jirengu.com/likesomeca/1/edit

  • 當選擇 select 后，獲取用戶選擇的內容
//html
<select>
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
    <option value="5">item 5</option>
</select>
<p>用戶選取的內容是：<span>item</span></p>

//js
$('select').on('change', function () {
    $('span').text($('select>option:selected').text())
})

效果預覽:http://js.jirengu.com/budugazave/1/edit

題目8： 用 jQuery ajax 實現(xiàn)如下效果麻惶。當點擊加載更多會加載數(shù)據(jù)展示到頁面效果預覽

github代碼

本地mock成功.gif
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末馍刮，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子窃蹋，更是在濱河造成了極大的恐慌卡啰，老刑警劉巖，帶你破解...
    沈念sama閱讀 217,277評論 6贊 503
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件警没，死亡現(xiàn)場離奇詭異匈辱，居然都是意外死亡，警方通過查閱死者的電腦和手機杀迹，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3贊 393
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門亡脸，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人佛南，你說我怎么就攤上這事梗掰∏堆裕” “怎么了嗅回？”我有些...
    開封第一講書人閱讀 163,624評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長摧茴。 經常有香客問我绵载，道長，這世上最難降的妖魔是什么苛白？ 我笑而不...
    開封第一講書人閱讀 58,356評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任娃豹，我火速辦了婚禮，結果婚禮上购裙，老公的妹妹穿的比我還像新娘懂版。我一直安慰自己，他們只是感情好躏率，可當我...
    茶點故事閱讀 67,402評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布躯畴。 她就那樣靜靜地躺著，像睡著了一般薇芝。 火紅的嫁衣襯著肌膚如雪蓬抄。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,292評論 1贊 301
  • 城市分裂傳說
    那天夯到，我揣著相機與錄音嚷缭，去河邊找鬼。 笑死，一個胖子當著我的面吹牛阅爽，可吹牛的內容都是我干的路幸。 我是一名探鬼主播，決...
    沈念sama閱讀 40,135評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼付翁，長吁一口氣：“原來是場噩夢啊……” “哼劝赔！你這毒婦竟也來了？” 一聲冷哼從身側響起胆敞，我...
    開封第一講書人閱讀 38,992評論 0贊 275
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤着帽，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后移层，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體仍翰，經...
    沈念sama閱讀 45,429評論 1贊 314
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3贊 334
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年观话，在試婚紗的時候發(fā)現(xiàn)自己被綠了予借。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡频蛔，死狀恐怖灵迫，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情晦溪，我是刑警寧澤瀑粥，帶...
    沈念sama閱讀 35,492評論 5贊 345
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站三圆，受9級特大地震影響狞换，放射性物質發(fā)生泄漏。R本人自食惡果不足惜舟肉，卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一修噪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧路媚，春花似錦黄琼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0贊 22
  • 一樁弒父案脏款，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至院领，卻和暖如春弛矛，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背比然。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工丈氓， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 47,891評論 2贊 370
  • 代替公主和親
    正文 我出身青樓万俗，卻偏偏與公主長得像湾笛，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子闰歪，可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2贊 354