小練習(xí)：
題目1： jQuery 中具滴， $(document).ready()是什么意思汉矿？
讓指定事件在DOM準(zhǔn)備就緒時(shí)加載或觸發(fā)蠢沿。
與window.onload的區(qū)別
- 執(zhí)行時(shí)間：
-
window.onload必須等到頁(yè)面內(nèi)包括圖片的所有元素加載完成后才能執(zhí)行吹泡。 -
$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就開(kāi)始執(zhí)行盟庞。
- 編寫個(gè)數(shù)不同
- window.onload通常情況下只能綁定一個(gè)執(zhí)行函數(shù)阶剑，如果綁定多個(gè)跃巡，只會(huì)執(zhí)行最后一個(gè)，但能創(chuàng)建一個(gè)匿名函數(shù)容納需綁定的函數(shù)牧愁，再將該匿名函數(shù)綁定至window或者其他方法來(lái)實(shí)現(xiàn)綁定多個(gè)函數(shù)素邪。
-
$(document).ready()可以簡(jiǎn)單的同時(shí)綁定多個(gè)函數(shù)，并且得到執(zhí)行猪半。
- 簡(jiǎn)化寫法
- window.onload不可簡(jiǎn)寫兔朦。
-
$(document).ready(function(){})可以簡(jiǎn)寫為$(function(){})。
題目2： $node.html()和$node.text()的區(qū)別?
-
$node.html():獲取集合中第一個(gè)匹配元素的HTML內(nèi)容 或 設(shè)置每一個(gè)匹配元素的html內(nèi)容磨确。 -
$node.text():用來(lái)讀取或者修改元素的文本內(nèi)容沽甥，包括他們的后代。
題目3： $.extend() 的作用和用法?
將兩個(gè)或更多對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象乏奥。
jQuery.extend( [deep ], target, object1 [, objectN ] )
當(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的命名空間下添加新的功能材失。
默認(rèn)情況下，第一個(gè)參數(shù)會(huì)被修改硫豆，如果我們需要保留原對(duì)象龙巨，那么可以傳遞一個(gè)空對(duì)象作為目標(biāo)對(duì)象：
var object = $.extend({}, object1, object2);
題目4： jQuery 的鏈?zhǔn)秸{(diào)用是什么？
在一條代碼中對(duì)指定對(duì)象按順序調(diào)用多種方法熊响，節(jié)省代碼量旨别，提高代碼的效率。
題目5： jQuery 中 data 函數(shù)的作用
在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值汗茄。
題目6： 寫出以下功能對(duì)應(yīng)的 jQuery 方法：
- 給元素 $node 添加 class active秸弛，給元素 $noed 刪除 class active
$node.addClass('active');
$node.removeClass('active');
- 展示元素$node, 隱藏元素$node
$node.show();
$node.hide();
- 獲取元素$node 的 屬性: id、src洪碳、title递览， 修改以上屬性
// 獲取屬性
$node.attr('id');
$node.attr('src');
$node.attr('title');
// 修改屬性
$node.attr('id', value);
$node.attr('src', value);
$node.attr('title', value);
- 給$node 添加自定義屬性data-src
$node.attr('data-src', value);
- 在$ct 內(nèi)部最開(kāi)頭添加元素$node
$ct.prepend($node);
- 在$ct 內(nèi)部最末尾添加元素$node
$ct.apend($node);
- 刪除$node
$node.remove();
- 把$ct里內(nèi)容清空
$ct.empty();
- 在$ct 里設(shè)置 html
<div class="btn"></div>
$ct.html('<div class="btn"></div>');
- 獲取、設(shè)置$node 的寬度瞳腌、高度(分別不包括內(nèi)邊距绞铃、包括內(nèi)邊距、包括邊框嫂侍、包括外邊距)
// 獲取內(nèi)容寬度和高度
$node.width();
$node.height();
// 獲取內(nèi)容寬度和高度（包括padding儿捧，但不包括border）
$node.innerWidth();
$node.innerHeight();
// 獲取內(nèi)容寬度和高度（包括padding，border和可選的margin）
$node.outerWidth();
$node.outerHeight();
// 獲取內(nèi)容寬度和高度（包括padding挑宠，border菲盾，margin）
$node.outerWidth(true);
$node.outerHeight(true);
- 獲取窗口滾動(dòng)條垂直滾動(dòng)距離
$(window).scrollTop()
- 獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離
$node.offset();
- 修改$node 的樣式各淀，字體顏色設(shè)置紅色懒鉴，字體大小設(shè)置14px
$node.css({
'color': 'red',
'font-size': '14px'
});
- 遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
$node.each(function() {
var $this = $(this);
var content = $this.text();
$this.text(content + content);
});
- 從$ct 里查找 class 為 .item的子元素
$ct.find('.item');
- 獲取$ct 里面的所有孩子
$ct.children();
- 對(duì)于$node碎浇，向上找到 class 為'.ct'的父親疗我，在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel');
- 獲取選擇元素的數(shù)量
$node.length;
- 獲取當(dāng)前元素在兄弟中的排行
$node.index();
題目7：用jQuery實(shí)現(xiàn)以下操作
- 當(dāng)點(diǎn)擊$btn 時(shí)，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
$btn.on('click', function() {
$btn.css('background', 'red');
setTimeout(function() {
$btn.css('background', 'blue');
},1000);
});
- 當(dāng)窗口滾動(dòng)時(shí)南捂，獲取垂直滾動(dòng)距離
$(window).scroll(function() {
console.log($(window).scrollTop());
});
- 當(dāng)鼠標(biāo)放置到$div 上吴裤，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?/li>
$div.on('mouseover', function() {
$div.css('background', 'red');
});
$div.on('mouseout', function() {
$div.css('background', '#fff');
});
- 當(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)展示輸入框里的文字
$input.on('focus', function() {
$input.css('border-color', 'blue');
});
$input.on('keyup', function() {
$input.val($input.val().tpUpperCase());
});
$input.on('blur', function() {
$input.css('border-color', 'transparent');
});
- 當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
$node.on('change', function() {
console.log($(this).val());
});
使用jQuery實(shí)現(xiàn)加載更多
GitHub地址：點(diǎn)擊查看
