題目1： jQuery 中盯质， $(document).ready()是什么意思袁串？
當DOM準備就緒時，執(zhí)行的一個函數唤殴。
等價于$().ready(handler) (this is not recommended)和$(handler)
.ready()方法通常用于一個匿名函數：
// Handler for .ready() called.
});```
這等價于調用:
```$(function() {
// Handler for .ready() called.
});```
如果.ready()在DOM被初始化后被調用般婆，新的處理函數通過將立即執(zhí)行到腥。
**題目2：** $node.html()和$node.text()的區(qū)別?
$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方法胶惰，實現連續(xù)調用多個方法。
例：$(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 到根節(jié)點水平简逮、垂直偏移距離
$node.offset();
- 修改$node 的樣式，字體顏色設置紅色尿赚，字體大小設置14px
$node.css({'color': 'red' , 'font-size': '14px'});
- 遍歷節(jié)點散庶，把每個節(jié)點里面的文本內容重復一遍
$('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 的背景色變?yōu)榧t色再變?yōu)樗{色
$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 背景色改為紅色须教，移出鼠標背景色變?yōu)榘咨?
$div.on('mouseenter', function(){
$(this).css('background', 'red');
});
$div.on('mouseleave', function(){
$(this).css('background', '#fff');
});
- 當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色，當輸入框內容改變時把輸入框里的文字小寫變?yōu)榇髮懻栋牛斴斎肟蚴ソ裹c時去掉邊框藍色轻腺，控制臺展示輸入框里的文字
$('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：** 實現一個天氣預報頁面贬养，前端展示自由發(fā)揮，數據接口: http://api.jirengu.com/weather.php
(選做題目)