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

• ready( handler )

當DOM準備就緒時，指定一個函數來執行。

雖然JavaScript提供了load事件，當頁面呈現時用來執行這個事件，直到所有的東西，如圖像已被完全接收前，此事件不會被觸發。

在大多數情況下，只要DOM結構已完全加載時，腳本就可以運行。傳遞處理函數給.ready()方法，能保證DOM準備好后就執行這個函數，因此，這里是進行所有其它事件綁定及運行其它 jQuery 代碼的最佳地方。

如果執行的代碼需要在元素被加載之后才能使用時，（例如，取得圖片的大小需要在圖片被加載完后才能知道），就需要將這樣的代碼放到 load 事件中。

下面兩種語法全部是等價的：

$(document).ready(handler)
$(handler)

我們經常這么使用

$(function(){
    console.log('ready');
});

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

• html([string])

這是一個讀寫兩用的方法，用于獲取/修改元素的innerHTML

當沒有傳遞參數的時候，返回元素的innerHTML
當傳遞了一個string參數的時候，修改元素的innerHTML為參數值
看個例子

$('div').html()
$('div').html('123')

后續這種讀寫兩用的方法很多，原理都類似

如果結果是多個進行賦值操作的時候會給每個結果都賦值
如果結果多個，獲取值的時候，返回結果集中的第一個對象的相應值

• text()

和html方法類似，操作的是DOM的innerText值

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

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

• 1.當我們提供兩個或多個對象給$.extend()，對象的所有屬性都添加到目標對象（target參數）。

• 2.如果只有一個參數提供給$.extend()，這意味著目標參數被省略。在這種情況下，jQuery對象本身被默認為目標對象。這樣，我們可以在jQuery的命名空間下添加新的功能。這對于插件開發者希望向 jQuery 中添加新函數時是很有用的

目標對象（第一個參數）將被修改，并且將通過$.extend()返回。然而，如果我們想保留原對象，我們可以通過傳遞一個空對象作為目標對象：

var object = $.extend({}, object1, object2);
在默認情況下，通過$.extend()合并操作不是遞歸的;

如果第一個對象的屬性本身是一個對象或數組，那么它將完全用第二個對象相同的key重寫一個屬性。這些值不會被合并，而是被覆蓋。如果將 true作為該函數的第一個參數，那么會在對象上進行遞歸的合并。

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 );//f返回Object1 {apple: 0, banana: {price：200}, cherry: 97, durian: 100}，banana屬性被object2覆蓋。

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

鏈式調用實例：

    $("#mybtn").css("width","100px")
            .css("height","100px")
            .css("background","red");

鏈式調用就是jQuery對象使用方法后繼續調用方法，而不用再次選擇jQuery對象。
原理：實際上鏈式操作僅僅是通過對象上的方法最后 return this 把對象再返回回來，對象當然可以繼續調用方法。
優點：
1.當然是省代碼啦，雖然jQuery對象選擇比DOM對象要方便很多，但是，能省一行是一行，能省一句是一句，并且排版清晰，代碼優雅。
2.鏈式操作最值得稱贊的還是其解決了異步編程模型的執行流程不清晰的問題。jQuery中$(document).ready就非常好的闡釋了這一理念。DOMCotentLoaded是一個事件，在DOM并未加載前，jQuery的大部分操作都不會奏效，但jQuery的設計者并沒有把他當成事件一樣來處理，而是轉成一種“選其對象，對其操作”的思路。$選擇了document對象，ready是其方法進行操作。這樣子流程問題就非常清晰了，在鏈條越后位置的方法就越后執行。

題目5： jQuery 中 data 函數的作用

data()函數用于在當前jQuery對象所匹配的所有元素上存取數據。
通過data()函數存取的數據都是臨時數據，一旦頁面刷新，之前存放的數據都將不復存在。該函數屬于jQuery對象(實例)。如果需要移除通過data()
函數存放的數據，請使用removeData()函數。

data()函數有以下兩種用法：

• 用法一：

jQueryObject.data( [ key [, value ] ])

