脚本宝典收集整理的这篇文章主要介绍了js實例教程-JQuery簡單的學習過程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小寶典致力於為廣大程序猿（媛）提供高品質的代碼服務，請大家多多光顧小站，小寶典在此謝過。
jquery簡介
普通JavaScript的缺點：每種控件的操作方式不統一，不同瀏覽器下有區別，要編寫跨瀏覽器的程序非常麻煩。因此出現了很多對JavaScript的封裝庫，比如PRototyPE、Dojo、ExtJS、JQuery等，這些庫對JavaScript進行了封裝，簡化了開發。這些庫是對JavaScript的封裝，也就是咱們調用JQuery的一句函數，JQuery內部這句函數幫我們調用JavaScript中的代碼幾十句，因為JQuery就是JavaScript語法寫的一些函數類，內部仍然是調用JavaScript實現的，所以並不是代替JavaScript的。使用JQuery的代碼、編寫JQuery的擴展插件等仍然需要JavaScript的技術，Jquery本身就是一堆JavaScript函數。
為什麼選擇JQuery？
尺寸小、使用簡單方便（WrITe Less, Do More，吃得少幹得多，而且目前許多大公司都在支持JQuery，例如微軟，微軟把JQuery繼承在了vs2010中。
JQuery能做什麼？
JQuery能做的普通的Dom能做，普通Dom能做的JQuery也能做。
簡單的JQuery
代碼如下:
<script src="../js/jquery-1.4.2-vsdoc-cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("JQuery");
})
</script>
代碼如下:
<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>
. 代碼如下:
<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>
. 代碼如下:
<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("感謝你的支持你可以繼續操作!");
}
})
})
</script>
</head>
<body>
<input type="checkbox" id="cr"/><label for="cr">我已經閱讀了協議</label>
</body>
</html>
. 代碼如下:
<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];//定義數組
arr = $.map(arr, function (value) {//第一個參數為原數組,第二個參數是處理函數
return value + 1;//處理方式
});
alert(arr);//
});
</script>
</head>
<body>
</body>
</html>
. 代碼如下:
<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 = { "第一名": "張三", "第二名": "李四", "第三名": "王五" };//定義一個字典數組
$.each(arr, function (key, value) {//遍曆數組,key代表鍵，value代表值
alert(key + " " + value);//
})
})
</script>
</head>
<body>
</body>
</html>
JQuery簡介
普通JavaScript的缺點：每種控件的操作方式不統一，不同瀏覽器下有區別，要編寫跨瀏覽器的程序非常麻煩。因此出現了很多對JavaScript的封裝庫，比如Prototype、Dojo、ExtJS、JQuery等，這些庫對JavaScript進行了封裝，簡化了開發。這些庫是對JavaScript的封裝，也就是咱們調用JQuery的一句函數，JQuery內部這句函數幫我們調用JavaScript中的代碼幾十句，因為JQuery就是JavaScript語法寫的一些函數類，內部仍然是調用JavaScript實現的，所以並不是代替JavaScript的。使用JQuery的代碼、編寫JQuery的擴展插件等仍然需要JavaScript的技術，Jquery本身就是一堆JavaScript函數。
為什麼選擇JQuery？
尺寸小、使用簡單方便（Write Less, Do More，吃得少幹得多，而且目前許多大公司都在支持JQuery，例如微軟，微軟把JQuery繼承在了vs2010中。
JQuery能做什麼？
JQuery能做的普通的Dom能做，普通Dom能做的JQuery也能做。
簡單的JQuery
代碼如下:
<script src="../js/jquery-1.4.2-vsdoc-cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("JQuery");
})
</script>
代碼如下:
<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>
. 代碼如下:
<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>
. 代碼如下:
<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("感謝你的支持你可以繼續操作!");
}
})
})
</script>
</head>
<body>
<input type="checkbox" id="cr"/><label for="cr">我已經閱讀了協議</label>
</body>
</html>
. 代碼如下:
<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];//定義數組
arr = $.map(arr, function (value) {//第一個參數為原數組,第二個參數是處理函數
return value + 1;//處理方式
});
alert(arr);//
});
</script>
</head>
<body>
</body>
</html>
. 代碼如下:
<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 = { "第一名": "張三", "第二名": "李四", "第三名": "王五" };//定義一個字典數組
$.each(arr, function (key, value) {//遍曆數組,key代表鍵，value代表值
alert(key + " " + value);//
})
})
</script>
</head>
<body>
</body>
</html>
覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！ js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！
以上是脚本宝典为你收集整理的js實例教程-JQuery簡單的學習過程全部内容，希望文章能够帮你解决js實例教程-JQuery簡單的學習過程所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。