1.Jquery 中,$(document).ready()是什么意思?和window.onload 的區別?還有其他什么寫法或者替代方法?
- $(document).ready():頁面中所有HTML DOM,CSS DOM結構加載完之后就會執行,其他圖片可能沒有加載完。
- window.onload():在頁面所有元素(包括圖片等)加載完后執行。
- 區別:
(1)時機不同
(2)可編寫的個數不同,window.onload()不能同時寫多個,后面的將會覆蓋前面的;而$(document).ready()可以同時寫多個。
(3)window.onload()不可簡寫;而$(document).ready()可簡寫成$().ready(function(){ })或$(function(){ })。
2.$node.html()和$node.text()的區別?
- $node.html():設置或返回html的內容
- $node.text():設置或返回元素的文本內容
3.$.extend 的作用和用法?
- $.extend 的作用:將兩個或更多對象的內容合并到第一個對象,返回第一個新對象的值
- 用法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
<script>
var opts1 = {
"name": "hunger",
"age": "20",
}
var opts2 = {
"name": "valley",
"sex": "nan"
}
$.extend(opts1, opts2);
console.log(opts1);
console.log(opts2);
</script>
</body>
</html>
輸出結果
4.JQuery 的鏈式調用是什么?
當jQuery的方法的返回值仍為當前對象時可以繼續調用該對象的方法,這樣就形成一種鏈式調用。
5.JQuery ajax 中緩存怎樣控制?
通過設置cache來控制是否緩存頁面,當值為true時,瀏覽器緩存頁面;當值為false時,瀏覽器將不緩存此頁面,默認值: true,dataType 為 script 和 jsonp 時默認為 false。
6.JQuery 中 data 函數的作用
在匹配元素上存儲任意相關數據 或 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。
7.寫出以下功能對應的 Jq 方法:
- 給元素 $node 添加 class active,給元素 $noed 刪除 class active
$node.addClass('active');// 添加 class
$node.removeClass('active');//刪除 class
- 展示元素$node, 隱藏元素$node
$node.show();//展示元素
$node.hide();//隱藏元素
- 獲取元素$node 的 屬性: id、src、title, 修改以上屬性
$node.attr(id);$node.attr(src);$node.attr(title);//獲取屬性
$node.attr(id, 'header');$node.attr(src, 'http://baidu.com');$node.attr(title, 'pic');//修改屬性
- 給$node 添加自定義屬性data-src
$node.data('data-src', 'htttp://baidu.com');
- 在$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 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
$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({
"color": "red",
"font-size": "14px"
});
- 遍歷節點,把每個節點里面的文本內容重復一遍
$node.each(function(){
$(this).text().clone().appendTo($(this))
})
- 從$ct 里查找 class 為 .item的子元素
$ct.children('.item');
- 獲取$ct 里面的所有孩子
$ct.find();
- 對于$node,向上找到 class 為’.ct’的父親,在從該父親找到’.panel’的孩子
$node.parent('.ct').find('.panel');
- 獲取選擇元素的數量
$node.length;
- 獲取當前元素在兄弟中的排行
$(this).index();