$(document).ready()是什么意思萎津？

當(dāng)DOM加載完成時(shí)執(zhí)行相應(yīng)的函數(shù),
原生js提供load事件铸敏，當(dāng)所有資源加載完成后才觸發(fā)相應(yīng)事件稚配。大多情況下當(dāng)DOM結(jié)構(gòu)加載完成時(shí)腳本即可運(yùn)行楞卡，所以說唆樊，使用$(document).ready()不失為一種適當(dāng)?shù)男问健?br> 以下兩種形式皆為正確及等價(jià)

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

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

• $node.html()
  獲取集合中第一個(gè)匹配元素的HTML內(nèi)容宛琅，返回一個(gè)包含標(biāo)簽及內(nèi)容的字符串；
• $node.text()
  得到匹配元素集合中每個(gè)元素的內(nèi)容及它們的后代逗旁，返回的也是一個(gè)字符串嘿辟；

$.extend 的作用和用法

作用：將兩個(gè)或更多個(gè)對象的內(nèi)容合并到第一個(gè)對象;提供兩個(gè)或多個(gè)對象給$.extend()，對象的所有屬性都添加到目標(biāo)對象（target參數(shù)）。如果只有一個(gè)參數(shù)提供給$.extend()红伦，這意味著目標(biāo)參數(shù)被省略英古。在這種情況下，jQuery對象本身被默認(rèn)為目標(biāo)對象昙读。這樣召调，我們可以在jQuery的命名空間下添加新的功能。這對于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時(shí)是很有用的箕戳。
在默認(rèn)情況下某残，通過$.extend()合并操作不是遞歸的;如果第一個(gè)對象的屬性本身是一個(gè)對象或數(shù)組，那么它將完全用第二個(gè)對象相同的key重寫一個(gè)屬性陵吸。這些值不會被合并玻墅。可以通過檢查下面例子中 banana 的值壮虫，就可以了解這一點(diǎn)澳厢。然而，如果將 true 作為該函數(shù)的第一個(gè)參數(shù)囚似，那么會在對象上進(jìn)行遞歸的合并剩拢。
用法：$.extend([deep],target, [,object1] [,objectN])

jQuery的鏈?zhǔn)秸{(diào)用是什么？

對一個(gè)jQuery對象進(jìn)行多次多種方法調(diào)用饶唤，其原理是大多方法最后返回原來的對象（this）徐伐，因?yàn)榉祷氐氖峭粚ο螅枣準(zhǔn)讲僮骺梢猿掷m(xù)下去募狂。
鏈?zhǔn)秸{(diào)用的好處是節(jié)省代碼办素，代碼美觀；
提高代碼效率祸穷；
讓代碼流程更清晰（因?yàn)镴avascript是無阻塞語言性穿，通過事件來驅(qū)動，異步來完成一些本需要阻塞進(jìn)程的操作雷滚。異步編程需曾，編寫代碼時(shí)也是分離的，這就使代碼可讀性變差祈远。而鏈?zhǔn)讲僮鞔敉颍a流程清晰，改善了異步體驗(yàn)车份。）谋减；

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

在匹配元素上儲存相關(guān)數(shù)據(jù)或者返回在匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲的值。

• .data(key,value) 匹配元素上的存儲的相關(guān)數(shù)據(jù)
• .data(obj) 設(shè)置一個(gè)元素的數(shù)據(jù)對象可以擴(kuò)充元素上原先存儲數(shù)據(jù)
• .data(key) 返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲的值躬充。
• .data() 返回匹配元素中存儲的數(shù)據(jù)的值

以下功能對應(yīng)的 jQuery 方法

• 給元素 $node 添加 class active逃顶，給元素 $noed 刪除 class active

$node.addClass("active");
$node.removeClass("active");

• 展示元素$node, 隱藏元素$node

$node.show();
$node.hide();

• 獲取元素$node 的 屬性: id、src充甚、title以政， 修改以上屬性

//獲取屬性
$node.attr("id");
$node.attr("src");
$node.attr("tittle");
//修改屬性
$node.attr("id","newId");
$node.attr("src","newSrc");
$node.attr("title","newTitle");

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

$(node).attr("data-src","456");

• 在$ct 內(nèi)部最開頭添加元素$node

$(node).prepend("<p>new</p>")
$("<p>new</new>").prependTo($(node))

• 在$ct 內(nèi)部最末尾添加元素$node

