題目1: jQuery 中, $(document).ready()是什么意思?
在DOM和頁面都加載完畢后會執行ready事件(不應與onload一起使用)
題目2: $node.html()和$node.text()的區別?
.html()用為讀取和修改元素的HTML標簽和元素內容
.text()用來讀取或修改元素的純文本內容()
題目3: $.extend 的作用和用法?
- 給jQuery添加靜態方法
$.extend({}) - 合并多個對象
$.extend(boolean,dest,src1...srcN)所有src的屬性會賦值給dest,同屬性的會被后面的覆蓋,boolean為是否深層拷貝
題目4: jQuery 的鏈式調用是什么?
所返回的都是同一個對象,可以節省代碼量,提高代碼的效率
題目5: jQuery 中 data 函數的作用
向被選元素附加數據,或者從被選元素獲取數據。通過data()函數存取的數據都是臨時數據,一旦頁面刷新,之前存放的數據都將不復存在。該函數屬于jQuery對象
題目6:
寫出以下功能對應的 jQuery 方法:
給元素 $node 添加 class active,給元素 $noed 刪除 class active
$node.addClass('active')
$node.removeClass('active')
展示元素$node, 隱藏元素$node
$node.show()
$node.hide()
獲取元素$node 的 屬性: id、src、title, 修改以上屬性
$node.attr('id')
$node.attr('src')
$node.attr('title')
給$node 添加自定義屬性data-src
$node.attr(data-src)
在$ct 內部最開頭添加元素$node
$ct.prepend()
在$ct 內部最末尾添加元素$node
$ct.append()
刪除$node
$node.remove()
把$ct里內容清空
$ct.empty()
在$ct 里設置 html <div class="btn"></div>
$ct.html(<div class="btn"></div>)
獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
不包括內邊距、邊框或外邊距:
$node.width()
$node.height()
包括內邊距:
$node.innerWidth()
$node.innerHeight()
包括內邊距和邊框:
$node.outerWidth()
$node.outerHeight()
包括內邊距、邊框和外邊距:
$node.outerWidth(true)
$node.outerHeight(true)
獲取窗口滾動條垂直滾動距離
$(document).scrollTop()
獲取$node 到根節點水平、垂直偏移距離
$node.offset()
修改$node 的樣式,字體顏色設置紅色,字體大小設置14px
$node.css({'font-size': '14px','color':'red'})
遍歷節點,把每個節點里面的文本內容重復一遍
$.each(function(){
var text =$(this).text()
console.log(text)
})
從$ct 里查找 class 為 .item的子元素
$ct.find('.item')
獲取$ct 里面的所有孩子
$ct.children()
對于$node,向上找到 class 為'.ct'的父親,在從該父親找到'.panel'的孩子
$ndoe.parents('.ct').find('.panel')
獲取選擇元素的數量
$.length
獲取當前元素在兄弟中的排行
$.index()
題目7:
用jQuery實現以下操作
當點擊$btn 時,讓 $btn 的背景色變為紅色再變為藍色
$btn.on('click',function(){
$btn.css('background','red')
setTimeout(function(){
$btn.css('background','blue')
},1000)
})
當窗口滾動時,獲取垂直滾動距離
$(window).scroll(function(){
console.log($(window).scrollTop()+'px')
})
當鼠標放置到$div 上,把$div 背景色改為紅色,移出鼠標背景色變為白色
$div.on('mouseenter',function(){
$div.css('background:red')
})
$div.on('mouseleave',function(){
$div.css('background:#fff')
})
當鼠標激活 input 輸入框時讓輸入框邊框變為藍色,當輸入框內容改變時把輸入框里的文字小寫變為大寫,當輸入框失去焦點時去掉邊框藍色,控制臺展示輸入框里的文字
$('input').on('focus',function(){
$('input').css('border-color','blue')
})
$('input').on('keyup',function(){
$(this).val($(this).val().toUpperCase())
})
$('input').on('focusout',function(){
$('input').css('border-color','')
console.log($('input').val())
})
當選擇 select 后,獲取用戶選擇的內容
$('input').on('select',function(){
console.log($('input').val())
})