1、jQuery 中, $(document).ready()是什么意思?
- $(document).ready():表示頁面的dom元素加載完畢,此事件才會被觸發,這是為了防止在頁面加載元素加載完之前對dom元素進行操作
- window.onload: 表示頁面所有的元素接收完全后,此事件才會被觸發,這個過程耗時間比較長
2、$node.html()和$node.text()的區別?
- $node.html() 的作用是用于修改和獲取當前元素的html標簽和文本元素。
- $node.text() 的作用是修改和獲取當前元素的文本元素。
3、$.extend 的作用和用法?
- $.extend() 用于對象合并,可以把 1 個或多個對象里面的屬性全部合并到第一個對象里面。用法:$.extend(targetObject, object1, ..., objectN); 如果屬性名有重復,那么后面對象的屬性值會覆蓋前面的
- 此外,$.extend() 還支持深度合并,用法:$.extend(true, targetObject, object1, ..., objectN), 這樣如果后面的對象里面的屬性還是一個對象或數組或其他引用類型,那么它們會被深度合并在 target object 里面
- 如果 $.extend() 只有一個對象參數的話,那么 jQuery 對象本身會被當作 target object
4、jQuery 的鏈式調用是什么
鏈式調用就是分步驟地對jQuery對象實現各種操作,例如
$(this).css('color','red').show(200).removeClass('style')
優點:
- 節省代碼量,代碼看起來更優雅;
- 返回的都是同一個對象,可以提高代碼的效率。
- 讓代碼流程更清晰。
5、jQuery 中 data 函數的作用
- 在匹配元素上存儲任意相關數據 或 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。
注意和attr()區別,attr()設定和取出元素的屬性值是直接顯示在elements元素上,data()方法設定的數據不會顯示在elements元素上,data()方法避免循環引用的內容泄漏風險
6、寫出以下功能對應的 jQuery 方法:
1.給元素 $node 添加 class active,給元素 $noed 刪除 class active
$node.addClass('active')或$node.attr('class','active') // 添加 class active
$node.removeClass('active') // 刪除 class active
2.展示元素 $node, 隱藏元素 $node
$node.show() // 顯示元素
$node.hide() // 隱藏元素
$node.fadeIn() // 通過淡入的方式顯示匹配元素
$node.fadeOut() // 通過淡出的方式隱藏匹配元素
$node.slideDown() // 用滑動動畫顯示一個匹配元素
$node.slideUp() // 用滑動動畫隱藏一個匹配元素
3.獲取元素$node 的 屬性: id、src、title, 修改以上屬性
$node.attr('id')
$node.attr('id','btn')
$node.attr('src')
$node.attr('src','b.jpg')
$node.attr('title')
$node.attr('title','city')
4.給$node 添加自定義屬性data-src
$node.attr('data-src','c.jpg')
5.在$ct 內部最開頭添加元素$node
$ct.prepend($node)
$node.prependTo($ct)
6.在$ct 內部最末尾添加元素$node
$ct.append($node)
$node.appendTo($ct)
7.刪除$node
$node.remove()
$node.detach() // 保留事件
8.把$ct 里內容清空
$ct.empty()
9.在$ct 里設置 html
$ct.html('<li><a href="#">'+prod+'</a></li>')
10.獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
$node.width() //不包括內邊距寬度,僅包括內容
$node.height() //不包括內邊距高度,僅包括內容
$node.innerWidth() //包括內容和內邊距寬度
$node.innerHeight() //包括內容和內邊距高度
$node.outerWidth() //包括內容,內邊距,邊框寬度
$node.outerHeight() //包括內容,內邊距,邊框高度
$node.outerHeight(true) //包括內容,內邊距,邊框,外邊距高度
$node.outerWidth(true) //包括內容,內邊距,邊框,外邊距寬度
11.獲取窗口滾動條垂直滾動距離
$(window).scrollTop()
12.獲取$node 到根節點水平、垂直偏移距離
$node.offset()
13.修改$node 的樣式,字體顏色設置紅色,字體大小設置14px
$node.css({'color':'red','font-size':'14px'})
14.遍歷節點,把每個節點里面的文本內容重復一遍
$node.each(function() {
$(this).text()
})
15.從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
16.獲取$ct 里面的所有孩子
$ct.children()
17.對于$node,向上找到 class 為'.ct'的父親,在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel')
18.獲取選擇元素的數量
$node.length
$node.size()
19.獲取當前元素在兄弟中的排行
$node.index()