jQuery動(dòng)畫與ajax

題目1: jQuery 中搔体, $(document).ready()是什么意思靡狞?

當(dāng) DOM(文檔對(duì)象模型) 已經(jīng)加載,并且頁面已經(jīng)完全呈現(xiàn)時(shí)拘央,會(huì)發(fā)生 ready 事件涂屁。
由于該事件在文檔就緒后發(fā)生,因此把所有其他的 jQuery 事件和函數(shù)置于該事件中是非常好的做法

題目2: $node.html()和$node.text()的區(qū)別?

$node.html():設(shè)置或返回匹配的元素集合中的 HTML 內(nèi)容灰伟。
$node.text():設(shè)置或返回匹配元素的文本內(nèi)容拆又。

題目3: $.extend 的作用和用法?

將兩個(gè)或更多對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象。
eg:

//用法一
var a = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var b = {
  banana: { price: 200 },
  durian: 100
};
// Merge object2 into object1
$.extend( a, b);
//含義為將a,和b合并栏账,并且改變$.extend( a, b)中第一個(gè)參數(shù)a帖族。后面的參數(shù)如果和前面的參數(shù)存在相同的名稱,那么后面的會(huì)覆蓋前面的參數(shù)值挡爵,沒有則新增竖般。
//如果不想改變a,可以新增一個(gè)參數(shù),并用變量接著
var c = $.extend({}, a, b);
extend(boolean,dest,src1,src2,src3...);
var result=$.extend( true,  {},  
    { name: "John", location: {city: "Boston",county:"USA"} },  
    { last: "Resig", location: {state: "MA",county:"China"} } ); 
//它會(huì)將src中的嵌套子對(duì)象也進(jìn)行合并了讨,結(jié)果為:{name:"John",last:"Resig",location:{city:"Boston",state:"MA",county:"China"}}
//如果為false則覆蓋捻激,結(jié)果為:{name:"John",last:"Resig",location:{state:"MA",county:"China"}}

題目4: jQuery 的鏈?zhǔn)秸{(diào)用是什么?

$(元素).方法()
       .方法()
       .方法()...

鏈?zhǔn)秸{(diào)用的好處:
1.節(jié)省代碼量前计,代碼看起來更優(yōu)雅胞谭;
2.返回的都是同一個(gè)對(duì)象,可以提高代碼的效率男杈。
回溯:end()有時(shí)你需要中間值而中斷鏈?zhǔn)秸{(diào)用丈屹,或者鏈?zhǔn)秸{(diào)用中某個(gè)方法返回的this改變了,那么者就需要回溯了伶棒⊥荩回溯幫你維持this的正確指向
end方法就是回溯到上一個(gè)dom合集。

題目5: jQuery 中 data 函數(shù)的作用

data()方法將數(shù)據(jù)附加到選定元素或從中選取元素的數(shù)據(jù)肤无。

//頁面部分
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Get data attached to div element</button>
//代碼部分
$(document).ready(function(){
    $("#btn1").click(function(){
        $("div").data("greeting", "Hello World");
    });
    $("#btn2").click(function(){
        alert($("div").data("greeting"));
    });
});

題目6:寫出以下功能對(duì)應(yīng)的 jQuery 方法:
給元素 $node 添加 class active

$noed.addClass("active")

給元素 $noed 刪除 class active

$noed.removeClass("active")

展示元素$node,

$noed.show()

隱藏元素$node

$noed.hide()

獲取元素$node 的 屬性: id先蒋、src、title

var eid = $noed.attr("id");
var esrc = $noed.attr("src");
var etitle= $noed.attr("title");

修改以上屬性

 $noed.attr("id",value);
 $noed.attr("src",value);
 $noed.attr("title",value);

給$node 添加自定義屬性data-src

 $noed.attr("data-src",value);

在$ct 內(nèi)部最開頭添加元素$node

 $ct.prepend($node);

在$ct 內(nèi)部最末尾添加元素$node

 $ct.append($node);

刪除$node

 $node.remove();

把$ct里內(nèi)容清空

 $node.empty();

在$ct 里設(shè)置 html <div class="btn"></div>

 $ct.html('<div class="btn"></div>')

獲取宛渐、設(shè)置$node 的寬度竞漾、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距窥翩、包括邊框业岁、包括外邊距)

//獲取寬高不包括內(nèi)邊距
 $ct.height();
$ct.width();
//包括內(nèi)邊距
$ct.innerHeight();
$ct.innerWidth();
//包括padding,border
$ct.outerHeight();
$ct.outerWidth();
//包括padding寇蚊,border,margin
$ct.outerHeight(true);
$ct.outerWidth(true);

