1.3.2 编写简单的代码----导航栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-3_2
</title>
<style type="text/css">
#menu {
width:300px;
}
.has_children{
background : #555;
color :#fff;
cursor:pointer;
}
.highlight{
color : #fff;
background : green;
}
div{
padding:0;
}
div a{
background : #888;
display : none;
float:left;
width:300px;
}
</style>
<!-- 引入 jQuery -->
<script src="../jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("highlight")//为当前元素增加hightlight类
.children("a").show().end() //将子节点的<a>元素显示出来并
//重新定位到上次操作的元素
.siblings().removeClass("highlight")//获取元素的兄弟元素，并去掉它们hithlight类
.children("a").hide(); //将兄第元素下的<a>元素隐藏
});
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第1章-认识jQuery</span>
<a>1.1-JavaScript和JavaScript库</a>
<a>1.2-加入jQuery</a>
<a>1.3-编写简单jQuery代码</a>
<a>1.4-jQuery对象和DOM对象</a>
<a>1.5-解决jQuery和其它库的冲突</a>
<a>1.6-jQuery开发工具和插件</a>
<a>1.7-小结</a>
</div>
<div class="has_children">
<span>第2章-jQuery选择器</span>
<a>2.1-jQuery选择器是什么</a>
<a>2.2-jQuery选择器的优势</a>
<a>2.3-jQuery选择器</a>
<a>2.4-应用jQuery改写示例</a>
<a>2.5-选择器中的一些注意事项</a>
<a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
<a>2.7-还有其它选择器么？</a>
<a>2.8-小结</a>
</div>
<div class="has_children">
<span>第3章-jQuery中的DOM操作</span>
<a>3.1-DOM操作的分类</a>
<a>3.2-jQuery中的DOM操作</a>
<a>3.3-案例研究——某网站超链接和图片提示效果</a>
<a>3.4-小结</a>
</div>
</div>
</body>
</html>
1.4 jQuery对象和DOM对象
1.4.1 DOM对象和jQuery对象简介
1.DOM对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<h3>例子</h3>
<p title="选择你最喜欢的水果.">你最喜欢的水果是</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
</body>
</html>
可以把上面的HTML结构描述为一棵DOM树
在这棵DOM树中，<h3>、<p>、<ul>能及<ul>的3个<li>子结点都是是dom元素结点，可以通过javascript中的getElementsByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。dom对象可以使用javascript中的方法，示例如下
var domObj= document.getElementById("id");//获得DOM对象 var ObjHTHML= domObj.innerHtml; //使用javascript中的方法-innerHTML
2.jQuery对象
jQuery对象是通过jQUERY包装DOM对象后产生的对象。
JQUERY对象是JQuery独有的。如果一个对象是jQuery对象。那么就可以使用jQuery里的方法。例如：
$(“#foo”).html();//获得id为foo的元素内的html代码.html()是jQuery里的方法
这段代码等同于
document.getElemmentById("foo").innerHTML;
在JQuery对象中无法使用DOM对角的任何方法
1.4.2 JQuery对象和DOM对象的相互转换
如果获取的对象JQuery对象，那么在变量前面加上$,例如：
var $varibale= jQuery对象;
如果获取是DOM对象，则定义如下var varible=DOM对象;
1.jQuery对象转成DOM对象
jQuery对象不能使用DOM中的方法，但如果对JQuery对象所提供的
方法不熟悉，或者JQuery没有封装想要的方法，不得不使用DOM对象
的时候,有以下两种处理方法.
[index]和get(index)
1. jquery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象
var $cr=$("#cr"); //JQuery对象
var cr =$cr[0]; //DOM对象
alert(cr.checked) //检测这个checkbox是否被选中了
2.是jquery本身提供的，通过get(index)方法得到相应的DOM对象。
var $cr=$("#cr"); //JQUERY对象
var cr=$cr.get(0);//DOM对象
alert(cr.checked) //检测这个checkbox是否被选中了
1.4.3 实例研究
下面举个例子，来加深对jQuery对象和DOM对象的理解
某个注册页面，用户必须选中页面下方的”同意并接受注册协议复选框，否则不能提交”。
<input type="checkbox" id="cr"/><label for="cr">我已经阅读了上面制度.</label>
然后编写javaScript部分.通过$(“#cr”)获取复选框元素，然后通过判断复选框是否选中，来执行下一步操作。
//等待dom元素加载完毕.
$(document).ready(function(){
var $cr = $("#cr"); //jQuery对象
$cr.click(function(){
if($cr.is(":checked")){ //jQuery方式判断
alert("感谢你的支持!你可以继续操作！");
}
})
});
1.5解决jQuery和其它库的冲突。
