題目1：

jQuery 中， $(document).ready()是什么意思狮惜？

html文檔加載完成再解析js文件內(nèi)容（ready里面的內(nèi)容）

我們知道：js文件的下載解析會阻止其他文件（html,css,圖片等）的下載解析哎壳，如果把js文件的引入放在頭部擒抛，或js代碼放在頭部蔬充，Js文件一下載就立即解析羽莺，產(chǎn)生的問題：
1灭袁，js文件的執(zhí)行受到影響猬错，這時(shí)候html文件還沒有解析，JS是操作dom的文檔都還沒解析茸歧，js的解析執(zhí)行必定受影響
2倦炒，js文件的下載和解析阻止其他文件下載解析，會出現(xiàn)白屏現(xiàn)象

所有软瞎，原生js的辦法是：
1逢唤，<script async src="/xxx"></script>或<script defer src="/xxx"></script>
2，把js文件的引入或代碼放到body的底部
3涤浇，把js代碼包裹在：window.onload=function(){鳖藕。。只锭。}

而jQuery的辦法是：
1著恩，把js代碼包裹在 $(document).ready(function(){。蜻展。喉誊。})
2，把js代碼包裹在$(function(){纵顾。伍茄。。})

上面五種方法都能達(dá)到效果施逾，但是原生的第三種方法會使得幻林，所有的文件及圖片全部下載解析完成再解析js代碼贞盯，這會造成短暫頁面效果不佳
而jQuery的的這兩種方法音念，只會等到dom文檔節(jié)點(diǎn)元素加載解析完成沪饺，就執(zhí)行js代碼，這種在最終的效果上會得到很大的改善

題目2：

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

1闷愤，設(shè)置$node節(jié)點(diǎn)里面的html為<p>段落</p>
$node.html("<p>段落</p>"):
2整葡， 獲取$node里面的所有html代碼
$node.html():
3，設(shè)置$node里面的文本節(jié)點(diǎn)內(nèi)容為哈哈
$node.text("哈哈")
4讥脐，獲取$node所有元素的文本內(nèi)容
$node.text()

題目3：

$.extend 的作用和用法?

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

1遭居，

      var obj1={};
      var obj2={
          name:"liu",
          age:18
       };
     $.extend(obj1,obj2);

相當(dāng)于把obj2拷貝到obj1上

圖片.png

2

       var obj1={};
       var obj2={
          name:"liu",
          age:18
     };
    var obj3={
         name:"vally",
        sex:"man"
     };
  $.extend(obj1,obj2,obj3);

把obj2拷貝到obj1上，再把obj3拷貝到obj1上旬渠，有相同屬性key,覆蓋俱萍，沒有就添加

圖片.png

實(shí)際使用場景：
用戶輸入姓名和年齡，如果用戶沒有輸入年齡告丢，就會使用我們設(shè)置的默認(rèn)年齡
代碼

圖片.png

3枪蘑，返回值為，復(fù)制覆蓋的一個(gè)新對象

       function getnews(obj){
              var sp_obj={
                    name:"游客",
                   age:"不詳"
             };
           // var relobj={};

         //$.extend(relobj,sp_obj,obj);
        var relobj=$.extend({},sp_obj,obj);
        console.log(relobj);
    }

4岖免，

圖片.png

設(shè)置為true岳颇，表示深拷貝
注：
淺拷貝表示拷貝棧里面的內(nèi)容，或則堆里面的第一層內(nèi)容
深拷貝表示拷貝里面的全部內(nèi)容

5颅湘，

圖片.png

每一個(gè)jQuery選擇器上面都有指定對象的屬性

題目4：

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

如下面的寫法就是鏈?zhǔn)秸{(diào)用：

 $('div').find('h3').eq(2).html('Hello');

優(yōu)點(diǎn)：jQuery自動(dòng)緩存每一步的結(jié)果比（不緩存結(jié)果）非鏈?zhǔn)秸{(diào)用，運(yùn)行速度快性能高

題目5：

jQuery 中 data 函數(shù)的作用
在一個(gè)元素上設(shè)置不同的值闯参，之后可以獲取這些值

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });

$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz:   [ 1, 2, 3 ] }

題目6：

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

給元素 $node 添加 class active瞻鹏，給元素 $noed 刪除 class active

添加class： $node.addClass("active")
刪除class：$node.removeClass("active")
有active就刪除沒有就添加：$node.toggleClass("active")

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

展示元素：$node.show()
隱藏元素：$node.hide()
目前是展示就把它隱藏，反之展示：$node.toggle()

獲取元素$node 的 屬性: id鹿寨、src新博、title， 修改以上屬性

獲取元素$node 的 屬性: id释移、src叭披、title:
$node.attr("id")，$node.attr("src")玩讳，$node.attr("title")
修改以上屬性：
$node.attr("id","xx")涩蜘，$node.attr("src","xx")，$node.attr("title","xx")

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

$node.attr("data-src","xx")

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

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

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

$ct .append($node)
$node.appendTo($ct)

刪除$node

detach($node) ：保留刪除元素和它的綁定事件
remove($node) ：只保留刪除元素

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

empty($node)

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

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

獲取熏纯、設(shè)置$node 的寬度同诫、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距樟澜、包括邊框误窖、包括外邊距)

不包括內(nèi)邊距

$node .width()//獲取 content-width
$node .width(50)//設(shè)置
$node .height()//獲取
$node .height(50)//設(shè)置

包括內(nèi)邊距

$node .innerWidth()//獲取 content-width+padding
$node .innerWidth(50)//設(shè)置
$node .innerHeight()//獲取
$node .innerHeight(50)//設(shè)置

包括邊框

圖片.png

$node.outerWidth()//獲取 content-width+padding+border
$node.outerHeight()//獲取

包括外邊距

$node.outerWidth(true)//獲取 content-width+padding+border+margin
$node.outerHeight(true)//獲取

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

$(window).scrollTop()

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

$node.offset()//獲取node到更節(jié)點(diǎn)的top和left的值
$node.offset().top
$node.offset().left
//設(shè)置$node偏移距離
$node.offset({top:40,left:40})

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

方法一
$node.css({"color":"red","font-size":"14px"})
方法二：
.box{
color:red;
font-size:14px
}
$node.addClass("box")

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

$node.each(function(){

 console.log(this.innertext())

})

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

$ct .find(".item")

對于$node，向上找到 class 為’.ct’的父親丙唧，在從該父親找到’.panel’的孩子

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

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

$node.length
$node.size()

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

$node.index()

題目7：

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

1愈魏，當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
2想际，當(dāng)窗口滾動(dòng)時(shí)培漏，獲取垂直滾動(dòng)距離
3，當(dāng)鼠標(biāo)放置到$div 上胡本，把$div 背景色改為紅色牌柄，移出鼠標(biāo)背景色變 為白色
4，當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色侧甫，當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫變?yōu)榇髮懮河叮?dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色，控制臺展示輸入框里的文字
5闺骚， 當(dāng)選擇 select 后彩扔，獲取用戶選擇的內(nèi)容
代碼

題目8：

jQuery ajax 實(shí)現(xiàn)，當(dāng)點(diǎn)擊加載更多會加載數(shù)據(jù)展示到頁面

jquery-loadmore.gif

代碼