jQuery里面用this和用$(this)有什么區(qū)別
表示對(duì)象不同：this表示的是javascript提供的當(dāng)前對(duì)象汞贸，$(this)表示的是用jquery封裝候的當(dāng)前對(duì)象博敬。
$('img').each(function(){
if( checkWindow($(this)) && !isLoad($(this))){
loadImg($(this))
}
})
function checkWindow( $img ) //$img等于each遍歷里的$(this)
jQuery 中， $(document).ready()是什么意思县耽？
當(dāng)DOM準(zhǔn)備就緒時(shí)，指定一個(gè)函數(shù)來(lái)執(zhí)行。與JavaScript提供了window.onload事件的區(qū)別：
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.
簡(jiǎn)單來(lái)說(shuō)window.onload是當(dāng)頁(yè)面呈現(xiàn)時(shí)用來(lái)執(zhí)行這個(gè)事件佩迟，直到所有的東西，如圖像已被完全接收前竿屹，此事件不會(huì)被觸發(fā)
$(document).ready()只要DOM結(jié)構(gòu)已完全加載時(shí)报强，腳本就可以運(yùn)行。傳遞處理函數(shù)給.ready()方法拱燃，能保證DOM準(zhǔn)備好后就執(zhí)行這個(gè)函數(shù)
%E5%92%8C)
node.text()的區(qū)別?
node.text()，返回所選擇元素內(nèi)的文本內(nèi)容召嘶，不包含html標(biāo)簽父晶，只包含文本內(nèi)容
$.extend 的作用和用法?
語(yǔ)法：jQuery.extend([deep,] target [, object1 ] [, objectN ] )
1. 當(dāng)我們提供兩個(gè)或多個(gè)對(duì)象給.extend()甲喝，這意味著目標(biāo)參數(shù)被省略。在這種情況下铛只，jQuery對(duì)象本身被默認(rèn)為目標(biāo)對(duì)象埠胖。這樣，我們可以在jQuery的命名空間下添加新的功能淳玩。這對(duì)于插件開(kāi)發(fā)者希望向 jQuery 中添加新函數(shù)時(shí)是很有用的
目標(biāo)對(duì)象（第一個(gè)參數(shù)）將被修改直撤，并且將通過(guò)$.extend()返回。然而蜕着，如果我們想保留原對(duì)象谋竖，我們可以通過(guò)傳遞一個(gè)空對(duì)象作為目標(biāo)對(duì)象：
var object = $.extend({}, object1, object2);
在默認(rèn)情況下，通過(guò)$.extend()合并操作不是遞歸的;
如果第一個(gè)對(duì)象的屬性本身是一個(gè)對(duì)象或數(shù)組承匣，那么它將完全用第二個(gè)對(duì)象相同的key重寫(xiě)一個(gè)屬性蓖乘。這些值不會(huì)被合并。如果將 true作為該函數(shù)的第一個(gè)參數(shù)韧骗，那么會(huì)在對(duì)象上進(jìn)行遞歸的合并嘉抒。
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
// Merge object2 into object1
$.extend( object1, object2 );
JQuery 的鏈?zhǔn)秸{(diào)用是什么？
鏈?zhǔn)秸{(diào)用：使用jQuery方法時(shí)宽闲，對(duì)象方法返回的是對(duì)象本身众眨，可以調(diào)用對(duì)此對(duì)象的其他jQuery方法，實(shí)現(xiàn)連續(xù)調(diào)用多個(gè)方法
例：$(this).siblings().removeClass('active');
原理（偽代碼）：
window.onload = function(){
// jQuery構(gòu)造器
var jQuery = function(selector, context) {
return new jQuery.fn.init(selector, context);
}
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
//給所有元素設(shè)置顏色
setColor: function(color) {
for (var i = 0; i < this.length; i++) {
this[i].style.color = color
}
return this;
},
//返回第一個(gè)元素
first: function() {
return this[0]
}
}
var init = jQuery.fn.init = function(selector, context) {
var elem = document.querySelectorAll(selector)
for (var i = 0; i < elem.length; i++) {
this[i] = elem[i]
}
this.length = elem.length;
this.context = document;
this.selector = selector;
return this;
}
init.prototype = jQuery.fn;
var $div = jQuery('div')
$div.setColor('red').first()
}
jQuery 中 data 函數(shù)的作用
用法：jQuery.data( element, key, value )
jQuery.data() 方法允許我們?cè)贒OM元素上附加任意類型的數(shù)據(jù),避免了循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)容诬。如果 DOM 元素是通過(guò) jQuery 方法刪除的或者當(dāng)用戶離開(kāi)頁(yè)面時(shí)娩梨，jQuery 同時(shí)也會(huì)移除添加在上面的數(shù)據(jù)。
例：
image.jpg1992x752 62.3 KB](https://jscode.me/uploads/default/original/2X/1/13c80f027c70d1f222e36279dd690669f5141681.jpg "image.jpg")
寫(xiě)出以下功能對(duì)應(yīng)的 jQuery 方法
$(ele).addClass('.active')
$(ele).removeClass('.active')
展示元素node
$(ele).show()
$(ele).hide()
獲取元素$node 的 屬性: id览徒、src狈定、title， 修改以上屬性
$node.attr('id');//獲取
$node.attr('id’,'值'); //修改
$node.attr('src');//獲取
$node.attr('src’,'值');//修改
$node.attr('title');//獲取
$node.attr('title’,'值');//修改
給$node 添加自定義屬性data-src
$node.data("src",str)
在node
$(".ct").prepend(node);
在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();//不包括內(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)邊距,邊框,外邊距寬度
獲取窗口滾動(dòng)條垂直滾動(dòng)距離
$(window).scrollTop()
獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離
$node.offset().left
$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.children()
對(duì)于$node，向上找到 class 為'.ct'的父親探孝，在從該父親找到'.panel'的孩子
$node.parents('.ct').children('.panel')
獲取選擇元素的數(shù)量
$(ele).length
$(ele).size()
獲取當(dāng)前元素在兄弟中的排行
$(ele).index();
7. 用jQuery實(shí)現(xiàn)以下操作
當(dāng)點(diǎn)擊
btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
btn.css("background","red")
setTimeout(function(){
$btn.css("background","blue")
},2000)
})當(dāng)窗口滾動(dòng)時(shí)，獲取垂直滾動(dòng)距離
(window).scrollTop())
});-
當(dāng)鼠標(biāo)放置到
div 背景色改為紅色缸濒，移出鼠標(biāo)背景色變?yōu)榘咨?br>
div.css("background","red")
})$dic.on("mouseleave",function(){ $dic.css("background","white") }) -
當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時(shí)- 把輸入框里的文字小寫(xiě)變?yōu)榇髮?xiě)粱腻，當(dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色庇配，控制臺(tái)展示輸入框里的文字
$("input").on("focusin",function(){ $("input").css("border-color","blue") $("input").on("keyup",function(){ $("input").val($("input").val().toLowerCase()) }) }) $("input").on("blur",function(){ $("input").css("border-color","white") console.log($(this).val()) }) 當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容
("p").text($(this).val())
})
