首页 > 代码库 > 锋利的jQuery第一章
锋利的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=http://www.mamicode.com/"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=http://www.mamicode.com/"#none">衬衫</a> <ul class="level2"> <li><a href=http://www.mamicode.com/"#none">短袖衬衫</a></li> <li><a href=http://www.mamicode.com/"#none">长袖衬衫</a></li> <li><a href=http://www.mamicode.com/"#none">短袖T衫</a></li> <li><a href=http://www.mamicode.com/"#none">长袖T衫</a></li> </ul> </li> <li class="level1"> <a href=http://www.mamicode.com/"#none">卫衣</a> <ul class="level2"> <li><a href=http://www.mamicode.com/"#none">开襟卫衣</a></li> <li><a href=http://www.mamicode.com/"#none">套头卫衣</a></li> <li><a href=http://www.mamicode.com/"#none">运动卫衣</a></li> <li><a href=http://www.mamicode.com/"#none">童装卫衣</a></li> </ul> </li> <li class="level1"> <a href=http://www.mamicode.com/"#none">裤子</a> <ul class="level2"> <li><a href=http://www.mamicode.com/"#none">短裤</a></li> <li><a href=http://www.mamicode.com/"#none">休闲裤</a></li> <li><a href=http://www.mamicode.com/"#none">牛仔裤</a></li> <li><a href=http://www.mamicode.com/"#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提示功能
下载地址：http://www.aptana.com/
对于jQuery提示插件下载地址：https://github.com/aptana/javascript-jquery.ruble
这个插件叫jquery.ruble.后缀是.sdocml，只要把他放到你的项目下面就行了。