jQuery 中, $(document).ready()是什么意思?
- 描述: 當DOM準備就緒時勘究,指定一個函數(shù)來執(zhí)行愕撰。
- 雖然JavaScript提供了load事件刹衫,當頁面執(zhí)呈現(xiàn)時用來執(zhí)行這個事件,直到所有的東西搞挣,如圖像已被完全接收前带迟,此事件不會被觸發(fā)。在大多數(shù)情況下囱桨,只要DOM結(jié)構(gòu)已完全加載時仓犬,腳本就可以運行。傳遞處理函數(shù)給.ready()方法舍肠,能保證DOM準備好后就執(zhí)行這個函數(shù)搀继。當使用的腳本依賴 CSS 屬性值時窘面,需要特別注意,要保證外部的樣式或內(nèi)嵌的樣式被加載完后律歼,再調(diào)用腳本民镜。
$node.html()和$node.text()的區(qū)別?
- html()用于獲取集合中第一個匹配元素的HTML內(nèi)容 或 設置每一個匹配元素的html內(nèi)容。
- text()用于得到匹配元素集合中每個元素的文本內(nèi)容結(jié)合险毁,包括他們的后代制圈,或設置匹配元素集合中每個元素的文本內(nèi)容為指定的文本內(nèi)容。
- 區(qū)別:傳給html()的參數(shù)會被當作html代碼解析畔况,而傳給text()的參數(shù)只會被當作文本鲸鹦。
$.extend 的作用和用法?
作用: 將兩個或更多對象的內(nèi)容合并到第一個對象。
-
用法:
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 的鏈式調(diào)用是什么跷跪?
- 可以連續(xù)的使用 jQuery 方法的過程叫做 鏈式調(diào)用馋嗜。
- jQuery是通過在調(diào)用方法后返回這個調(diào)用對象來實現(xiàn)鏈式調(diào)用的。
jQuery 中 data 函數(shù)的作用
-
作用:在匹配元素上存儲任意相關(guān)數(shù)據(jù) 或 返回匹配的元素集合中的第一個元素的給定名稱的數(shù)據(jù)存儲的值吵瞻。示例:
<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 內(nèi)部最開頭添加元素$node
$ct.prepend($node)
-
在$ct 內(nèi)部最末尾添加元素$node
$ct.append($node)
-
刪除$node
$node.remove()
-
把$ct里內(nèi)容清空
$ct.empty()
-
在$ct 里設置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
-
獲取莺债、設置$node 的寬度、高度(分別不包括內(nèi)邊距签夭、包括內(nèi)邊距齐邦、包括邊框、包括外邊距)
內(nèi)容高度第租、寬度: $node.height() $node.height(100) $node.width() $node.width(100) 包括內(nèi)邊距: $node.innerHeight() $node.innerWidth() 包括內(nèi)邊距措拇、邊框: $node.outerHeight() $node.outerWidth() 包括內(nèi)邊距、邊框慎宾、外邊距: $node.outerHeight(true) $node.outerWidth(true) 內(nèi)邊距儡羔、邊框、外邊框設置: $node.css({ border: '1', padding: '10', margin: '10' })
-
獲取窗口滾動條垂直滾動距離
$node.scrollTop()
-
獲取$node 到根節(jié)點水平璧诵、垂直偏移距離
var offset = $node.offset() offset.left offset.top
-
修改$node 的樣式,字體顏色設置紅色仇冯,字體大小設置14px
$node.css({ color: 'red', font-size: '14' })
-
遍歷節(jié)點之宿,把每個節(jié)點里面的文本內(nèi)容重復一遍
$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')
-
獲取選擇元素的數(shù)量
$('div').length
-
獲取當前元素在兄弟中的排行
$node.index()