以指定的鍵名key存取數據。如果指定了value參數，則表示以鍵名key存放值為value的數據；如果沒有指定value參數，則表示讀取之前以鍵名key存放的數據；如果沒有指定任何參數，則以對象形式返回之前存儲的所有數據。

• 用法二：

jQueryObject.data( object )

以對象形式同時傳入任意多個key-value形式的數據，對象的每個屬性就是鍵名key，屬性值就是value。

注意：data()函數的所有"存儲數據"操作針對當前jQuery對象所匹配的每一個元素；所有"讀取數據"操作只針對第一個匹配的元素。

Paste_Image.png

返回值

data()函數的返回值是任意類型，返回值的類型取決于當前data()函數執行的是"存儲數據"操作還是"讀取數據"操作。

如果data()函數執行的是"存儲數據"操作，則返回當前jQuery對象本身；如果是"讀取數據"操作，則返回讀取到的數據。

如果當前jQuery對象匹配多個元素，讀取數據時，data()函數只以其中第一個匹配的元素為準。

如果執行data(key)函數(僅傳入一個參數key)時找不到相應的數據，則返回undefined。如果執行data()函數(不帶任何參數)時找不到相應的數據，則返回一個空的對象(沒有任何屬性)。

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

• 給元素 $node 添加 class active
  $node.addClass( "active" );

• 給元素 $noed 刪除 class active
  $node.removeClass( "active" );

• 展示元素$node, 隱藏元素$node
  $node.show();$node.hide();

• 獲取元素$node 的 屬性: id、src、title， 修改以上屬性
  $node.attr('src');$node.attr('id','value');
  $node.attr('id');$node.attr('src','value');
  $node.attr('title');$node.attr('title','value');

• 給$node 添加自定義屬性data-src

• 在$ct 內部最開頭添加元素$node
  $node.prepend('content')

• 在$ct 內部最末尾添加元素$node
  $node.append('content')

• 刪除$node
  $node.remove

• 把$ct里內容清空
  $node.empty()

• 在$ct 里設置 html <div class="btn"></div>
  $ct.html('<div class="btn"></div>')

• 獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
  $node.width()和$node.height()//content的寬和高
  $node.innerWidth()和$node.innerHeight()//content，padding的寬和高
  $node.outerWidth()和$node.outerHeight;//content,padding,border的寬和高
  $node.outerWidth(true)和$node.outerHeight(true);//content,padding,border,margin的寬和高

• 獲取窗口滾動條垂直滾動距離
  $node.scrollTop()

• 獲取$node 到根節點水平、垂直偏移距離
  $node.offset().left;
  $node.offset().top;

• 修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
  $node.css({
  color:red,
  font-size:14px,
  })

• 遍歷節點，把每個節點里面的文本內容重復一遍
  $node.each(function(){
  $(this).text($(this)+$(this))
  })

• 從$ct 里查找 class 為 .item的子元素
  $ct.find('.item')

• 獲取$ct 里面的所有孩子
  $ct.children()

• 對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
  $node.parent('.ct').children('.panel')

• 獲取選擇元素的數量
  $node.length()

• 獲取當前元素在兄弟中的排行
  $node.index()

題目7：用jQuery實現以下操作

• 當點擊$btn 時，讓 $btn 的背景色變為紅色再變為藍色

• 當窗口滾動時，獲取垂直滾動距離

• 當鼠標放置到$div 上，把$div 背景色改為紅色，移出鼠標背景色變為白色

• 當鼠標激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時- 把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字

• 當選擇 select 后，獲取用戶選擇的內容

效果
demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    body{
        height: 900px;
        background-color: #999;
        font-size: 24px;
    }
    div{
        margin: 30px auto;
        padding: 30px;
        width: 500px;
        background-color: #ddd;
        text-align: center;
    }
    #btn{
        width: 90px;
        height: 40px;
        font-size: 18px;
        line-height: 20px;
        background-color: orange;
        color: white;
        border-radius: 3px;
        border:none;
    }
    #input{
        width: 200px;
        height: 40px;
        padding: 0 10px;
        border-radius: 3px;
    }
    #select{
        padding: 0 10px;
        margin-bottom: 20px;
        width: 120px;
        height: 40px;
        font-size: 24px;
        border-radius: 3px;
    }
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<div>
    <button id="btn">點一下</button>
