jQuery 中， $(document).ready()是什么意思？
$(document).ready()是一個(gè)jQuery事件。一旦DOM準(zhǔn)備就緒，JQuery的方法就被調(diào)用（這意味著瀏覽器已經(jīng)解析了HTML并構(gòu)建了DOM樹）。這樣就可以在文檔準(zhǔn)備好被操縱之后立即運(yùn)行代碼。
- 要點(diǎn)$(document).ready()：
- 它不會(huì)等待圖像被加載。
- 用于在DOM完全加載時(shí)執(zhí)行JavaScript。
- 可多次使用。
- 當(dāng)收到“$未定義”時(shí)，使用jQuery替換$。
- 如果要操作圖像，則不使用。使用$(window).load()來(lái)代替。
引發(fā)另個(gè)問(wèn)題：JavaScript window.onload
和jQuery的$(document).ready()
方法有什么區(qū)別？
ready事件的目的是在文檔加載后盡可能早地發(fā)生，從而為頁(yè)面中的元素添加功能的代碼不必等待所有內(nèi)容加載。
window.onload()當(dāng)您的頁(yè)面上的所有內(nèi)容都已加載時(shí)，包括DOM（文檔對(duì)象模型），橫幅廣告和圖像。該事件會(huì)觸發(fā)，兩者之間的另一個(gè)區(qū)別是，雖然我們可以有多個(gè)$(document).ready()函數(shù)，但我們只能有一個(gè)onload函數(shù)。
$node.html()和$node.text()的區(qū)別?
html()獲取集合中第一個(gè)匹配元素的HTML內(nèi)容 設(shè)置每一個(gè)匹配元素的html內(nèi)容。text():得到匹配元素集合中每個(gè)元素的合并文本，包括他們的后代設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容。
區(qū)別：
- html是獲取節(jié)點(diǎn)內(nèi)的所有內(nèi)容，包括標(biāo)簽、文本。
- text是獲取節(jié)點(diǎn)內(nèi)的文本。
<pre><body> <input id ="one" type="text" placeholder="xx"> <p id = 'paragraph'><b>Test</b> Paragraph.</p> <input id ="two" type="text" placeholder="xx"> <script> $('#one').val($('#paragraph').html()) $('#two').val($('#paragraph').text()) </script></pre>
$.extend 的作用和用法?
提供兩個(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ì)于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時(shí)是很有用的。
請(qǐng)記住，目標(biāo)對(duì)象（第一個(gè)參數(shù)）將被修改，并且將通過(guò)$.extend()返回。然而，如果我們想保留原對(duì)象，我們可以通過(guò)傳遞一個(gè)空對(duì)象作為目標(biāo)對(duì)象：
<pre>//語(yǔ)法： jQuery.extend( target [, object1 ] [, objectN ] ) //將兩個(gè)或更多對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象。</pre>
<pre>`
<body>
<div id="log"></div>
<script>
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
/* 把 object2 合并到 object1 /
$.extend(object1, object2);
/創(chuàng)建一個(gè)printObj函數(shù)*/
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
//二元判斷,如果 JSON 不等于 'undefined'，那么使用JSON.stringify()
//方法將目標(biāo)值轉(zhuǎn)換為一個(gè)JSON字符串 否則 運(yùn)用匿名函數(shù)
var arr = [];//新增一數(shù)組
$.each(obj, function(key, val) {//遍歷
var next = key + ": ";
next += $.isPlainObject(val) ? printObj(val) : val;
//判斷是否為屬性值是否為純粹的對(duì)象，是的話，在運(yùn)用匿名函數(shù)再進(jìn)行遍歷次得到值
arr.push( next );//
});
console.log(arr)
return "{ " + arr.join(", ") + " }";
};
$("#log").append( printObj(object1) );
</script>
</body>
`</pre>
jQuery 的鏈?zhǔn)秸{(diào)用是什么？
鏈?zhǔn)讲僮鲀H僅是通過(guò)對(duì)象上的方法最后return this把對(duì)象再返回回來(lái)，對(duì)象就又可以繼續(xù)調(diào)用方法，所以就可以鏈?zhǔn)讲僮髁恕?/strong>
<pre>`
//定義一個(gè)JS類
function Demo() {
}
//擴(kuò)展它的prototype
Demo.prototype ={
setName:function (name) {
this.name = name;
return this;
},
getName:function () {
return this.name;
},
setAge:function (age) {
this.age = age;
return this;
}
};
////工廠函數(shù)
function D() {
return new Demo();
}
//去實(shí)現(xiàn)可鏈?zhǔn)降恼{(diào)用
D().setName("Rui").setAge(88).setName();
`</pre>
jQuery 中 data 函數(shù)的作用
- 在匹配元素上存儲(chǔ)任意相關(guān)數(shù)據(jù). 返回匹配的元素集合中的第一個(gè)元素的給定名稱的數(shù)據(jù)存儲(chǔ)的值。 通過(guò).data(name, value)或HTML5 data-* 屬性設(shè)置
.data() 方法允許我們?cè)贒OM元素上綁定任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)。
<pre>`
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }
`</pre>
給元素 $node 添加 class active，給元素 $noed 刪除 class active
<pre>$node.addClass('active');//添加 $node.removeClass('active');//刪除</pre>
展示元素$node, 隱藏元素$node
<pre>$node.show(); //展示 $node.hide(); //隱藏</pre>
獲取元素$node 的 屬性: id、src、title， 修改以上屬性
<pre>//獲取 $node.attr('id'); $node.attr('src'); $node.attr('title'); //修改 $node.attr('id','someid'); $node.attr('src','somesrc'); $node.attr('title','sometitle');</pre>
給$node 添加自定義屬性data-src
<pre>$node.data('src','somesrc');</pre>
在$ct 內(nèi)部最開頭添加元素$node
<pre>$('.ct').prepend($node);</pre>
在$ct 內(nèi)部最末尾添加元素$node
<pre>$('.ct').append($node);</pre>
刪除$node
<pre>$(node).remove();</pre>
把$ct里內(nèi)容清空
<pre>$(node).empty();</pre>
在$ct 里設(shè)置 html <div class="btn"></div><pre>$ct.html('<div class="btn"></div>);</pre>
獲取、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距、包括內(nèi)邊距、包括邊框、包括外邊距)
<pre>$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ū)挾?$node.outerHeight();//包括內(nèi)容,內(nèi)邊距,邊框高度 $node.outerHeight(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距高度 $node.outerWidth(true);//包括內(nèi)容,內(nèi)邊距,邊框,外邊距寬度</pre>
獲取窗口滾動(dòng)條垂直滾動(dòng)距離
<pre>$(window).scrollTop()</pre>
獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離
<pre>$node.offset()</pre>
修改$node 的樣式，字體顏色設(shè)置紅色，字體大小設(shè)置14px
<pre>$node.css({"color":"red", "font-size": "14px"});</pre>
遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
<pre>$node.each(function(){ console.log($(this).text()); });</pre>
從$ct 里查找 class 為 .item的子元素
<pre>$(".ct").find(".item");</pre>
獲取$ct 里面的所有孩子
<pre>$(.ct).children();</pre>
對(duì)于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
<pre>$node.parents(".ct").find(".panel");</pre>
獲取選擇元素的數(shù)量
<pre>$node.length; $node.size();</pre>
獲取當(dāng)前元素在兄弟中的排行
<pre>$node.index();</pre>
//==================================//
http://luckyman.xyz/gadget/jQueryApiAllDemo.html
還沒關(guān)聯(lián)上服務(wù)器：http://luckyman.xyz/gadget/news.html
