1. jQuery 中带迟, $(document).ready()是什么意思音羞?
- 當DOM準備就緒時,指定一個函數(shù)來執(zhí)行仓犬。
-
與JavaScript提供了window.onload事件的區(qū)別
:
window.onload是當頁面呈現(xiàn)時用來執(zhí)行這個事件黄选,直到所有的東西,如圖像已被完全接收前婶肩,此事件不會被觸發(fā)
$(document).ready()只要DOM結構已完全加載時办陷,腳本就可以運行。傳遞處理函數(shù)給.ready()方法律歼,能保證DOM準備好后就執(zhí)行這個函數(shù)
2.$node.html()和$node.text()的區(qū)別?
$node.html()
獲取集合中第一個匹配元素的HTML內容
在一個 HTML 文檔中, 我們可以使用 .html() 方法來獲取任意一個元素的內容民镜。 如果選擇器匹配多個元素,那么只有第一個匹配元素的 HTML 內容會被獲取
用法:
.html()
.html( htmlString )
.html( function(index, oldhtml) )$node.text()
得到匹配元素集合中每個元素
的文本內容結合险毁,包括他們的后代
和 .html() 方法不同制圈, .text() 在XML 和 HTML 文檔中都能使用们童。
.text() 方法返回一個字符串
,包含所有匹配元素的合并文本
3.$.extend 的作用和用法?
描述
: 將兩個或更多對象的內容合并到第一個對象鲸鹦。jQuery.extend( [deep ], target, object1 [, objectN ] )
deep
類型: [Boolean]
如果是true慧库,合并成為遞歸(又叫做深拷貝)。
target
類型: [Object]
對象擴展馋嗜。這將接收新的屬性齐板。
object1
類型: [Object]
一個對象,它包含額外的屬性合并到第一個參數(shù).
objectN
類型: [Object]
包含額外的屬性合并到第一個參數(shù)
當我們提供兩個或多個對象給$.extend()葛菇,對象的所有屬性都添加到目標對象(target參數(shù))甘磨。
如果只有一個參數(shù)提供給$.extend(),這意味著目標參數(shù)被省略眯停。在這種情況下济舆,jQuery對象本身被默認為目標對象。
這樣莺债,我們可以在jQuery的命名空間下添加新的功能滋觉。這對于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時是很有用的。
請記住齐邦,目標對象(第一個參數(shù))將被修改椎侠,并且將通過$.extend()返回。然而侄旬,如果我們想保留原對象,我們可以通過傳遞一個空對象作為目標對象
:
var object = $.extend({}, object1, object2);```
`在默認情況下煌妈,通過$.extend()合并操作不是遞歸的;`如果第一個對象的屬性本身是一個對象或數(shù)組儡羔,那么它將完全用第二個對象相同的key重寫一個屬性。這些值不會被合并璧诵。`如果將 true 作為該函數(shù)的第一個參數(shù)汰蜘,那么會在對象上進行遞歸的合并。`
`警告:不支持第一個參數(shù)傳遞 false `
## 4.jQuery 的鏈式調用是什么之宿?
- jQuery高效的原因之一就是其鏈式調用族操。
`鏈式調用原理:`就是通過對象上每個方法最后返回本對象__this。
可以調用對此對象的其他jQuery方法比被,實現(xiàn)連續(xù)調用多個方法
- `鏈式調用的好處`
節(jié)省代碼量色难,代碼看起來更清晰優(yōu)雅;
可以提高代碼的效率等缀。
因為Javascript是無阻塞語言枷莉,通過事件來驅動,異步來完成一些本需要阻塞進程的操作尺迂。異步編程笤妙,編寫代碼時也是分離的冒掌,這就使代碼可讀性變差。
而鏈式操作蹲盘,代碼流程清晰股毫,改善了異步體驗。
例如:
$("#Test").addClass('style').find("div").eq(0).fadeOut(200);
## 5.jQuery 中 data 函數(shù)的作用?
- **描述: **存儲任意數(shù)據(jù)到指定的元素,返回設置的值召衔。
- jQuery.data() 方法允許我們在DOM元素上附加任意類型的數(shù)據(jù),避免了循環(huán)引用的內存泄漏風險铃诬。如果 DOM 元素是通過 jQuery 方法刪除的或者當用戶離開頁面時,jQuery 同時也會移除添加在上面的數(shù)據(jù)薄嫡。我們可以在一個元素上設置不同的值氧急,并獲取這些值:
jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');
## 6.寫出以下功能對應的 jQuery 方法:
給元素 $node 添加 class active:
$node.addClass('active')
給元素 $noed 刪除 class active:
$node.removeClass('actice')
展示元素$node:
$node.show()
隱藏元素$node:
$node.hide()
- 獲取元素$node 的 屬性: id、src毫深、title吩坝, 修改以上屬性
jQuery.attr():獲取匹配的元素集合中的第一個元素的屬性的值 或 設置每一個匹配元素的一個或多個屬性。
$node.attr('id')//獲取
$node.attr('id','value');//修改并賦值為value
$node.attr('src');//獲取
$node.attr('src','value');//修改
$node.attr('title');//獲取
$node.attr('title','value');//修改
- 給$node 添加自定義屬性data-src
`$node.data('src','value')`
- 在$ct 內部最開頭添加元素$node
`$ct.prepend('$node')`
- .prepend()
方法將指定元素插入到匹配元素里面作為它的第一個子元素
- .prepend()和[.prependTo()]實現(xiàn)同樣的功能哑蔫,主要的不同是語法钉寝,插入的內容和目標的位置不同。
- 在$ct 內部最末尾添加元素$node
'$ct.append('$node')'
- 如果要作為最后一個子元素插入用[.append()]
- 刪除$node
`$node.remove()`
- 把$ct里內容清空
`$ct.empty()`
- 在$ct 里設置 html <div class="btn"></div>
'$ct.html(' html <div class="btn"></div>')'
- 獲取闸迷、設置$node 的寬度嵌纲、高度(分別不包括內邊距、包括內邊距腥沽、包括邊框逮走、包括外邊距)
$node.width();//僅包括內容
$node.height();//僅包括內容
$node.width(10px);//僅包括內容設置為10px
$node.innerWidth();//包括內容和內邊距寬度
$node.innerHeight();//包括內容和內邊距高度
$node.innerWidth(10px);//設置
$node.outerWidth();//包括內容,內邊距,邊框寬度
$node.outerHeight();//包括內容,內邊距,邊框高度
$node.outerWidth(10px);//設置
$node.outerHeight(true);//包括內容,內邊距,邊框,外邊距高度
$node.outerWidth(true);//包括內容,內邊距,邊框,外邊距寬度
- 獲取窗口滾動條垂直滾動距離
`$(window).scrollTop()`
- 獲取$node 到根節(jié)點水平、垂直偏移距離
`$node.offset().left;//水平距離`
`$node.offset().top;//垂直距離`
offset(): 在匹配的元素集合中今阳,獲取的第一個元素的當前坐標师溅,坐標相對于文檔。
- 修改$node 的樣式盾舌,字體顏色設置紅色墓臭,字體大小設置14px
- ```
$node.css({
'color':'red',
'font-size': '14px'
})
- 遍歷節(jié)點,把每個節(jié)點里面的文本內容重復一遍
$.each(function(){
console.log($(this).text())
})
從$ct 里查找 class 為 .item
的子元素
$ct.find('.item')
獲取$ct 里面的所有孩子
$ct.children()
對于$node妖谴,向上找到 class 為'.ct'的父親窿锉,在從該父親找到'.panel'的孩子
$node.parents('.ct').children('.panel')
獲取選擇元素的數(shù)量
$node.length
獲取當前元素在兄弟中的排行
$node.index()
7. 應用
用jQuery實現(xiàn)以下操作當點擊$btn 時,讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色 當窗口滾動時膝舅,獲取垂直滾動距離 當鼠標放置到$div 上嗡载,把$div 背景色改為紅色,移出鼠標背景色變?yōu)榘咨?當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色仍稀,當輸入框內容改變時把輸入框里的文字小寫變?yōu)榇髮懕谴斴斎肟蚴ソ裹c時去掉邊框藍色,控制臺展示輸入框里的文字 當選擇 select 后琳轿,獲取用戶選擇的內容
8.用 jQuery ajax 實現(xiàn)如下效果判沟。當點擊加載更多會加載數(shù)據(jù)展示到頁面.
效果預覽: