題目1： jQuery 中， $(document).ready()是什么意思？
當DOM準備就緒時，執行的一個函數。
等價于$().ready(handler) (this is not recommended)和$(handler)
.ready()方法通常用于一個匿名函數：
// Handler for .ready() called.
});```
這等價于調用:
```$(function() {
// Handler for .ready() called.
});```
如果.ready()在DOM被初始化后被調用，新的處理函數通過將立即執行。
**題目2：** $node.html()和$node.text()的區別?
$node.html()獲取集合中第一個匹配元素的HTML內容 或 設置每一個匹配元素的html內容。
$node.text()得到匹配元素集合中每個元素的文本內容結合，包括他們的后代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容。
和 .html() 方法不同， .text() 在XML 和 HTML 文檔中都能使用。.text() 方法返回一個字符串，包含所有匹配元素的合并文本。
.text()方法不能使用在 input 元素或scripts元素上。 input或 textarea需要使用 .val()方法獲取或設置文本值。得到scripts元素的值，使用.html()方法。
**題目3：** $.extend 的作用和用法?
作用：將兩個或更多對象的內容合并到第一個對象。
用法： jQuery.extend([deep,] target [, object1 ] [, objectN ] )
**題目4：** jQuery 的鏈式調用是什么？
方法鏈：使用jQuery方法時，對象方法返回的是對象本身，可以調用對此對象的其他jQuery方法，實現連續調用多個方法。
例：$(this).siblings().removeClass('active');
**題目5：** jQuery 中 data 函數的作用
在匹配元素上存儲任意相關數據 或 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。
.data( key, value )
.data( obj )
**題目6：**
寫出以下功能對應的 jQuery 方法：
- 給元素 $node 添加 class active
$node.addClass('active');
- 給元素 $noed 刪除 class active
$node.removeClass('active');
- 展示元素$node, 隱藏元素$node
$node.css('display', 'block');
$node.css('display', 'none');
- 獲取元素$node 的 屬性: id、src、title， 修改以上屬性
$node.attr('id', '123');
$node.attr('src', '123');
$node.attr('src', '123');
- 給$node 添加自定義屬性data-src
$node.attr('data-src');
- 在$ct 內部最開頭添加元素$node
$ct.prepend($node);
- 在$ct 內部最末尾添加元素$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.innerWidth(); //方法返回元素的寬度（包括內邊距）
$node.innerHeight(); //方法返回元素的高度（包括內邊距）
$node.outerWidth(); //方法返回元素的寬度（包括內邊距和邊框）
$node.outerHeight(); //方法返回元素的高度（包括內邊距和邊框）
$node.outerWidth(true); //返回元素的寬度（包括內邊距、邊框和外邊距）
$node.outerHeight(true); //返回元素的高度（包括內邊距、邊框和外邊距）
- 獲取窗口滾動條垂直滾動距離
$('body').height();
- 獲取$node 到根節點水平、垂直偏移距離
$node.offset();
- 修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({'color': 'red' , 'font-size': '14px'});
- 遍歷節點，把每個節點里面的文本內容重復一遍
$('body').text();
- 從$ct 里查找 class 為 .item的子元素
$ct.hasClass('.item');
- 獲取$ct 里面的所有孩子
$ct.children();
- 對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel');
- 獲取選擇元素的數量
$('div').length();
- 獲取當前元素在兄弟中的排行
$node.index();
**題目7：**
用jQuery實現以下操作
- 當點擊$btn 時，讓 $btn 的背景色變為紅色再變為藍色
$btn.on('click', function(){
$(this).css('background', 'red');
setTimeout(function(){
$(this).css('background', 'blue');
}, 300);
})
- 當窗口滾動時，獲取垂直滾動距離
$(window).on('scroll', function(){
console.log($(window).scrollTop());
})
- 當鼠標放置到$div 上，把$div 背景色改為紅色，移出鼠標背景色變為白色
$div.on('mouseenter', function(){
$(this).css('background', 'red');
});
$div.on('mouseleave', function(){
$(this).css('background', '#fff');
});
- 當鼠標激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字
$('input').on('focus', function(){
$(this).css('border-color', 'blue');
})
$('input').on('input', function(){
$(this).val($(this).val().toUppCase());
})
$('input').on('blur', function(){
$(this).css('border-color', 'none');
console.log($(this).val());
})
- 當選擇 select 后，獲取用戶選擇的內容
$('.select').on('change', function(){
$('.show').text($('.select option:selected').text());
})
**題目8：** 用 jQuery ajax 實現如下效果。`當點擊加載更多會加載數據展示到頁面[效果預覽188](http://jrgzuoye.applinzi.com/%E4%BD%9C%E4%B8%9A%E5%AE%89%E6%8E%92/jscode/JS9-jqueryajax/1.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
ul,li{
margin: 0;
padding: 0;
}
#ct li{
list-style: none;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
cursor: pointer;
}
#load-more{
display: block;
margin: 10px auto;
}
.btn{
display: inline-block;
text-decoration: none;
color: #E27272;
border: 1px solid #E27272;
border-radius: 3px;
text-align: center;
height: 40px;
width: 80px;
line-height: 40px;
}
.hover{
background: green;
color: #fff;
}
</style>
</head>
<body>
<ul id='ct'>
<li>內容1</li>
<li>內容2</li>
</ul>
<a href="#" class='btn' id='load-more'>加載更多</a>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
var $loadMoreBtn = $('#load-more');
var cur = 2;
$('li').on('mouseenter', function(e){
$(this).addClass('hover');
})
$('li').on('mouseleave', function(e){
$(this).removeClass('hover');
})
$('.btn').on('click', function(e){
e.preventDefault();
if($(this).data === 'loading'){
return;
}
$(this).data('loading', true).css('color', '#888');
$.ajax({
url: 'loading...',
dataType: 'json',
type: 'get',
data: {
start: cur,
len: 6
},
success: function(json){
onSuccess(json);
},
error: function(){
onError();
}
});
});
function onSuccess(json){
$loadMoreBtn.data('loading', false).text('加載更多');
if (json.status == 1){
append(json.data);
cur +=6;
}else{
alert('獲取數據失敗');
}
}
function onError(){
$loadMoreBtn.data('loading', false).text('加載更多');
alert('系統異常');
}
function append(arr){
for(var i = 0; i< arr.length; i++){
$('.ct').append('<li>'+ arr[i] +'</li>')
}
}
</script>
</body>
</html>
http://js.jirengu.com/seyipofubo/2/edit
**題目9：** 實現一個天氣預報頁面，前端展示自由發揮，數據接口: http://api.jirengu.com/weather.php
(選做題目)