展现jQuey用法

<script type="text/javascript" src="jquery-1.6.3.js"></script>

<script type="text/javascript">
//ready方法的作用是当页面的dom加载完毕之后执行参数中的函数
$(document).ready(function(){
	alert("Hello,world!");	
});

//下面的语句只执行弹出test2,不弹出test1
function test1(){
	alert("test1");
}
function test2(){
	alert("test2");
}
window.onload = test1;
window.onload = test2;

//而下面的语句先弹出南阳理工学院,而后弹出软件学院
$(document).ready(function(){
	alert("南阳理工学院");	
});
$(document).ready(function(){
	alert("软件学院!");
});

</script>

看下面用JavaScript实现的程序:点击链接弹出Hello,world!

<script type="text/javascript">
	window.onload = function(){
		var myLinks = document.getElementsByTagName("a");
		for(var i = 0; i < myLinks.length; i++){
			myLinks[i].onclick = function(){
				//给每一个超链接对象附加onclick属性
				alert("Hello,world!");
			}
		}
	}
</script>

<a href="#">test1</a><br/>
<a href="#">test2</a><br/>
看下面用jQuery来实现上述功能:

<script type="text/javascript">
$(document).ready(function(){
                //click是个方法
                $("a").click(function(){
		alert("Hello,world!");
	});
});
</script>
说明:在JavaScript中的属性在jQuery中变成方法,还说了jQuery官网那句话write less,do more;

jQuery对象和DOM对象的互相转换:

<script type="text/javascript">
$(document).ready(function(){
	//DOM对象
	var pElement = document.getElementsByTagName("p")[0];
	//将DOM对象转化为jQuery对象
	var pElementjQuery = $(pElement);
	
	alert("DOM对象结果是:" + pElement.innerHTML);
	alert("jQuery对象结果:" + pElementjQuery.html());
	
	//获得是jQuery对象,注意#号表示元素id,不加#表示获得是标签。
	var cm = $("#clickMe");
	
	//jQuery对象转换为DOM对象(第一种方式)
	var t = cm[0];
	alert("t_DOM对象" + t.innerHTML);
	
	//jQuery对象转换为DOM对象(第二种方式)
 var s = cm.get(0);
	alert("s_DOM对象" + s.innerHTML);
});
</script>
<p id="clickMe">点击我</p>


你可能感兴趣的:(展现jQuey用法)