jquery是继prototype后一个很好用的javascript库。jquery是一个轻量级的库,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性和链式操作等功能.
window.onload 与$(document).ready()的区别
1.执行时机:window.onload 必须等待网页中所有的内容加载完毕之后才能执行(包括图片)
而$(document).ready()当网页中所有DOM结构绘制完毕之后就执行,可能DOM关联的东西并没有加载完。
2.编写个数:window.onload只能编写一次,而后者可以编写好多次
3.简化写法:前者没有,后者可以简写成为$(function(){.......});
一个导航栏的小例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
.menu{ width:300px;}
.has_children{ background:#555; color:#fff; cursor:pointer}
.highlight{ color:#fff; background:green;}
div{ padding:0; margin:10px 0;}
div a{ background:#888; display:none; float:left; width:300px;}
</style>
<script type="text/javascript">
$(function(){
$('.has_children').click(function(){
$(this).addClass('highlight').children('a').show().end().siblings().removeClass('highlight').children('a').hide();
});
});
</script>
<body>
<div class="menu">
<div class="has_children">
<span>第一章 认识jquery</span>
<a>1.1javascript 和javascript库</a>
<a>1.2javascript 和javascript库</a>
<a>1.3javascript 和javascript库</a>
<a>1.4javascript 和javascript库</a>
<a>1.5javascript 和javascript库</a>
<a>1.6javascript 和javascript库</a>
<a>1.7javascript 和javascript库</a>
</div>
<div class="has_children">
<span>第二章 jquery选择器</span>
<a>2.1javascript 和javascript库</a>
<a>2.2javascript 和javascript库</a>
<a>2.3javascript 和javascript库</a>
<a>2.4javascript 和javascript库</a>
<a>2.5javascript 和javascript库</a>
<a>2.6javascript 和javascript库</a>
<a>2.7javascript 和javascript库</a>
</div>
<div class="has_children">
<span>第三章 jquery操作DOM</span>
<a>3.1javascript 和javascript库</a>
<a>3.2javascript 和javascript库</a>
<a>3.3javascript 和javascript库</a>
<a>3.4javascript 和javascript库</a>
<a>3.5javascript 和javascript库</a>
<a>3.6javascript 和javascript库</a>
</div>
</div>
</body>
</html>
如何将一个jquery对象转换成DOM对象
(1)jquery对象是一个数组对象,可以通过[index]对象转换
var $cr=$('#cr'); var cr=$cr[0]; alert(cr.checked);
(2)利用jquery本身的get(index)方法
var $cr=$('#cr'); var cr=$cr.get(0); alert(cr.checked);