JQuery笔记-学习绚丽效果教你做之JQuery实战
第一讲：
1、HTML负责页面内容，CSS-样式，JavaScript-行为；
2、HTML中应该有DOCTYPE来告知浏览器的渲染显示方式；
3、可以先定义div或span节点用于以后显示服务器返回数据；
4、border属性可以 控制页面元素的边框；
5、background-***可以控制背景图，以及背景图的位置，重复显示的方式；
6、可以通过#idname或.classname的方式来定制html节点样式；
7、可通过$(document).ready(functin(){})的方式来定义页面装载完成时需要执行的方法；
8、可以通过$()方法来获得页面的指定节点，参数是某种css的选择器（用双引号），标签选择器、ID选择器和类别选择器；
9、可以在$()方法返回的jQuery对象上执行各种Jquery的方法来获取数据，定义事件，执行操作；
10、val()方法可以获得节点的value属性值；
11、html()可以设置某个节点中的html内容；
12、click()方法可以响应鼠标点击事件；
13、keyup()方法可以响应键盘弹起的事件；
14、$.get()方法可以和服务器端进行get方式的交互，注册的callback方法会在数据返回时被调用，该方法接收服务器端返回数据的一个纯文本的参数；
15、addClass() removeClass()方法可以给某个节点添加或删除一个class；
16、发送给服务器端的数据在javascript中做两次encodeURL，然后在服务器端的代码中安装UTF-8方式做一个URLDecode，可以解决中午乱码问题；
第二讲：
1、table中可以包含thead和tbody；
2、表头的内容可以放在th中；
3、table{}这种写法成为标签选择器，可以对整个页面所有的table产生影响；
4、table td{}表示是table中包含的所有td节点；
5、可以通过border-collapse:collapse这种方式来使表格中的单元格的边框合并；
6、当th上有背景色，这个th所属的tr上定义的背景色失效；
7、$(function()){}是$(document).ready(function(){})的简化写法；
8、$("tbody tr")可以返回tbody中的所有tr节点；
9、$("tbody tr:even")可以返回tbody中的所有索引值是偶数的tr节点；
10、css方法可以用于设定或获取节点的css属性，参数名是css的属性名；如$("test1").css("border-width","0")；
11、JQuery的对象内容包含着选择器对应的DOM节点，以数组形式保存；
12、get方法可以获得JQuery对象中包含的某个DOM节点；
13、function中的this代表执行这个function的对象；
14、$()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成JQuery对象；
15、children方法可以获得某个节点的子节点，可以指定参数来限制子节点的范围；tdObj.children("input")；
16、如果选择器返回的JQuery对象中包含多个DOM节点，在这个JQuery对象上注册类似click事件时，所有DOM节点都会用于事件；
17、html方法可以设置或获取节点的HTML内容；tdObj.html("new text");tdObj.html(); ；
18、val方法可以获取或设置节点的value值；$(this).val();$(this).val("new value")；
19、$()方法的参数如果是一段正确的HTML文本，则可以创建一个DOM节点，并包装成JQuery对象，如$("")；
20、JQuery大部分方法都会返回执行这个方法的JQuery对象，可以采用链式方法的写法来编写给予JQuery的代码；$("").css("border-width","0").css("font-size","16px");；
21、width方法可以设置或获取某个节点的宽度；tdObj.width();tdObj.width(1);；
22、appendTo方法可以将一个节点追加到另一个节点所有子节点的后面；newObj.appendTo(tdObj);；
23、阻止事件传递可以让当前节点的事件返回false；
inputObj.click(function() {
return false;
});
24、trigger方法可以出发某个javascript的事件发生；
25、JQuery中某个事件方法的参数function上可以定义一个event参数，JQuery会屏蔽浏览器的event差异，传给我们一个可用的event对象；
inputObj.keyup(function(event){
//获取当前按下键盘的键值
var keycode = event.which;
}
26、JQuery的event对象上有一个which的属性可以获得键盘按键的键值；
27、keycode中13表示回车键，27表示ESC键；
第三讲：
1、页面中的菜单项可以通过嵌套的ul和li来表示；
2、菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构建多次菜单；
3、浏览器中ul,li元素默认情况下文字前都有圆点标识符，li元素会有缩进，Opera浏览器比较特殊，li的标识符和其他浏览器不同；
4、list-style属性值为none时，可以清除ul,li前的小圆点；
5、清除子菜单的缩进值，需要padding和margin都为0，其中IE6/7只有margin也为0的时候才能清除缩进值；
6、可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域；
7、可以使用background-repeat来控制背景图的重复填充方式；
8、如果一个元素上同时定义了背景图和背景色，那么有背景图的地方时不会显示背景色的；
9、text-decoration属性值为none时，可以取消文字上的下划线；
10、background-position可以控制背景图的位置，属性值既可以是数值，也可以用center,left,top这些值来控制横向和纵向的位置，这个熟悉的两个值，第一个对应横向，第二个对应纵向；
11、background-image的值为none表示没有背景图；
12、background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示；
13、IE6以外的其他浏览器可以通过设定display的值为block来让a元素充满所在区域，对于IE6，则需要设定display为inline-block，同时设定a的宽度；
14、display的值为none可以隐藏元素；
15、.main a和.main > a的不同之外，前者选择使用了.main这个class的元素内部所有的a节点，后者只选择.main的子节点中的a节点；
16、show，hide方法可以用于显示或隐藏元素，没有参数时的效果和修改css的display属性效果一样，参数可以是单位为毫秒的数字，或者是'slow','normal','fast'这三个文字，都可以来控制完成显示或隐藏需要的时间，注意这时动画效果是靠不断改变元素的宽度和高度来实现的；
17、toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接进行状态反转；
18、slideDown,slideUp可以实现向下或向上卷动的效果，实际上是通过指定时间内修改元素的高度来实现动画效果，需要注意的是这两个方法参数为空的情况和show,hide不同；
19、slideToggle和toggle达到的效果类似；
20、DOCTYPE对于JQuery中的动画效果是有影响的，没有定义DOCTYPE时，IE中动画会出现闪烁的效果；
21、float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮动；
22、可以给多个选择器定义相同的样式，选择器直接用,分割，同样对于JQuery的$方法，也可以传入多个选择器如$(".main a, .hmain a")；
第四讲
1、一组标签用一个ul来管理，每个标签是ul中的一个li，便签下面的内容就是用div来管理；
- 标签1
- 标签2
- 标签3
2、跟在浮动元素（float）之后的元素会围绕着浮动元素，如果不希望有这种围绕，可以在浮动元素之后的那个元素上定义clear属性来清除这种效果；
div.contentfirst {
clear: left;
.....
}
该css属性清除left的浮动效果。
3、实现当前标签和内容区域的融合，可以通过使用相同的背景色，外加当前标签使用同颜色的边框来实现；
4、JQuery中的mouseover，mouseout方法对于标准javascript中的onmouseover，onmouseout事件，可以处理鼠标进入和离开的事件；
5、在一个包含多个元素的JQuery对象上执行each方法，可以注册给each方法的那个function的内容会被每个元素执行，该function还可以接收一个参数，表示这个元素的索引值。
$("#tabfirst li").each(function(index){
......
}
处理ID为#tabfirst的所有li元素。
6、eq方法可以根据索引值只得到JQuery对象中包含的多个元素中的某个元素，并仍然返回元素对应的新JQuery对象。
$("div").eq(0)
返回第一个div元素
7、选择器中使用eq，例如$("div:eq(1)")，返回第二个div元素。
8、addClass，removeClass方法用于添加和移除元素的class定义；
$("div.contentin").removeClass("contentin"); 把div中包含contentin类别的元素的contentin类别清除
$("div").eq(1).addClass("contentin"); 将第二个div元素增加contentin类别的css属性
9、javascript中的setTimeout方法可以延时执行某些代码，对应的clearTimeout可以清除设定的延时操作；
10、做一个AJAX应用的时候，可以考虑先在firefox上调试通过，然后再到其他浏览器中进行调试，检查其兼容性问题；
11、cursor属性可以控制元素上的鼠标样式，pointer的属性值表示手型样式，也就是我们常见的连接鼠标样式；
#tabsecond li {
...
cursor: pointer;
}
12、position属性可以控制元素定位的方式，值为relative时，表示相对于原来的位置进行定位，设定该值后可通过设定top,left,bottom,right的值来控制元素相对原来的位置进行移动；
13、z-index可以控制元素在页面中的层高，值越大就会在页面的层越靠前，也就覆盖住z-index值较小的元素。注：只有position的值为relative或absolute的元素，z-index才生效。
#tabsecond li.tabin {
z-index: 100;
position: relative;
}
#contentsecond {
position: relative;
top: -1px;
}
#contentsecond 使用默认z-index（0），所以#tabsecond li.tabin的元素会覆盖住ID为#contentsecond 的元素；
14、JQuery中的load方法十分强大，可以把一个指定的静态、动态页面或服务器端持续输出的数据装载入执行load方法的JQuery对象包装的元素中；
$("#realcontent").load("TabLoad.html");
ID为#realcontent的元素加载TabLoad.html内容；
15、load方法还支持部分装载，在装入的页面地址后面加空格，然后使用选择器，就可以把页面中符合选择器的部分装载进来；
$("#realcontent").load("TabLoad.jsp h2");
将TabLoad.jsp页面中的h2标签内容装载进来；
16、被load 的页面一定要是UTF-8编码的，否则装入后中文会出现乱码；
17、bind可以用于给指定的节点绑定javascript的事件或JQuery定义的事件，对于JQuery没有直接提供注册方法的事件，可以用这种方式注册，方法中的第二个参数可以是事件执行的方法；
$("#contentsecond img").bind("ajaxStart",function(){
......
});
18、ajaxStart，ajaxStop对应ajax交互开始前和结束后的事件
//对于loading图片绑定ajax请求开始和交互结束的事件
$("#contentsecond img").bind("ajaxStart",function(){
//把div里面的内容清空
$("#realcontent").html("");
//整个页面中任意ajax交互开始前，function中的内容会被执行
$(this).show();
}).bind("ajaxStop",function(){
//整个页面中任意ajax交互结束后，function中的内容会被执行
$(this).slideUp("1000");
});
第5讲：
1、img标签的alt属性要写上，在图片尚未装载进来或图片不存在时，这个属性的文字信息会显示出来；
2、select表示下拉框，下拉框的每一项都是一个option，option开始结尾标签中的内容会显示在页面上，value属性的值则是在JQuery中用val方法获取并发送给服务器的，定义了selected的属性值为selected时，表示当前option被选中。
3、div元素居中显示的方法：给div设定宽度，然后margin-left和margin-right的值都为auto，简写方法是margin:0 auto；
.loading {
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto;
}
4、html的p标签表示一个段落的内容，其中的内容会独占一行或多行，后面的内容会另起一行显示；
5、为了让p中文字和图片居中，可以使用text-align属性，属性值为center，p标签默认有margin-top margon-bottom的值，需要的话可以通过css清除；
.loading p {
text-align: center;
}
display: none;
}
...
});
9、parent方法可以获得一个节点的父节点；
以下面的html代码为例：
汽车厂商:
汽车类型:
车轮类型：
$(".carname").parent 是.car
$(".car").children("span")有三个，分别是.carname, .cartype, .wheeltype
$(".carname").next是.cartype
$(".cartype").previous是.carname
10、next方法可以获得一个节点的下一个兄弟节点，对应的previous方法可以获得一个节点的上一个兄弟节点；
11、$.post方法可以和服务器端发起post的异步请求。四个参数：
第1个参数：请求的服务器端地址，
第2个参数：发送给服务器端的数据，参数是javascript对象，采用key-value的格式，
第3个参数：回调函数，
第4个参数：指定服务器端返回的数据类型，JQuery会根据这个参数帮我们进行转换。
注：get方法只有第二个参数不同（get方法的参数是附在url后的），其他参数用法相同；
$.post("ChainSelect",{keyword: carnameValue, type: "top"},function(data){
...
}, "json");
12、javascript中的简单对象定义方式是{key1:value1,key2:value2}；
{keyword: carnameValue, type: "top"}
13、JSON的数据格式其实就是javascript中的一个对象或数据定义的文本格式内容，比如：{key1:value1,key2:[1,2,3]}或[1,2,{key2:value2}]；
14、可以直接使用$("").appendTo方法来新建一个选项并添加到下拉框中；
$("").appendTo(cartypeSelect);
15、attr方法可以设置或获取某个节点的属性值；
carimg.hide().attr("src","");
16、ajaxStart在每个JQuery发出的ajax请求开始前执行，ajaxStop在JQuery队列中所有的ajax请求结束后执行，ajaxComplete在每个JQuery发出的ajax请求结束后执行；
$(".loading").ajaxStart(function(){
$(this).css("visibility","visible");
$(this).animate({
opacity: 1
},0);
}).ajaxStop(function(){
$(this).animate({
opacity: 0
},500);
});
17、fadeOut和hfadeIn可以实现淡入淡出的效果，参数内容和slideUp/slideDown方法类似；
18、animate方法可以实现任意的动画效果，可以控制某个css属性在某个时间内进行变化，从而达到动画的效果；
19、opacity可以改变元素的透明度，IE中使用过滤器实现，100表示完全显示，0表示完全透明。非IE浏览器使用opacity属性，1表示完全实现，0表示透明，JQuery在animate方法中屏蔽了浏览器差异，直接使用opacity就可以达到淡入淡出效果；
$(this).css("visibility","visible");
$(this).animate({
opacity: 1
},0);
$(this).animate({
opacity: 0
},500);
20、data方法可以用于缓存数据，提供效率，降低服务器负荷；
21、可以使用javascript中的image对象来预装图片，这样可以知道图片何时装载完成，以便给出一些图片装载的提示信息；
22、load方法可以对应javascript中的onload事件，用于扑捉图片加载完成的事件；
$.post("ChainSelect",{keyword: cartypeValue, type: "sub"},function(data){
...
cartypeSelect.data(cartypeValue, data);
}, "json");
保存数据：cartypeSelect.data(cartypeValue, data);
读取缓存数据：var data = cartypeSelect.data(cartypeValue);