123

jQuery 中， $(document).ready()是什么意思赊淑？

• $(document).ready()是當(dāng)文檔中的DOM節(jié)點(diǎn)加載完成后，在加載外部圖片和資源前立润，執(zhí)行ready()里面的操作幸冻。
• window.onload是整個(gè)頁面加載完成（包括圖片、CSS浩淘、腳本等）后捌朴，執(zhí)行onload()中的操作吴攒。

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

• $node.html() 獲取元素內(nèi)容，包括html標(biāo)簽和文本內(nèi)容
• $node.text() 只獲取文本內(nèi)容

$.extend 的作用和用法?

   var obj = {};
   var obj1 = {
            name:'hunger',
            age:'24'
  }
    var obj2= {
            name:'chris',
            age:'24'
  }
$.extend(obj,obj1);
console.log(obj)   //    { name:'hunger', age:'24' }  默認(rèn)情況下為淺拷貝砂蔽，可設(shè)置ture為深拷貝
      function person(){
        var obj1 = {
            name:'hunger',
            age:'24'
      }
      var   opts = $.extend({},obj1,boj2);
       console.log(opts);       //Object {name: "chris", age: "24"}
}                     

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

      方法鏈：使用jQuery方法時(shí)，對(duì)象方法返回的是對(duì)象本身左驾，可以調(diào)用對(duì)此對(duì)象的其他jQuery方法镣隶，實(shí)現(xiàn)
      連續(xù)調(diào)用多個(gè)方法
      例：$(this).siblings().removeClass('active');

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

        在HTML5里，有一個(gè)data-屬性诡右，用來方便用戶給標(biāo)簽綁定數(shù)據(jù)安岂，jQuery的data函數(shù)也是這個(gè)作用， 
        可以傳入兩個(gè)參數(shù)帆吻，分別是key和value域那，或者傳入一個(gè)object用于更新數(shù)據(jù)的鍵值對(duì)。
        $("body").data("foo", 52);
        //等價(jià)于
        let obj = {"foo" : 52};
        $("body").data(obj);

寫出以下功能對(duì)應(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('title')
      //修改
       $node.attr('id','idname')
       $node.attr('src','srcname')
       $node.attr('src','titlename')

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

        $node.data('data-src','dataname')

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

        $ct.prepend($node)
        $($node).prependTo($ct)

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

        $ct.append($node);

刪除$node

         $node.remove()

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

         $node.empty()

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

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

獲取淑蔚、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距愕撰、包括內(nèi)邊距束倍、包括邊框、包括外邊距)

        $node.width();//不包括內(nèi)邊距寬度,僅包括內(nèi)容
        $node.height();//不包括內(nèi)邊距高度,僅包括內(nèi)容
        $node.innerWidth();//包括內(nèi)容和內(nèi)邊距寬度
        $node.innerHeight();//包括內(nèi)容和內(nèi)邊距高度
        $node.outerWidth();//包括內(nèi)容,內(nèi)邊距,邊框?qū)挾?        $node.outerHeight();//包括內(nèi)容,內(nèi)邊距,邊框高度
        $node.outerHeight(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距高度
        $node.outerWidth(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距寬度

獲取窗口滾動(dòng)條垂直滾動(dòng)距離

        $(window).scrollTop()

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

         $node.offset()

修改$node 的樣式，字體顏色設(shè)置紅色甥桂，字體大小設(shè)置14px

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

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

          $node.each(function(){
                    console.log( $(this).text());
      })

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

            $ct.find('.item')

對(duì)于$node，向上找到 class 為'.ct'的父親黄选，在從該父親找到'.panel'的孩子

            $node.parents('.ct').find('.panel')

獲取$ct 里面的所有孩子

            $ct.children()

獲取選擇元素的數(shù)量

            $node.length()

獲取當(dāng)前元素在兄弟中的排行

            $node.index();

用jQuery實(shí)現(xiàn)以下操作當(dāng)點(diǎn)擊$btn 時(shí)蝇摸，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色

當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離
當(dāng)鼠標(biāo)放置到$div 上办陷，把$div 背景色改為紅色貌夕，移出鼠標(biāo)背景色變?yōu)榘咨?br> 當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫變?yōu)榇髮懨窬担?dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色啡专，控制臺(tái)展示輸入框里的文字
當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容

demo

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

demo 本地測(cè)試成功