獲取窗口滾動(dòng)條垂直滾動(dòng)距離

$(window).scrollTop()

獲取$node 到根節(jié)點(diǎn)水平笔时、垂直偏移距離

// 到根節(jié)點(diǎn)水平距離
$node .offset().left;
//到根節(jié)點(diǎn)垂直偏移距離
$node .offset().top;

修改$node 的樣式,字體顏色設(shè)置紅色仗岸,字體大小設(shè)置14px

$node.css({"color":"red","font-size":"14px"})

遍歷節(jié)點(diǎn)允耿,把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍

$node.each(function(){
  console.log($(this).text())
})

從$ct 里查找 class 為 .item的子元素

$ct.find(".item")

獲取$ct 里面的所有孩子

$ct.find();

對(duì)于$node,向上找到 class 為'.ct'的父親爹梁,在從該父親找到'.panel'的孩子

var $parents = $node.parents(".ct");
var $panel = $parents.find(".panel");

獲取選擇元素的數(shù)量

$ct.length;

獲取當(dāng)前元素在兄弟中的排行

$ct.index();

題目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)榘咨?br> 當(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)展示輸入框里的文字
當(dāng)選擇 select 后,獲取用戶選擇的內(nèi)容
代碼效果地址

題目8: 用 jQuery ajax 實(shí)現(xiàn)如下效果看成。

`當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁面代碼效果地址

題目9(選做): 實(shí)現(xiàn)一個(gè)天氣預(yù)報(bào)頁面君编,UI 如下圖所示(可自由發(fā)揮)。

數(shù)據(jù)接口:
獲取當(dāng)前用戶所在城市接口://jirenguapi.applinzi.com/city.php
服務(wù)端支持 CORS 跨域調(diào)用川慌,前端可直接使用 ajax 獲取數(shù)據(jù)
獲取某城市對(duì)應(yīng)的天氣接口://jirenguapi.applinzi.com/weather.php?city=北京
服務(wù)端支持 CORS 跨域調(diào)用吃嘿,前端可直接使用 ajax 獲取數(shù)據(jù), 如果不傳遞參數(shù)默認(rèn)獲取當(dāng)前用戶所在城市的天氣
代碼效果地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末祠乃,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子兑燥,更是在濱河造成了極大的恐慌亮瓷,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,080評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件降瞳,死亡現(xiàn)場(chǎng)離奇詭異嘱支,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)挣饥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,422評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門除师,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人扔枫,你說我怎么就攤上這事汛聚。” “怎么了短荐?”我有些...
    開封第一講書人閱讀 157,630評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵贞岭,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我搓侄,道長(zhǎng)瞄桨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,554評(píng)論 1 284
  • 正文 為了忘掉前任讶踪,我火速辦了婚禮芯侥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘乳讥。我一直安慰自己柱查,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,662評(píng)論 6 386
  • 文/花漫 我一把揭開白布云石。 她就那樣靜靜地躺著唉工,像睡著了一般。 火紅的嫁衣襯著肌膚如雪汹忠。 梳的紋絲不亂的頭發(fā)上淋硝,一...
    開封第一講書人閱讀 49,856評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音宽菜,去河邊找鬼谣膳。 笑死,一個(gè)胖子當(dāng)著我的面吹牛铅乡,可吹牛的內(nèi)容都是我干的继谚。 我是一名探鬼主播,決...
    沈念sama閱讀 39,014評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼阵幸,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼花履!你這毒婦竟也來了芽世?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,752評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤诡壁,失蹤者是張志新(化名)和其女友劉穎捂襟,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體欢峰,經(jīng)...
    沈念sama閱讀 44,212評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,541評(píng)論 2 327
  • 正文 我和宋清朗相戀三年涨共,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了纽帖。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,687評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡举反,死狀恐怖懊直,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情火鼻,我是刑警寧澤室囊,帶...
    沈念sama閱讀 34,347評(píng)論 4 331
  • 正文 年R本政府宣布,位于F島的核電站魁索,受9級(jí)特大地震影響融撞,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜粗蔚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,973評(píng)論 3 315
  • 文/蒙蒙 一尝偎、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧鹏控,春花似錦致扯、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,777評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至缘揪,卻和暖如春耍群,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背找筝。 一陣腳步聲響...
    開封第一講書人閱讀 32,006評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工世吨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人呻征。 一個(gè)月前我還...
    沈念sama閱讀 46,406評(píng)論 2 360
  • 正文 我出身青樓耘婚,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親陆赋。 傳聞我的和親對(duì)象是個(gè)殘疾皇子沐祷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,576評(píng)論 2 349

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