題目1: jQuery 中, $(document).ready()是什么意思?
.ready()
指的是當DOM準備就緒,指定一個函數來執行。js原生的load事件,要等DOM和圖像完全加載才會觸發。
使用.ready()
方法能夠保證DOM準備好之后,就執行這個函數,因此,這里是綁定事件和運行jQuery代碼最好的地方。
//下面兩種語法等價
$(document).ready(handler)
$(handler)
題目2: $node.html()
和$node.text()
的區別?
.html()
獲取第一個匹配元素的HTML內容,如果選擇器匹配多于一個的元素,那么只有第一個匹配元素的HTML內容會被獲取。
.text()
獲取所有元素的匹配內容,結果是所有匹配元素包含的文本內容組合起來的文本。
題目3: $.extend 的作用和用法?
jQuery.extend( [deep,] target [, object1 ] [, objectN ] )
提供兩個或多個對象,對象的所有屬性都添加到目標對象。
如果只有一個參數提供給.extend()
,這意味著目標參數被省略。在這種情況下,jQuery對象本身被默認為目標對像。這樣,我們可以在jQuery的命名空間下添加新功能。這對于插件開發者希望向jQuery中添加新函數時是很有用的。
目標對象(第一個對象)將被修改,并且通過$.extend()
返回。然而,如果我們想保留原對象,我們可以通過傳遞一個空對象作為目標對象:
var object = $.extend({}, object1, object2);
如果第一個對象的屬性本身是一個對象或數組,那么它將完全用第二個對象相同的key重寫一個屬性。
題目4: jQuery 的鏈式調用是什么?
指多個方法可以鏈式調用,如:
$('div').find('h3').eq(2).html('Hello');
鏈式調用可以節省代碼量,提高代碼的效率。
題目5: jQuery 中 data 函數的作用
data()
函數用于在當前jQuery對象所匹配的所有元素上存取數據。將數據綁定在一個DOM上
通過data()
函數存取的數據都是臨時數據,一旦頁面刷新,之前存放的數據都將不復存在。
該函數屬于jQuery對象(實例)。如果需要移除通過data()函數存放的數據,請使用removeData()
函數。
題目6:
寫出以下功能對應的 jQuery 方法:
-
給元素
$node
添加class active
,給元素$node
刪除class active
$node.addClass('active'); $node.removeClass('active');
-
展示元素
$node
, 隱藏元素$node
$node.hide(); $node.css("display","none");
-
獲取元素
$node
的 屬性: id、src、title, 修改以上屬性$node.attr({ id: 'test', src: 'http://test.com', title: 'test', });
-
給
$node
添加自定義屬性data-src
$node.attr('data-src', 'test')
-
在
$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
的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)//獲取計算寬度值,height同理 $node.width() $node.height() //獲取計算的內部寬度,包括padding,不包括border, innerHeight同理 $node.innerWidth() $node.innerHeight() //獲取計算外部寬度,包括padding, border,和可選的margin,outerHeight同理 $node.outerWidth() $node.outerHeight()
-
獲取窗口滾動條垂直滾動距離
$node..scrollTop()
-
獲取
$node
到根節點水平、垂直偏移距離$node.offset().top; $node.offset().left;
-
修改
$node
的樣式,字體顏色設置紅色,字體大小設置14px$node.css({ color: "red", fontSize: "14px" });
-
遍歷節點,把每個節點里面的文本內容重復一遍
$node.each(function(){ $(this).text($(this).text() + $(this).text()) })
-
從
$ct
里查找 class 為.item
的子元素$ct.find('.item')
-
獲取
$ct
里面的所有孩子$ct.children()
-
對于
$node
,向上找到 class 為'.ct'的父親,在從該父親找到'.panel'的孩子$node.parents('.ct').find('.panel')
-
獲取選擇元素的數量
$node.length
-
獲取當前元素在兄弟中的排行
$node.index()
題目7:
用jQuery實現以下操作
-
當點擊
$btn
時,讓$btn
的背景色變為紅色再變為藍色$btn.on('click', function(){ $this.css('background-color','red'); setTimeout(function(){ $btn.css('background-color', 'blue'); }, 200) })
-
當窗口滾動時,獲取垂直滾動距離
$(window).scroll(function(){ console.log($(this).scrollTop()) })
-
當鼠標放置到
$div
上,把$div
背景色改為紅色,移出鼠標背景色變為白色$div.on('mouseenter', function(){ $(this).css('background-color', 'red'); }).on('mouseleave', function(){ $(this).css('background-color', 'white'); })
-
當鼠標激活 input 輸入框時讓輸入框邊框變為藍色,當輸入框內容改變時把輸入框里的文字小寫變為大寫,當輸入框失去焦點時去掉邊框藍色,控制臺展示輸入框里的文字
$('input[type=text]').on('focus', function(){ $(this).css('border-color', 'blue') }).on('change', function(){ $(this).val($(this).val().toUpperCase()) }).on('blur', function(){ $(this).css('border-color', '') console.log($(this).val()) })
-
當選擇 select 后,獲取用戶選擇的內容
$select.val()