$(node),append("<p>new</p>")
$("<p>new</p>").appendTo($(node))

• 刪除$node

$(node).remove() //會刪除與其綁定的事件及與該元素相關(guān)的jQuery數(shù)據(jù)，不想刪除這些應(yīng)采用下條方法
$(node).detach()

• 把$ct里內(nèi)容清空

$(ct).empty()

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

$(ct).html('<div class="btn"></btn>')

• 獲取伴找、設(shè)置$node 的寬度盈蛮、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距技矮、包括邊框抖誉、包括外邊距)

//獲取寬高
$(node).width() //返回一個(gè)沒有單位的數(shù)值
$(node).height()
$(node).css("height") //返回一個(gè)帶單位的字符串
//設(shè)置寬高
$(node).width(500) //當(dāng)需要添加單位時(shí)需為一個(gè)字符串
$(node).height(500)
$(node).css("height",500) //當(dāng)需要添加單位時(shí)需為一個(gè)字符串
// 計(jì)算時(shí)不包含內(nèi)邊距的為(不包含border)
$(node).width()
$(node).height()
$(node).css("height")
//計(jì)算時(shí)包含內(nèi)邊距的為（不包含border）
$(node).innerHeight()
$(node).innerWidth()
//計(jì)算時(shí)包含內(nèi)邊距和邊框（如果設(shè)置為ture,那么也將包含margin）
$(node).outerWidth(ture)
$(node).outerHeighth(ture)

• 獲取窗口滾動條垂直滾動距離

$(node).scrollTop()

• 獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離

$(node).offset().left
$(node).offset().top

• 修改$node 的樣式衰倦，字體顏色設(shè)置紅色袒炉，字體大小設(shè)置14px

$(node).css({"color":"red","font-size":"14px"})

• 遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍

$(node).each(function(){
    $(this).text($(this).text() + $(this).text())
})

• 從$ct 里查找 class 為 .item的子元素

$(node).children(".item")

• 獲取$ct 里面的所有孩子

$(ct).children()

• 對于$node樊零，向上找到 class 為'.ct'的父親我磁，在從該父親找到'.panel'的孩子

$(node).parents(".ct").children(".panel")

• 獲取元素的屬性

$(node).length()

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

用jQuery實(shí)現(xiàn)以下操作

• 當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
  代碼實(shí)現(xiàn)
• 當(dāng)窗口滾動時(shí)驻襟，獲取垂直滾動距離
  代碼實(shí)現(xiàn)
• 當(dāng)鼠標(biāo)放置到$div 上夺艰，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?br> 代碼實(shí)現(xiàn)
• 當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色沉衣，當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫變?yōu)榇髮懹舾保?dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色，控制臺展示輸入框里的文字
  代碼實(shí)現(xiàn)

用 jQuery ajax 實(shí)現(xiàn)如下效果豌习。`當(dāng)點(diǎn)擊加載更多會加載數(shù)據(jù)展示到頁面效果預(yù)覽

<!doctype html>
<html>
<head>
    <title>tab切換效果</title>
    <meta charset="UTF-8">
    <style>
        li {
            list-style: none;
        }
        .item {
            width: auto;
            padding: 15px;
            margin: 20px auto;
            border: 1px solid lightgrey;
        }
        .item:hover {
            background-color: green;
            color: white;
        }
        a {
            display: block;
            width: 65px;
            margin: 20px auto;
            text-decoration: none;
            border: 1px solid red;
            border-radius: 5px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="ct">
        <li class="item">內(nèi)容一</li>
        <li class="item">內(nèi)容二</li>
    </div>
    <a href="">加載更多</a>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script>
        var page = 0;
        $("a").on("click",function(){
            $.get("/getNews",{pageIndex:page}).done(function(data){
                appendHtml(data);
                page++;
            }).fail(function(){
                console.log("系統(tǒng)異常４婊选！斑鸦！")
            });
        });

        function appendHtml(news){
            var htmls = '';
            for(var i=0; i<news.length; i++) {
                htmls += '<li class="item"> '+ news[i] + '</li>';
            }
            $(".ct").append(htmls);
        }
    </script>
</body>
</html>

mock

app.get('/getNews', function (req, res) {
    var news = [];
    var index = req.query.pageIndex;
    var length =3;
    var start = index*length;
    var final = start + length;
    for(i= start+1; i<= final; i++ ){
        news.push("內(nèi)容"+ i);
    }
    res.send(news);
})