</div>
<div>垂直滾動距離<span class="scroll">0</span>px</div>
<div class="bk"></div>
<div>
    <input id="input" type="text" name="" placeholder="在這里輸入">
</div>
<div>
    <label name="你的愛車">dreamcar</label>
    <select id="select" name="你的愛車">
        <option value="奔馳">奔馳</option>
        <option value="寶馬">寶馬</option>
        <option value="奧迪">奧迪</option>
    </select>
    <h2></h2>
</div>
<script type="text/javascript">

//當點擊$btn 時，讓 $btn 的背景色變為紅色再變為藍色
$('#btn').on('click',function(){
    $('#btn').css("background-color", "red")
    setTimeout(function() {
        $('#btn').css("background-color","blue")
    }, 1000)
}) 

//當窗口滾動時，獲取垂直滾動距離
$(window).on('scroll', function() {
    $('.scroll').text( $(window).scrollTop() )
})

//當鼠標放置到$div 上，把$div 背景色改為紅色，移出鼠標背景色變為白色
$('.bk').on('mouseenter',function(){
    $('.bk').css("background-color","red")
})
$('.bk').on('mouseout',function(){
    $('.bk').css("background-color","#eee")
})

//當鼠標激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字
$('#input').on('focus',function(){
    $('#input').css("border-color","blue")
})
$('#input').on('keyup',function(){
    $('#input').val($('#input').val().toUpperCase())
})
$('#input').on('blur',function(){
    $('#input').css("border","none")
    console.log($('#input').val())
})

//當選擇 select 后，獲取用戶選擇的內容
$('#select').on('change',function(){
    console.log($('#select').val())
    $('h2').text("你的dreamcar是"+$('#select').val())
})

</script>
</body>
</html>

題目8： 用 jQuery ajax 實現如下效果。`當點擊加載更多會加載數據展示到頁面效果預覽345

效果
demo

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加載新聞</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ol,ul{list-style: none;}

ul > li{
    margin:10px;
    border:1px solid #eee;
    padding: 10px;
    font-size: 20px;
}
ul > li:hover{
    background-color: green;
    color: white;
}   
button{
    display: block;
    margin: 40px auto;
    padding: 15px;
    font-size: 24px;
    color: white;
    background-color: orange;
    border-radius: 3px;
    border:none; 
    cursor: pointer;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<ul>
    <li>新聞0</li>
    <li>新聞1</li>
</ul>
<button>加載更多新聞</button>
<script type="text/javascript">
    var isLoading = false

    $('button').on('click',function(e){
        e.preventDefault();
        if (isLoading) {
            return ;
        }
        isLoading = true;
        $.ajax({
            url:'http://localhost:8080/getNews?',
            method:'get',
            data:{length:5,
                  index:$('li').last().index()
            }
            }).done(function(data){
                append(data)
                isLoading = false;
            })
              .fail(function(jqXHR, textStatus){
                 console.log(textStatus);
            })
            console.log(data)
        })
    function append(arr){
        arr.forEach(function(e,i,arr){
            var $xxx = $('<li></li>')
            $xxx.text(arr[i]).appendTo($('ul'))
        })
    }
</script>
</body>
</html>

router.js

router.get('/getNews', function(req, res) {
  var length = req.query.length // 通過 req.query獲取請求參數
  var index = parseInt(req.query.index) // 通過 req.query獲取請求參數
  var result = []
  console.log(typeof(index))
  console.log(index)
  for(var i = 0;i < length ;i++){
    result.push("新聞"+(index+i+1))
  }

  res.send(result)
})

題目9(選做)： 實現一個天氣預報頁面，UI 如下圖所示(可自由發揮)。數據接口:

獲取當前用戶所在城市接口：//jirenguapi.applinzi.com/city.php
服務端支持 CORS 跨域調用，前端可直接使用 ajax 獲取數據

獲取某城市對應的天氣接口：//jirenguapi.applinzi.com/weather.php?city=北京
服務端支持 CORS 跨域調用，前端可直接使用 ajax 獲取數據, 如果不傳遞參數默認獲取當前用戶所在城市的天氣