jQuery 中， $(document).ready()是什么意思？
- 描述: 當DOM準備就緒時，指定一個函數來執行。
- 雖然JavaScript提供了load事件，當頁面執呈現時用來執行這個事件，直到所有的東西，如圖像已被完全接收前，此事件不會被觸發。在大多數情況下，只要DOM結構已完全加載時，腳本就可以運行。傳遞處理函數給.ready()方法，能保證DOM準備好后就執行這個函數。當使用的腳本依賴 CSS 屬性值時，需要特別注意，要保證外部的樣式或內嵌的樣式被加載完后，再調用腳本。
$node.html()和$node.text()的區別?
- html()用于獲取集合中第一個匹配元素的HTML內容 或 設置每一個匹配元素的html內容。
- text()用于得到匹配元素集合中每個元素的文本內容結合，包括他們的后代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容。
- 區別：傳給html()的參數會被當作html代碼解析，而傳給text()的參數只會被當作文本。
$.extend 的作用和用法?
作用: 將兩個或更多對象的內容合并到第一個對象。
-
用法：
var a = {a:1, b:2} var b = {b:3, c:4, d:5} $.extend(a, b) //{a: 1, b: 3, c: 4, d: 5} a //{a: 1, b: 3, c: 4, d: 5} var c = {} $.extend(c, a, b) //{a: 1, b: 3, c: 4, d: 5} c //{a: 1, b: 3, c: 4, d: 5}
jQuery 的鏈式調用是什么？
- 可以連續的使用 jQuery 方法的過程叫做 鏈式調用。
- jQuery是通過在調用方法后返回這個調用對象來實現鏈式調用的。
jQuery 中 data 函數的作用
-
作用：在匹配元素上存儲任意相關數據 或 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。示例：
<div> The values stored were <span></span> and <span></span> </div> <script> // 從div元素儲存一個值。 $("div").data("test", { first: 16, last: "pizza!" }); // 從div元素儲存的值中取出值。 $("span:first").text($("div").data("test").first); $("span:last").text($("div").data("test").last); </script>
寫出以下功能對應的 jQuery 方法：
-
給元素 $node 添加 class active，給元素 $noed 刪除 class active
$node.addClass('active') $node.removeClass('active') -
展示元素$node, 隱藏元素$node
$node.show() $node.hide() -
獲取元素$node 的 屬性: id、src、title， 修改以上屬性
var id = $node.attr('id') var src = $node.attr('src') var title = $node.attr('title') $node.attr({ id: '001', src: './img.gif', title: 'img' }) -
給$node 添加自定義屬性data-src
$node.attr("data-src", "123") -
在$ct 內部最開頭添加元素$node
$ct.prepend($node) -
在$ct 內部最末尾添加元素$node
$ct.append($node) -
刪除$node
$node.remove() -
把$ct里內容清空
$ct.empty() -
在$ct 里設置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>') -
獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
內容高度、寬度： $node.height() $node.height(100) $node.width() $node.width(100) 包括內邊距： $node.innerHeight() $node.innerWidth() 包括內邊距、邊框： $node.outerHeight() $node.outerWidth() 包括內邊距、邊框、外邊距： $node.outerHeight(true) $node.outerWidth(true) 內邊距、邊框、外邊框設置： $node.css({ border: '1', padding: '10', margin: '10' }) -
獲取窗口滾動條垂直滾動距離
$node.scrollTop() -
獲取$node 到根節點水平、垂直偏移距離
var offset = $node.offset() offset.left offset.top -
修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({ color: 'red', font-size: '14' }) -
遍歷節點，把每個節點里面的文本內容重復一遍
$node.each(function(i) { var str = $(this).text() $(this).text(str + str) }) -
從$ct 里查找 class 為 .item的子元素
$ct.find('.item') -
獲取$ct 里面的所有孩子
$ct.children() -
對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parents('.ct').children('.panel') -
獲取選擇元素的數量
$('div').length -
獲取當前元素在兄弟中的排行
$node.index()
