jQuery（1）：jQuery上手

mynote

浏览: 124481 次
性别:
来自: 深圳

最近访客更多访客>>

leoeco2000

maorun

zhoujiaqi2012

dagf113225

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

jQuery JavaScript HTML

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>

分享到：