題目1： jQuery 中鞭光， $(document).ready()是什么意思咳胃？
當DOM(文檔對象模型)已經(jīng)加載，并且頁面(包括圖像)已經(jīng)完全呈現(xiàn)時彤灶，會發(fā)生ready事件看幼。
題目2： $node.html()和$node.text()的區(qū)別?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
<div class="wrap">
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="first"></div>
<div id="second"></div>
</div>
<script>
// console.log($('.wrap .first').html());
console.log($('.wrap>ul>li').html()); // 0
console.log($('.wrap>ul>li').text()); // 01234
console.log($('.wrap>ul').html());
/*
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
*/
console.log($('.wrap>ul').text());
/* 0
1
2
3
4
*/
$('#first').text('<b>haha</b>'); // <b>haha</b> jQuery.text()將內容當做文本
$('#second').html('<b>haha</b>'); // haha (以粗體顯示) jQuery.html()將字符串當做HTML
</script>
<!-- 還有一個區(qū)別
.text() 可以被用在XML和HTML文檔中
.html() 僅僅是可以被用在HTML文檔中
-->
</body>
題目3： $.extend 的作用和用法?
擴展一個對象
舉列說明:
<script>
var obj1 = {a:{first:1, second: 2}};
var obj2 = {b:2, c:3};
var obj3 = {d:4, e:5};
var obj4 = {a:{second: 3}, f:6};
/*
$.extend(obj1,obj2); // 將obj2合并到obj1上 obj1為{a:{first:1, second: 2},b:2,c:3}
$.extend(obj1,obj2,obj3); // 將obj2和obj3合并到obj1上 obj1為{a:{first:1, second: 2},b:2,c:3,d:4,e:5}
$.extend(true, obj1, obj4); // 將obj4合并到obj1上，進行遞歸合并 obj為{a:{first:1,second:3}, f:6}
var obj5 = $.extend({}, obj1, obj2); // 將obj1和obj2合并到obj5上,并沒有修改了obj1 因此obj5為{a:{first:1, second: 2},b:2,c:3}
*/
</script>
題目4： jQuery 的鏈式調用是什么幌陕？
使用jQuery的方法時诵姜，對象上的方法返回的是對象本身(return this),因此能接著使用
本地對象的其他jQuery方法,這就是鏈式調用。
<style>
#box {
position: relative;
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
<div id="box">
hihihi
</div>
<button class="box-btn">變寬變大移動</button>
<script>
var $div = $('#box');
// 鏈式調用
$('.box-btn').on("click", function() {
$div.css({width: '150px', height: '150px', 'color': 'blue', 'font-size': '8px'})
.animate({left: '200px'})
.animate({top: '200px'})
.animate({left: '0px'})
.animate({top: '0px'})
.animate({width: '100px', height: '100px'})
})
$div.attr('data-src', '50');
$div.attr('data-src', '70');
console.log($div.attr('data-src'));
</script>
</body>
題目5： jQuery 中 data 函數(shù)的作用
為相關的匹配元素存儲搏熄，隨機數(shù)據(jù)棚唆，或者在指定的數(shù)據(jù)存儲區(qū)返回匹配元素集合中第一個元素的值。
舉列說明
// example 1
$('body').data("foo", 52, 43);
$("body").data("bar", {myType: "test", count: 40});
$("body").data({ baz: [1,2,3] } );
alert($("body").data("hello")); // undefined
alert($("body").data()); // [object Object]
alert($("body").data("foo")); // 52
alert($("body").data("bar").myType); // test
alert($("body").data("baz")[0]); // 1
$("body").data(); // {foo: 52, bar: {myType: "test", count: 40}, baz: [1,2,3] }
// example 2
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name": "John"}'></div>
$('div').data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";
題目6：
寫出以下功能對應的 jQuery 方法：
- 給元素 $node 添加 class active心例，給元素 $noed 刪除 class active
$node.addClass('active')
$node.removeClass('active') - 展示元素$node, 隱藏元素$node
$node.show()
$node.hide() - 獲取元素$node 的 屬性: id宵凌、src、title止后， 修改以上屬性
$(selector).attr(attributeName, value);
$node.attr('id',修改的值)
$node.attr('src', 修改的值)
$node.attr('title',修改的值) - 給$node 添加自定義屬性data-src
$node.attr('data-src'); - 在$ct 內部最開頭添加元素$node
$ct.prepend($node);
$node.prependTo($ct); - 在$ct 內部最末尾添加元素$node
$ct.append($node);
$node.appendTo($ct); - 刪除$node
$node.remove() - 把$ct里內容清空
$ct.empty(); - 在$ct 里設置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>');
*獲取瞎惫、設置$node 的寬度、高度(分別不包括內邊距译株、包括內邊距瓜喇、包括邊框、包括外邊距)
不包括內邊距
$node.width() // 獲取
$node.height()
$node.width(value)//設置
$node.heigth(value)
包括內邊距不包含邊框
$node.innerWidth()
$node.innerHeight()
$node.innerWidth(value)
$node.innerHeight(value)
包含邊框不包括外邊距
$node.outerWidth()
$node.outerHeight()
$node.outWidth(value)
$node.outerHeight(value)
包含外邊距
$node.outerWidth(true)
$node.outerHeight(true)
$node.outerWidth(value)
$node.outerWidth(value) - 獲取窗口滾動條垂直滾動距離
$(selector).scrollTop(); - 獲取$node 到根節(jié)點水平歉糜、垂直偏移距離
$node.offset().left
$node.offset().top - 修改$node 的樣式乘寒，字體顏色設置紅色，字體大小設置14px
$node.css({'color': 'red','font-size': '14px'}); - 遍歷節(jié)點现恼，把每個節(jié)點里面的文本內容重復一遍
$node.each(function(index, node) {
var str = $(this).text();
$(this).text(str+str);
}) - 從$ct 里查找 class 為 .item的子元素
$ct.find('.item'); - 獲取$ct 里面的所有孩子
$ct.children(); - 對于$node肃续，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel'); - 獲取選擇元素的數(shù)量
$(selector).length; - 獲取當前元素在兄弟中的排行
舉列說明
<div class="ct">
<div class="c1">c1</div>
<div class="c2">---</div>
<div class="c1">c1</div>
<div class="c2">----</div>
<div class="c1">c1</div>
<div class="c2 active">----</div>
</div>
console.log($('.ct .active').index()); // 5
console.log($('.ct .active').index('.c2')); // 2 在class為c2中排行第三
題目7：
用jQuery實現(xiàn)以下操作
當點擊$btn 時叉袍，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色
效果預覽
當窗口滾動時始锚，獲取垂直滾動距離
效果預覽
當鼠標放置到$div 上，把$div 背景色改為紅色喳逛，移出鼠標背景色變?yōu)榘咨?br>
效果預覽
當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色瞧捌，當輸入框內容改變時把輸入框里的文字小寫變?yōu)榇髮懀斴斎肟蚴ソ裹c時去掉邊框藍色，控制臺展示輸入框里的文字
預覽
當選擇 select 后姐呐，獲取用戶選擇的內容
預覽
題目8： 用 jQuery ajax 實現(xiàn)如下效果殿怜。`當點擊加載更多會加載數(shù)據(jù)展示到頁面效果預覽
預覽
代碼
