進(jìn)階15發(fā)表

題目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()合并操作不是遞歸的:

Paste_Image.png

//默認(rèn)情況淺拷貝
//object1--->{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
//object2的banana覆蓋了object1的banana,但是weight屬性未被繼承
//$.extend(object1, object2);
Paste_Image.png

//深拷貝
//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>
Paste_Image.png
Paste_Image.png

題目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);


Paste_Image.png

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 :心知天氣

Paste_Image.png
Paste_Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末音羞,一起剝皮案震驚了整個(gè)濱河市囱桨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌嗅绰,老刑警劉巖舍肠,帶你破解...
    沈念sama閱讀 223,126評(píng)論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異窘面,居然都是意外死亡貌夕,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門(mén)民镜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)啡专,“玉大人,你說(shuō)我怎么就攤上這事制圈∶峭” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,941評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵鲸鹦,是天一觀的道長(zhǎng)慧库。 經(jīng)常有香客問(wèn)我,道長(zhǎng)馋嗜,這世上最難降的妖魔是什么齐板? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,294評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮葛菇,結(jié)果婚禮上甘磨,老公的妹妹穿的比我還像新娘。我一直安慰自己眯停,他們只是感情好济舆,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著莺债,像睡著了一般滋觉。 火紅的嫁衣襯著肌膚如雪签夭。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,874評(píng)論 1 314
  • 那天椎侠,我揣著相機(jī)與錄音第租,去河邊找鬼。 笑死我纪,一個(gè)胖子當(dāng)著我的面吹牛慎宾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播宣羊,決...
    沈念sama閱讀 41,285評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼汰蜘!你這毒婦竟也來(lái)了仇冯?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,249評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤族操,失蹤者是張志新(化名)和其女友劉穎苛坚,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體色难,經(jīng)...
    沈念sama閱讀 46,760評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡泼舱,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了枷莉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片娇昙。...
    茶點(diǎn)故事閱讀 40,973評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖笤妙,靈堂內(nèi)的尸體忽然破棺而出冒掌,到底是詐尸還是另有隱情,我是刑警寧澤蹲盘,帶...
    沈念sama閱讀 36,631評(píng)論 5 351
  • 正文 年R本政府宣布股毫,位于F島的核電站,受9級(jí)特大地震影響召衔,放射性物質(zhì)發(fā)生泄漏铃诬。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評(píng)論 3 336
  • 文/蒙蒙 一苍凛、第九天 我趴在偏房一處隱蔽的房頂上張望趣席。 院中可真熱鬧,春花似錦醇蝴、人聲如沸吩坝。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,797評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)钉寝。三九已至弧呐,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間嵌纲,已是汗流浹背俘枫。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,926評(píng)論 1 275
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留逮走,地道東北人鸠蚪。 一個(gè)月前我還...
    沈念sama閱讀 49,431評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像师溅,于是被迫代替她去往敵國(guó)和親茅信。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • jQuery 中墓臭, $(document).ready()是什么意思蘸鲸? $(document).ready()是一...
    邢烽朔閱讀 305評(píng)論 0 1
  • 題目1: jQuery 中, $(document).ready()是什么意思窿锉? $(document).read...
    饑人谷_js_chen閱讀 379評(píng)論 0 1
  • 最近在看《曾國(guó)藩家書(shū)》酌摇,在這里面都是曾國(guó)藩寫(xiě)給親人的一些比較日常的書(shū)信。其中有寫(xiě)給祖父母的書(shū)信嗡载、寫(xiě)給父母的書(shū)信窑多、寫(xiě)...
    籬落LY閱讀 607評(píng)論 0 0
  • 貓貓分享,必須精品 原創(chuàng)文章洼滚,歡迎轉(zhuǎn)載埂息。轉(zhuǎn)載請(qǐng)注明:翟乃玉的博客地址:http://www.reibang.com...
    翟乃玉閱讀 4,275評(píng)論 8 17
  • 在心里最隱秘的地方, 裝了你很多年遥巴。 似曾見(jiàn)耿芹,不曾見(jiàn), 人海里熟悉或陌生的臉挪哄, 都不是吧秕。。 夢(mèng)里嗒嗒的馬蹄迹炼, 門(mén)前...
    天山木蘭閱讀 107評(píng)論 0 1