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.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");//将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;alert(t.innerHTML);//第二种方式var s = cm.get(0);alert(s.innerHTML);});</script></head><body><p id="clickMe">点击我</p></body></html>
页:
[1]