jQuery 常用方法 & ajax
1. jQuery 中, $(document).ready()是什么意思?和window.onload 的區(qū)別? 還有其他什么寫法或者替代方法?
-
$(document).ready()
方法接受一個函數(shù)作為參數(shù),將該函數(shù)作為 document 對象 DOMContentLoaded 時間的回調(diào)函數(shù)询一。
當(dāng) DOM 解析完成后,該函數(shù)就執(zhí)行癌椿。且可以寫多個健蕊,都可以執(zhí)行。
$(document).ready(fcuntion() {
console.log('success');
});
也可以簡寫為(直接把函數(shù)放在 jQuery 對象里面):
$(function() {
console.log('success');
});
-
window.onload
是當(dāng)頁面全部加載完成后(頁面內(nèi)容踢俄、圖片等資源)執(zhí)行缩功。且不能同時寫多個,若寫多個褪贵,只會執(zhí)行最后一個掂之。
2. $node.html()和$node.text()的區(qū)別?
$node.html()
返回該元素包含的 html 代碼$node.text()
返回該元素包含的文本
例子:
<p><em>html and text</em></p>
<script>
$('p').html(); // 返回 <em>html and text</em>
$('p').text(); // 返回 html and text
</script>
3. $.extend 的作用和用法?
$.extend()
方法用于將多個對象合并為一個對象
var e1 = { a : 1, b : 2 };
var e2 = { a : 3 };
$.extend(e1, e2);
e1.a; // 3
$.extend()
的另一種用法是生成一個新對象抗俄,用來繼承原有對象。這時世舰,它的第 1 個參數(shù)應(yīng)該為一個空對象
var e1 = { a : 1, b : 2 };
var e2 = { a : 3 };
var e3 = $.extend( {}, e1, e2 );
e3; // { a: 3, b : 2 }
默認(rèn)情況下动雹,.extend()
生成的對象是“淺拷貝”,也就是說跟压,如果某個屬性是對象或數(shù)組胰蝠,那么只會生成指向這個對象或數(shù)組的指針,不會復(fù)制值震蒋。
如果想要“深拷貝”茸塞,可以在 .extend()
的第 1 個參數(shù)傳入 true
(這里不允許設(shè)置為 false
,因為默認(rèn)為 fal
)
var e1 = { a : [1, 2] };
var e2 = $.extend( {}, e1 );
var e3 = $.extend( true, {}, e1);
e1.a[0] = 3;
e2.a; // [3,2] 淺拷貝
e3.a; // [1,2] 深拷貝
4. jQuery 的鏈?zhǔn)秸{(diào)用是什么查剖?
jQuery 最方便的一點就是钾虐,它的大部分方法返回的都是 jQuery 對象,因此可以鏈?zhǔn)讲僮鳎ê笠粋€方法可以緊跟著前一個方法)笋庄,連續(xù)使用 jQuery 方法
$('選擇器').方法1(回調(diào)函數(shù)1).方法2(回調(diào)函數(shù)2).方法3(回調(diào)函數(shù)3);
5. jQuery ajax 中緩存怎樣控制?
jQuery ajax 方法是利用 cache
參數(shù)來控制緩存
true --> 緩存
false --> 不緩存
6. jQuery 中 data 函數(shù)的作用
.data()
在匹配元素上存儲任意相關(guān)數(shù)據(jù)效扫,允許在 DOM 對象上存儲任意類型的數(shù)據(jù),避免循環(huán)引用的內(nèi)容泄漏風(fēng)險
另外:注意這兩種方法目前并不提供在 XML 文檔上跨平臺設(shè)置直砂,作為 Internet Explorer 不允許通過自定義屬性附加數(shù)據(jù)菌仁。
$('body').data('foo', 52); // 存儲數(shù)據(jù)
$('body').data('foo') // 讀取數(shù)據(jù)
代碼
1. 給元素 $node 添加 class active,給元素 $node 刪除 class active
$node.addClass('active');
$node.removeClass('active');
2. 展示元素 $node 静暂,隱藏元素 $node
$node.show();
$node.hide();
3. 獲取元素 $node 的屬性:id济丘、src、title洽蛀,修改以上屬性
$node.attr('id);
$node.attr('src);
$node.attr('title1', 'title2');
4. 給 $node 添加自定義屬性 data-src
$('.node').attr('data-src', 'xxx');
5. 在 $ct 內(nèi)部最開頭添加元素 $node
$ct.prepend($node);
6. 在 $ct 內(nèi)部最末尾添加元素 $node
$ct.append($node);
7. 刪除 $node
$node.remove();
8. 把 $ct 里內(nèi)容清空
$ct.empty();
9. 在 $ct 里設(shè)置 <div class="btn"></div>
$ct.html('<div class='btn'></div>');
10. 獲取摹迷、設(shè)置 $node 的寬度、高度(分別不包括內(nèi)邊距郊供、包括內(nèi)邊距泪掀、包括邊框、包括外邊距)
$node.width() // content
$node.height()
$node.innerWidth() // content + padding
$node.innerHeight()
$node.outerWidth() // content + padding + border
$node.outerHeight()
$node.outerWidth(true) // content + padding + border + margin
$node.outerHeight(true)
11. 獲取窗口滾動條垂直滾動距離
$(window).scrollTop();
12. 獲取 $node 到根節(jié)點水平颂碘、垂直偏移距離
$node.offset()
// 在匹配的元素集合中,獲取的第一個元素的當(dāng)前坐標(biāo)椅挣,或設(shè)置每一個元素的坐標(biāo)头岔,坐標(biāo)相對于文檔
13. 修改 $node 的樣式,字體顏色設(shè)置紅色鼠证,字體大小設(shè)置 14px
$node.css( {
'color' : 'red',
'font-size' : '14px'
});
14. 遍歷節(jié)點峡竣,把每個節(jié)點里面的文本內(nèi)容重復(fù)一遍
$node.each(function() {
$(this).text();
});
15. 從 $ct 里面查找 class 為 .item 的子元素
$ct.find('.item')
16. 獲取 $ct 里面的所有孩子
$ct.children();
17. 對于 $node,向上找到 class 為 '.ct' 的父親量九,在從該父親找到 '.panel' 的孩子
$node.parents('.ct').find('.panel')
18. 獲取選擇元素的數(shù)量
$node.length
19. 獲取當(dāng)前元素在兄弟中的排行
$node.index()