題目1:Jquery 中, $(document).ready()是什么意思霎烙?和window.onload 的區(qū)別? 還有其他什么寫(xiě)法或者替代方法?
$(document).ready():當(dāng)DOM加載完成后執(zhí)行該函數(shù)患蹂;
window.onload:當(dāng)頁(yè)面加載完成后執(zhí)行該函數(shù)(頁(yè)面內(nèi)容、圖片砸紊、外部資源)传于。
兩者區(qū)別:
執(zhí)行的事件不同:$(document).ready()當(dāng)DOM構(gòu)建完成后就執(zhí)行,而window.onload需要等頁(yè)面內(nèi)所有資源加載完成后。
編寫(xiě)個(gè)數(shù)不同:window.onload只能執(zhí)行一次醉顽,執(zhí)行最后一個(gè)window.onload沼溜。$(document).ready()可以執(zhí)行多個(gè)。
window.onload沒(méi)有其他寫(xiě)法
$(document).ready(function(){});
可簡(jiǎn)寫(xiě)為:
$(function(){})
或者:
$().ready(function(){})
題目2: $node.html()和$node.text()的區(qū)別?
$node.html():返回該節(jié)點(diǎn)下的html內(nèi)容(包括html標(biāo)簽)游添。
$node.text():返回該節(jié)點(diǎn)下的文本內(nèi)容(不包括html標(biāo)簽)系草。
題目3: $.extend 的作用和用法?
語(yǔ)法: jQuery.extend([deep,] target [, object1 ] [, objectN ] );警告: 不支持第一個(gè)參數(shù)傳遞 false 。
在默認(rèn)情況下唆涝,通過(guò)$.extend()合并操作不是遞歸的(淺拷貝);如果第一個(gè)對(duì)象的屬性本身是一個(gè)對(duì)象或數(shù)組找都,那么它將完全用第二個(gè)對(duì)象相同的key重寫(xiě)一個(gè)屬性。這些值不會(huì)被合并廊酣。然而能耻,如果將 true 作為該函數(shù)的第一個(gè)參數(shù),那么會(huì)在對(duì)象上進(jìn)行遞歸的合并(深拷貝)。
淺拷貝(false 默認(rèn)):如果第二個(gè)參數(shù)對(duì)象有的屬性第一個(gè)參數(shù)對(duì)象也有晓猛,那么不會(huì)進(jìn)行相同參數(shù)內(nèi)部的比較饿幅,直接將第一個(gè)對(duì)象的相同參數(shù)覆蓋。
深拷貝(true):如果第二個(gè)參數(shù)對(duì)象有的屬性第一個(gè)參數(shù)對(duì)象也有戒职,還要繼續(xù)在這個(gè)相同的參數(shù)向下一層找栗恩,比較相同參數(shù)的對(duì)象中是否還有不一樣的屬性,如果有洪燥,將其繼承到第一個(gè)對(duì)象磕秤,如果沒(méi)有,則覆蓋捧韵。
作用:
當(dāng)我們提供兩個(gè)或多個(gè)對(duì)象給$.extend()亲澡,對(duì)象的所有屬性都添加到目標(biāo)對(duì)象(target參數(shù))。
如果只有一個(gè)參數(shù)提供給$.extend()纫版,這意味著目標(biāo)參數(shù)被省略床绪。在這種情況下,jQuery對(duì)象本身被默認(rèn)為目標(biāo)對(duì)象其弊。這樣癞己,我們可以在jQuery的命名空間下添加新的功能。這對(duì)于插件開(kāi)發(fā)者希望向 jQuery 中添加新函數(shù)時(shí)是很有用的梭伐。
如果想保留原對(duì)象:var object = $.extend({}, object1, object2);
默認(rèn)情況下痹雅,通過(guò)$.extend()合并操作不是遞歸的:
//默認(rèn)情況淺拷貝
//object1--->{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
//object2的banana覆蓋了object1的banana,但是weight屬性未被繼承
//$.extend(object1, object2);
//深拷貝
//object1--->{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
//object2的banana覆蓋了object1的banana糊识,但是weight屬性也被繼承了
$.extend(true,object1, object2);
題目4: jQuery 的鏈?zhǔn)秸{(diào)用是什么绩社?
jQuery鏈?zhǔn)秸{(diào)用:在對(duì)象上一次性調(diào)動(dòng)多個(gè)方法
$(this).addClass("active").siblings().removeClass("active")
因?yàn)榇蟛糠謱?duì)象方法的最后是return this,所以有了鏈?zhǔn)秸{(diào)用赂苗,簡(jiǎn)易代碼愉耙。
$(#ct).css('color','blue').show(400).hide();
題目5: jQuery 中 data 函數(shù)的作用
作用:data方法允許在DOM元素上綁定任意類(lèi)型的數(shù)據(jù)。
語(yǔ)法:$(“selector”).data(key, value)拌滋。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("div").data("greeting", "Hello World"); //$(“selector”).data(key, value)
});
$("#btn2").click(function(){
alert($("div").data("greeting")); //$(“selector”).data(key)
});
});
</script>
</head>
<body>
<button id="btn1">把數(shù)據(jù)添加到 div 元素</button><br />
<button id="btn2">獲取已添加到 div 元素的數(shù)據(jù)</button>
<div></div>
</body>
</html>
題目6:寫(xiě)出以下功能對(duì)應(yīng)的 jQuery 方法:
1朴沿、給元素 $node 添加 class active,給元素 $noed 刪除 class active
$node.addClass('active');添加 addClass() 方法向被選元素添加一個(gè)或多個(gè)類(lèi)败砂。
該方法不會(huì)移除已存在的 class 屬性赌渣,僅僅添加一個(gè)或多個(gè) class 屬性。
提示:如需添加多個(gè)類(lèi)昌犹,請(qǐng)使用空格分隔類(lèi)名坚芜。
$node.removeClass('active');//刪除removeClass() 方法從被選元素移除一個(gè)或多個(gè)類(lèi)。
注釋?zhuān)喝绻麤](méi)有規(guī)定參數(shù)斜姥,則該方法將從被選元素中刪除所有類(lèi)鸿竖。
語(yǔ)法
$(selector).removeClass(class)
參數(shù) 描述
class
可選路操。規(guī)定要移除的 class 的名稱(chēng)。
如需移除若干類(lèi)千贯,請(qǐng)使用空格來(lái)分隔類(lèi)名。
如果不設(shè)置該參數(shù)搞坝,則會(huì)移除所有類(lèi)搔谴。
2、展示元素$node, 隱藏元素$node
$node.show();//展示
$node.hide();//隱藏
3桩撮、獲取元素$node 的 屬性: id敦第、src、title店量, 修改以上屬性
$node.attr('id');//獲取
$node.attr('id’,'值'); //修改
$node.attr('src');//獲取
$node.attr('src’,'值');//修改
$node.attr('title');//獲取
$node.attr('title’,'值');//修改
4芜果、給$node 添加自定義屬性data-src
$node.data("src",str)
5、在$ct 內(nèi)部最開(kāi)頭添加元素$node
$(".ct").prepend(node);
6融师、在$ct 內(nèi)部最末尾添加元素$node
$(".ct").append(node);
7右钾、刪除$node
$(node).remove();
如需刪除元素和內(nèi)容,一般可使用以下兩個(gè) jQuery 方法:
remove() - 刪除被選元素(及其子元素)
empty() - 從被選元素中刪除子元素
8旱爆、把$ct里內(nèi)容清空
$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();//不包括內(nèi)邊距寬度,僅包括內(nèi)容
$node.height();//不包括內(nèi)邊距高度,僅包括內(nèi)容
$node.innerWidth();//包括內(nèi)容和內(nèi)邊距寬度
$node.innerHeight();//包括內(nèi)容和內(nèi)邊距高度
$node.outerWidth();//包括內(nèi)容,內(nèi)邊距,邊框?qū)挾?br>
$node.outerHeight();//包括內(nèi)容,內(nèi)邊距,邊框高度
$node.outerHeight(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距高度
$node.outerWidth(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距寬度
11、獲取窗口滾動(dòng)條垂直滾動(dòng)距離
$(window).scrollTop()
12桑孩、獲取$node 到根節(jié)點(diǎn)水平拜鹤、垂直偏移距離
$node.offset()
13、修改$node 的樣式流椒,字體顏色設(shè)置紅色署惯,字體大小設(shè)置14px
$node.css({"color":"red","font-size":"14px"})
14、遍歷節(jié)點(diǎn)镣隶,把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
$node.each(function(){
console.log($(this).text())
})
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;針對(duì)數(shù)組說(shuō)的,比如說(shuō)你聲明了一個(gè)數(shù)組,想知道這個(gè)數(shù)組的長(zhǎng)度則用到了length這個(gè)屬性.
$node.length():針對(duì)字符串String說(shuō)的,如果想看這個(gè)字符串的長(zhǎng)度則用到length()這個(gè)方法;
$node.size():針對(duì)泛型集合說(shuō)的,如果想看這個(gè)泛型有多少個(gè)元素,就調(diào)用此方法來(lái)查看;
19咙边、獲取當(dāng)前元素在兄弟中的排行
$node.index();
題目6展示
題目7:用jQuery實(shí)現(xiàn)以下操作
當(dāng)點(diǎn)擊$btn 時(shí)猜煮,讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
當(dāng)窗口滾動(dòng)時(shí),獲取垂直滾動(dòng)距離
當(dāng)鼠標(biāo)放置到$div 上败许,把$div 背景色改為紅色王带,移出鼠標(biāo)背景色變?yōu)榘咨?/h4>
當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色,當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫(xiě)變?yōu)榇髮?xiě)市殷,當(dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色愕撰,控制臺(tái)展示輸入框里的文字
當(dāng)選擇 select 后,獲取用戶(hù)選擇的內(nèi)容
http://js.jirengu.com/sukefuzuxa/1/
題目8: 用 jQuery ajax 實(shí)現(xiàn)如下效果醋寝。當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面[效果預(yù)覽]
題目9: 實(shí)現(xiàn)一個(gè)天氣預(yù)報(bào)頁(yè)面搞挣,前端展示自由發(fā)揮,數(shù)據(jù)接口: http://api.jirengu.com/weather.php
有一個(gè)更好用的天氣 API :心知天氣