問答
一潭流、Jquery 中, $(document).ready()是什么意思柜去?和window.onload 的區(qū)別灰嫉? 還有其他什么寫法或者替代方法?
1.$(document).ready()意思是等頁面中的DOM元素加載完畢后再執(zhí)行jQuery代碼嗓奢。
- window.onload是等待DOM及其他元素(如圖片讼撒,css,引用文件)也就是頁面的所有元素加載完成后執(zhí)行代碼。只能執(zhí)行一個根盒,如果有多個钳幅,就執(zhí)行最后一個。
- $(document).ready()只需要在頁面中所有的DOM結(jié)構(gòu)繪制完畢后就執(zhí)行炎滞。并且能同時編寫多個敢艰,根據(jù)編寫順序依次執(zhí)行
3.$(document).ready()可以簡寫成:$(function(){})
;
二、$node.html()和$node.text()的區(qū)別?
1.$node.html()
$node.html()
不傳入值,就是獲取集合中第一個匹配元素的HTML內(nèi)容册赛。
$node.html(htmlString)
設(shè)置每一個匹配元素的html內(nèi)容钠导。
$node.html(function(index,oldhtml))
用來返回設(shè)置HTML內(nèi)容的一個函數(shù)。
2.$node.text()
$node.text()
得到匹配元素集合中每個元素的合并文本,包括他們的后代森瘪。
$node.text(textString)
用于設(shè)置匹配元素內(nèi)容的文本辈双。
$node.text(function(index,text))
用來返回設(shè)置文本內(nèi)容的一個函數(shù)。
代碼示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="box1">
<p>這是一個段落<span>嘿嘿嘿</span></p>
</div>
<div id="box2">
<p>這是一個段落<span>嘿嘿嘿</span></p>
</div>
<div id="box3">
<p>這是一個段落<span>嘿嘿嘿</span></p>
</div>
<div id="box4">
<p>這是一個段落<span>嘿嘿嘿</span></p>
</div>
<script>
console.log($("#box1").html());
console.log($("#box2").html("<h1>我是一個大標題</h1>"));
console.log($("#box3").text());
console.log($("#box4").text("我是替換的新文本內(nèi)容"));
</script>
</body>
</html>
三柜砾、$.extend 的作用和用法?
1.作用:將一個或多個對象的屬性添加給目標對象湃望。
2.用法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="box"></div>
<script>
var obj1={
name: "張三",
age: 25,
height: 180,
address: {
city: "杭州"
}
}
var obj2={
name: "李四",
sex: "男",
address: {
street: "jichang"
}
}
</script>
</body>
</html>
- 第一個參數(shù)作為目標對象,后面的對象參數(shù)的屬性會添加到目標對象中痰驱。如果只有一個參數(shù),那么jQuery對象本身將被作為目標對象担映》鲜浚可以通過這種方法向jQuery的命名空間添加新的功能蝇完。
- 如果第一個參數(shù)是true,那么合并的多個對象內(nèi)部的對象參數(shù)就不會產(chǎn)生合并的現(xiàn)象,全部都會展示出來短蜕。
- 作為目標對象的第一個參數(shù)會被修改岖研,如果想要保留目標對象原先的值孙援,可以將第一個參數(shù)設(shè)置為空對象值骇。
四莹菱、JQuery 的鏈式調(diào)用是什么移国?
jQuery的鏈式調(diào)用是指對一個對象連續(xù)的使用jQuery方法吱瘩。
$(this).removeClass("mouseout").addClass("mouseover").next().show()
這么做的好處是讓代碼更加簡潔易讀,減少代碼的重復(fù)性迹缀,提高代碼的可讀性使碾。其中的原理是執(zhí)行完一個方法后就返回對象本身(return this),然后對象繼續(xù)執(zhí)行后面的方法祝懂。
五票摇、JQuery ajax 中緩存怎樣控制?
jQuery ajax方法中是利用cache參數(shù)來控制緩存的。
設(shè)置為true將緩存頁面(默認為true砚蓬,dataType為“script”和“jsonp”時默認為false)矢门。如果設(shè)置為false,瀏覽器將不會緩存頁面灰蛙。
其工作原理是在GET請求參數(shù)中附加“={timestamp}”時間戳祟剔,使請求的鏈接每次都不同。
六摩梧、jquery 中 data 函數(shù)的作用
1.data([key],[value])作用:在元素上存放數(shù)據(jù),返回jQuery對象物延。
2.參數(shù):key:存儲的數(shù)據(jù)名;value:將要存儲的任意數(shù)據(jù)。
3.代碼示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<script>
console.log($("#box1").data("blah")); //undefined
$("#box1").data("blah","hello"); //設(shè)置blah為hello
console.log($("#box1").data("blah")); //hello
$("#box1").removeData("blah"); //移除blah設(shè)置的值
console.log($("#box1").data("blah")); //undefined
$("#box2").data("test",{first:16,last:"pizza"}); //給存儲名為test的對象存儲內(nèi)容{first:16,last:"pizza"}
console.log($("#box2").data("test").first); //16
console.log($("#box2").data("test").last); //pizza
console.log($("#box2").data("test")); //{first: 16, last: "pizza"}
$("#box2").removeData("test"); //移除test設(shè)置的內(nèi)容
console.log($("#box2").data("test")); //undefined
</script>
</body>
</html>