锋利的jQuery第一章
以前总是感觉js,html,css,jquery这些东西太繁杂，看着都头晕，想着做后台，不用管这些东西，可是工作之中发现，很多前台后台结合 的地方，比如通过ajax发送到后台，如果不懂得jQuery,感觉很被动，于是，我也不管那么多了，从现在开始学习jQuery了。
我喜欢看书本学习，以后博客将记录我学习的笔记：
1,window.reload()和$(document).ready()的区别：
2,有关菜单的代码：
<!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=gb2312" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){ //等待所有dom绘制完成后就执行
$(".level2").hide(); //加载时隐藏class="level2"
$(".level1 > a").click(function(){ //选择class="level1"下的a
$(this).addClass("current") //给当前元素a添加一个样式
.next().show() //下一个元素ul显示
.parent().siblings().children("a").removeClass("current")
//父元素li的同辈元素li的子元素a移除样式
.next().hide(); //a的下一个元素ul隐藏
return false;
});
});
</script>
<title>菜单的例子</title>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#none">衬衫</a>
<ul class="level2">
<li><a href="#none">短袖衬衫</a></li>
<li><a href="#none">长袖衬衫</a></li>
<li><a href="#none">短袖T衫</a></li>
<li><a href="#none">长袖T衫</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">卫衣</a>
<ul class="level2">
<li><a href="#none">开襟卫衣</a></li>
<li><a href="#none">套头卫衣</a></li>
<li><a href="#none">运动卫衣</a></li>
<li><a href="#none">童装卫衣</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">裤子</a>
<ul class="level2">
<li><a href="#none">短裤</a></li>
<li><a href="#none">休闲裤</a></li>
<li><a href="#none">牛仔裤</a></li>
<li><a href="#none">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
我实验了一下，选择level1下的a可以有两种方式：
(1)$(".level1 > a") (2)$(".level1 a")
3,jQuery对象和Dom对象的区别
(1)每一份Dom都可以表示为一棵树。如下图：
Dom对象可以使用Javascript的方法，不能使用jQuery的方法：
var domObj = document.getElementById("id"); //获取Dom对象
var ObjHTML = domObj.innerHTML; //使用js的属性innerHTML
(2)jQuery对象是jQuery包装Dom对象以后产生的对象。
jQuery只可以使用jQuery的方法：
$("#foo").html(); //获取id为foo元素的html代码
(3)
jQuery对象转为Dom对象：
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //Dom对象
var cr = $cr.get(0); //Dom对象
Dom对象转为jQuery对象：
var cr = document.getElementById("cr"); //Dom对象
var $cr = $(cr); //jQuery对象
4，一个小例子：
<input type="checkbox" id="cr" /><label for="cr">我同意上面的制度</label>
var $cr = $("#cr"); //取出来id=cr的对象
$cr.click(function(){
if($cr.is(":checked")){ //is(":checked")判断JQuery对象是否被选择中
alert("谢谢您同意");
}
});
还可以这样写：
var $cr = $("#cr"); //取出来id=cr的对象
var cr = $cr[0];
$cr.click(function(){
if(cr.checked){ //js方法判断
alert("谢谢您同意");
}
});
5,开发工具和插件下载：
(1)下载插件jQuery_api_for_dw4安装到dreamweaver中可以提示jQuery函数。
下载地址：http://code.google.com/p/jquery-api-zh-cn/downloads/list
安装：命令---扩展管理---安装扩展---选择
(2)开发工具APtana，本身提供html，css,js提示功能
对于jQuery提示插件下载地址：https://github.com/aptana/javascript-jquery.ruble
这个插件叫jquery.ruble.后缀是.sdocml，只要把他放到你的项目下面就行了。
