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