您的位置：首页 > Web前端 > JQuery

JQuery学习笔录简单的JQuery

2012-04-09 00:00 260 查看

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>

　　　　　　　　相当于Onload事件，但是Onload只能注册一次事件，而JQuery能注册多个事件
　　　　JQuery对象
　　　　　　　　jQuery对象不能使用DOM对象的方法，DOM对象也不能使用jQuery对象的方法，但是可以互相转换
　　　　　　　　　　

<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对象转DOM对象
　　

<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>

　　$.()相当于静态方法
　　　处理数组的函数
　　　　　$.map() 将一个数组中的元素转换到另一个数组中。
　　　　　　

<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>

　　$.each(array,fn)对数组arry每个元素调用fn函数进行处理，没有返回值
　　　　
?

<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学习笔录 简单的JQuery

JQuery学习笔录简单的JQuery