問(wèn)答
1.Jquery 中， $(document).ready()是什么意思？和window.onload 的區(qū)別？ 還有其他什么寫法或者替代方法？
**(document).ready()**是DOM加載完成時(shí)執(zhí)行相應(yīng)的函數(shù),而不必等待頁(yè)面中的圖像加載完畢骚烧； **window.onload**是當(dāng)頁(yè)面全部加載完成時(shí)執(zhí)行相應(yīng)的函數(shù)，比如頁(yè)面內(nèi)容嫌吠、圖片止潘、資源等全部加載完成 **區(qū)別：** 1.執(zhí)行時(shí)間 ``window.onload``必須等到頁(yè)面內(nèi)包括``圖片``的所有元素加載完畢后才能執(zhí)行。 ``(document).ready()
是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行辫诅，不必等到所有元素都加載完畢凭戴。 2.編寫個(gè)數(shù)不同window.onload不能同時(shí)編寫多個(gè)，如果有多個(gè)window.onload方法炕矮，只會(huì)執(zhí)行最后一個(gè)(document).ready()``可以同時(shí)編寫多個(gè)么夫，并且都可以得到執(zhí)行 3.簡(jiǎn)化寫法 ``window.onload``沒(méi)有簡(jiǎn)化寫法； ``(document).ready(function(){...})``可以簡(jiǎn)寫成(function(){})或().ready(function(){});
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<iframe src="http://www.taobao.com"></iframe>
<script>
$( window ).load(function() { //加載完執(zhí)行肤视，編寫多個(gè)都執(zhí)行
console.log( "window loaded 1" );
});
$( window ).load(function() {
console.log( "window loaded 11" );
});
window.onload=function() {
console.log( "window loaded 2" );
};
window.onload=function() { //加載完執(zhí)行档痪，編寫多個(gè)只執(zhí)行最后一個(gè)
console.log( "window loaded 22" );
};
$( document ).ready(function() { //最先被執(zhí)行，多個(gè)都執(zhí)行
console.log( "document loaded 3" );
});
$( document ).ready(function() {
console.log( "document loaded 33" );
});
</script>
</body>
</html>
注意：
由于在$(document).ready() 方法內(nèi)注冊(cè)的事件邢滑，只要 DOM 就緒就會(huì)被執(zhí)行腐螟，因此可能此時(shí)元素的關(guān)聯(lián)文件未下載完。例如與圖片有關(guān)的 html 下載完畢困后，并且已經(jīng)解析為 DOM 樹了乐纸，但很有可能圖片還沒(méi)有加載完畢，所以例如圖片的高度和寬度這樣的屬性此時(shí)不一定有效摇予。
要解決這個(gè)問(wèn)題可以使用jquery中的load方法汽绢，如果處理函數(shù)綁定給 window 對(duì)象，則會(huì)在所有內(nèi)容(包括窗口侧戴、框架宁昭、對(duì)象和圖像等)加載完畢后觸發(fā)跌宛；如果處理函數(shù)綁定在元素上，則會(huì)在元素的內(nèi)容加載完畢后觸發(fā)积仗。
例如
$(window).load(function (){
// 編寫代碼
});
$("img").load(function(){
// 編寫代碼
});
2.node.html()和node.text()的區(qū)別?
$node.html()是獲取元素的html內(nèi)容（包含標(biāo)簽和文本）
$node.text()是獲取元素文本內(nèi)容
舉例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<div>
這是用于測(cè)試
<h1>測(cè)試html疆拘，text</h1>
</div>
<script>
$(document).ready(function(){
console.log( $('div').html());
console.log( $('div').text());
console.log( $('h1').html() );
console.log( $('h1').text() );
console.log( $('h1').html()===$('h1').text() );
//當(dāng)元素內(nèi)只有文本時(shí)，html和text獲取都是一樣的
})
</script>
</body>
</html>
3.$.extend 的作用和用法?
描述：將兩個(gè)或更多對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象寂曹。
第1種情況：
jQuery.extend( target [, object1 ] [, objectN ] )
當(dāng)我們提供兩個(gè)或多個(gè)對(duì)象給$.extend()入问，對(duì)象的所有屬性都添加到目標(biāo)對(duì)象（target參數(shù)）。
如果附加對(duì)象中的屬性在目標(biāo)對(duì)象中沒(méi)有稀颁，那么在目標(biāo)對(duì)象中添加該屬性。如果附件對(duì)象中的屬性在目標(biāo)對(duì)象中也有楣黍，那么目標(biāo)對(duì)象中屬性的值被該屬性的值所覆蓋匾灶。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<div id="test"></div>
<script>
var object1={
apple:1,
banana:{weight:23,price:100},
orange:23
};
var object2={
banana:{price:300,color:'yellow'},
pineapple:50
}
$.extend( object1,object2 );
$('#test').append( JSON.stringify( object1 ))
</script>
</body>
</html>
第2種情況：
jQuery.extend( [deep ], target, object1 [, objectN ] )
1.deep
類型: [Boolean]
如果是true，合并成為遞歸（又叫做深拷貝）租漂。
2.target
類型: [Object]
對(duì)象擴(kuò)展阶女。這將接收新的屬性。
3.object1
類型: [Object]
一個(gè)對(duì)象哩治，它包含額外的屬性合并到第一個(gè)參數(shù).
4.objectN
類型: [Object]
包含額外的屬性合并到第一個(gè)參數(shù)
這個(gè)用法多了一個(gè)參數(shù)true秃踩，它會(huì)用遞歸的方式去合并對(duì)象，并且是深拷貝业筏。與上面的用法不同處在于如果目標(biāo)對(duì)象的某個(gè)屬性在附加對(duì)象中有憔杨，那么這個(gè)屬性的值會(huì)發(fā)生合并，而不是覆蓋蒜胖。
同上
$.extend( true,object1,object2 );
第3種情況
var object = $.extend({}, object1, object2);
目標(biāo)對(duì)象（也就是第一個(gè)參數(shù)）將被修改消别，并且將通過(guò)$.extend()返回。將目標(biāo)對(duì)象設(shè)為{}台谢，它是合并多個(gè)對(duì)象寻狂，但是不改變?cè)瓕?duì)象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<div id="test"></div>
<script>
var object1={
apple:1,
banana:{weight:23,price:100},
orange:23
};
var object2={
banana:{price:300,color:'yellow'},
pineapple:50
}
var settings=$.extend( {},object1,object2 );
$('#test').append( JSON.stringify( object1 )+'<br>');
$('#test').append( JSON.stringify( object2 )+'<br>');
$('#test').append( JSON.stringify( settings ));
</script>
</body>
</html>
//extend默認(rèn)生成的是淺拷貝對(duì)象朋沮，將上面加個(gè)ture就變?yōu)樯羁截悓?duì)象
var settings=$.extend(true, {},object1,object2 );
淺拷貝和深拷貝
<script>
var obj1 = {
a:{a:1,b:2},
}
var j1 =$.extend({},obj1)
var j2 =$.extend(true,{},obj1)
obj1.a.b =33333
console.log(obj1) //{ a:{a:1,b:333} }
console.log(j1) //{ a:{a:1,b:333} }
console.log(j2) //{ a:{a:1,b:2} } //j2是深拷貝蛇券，它開辟了另外的空間，所以值沒(méi)有變化
</script>
4.JQuery 的鏈?zhǔn)秸{(diào)用是什么樊拓？
jQuery的鏈?zhǔn)秸{(diào)用就是指對(duì)一個(gè)jquery對(duì)象連續(xù)的使用jQuery方法纠亚。
原理是執(zhí)行完一個(gè)方法后就返回對(duì)象本身（return this），然后使用本對(duì)象的其他jQuery方法骑脱。
例如：
$("#Test").addClass('style').find("div").eq(0).fadeOut(200);
上面的例子意為：先為id為Test的對(duì)象添加"style"這個(gè)樣式菜枷，再找尋其下的第一個(gè)div標(biāo)簽，并使其淡出叁丧。通過(guò)上面看出鏈?zhǔn)讲僮骶褪菄@一個(gè)jQuery對(duì)象進(jìn)行的啤誊。
作用：讓代碼更加簡(jiǎn)潔易讀岳瞭，減少重復(fù)性代碼，提高性能蚊锹。
5.JQuery ajax 中緩存怎樣控制?
jQuery ajax利用cache這個(gè)參數(shù)來(lái)控制是否緩存頁(yè)面瞳筏。當(dāng)為ture時(shí)則緩存頁(yè)面（默認(rèn)為ture，除了dataType為jsonp及script以外）牡昆；false為不緩存頁(yè)面姚炕，即每當(dāng)發(fā)起ajax請(qǐng)求時(shí)，都會(huì)向后臺(tái)請(qǐng)求數(shù)據(jù)丢烘；
其實(shí)不緩存頁(yè)面的實(shí)現(xiàn)原理就是在GET請(qǐng)求參數(shù)后面附加"_={timestamp}"（時(shí)間戳）柱宦；
$.ajax({
cache:true //true開啟緩存,false為關(guān)閉
});
注意：只有當(dāng)使用GET方法時(shí)，設(shè)置cache為false是有用的播瞳。而使用POST方法時(shí)掸刊，則每次都會(huì)被認(rèn)為是新的請(qǐng)求，不會(huì)緩存頁(yè)面赢乓。
6.jquery 中 data 函數(shù)的作用
描述：存儲(chǔ)任意數(shù)據(jù)到指定的元素或者返回設(shè)置的值忧侧。
可以向元素附加數(shù)據(jù),以 .data(key,value)或.data(obj)的形式;
可以從元素上讀取數(shù)據(jù),以.data(key)或者.data()的形式
$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
console.log( $( "body" ).data( "foo" ) );
console.log( $( "body" ).data( "bar" ) );
console.log( $( "body" ).data( "baz" ) );
console.log( $( "body" ).data() );
代碼
一、寫出以下功能對(duì)應(yīng)的 Jq 方法：
1.給元素 node 添加 class active牌芋，給元素noed 刪除 class active
$node.addClass('active');
$node.removeClass('active');
2.展示元素node, 隱藏元素node
$node.show();
$node.hide();
3.獲取元素$node 的 屬性: id蚓炬、src、title躺屁， 修改以上屬性
獲取元素屬性值
$node.attr('id');
$node.attr('src');
$node.attr('title');
修改元素屬性值
$node.attr('id',xxx);
$node.attr('src',xxx);
$node.attr('title',xxx);
4.給$node 添加自定義屬性data-src
$node.attr('data-src',xxx);
5.在ct 內(nèi)部最開頭添加元素node
$ct.prepend('<li>遛狗</li>')
6.在ct 內(nèi)部最末尾添加元素node
$ct.append('<li>看電影</li>');
或者
var $li=$('<li>看電影</li>');
$ct.append( $li );
7.刪除$node
remove() - 刪除被選元素（及其子元素）
$node.remove();
8.把$ct里內(nèi)容清空
empty() - 從被選元素中刪除子元素
$ct.empty();
9.在$ct 里設(shè)置 html <div class="btn"></div>
$ct.html('<div class="btn></div>');
10.獲取肯夏、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距楼咳、包括內(nèi)邊距熄捍、包括邊框、包括外邊距)
$node.width(); //設(shè)置或返回元素的寬度（不包括內(nèi)邊距母怜、邊框或外邊距）
$node.height(); //設(shè)置或返回元素的高度（不包括內(nèi)邊距余耽、邊框或外邊距）
$node.width(500).height(500); //設(shè)置元素的寬高，jQuery會(huì)自動(dòng)加上像素單位（px）
$node.innerWidth(); //返回元素的寬度（包括內(nèi)邊距）
$node.innerHeight(); //返回元素的高度（包括內(nèi)邊距）
$node.outerWidth(); //返回元素的寬度（包括內(nèi)邊距和邊框）
$node.outerHeight(); //返回元素的高度（包括內(nèi)邊距和邊框）
$node.outerWidth(true); //返回元素的寬度（包括內(nèi)邊距苹熏、邊框和外邊距）
$node.outerHeight(true); //返回元素的寬度（包括內(nèi)邊距碟贾、邊框和外邊距）
注意：
.css( "height" )和.height()的區(qū)別:
.height()返回一個(gè)無(wú)單位的像素值（比如說(shuō)，400）
.css( "height" )返回一個(gè)帶完整單位的值（比如說(shuō)轨域，400px）
<fieldset>
<style>
div{
box-sizing:border-box;
width:100px;
height: 100px;
background:red;
border:10px solid;
}
</style>
<div></div>
<script>
console.log( $('div').css('width') );
console.log( $('div').width() );
</script>
</fieldset>
當(dāng)元素為box-sizing:border-box;時(shí),使用和獲取/設(shè)置寬高的方法要慎重.
11.獲取窗口滾動(dòng)條垂直滾動(dòng)距離
scrollTop() //用于獲得針對(duì)匹配的元素集合中第一個(gè)元素的滾動(dòng)條的當(dāng)前垂直位置
$(document).scrollTop();
12.獲取$node 到根節(jié)點(diǎn)水平袱耽、垂直偏移距離
$node.offset().left //水平偏移距離
$node.offset().top //垂直偏移距離
offset()方法返回或設(shè)置匹配元素相對(duì)于文檔的偏移（位置）。
并且返回第一個(gè)匹配元素的偏移坐標(biāo)干发。該方法返回的對(duì)象包含兩個(gè)整型屬性：top 和 left朱巨，以像素計(jì)。此方法只對(duì)可見元素有效枉长。
<p>本段落的偏移</p>
<button>獲得 offset</button>
<script>
$(document).ready(function(){
$("button").click(function(){
console.log( $('p').offset() )
});
});
</script>
13.修改$node 的樣式冀续，字體顏色設(shè)置紅色琼讽，字體大小設(shè)置14px
$node.css({
'color':'red',
'font-size':'14px'
});
14.遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
.each( function(index, Element) ) //遍歷一個(gè)jQuery對(duì)象洪唐，為每個(gè)匹配元素執(zhí)行一個(gè)函數(shù)钻蹬。
$( "li" ).each(function( index ) { //這里的參數(shù)是數(shù)字索引和dom元素
console.log( index + ": "" + $(this).text() );
});
或者
var obj = {
"flammable": "inflammable",
"duh": "no duh"
};
$.each( obj, function( key, value ) { //這里的參數(shù)是屬性和值
console.log( key + ": " + value );
});
為什么上面兩種例子回調(diào)函數(shù)中參數(shù)不一樣？
each處理json數(shù)據(jù)之所以能循環(huán)每一個(gè)屬性凭需，因?yàn)閖son格式內(nèi)是一組無(wú)序的屬性-值问欠，既然無(wú)序，又何來(lái)數(shù)字呢粒蜈。而這個(gè)value等同于obj[key]顺献。
15.從$ct 里查找 class 為 .item的子元素
$ct.find('.item');
16.獲取$ct 里面的所有孩子
$ct.children();
17.對(duì)于$node，向上找到 class 為’.ct’的父親枯怖，在從該父親找到’.panel’的孩子
$node.parents('.ct').find('.panel')
18.獲取選擇元素的數(shù)量
$node.length
19.獲取當(dāng)前元素在兄弟中的排行
$node.index();
二滚澜、簡(jiǎn)單實(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)背景色變?yōu)榘咨?br>
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)色蚂斤，控制臺(tái)展示輸入框里的文字
5.當(dāng)選擇 select 后存捺，獲取用戶選擇的內(nèi)容
代碼運(yùn)行結(jié)果
三、用 jquery ajax 實(shí)現(xiàn)如下效果曙蒸。當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面捌治。當(dāng)鼠標(biāo)放置上去會(huì)變色
<?php
// 后端 php 測(cè)試接口文件
$start = $_GET['start']; //2
$len = $_GET['len']; //6
$items = array();
for($i = 0; $i < $len; $i++){
array_push($items, '內(nèi)容' . ($start+$i));
}
$ret = array('status'=>1, 'data'=>$items);
//{status: 1, data: ['內(nèi)容1','內(nèi)容2','內(nèi)容3']}
sleep(0.5);
echo json_encode($ret);
