快捷導(dǎo)航

JQuery學(xué)習(xí)筆錄簡(jiǎn)單的JQuery

更新時(shí)間：2012年04月09日 23:06:35 作者：

尺寸小、使用簡(jiǎn)單方便（Write Less, Do More，吃得少干得多，而且目前許多大公司都在支持JQuery，例如微軟，微軟把JQuery繼承在了vs2010中

JQuery簡(jiǎn)介　
　　　　　　普通JavaScript的缺點(diǎn)：每種控件的操作方式不統(tǒng)一，不同瀏覽器下有區(qū)別，要編寫跨瀏覽器的程序非常麻煩。因此出現(xiàn)了很多對(duì)JavaScript的封裝庫，比如Prototype、Dojo、ExtJS、JQuery等，這些庫對(duì)JavaScript進(jìn)行了封裝，簡(jiǎn)化了開發(fā)。這些庫是對(duì)JavaScript的封裝，也就是咱們調(diào)用JQuery的一句函數(shù)，JQuery內(nèi)部這句函數(shù)幫我們調(diào)用JavaScript中的代碼幾十句，因?yàn)镴Query就是JavaScript語法寫的一些函數(shù)類，內(nèi)部仍然是調(diào)用JavaScript實(shí)現(xiàn)的，所以并不是代替JavaScript的。使用JQuery的代碼、編寫JQuery的擴(kuò)展插件等仍然需要JavaScript的技術(shù)，Jquery本身就是一堆JavaScript函數(shù)。
　　　為什么選擇JQuery？
　　　　　　尺寸小、使用簡(jiǎn)單方便（Write Less, Do More，吃得少干得多，而且目前許多大公司都在支持JQuery，例如微軟，微軟把JQuery繼承在了vs2010中。
　　　JQuery能做什么？
　　　　　　JQuery能做的普通的Dom能做，普通Dom能做的JQuery也能做。
　　簡(jiǎn)單的JQuery

復(fù)制代碼代碼如下:

　　　　 
<script src="../js/jquery-1.4.2-vsdoc-cn.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
alert("JQuery"); 
}) 
</script> 

　　　　　　　　相當(dāng)于Onload事件，但是Onload只能注冊(cè)一次事件，而JQuery能注冊(cè)多個(gè)事件
　　　　JQuery對(duì)象
　　　　　　　　jQuery對(duì)象不能使用DOM對(duì)象的方法，DOM對(duì)象也不能使用jQuery對(duì)象的方法，但是可以互相轉(zhuǎn)換
　　　　　　　　　　

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../js/jquery-1.4.2-vsdoc-cn.js" type="text/javascript"></script> 
<script type="text/javascript"> 
window.onload = function () { 
var btn = document.getElementById("btn"); 
$(btn).val("OK"); 
} 
</script> 
</head> 
<body> 
<input id="btn" type="button" value="按鈕" /> 
</body> 
</html> 

　　　JQuery對(duì)象轉(zhuǎn)DOM對(duì)象
　　

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../js/jquery-1.4.2-vsdoc-cn.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
// var dom = $("#btn").get(0); 
//或者 
var dom = $("#btn")[0]; 
dom.value = "OK"; 
}) 
</script> 
</head> 
<body> 
<input type="button" value="按鈕" id="btn" /> 
</body> 
</html> 

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../js/jquery-1.6.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
var $cr = $("#cr"); 
var vr = $cr[0]; 
$cr.click(function () { 
if (cr.checked) { 
alert("感謝你的支持你可以繼續(xù)操作!"); 
} 
}) 
}) 
</script> 
</head> 
<body> 
<input type="checkbox" id="cr"/><label for="cr">我已經(jīng)閱讀了協(xié)議</label> 
</body> 
</html> 

　　$.()相當(dāng)于靜態(tài)方法
　　　處理數(shù)組的函數(shù)
　　　　　$.map() 將一個(gè)數(shù)組中的元素轉(zhuǎn)換到另一個(gè)數(shù)組中。
　　　　　　

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
var arr = [3, 5, 7];//定義數(shù)組 
arr = $.map(arr, function (value) {//第一個(gè)參數(shù)為原數(shù)組,第二個(gè)參數(shù)是處理函數(shù) 
return value + 1;//處理方式 
}); 
alert(arr);// 
}); 
</script> 
</head> 
<body> 
</body> 
</html> 

　　$.each(array,fn)對(duì)數(shù)組arry每個(gè)元素調(diào)用fn函數(shù)進(jìn)行處理，沒有返回值
　　　　
?

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
var arr = { "第一名": "張三", "第二名": "李四", "第三名": "王五" };//定義一個(gè)字典數(shù)組 
$.each(arr, function (key, value) {//遍歷數(shù)組,key代表鍵，value代表值 
alert(key + " " + value);// 
}) 
}) 
</script> 
</head> 
<body> 
</body> 
</html> 