題目1: jQuery 中, $(document).ready()是什么意思?
$(document).ready()的作用是等Html文檔解析完成后執行JS的內容,以防止DOM元素沒加載完成就執行JS內容,這樣可能會出現找不到元素的情況。
等價于 $(hander)
題目2: $node.html()和$node.text()的區別?
$node.html() 的作用是返回的內容是元素內部的html的結構,包括標簽,文本內容
$node.text()的作用是返回元素內包含的文本內容,在多層次的時候會按照元素由淺到深的順序拼接其內容
題目3: $.extend 的作用和用法?
$.extend 的作用是用一個或多個其他對象來擴展一個對象,返回被擴展的對象。
參數:target,[object1],[objectN]Object,Object,ObjectV1.0
target:一個對象,如果附加的對象被傳遞給這個方法將那么它將接收新的屬性,如果它是唯一的參數將擴展jQuery的命名空間。
object1:待合并到第一個對象的對象。
objectN:待合并到第一個對象的對象。
例:
var obj1 = {a:1}
var obj2 = {a:2,b:2}
$.extend(obj1,obj2) //obj{a:2,b:2}
題目4: jQuery 的鏈式調用是什么?
jQuery的鏈式調用是jquery可以支持連續調用方法。
其中的原理是:在調用方法后,return this 返回當前實例對象的this,這樣返回的又是對象,就又可以繼續調用方法了
題目5: jQuery 中 data 函數的作用
data([key],[value])
在元素上存放或讀取數據,返回jQuery對象。
當參數只有一個key的時候,為讀取該jQuery對象對應DOM中存儲的key對應的值,值得注意的是,如果瀏覽器支持HTML5,同樣可以讀取該DOM中使用 data-[key] = [value] 所存儲的值。
當參數為兩個時,為像該jQuery對象對應的DOM中存儲key-value鍵值對的數據。
如果jQuery集合指向多個元素,那將在所有元素上設置對應數據。 這個函數不用建立一個新的expando,就能在一個元素上存放任何格式的數據,而不僅僅是字符串。
例:
HTML 代碼:
<div></div>
jQuery 代碼:
$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah設置為hello
$("div").data("blah"); // hello
$("div").data("blah", 86); // 設置為86
$("div").data("blah"); // 86
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined
描述:
在一個div上存取名/值對數據
HTML 代碼:
<div></div>
jQuery 代碼:
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;
描述:
在HTML5規范中div中讀取預存的data-[key]值
HTML 代碼:
<div data-test="this is test" ></div>
jQuery 代碼:
$("div").data("test"); //this is test!;
題目6:
寫出以下功能對應的 jQuery 方法:
給元素 $node 添加 class active,給元素 $node 刪除 class active
$node.addClass('active')
$node.removeClass('active')
展示元素$node, 隱藏元素$node
$node.show();
$node.hide();
$node.css('display','none');
$node.css('display','block')
獲取元素$node 的 屬性: id、src、title, 修改以上屬性
$node.attr('id','123');
$node.attr('src','http:.....');
$node.attr('title','123');
給$node 添加自定義屬性data-src
$('node').prop('data')
在$ct 內部最開頭添加元素$node
$ct.prepend();
在$ct 內部最末尾添加元素$node
$ct.append($node)
刪除$node
$node.remove()
把$ct里內容清空
$ct.empty()
在$ct 里設置 html <div class="btn"></div>
$ct.append( '<div class="btn"></div>')
獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
$node.width(); // content
$node.height(); // content
$node.innerWidth(); // content+padding
$node.innerHeight(); // content+padding
$node.outWidth(); // content+padding+border
$node.outHeight(); // content+padding+border
$node.outWidth(true); // content+padding+border+margin
$node.outHeight(true); // content+padding+border+margin
獲取窗口滾動條垂直滾動距離
$node.scrollTop();
獲取$node 到根節點水平、垂直偏移距離
$node.offset();
$node.scrollLeft();
修改$node 的樣式,字體顏色設置紅色,字體大小設置14px
$node.css({'color':'red', 'font-size','14px'})
遍歷節點,把每個節點里面的文本內容重復一遍
$.each(function(index,value,arr){
var str = $(this).text();
console.log($(this).text(str+str)) })
從$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 的背景色變為紅色再變為藍色
當窗口滾動時,獲取垂直滾動距離
當鼠標放置到$div 上,把$div 背景色改為紅色,移出鼠標背景色變為白色
當鼠標激活 input 輸入框時讓輸入框邊框變為藍色,當輸入框內容改變時把輸入框里的文字小寫變為大寫,當輸入框失去焦點時去掉邊框藍色,控制臺展示輸入框里的文字
當選擇 select 后,獲取用戶選擇的內容
預覽
題目8: 用 jQuery ajax 實現如下效果。`當點擊加載更多會加載數據展示到頁面效果預覽420
HTML
后臺