一贵少、 jQuery 中组砚， $(document).ready()是什么意思？
為了防止文檔在完全加載（就緒）之前運(yùn)行jQuery代碼利职，如果在文檔沒(méi)有加載之前就運(yùn)行函數(shù)趣效，可能操作失敗。必須在文檔加載完成后再執(zhí)行操作猪贪，可使用ready事件跷敬，作用相當(dāng)于把js寫到body的末尾。
$(document).ready(function() {
//your code here
})
$().ready(function() {
$("p").hide();
})
$(function() {
$('#btn').on('click', function() {
$('p').show();
})
})
二热押、$node.html()和$node.text()的區(qū)別?
- $node.text()
text() 設(shè)置或返回所選元素的文本內(nèi)容西傀。 - $node.html()
html() 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）。
三桶癣、$.extend 的作用和用法?
jQuery.extend([deep,] target [, object1 ] [, objectN ] )
- 兩個(gè)或者多個(gè)參數(shù)
當(dāng)提供兩個(gè)或者多個(gè)對(duì)象給$.extend(),相當(dāng)于文件的拷貝拥褂。
var obj = {};
var obj1 = {
name: 'christina',
sex: 'male'
};
var obj2 = {
name: 'cttin',
age: 18
}
$.extend(obj, obj1, obj2) // 把obj1和obj2拷貝到obj，同名的將會(huì)被obj2覆蓋
- 一個(gè)參數(shù)
如果只提供一個(gè)參數(shù)牙寞，則以為著目標(biāo)參數(shù)被省略饺鹃。在這種情況下，jQuery對(duì)象本身被默認(rèn)為目標(biāo)對(duì)象间雀。 -
$.extend(src)
將src合并到j(luò)Query的全局對(duì)象中悔详。
$.extend({
hello:function(){alert('hello');}
});
-
$.fn.extend(src)
該方法將src合并到j(luò)Query的實(shí)例對(duì)象中。
$.fn.extend({
hello:function(){alert('hello');}
});
- 第一個(gè)參數(shù)
[deep,]代表是否進(jìn)行深拷貝惹挟。
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
深拷貝
var result=$.extend( false, {},
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);
淺拷貝
四茄螃、 jQuery 的鏈?zhǔn)秸{(diào)用是什么？
使用jQuery方法時(shí)對(duì)象方法返回的是對(duì)象本身连锯，可以繼續(xù)調(diào)用此對(duì)象的其他方法归苍，實(shí)現(xiàn)連續(xù)調(diào)用多個(gè)方法党巾。
$('#btn').on('click', function() {
$('.main').fadeIn('slow').animate({height: '100px'}, 500);
})
五、jQuery 中 data 函數(shù)的作用
jQuery.data()允許我們?cè)贒OM元素上附加任意類型的數(shù)據(jù)霜医，避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)齿拂。
-
jQuery.data(element, key, value)
存儲(chǔ)任意數(shù)據(jù)到指定的元素,返回設(shè)置的值。 -
jQuery.data( element, key )
返回用jQuery.data(element, name, value)儲(chǔ)存在元素上的相應(yīng)名字的數(shù)據(jù)肴敛，或者元素上完整的數(shù)據(jù)存儲(chǔ)署海。 -
$().data(key)、$().data()
從jQuery對(duì)象上讀數(shù)據(jù)医男。
六砸狞、寫出以下功能對(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', 'wrap');
$node.attr('src', 'https://github.com');
$node.attr('title', 'welcome');
- 給$node 添加自定義屬性data-src
$node.attr('data-src', wrap);
- 在$ct 內(nèi)部最開(kāi)頭添加元素$node
$ct.prepend($node);
- 在$ct 內(nèi)部最末尾添加元素$node
$ct.append($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)邊距透罢、包括邊框榜晦、包括外邊距)
$node.width(); // content
$node.height(); // content
$node.innerWidth(); // content+padding
$node.innerHeight(); // content+padding
$node.outWidth(); // content+padding+border
$node.outHeight(); // content+padding+border
$node.outWidth(true); // content+padding+border+margin
$node.outHeight(true); // content+padding+border+margin
- 獲取窗口滾動(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ù)一遍
$.each(function () {
console.log($(this).text());
})
- 從$ct 里查找 class 為 .item的子元素
$ct.find('.item');
- 獲取$ct 里面的所有孩子
$ct.children();
- 對(duì)于$node盅抚，向上找到 class 為'.ct'的父親寝并，在從該父親找到'.panel'的孩子
$node.parent('.ct').find('.panel');
- 獲取選擇元素的數(shù)量
$node.length;
- 獲取當(dāng)前元素在兄弟中的排行
$(this).index();
七彤灶、用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)榘咨?/li>
- 當(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)容
DEMO
八窿侈、用 jQuery ajax 實(shí)現(xiàn)如下效果。`當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁(yè)面效果預(yù)覽
這個(gè)之前已經(jīng)寫過(guò)秋茫，參見(jiàn)代碼二
