jQuery（1）：jQuery下手
jQuery（1）：jQuery上手
jQuery的口号是:The Write Less,Do More
获取jQuery:http://jquery.com/ 在左侧选择development版本，下载下来的是一个JS文件。
第一个jQuery程序:在src中引用刚下载的js文件，$(document)表示DOM中的document。
<html>
<body>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
//ready方法的作用是当页面中的dom加载完毕后执行参数中的函数
$(document).ready(function(){
alert("hello world");
});
</script>
</body>
</html>
下面这个例子，页面加载完成后，会依次弹出两个窗口
<html>
<body>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello");
});
$(document).ready(function(){
alert("world");
});
</script>
</body>
</html>
以下是使用传统的DOM方式，为每个URL加一个事件，弹出“hello”窗口
<html>
<body>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
window.onload=function(){
var myLinks = document.getElementsByTagName("a");
for(var i =0;i<myLinks.length;i++){
myLinks[i].onclick=function(){
alert("hello");
}
}
}
</script>
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
<a href="#">test4</a>
</body>
</html>
以下是使用jQuery的方式，可见简化了循环。jQuery默认取出的是数组
<html>
<body>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
alert("hello");
});
});
</script>
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
<a href="#">test4</a>
</body>
</html>
DOM对象与jQuery对象互相转换：
DOM对象转换成jQuery
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var pElement = document.getElementsByTagName("p")[0];
//将DOM对象转换成jQuery对象
var pElementjQuery = $(pElement);
alert("DOM对象结果是:"+pElement.innerHTML);
alert("jQuery对象结果是:"+pElementjQuery.html());
});
</script>
</head>
<body>
<p id="clickMe">点击我</p>
</body>
</html>
jQuery对象转换成DOM，需注意的是，jQuery中获取的对象都是数组类型的，所以不需要遍历。
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//jQuery对象转换成DOM对象有两种方式：
//第一种方式
var t = cm[0];
alert(t.innerHTML);
//第二种方式
var s = cm.get(0);
alert(s.innerHTML);
});
</script>
</head>
<body>
<p id="clickMe">点击我</p>
</body>
</html>