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对象，如$("<input type='text'>")；

20、JQuery大部分方法都会返回执行这个方法的JQuery对象，可以采用链式方法的写法来编写给予JQuery的代码；$("<input type='text'>").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来管理；

<ul id="tabfirst">
<li class="tabin">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>

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属性要写上，在图片尚未装载进来或图片不存在时，这个属性的文字信息会显示出来；

<img src="images/pfeil.gif" alt="有数据" />

2、select表示下拉框，下拉框的每一项都是一个option，option开始结尾标签中的内容会显示在页面上，value属性的值则是在JQuery中用val方法获取并发送给服务器的，定义了selected的属性值为selected时，表示当前option被选中。

<select>
<option value="" selected="selected">请选择汽车厂商</option>
<option value="BMW">宝马</option>
<option value="Audi">奥迪</option>
<option value="VW">大众</option>
</select>

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;
}

6、visibility的属性值是hidden时，元素隐藏，但其和display为none的不同之处是，使用visibility:hidden时，元素在页面中依然占用的空间，只是不显示，而display:none的元素不仅不显示，而且也不占用的空间，后面的元素直接占用其空间；

7、多个选择器如果有相同的属性值，可以放在一起定义，选择器之间用逗号分隔；

.cartype, .wheeltype, .carloading, .carimg, .car img {
display: none;
}

8、change方法对应标注javascript中的onchange事件，可以处理下拉框内容变化的事件；

carnameSelect.change(function(){

...

});

9、parent方法可以获得一个节点的父节点；

以下面的html代码为例：

<div class="car">
<span class="carname">
汽车厂商:
<select>
<option value="" selected="selected">请选择汽车厂商</option>
<option value="BMW">宝马</option>
<option value="Audi">奥迪</option>
<option value="VW">大众</option>
</select>
<img src="images/pfeil.gif" alt="有数据" />
</span>
<span class="cartype">
汽车类型:
<select></select>
<img src="images/pfeil.gif" alt="有数据" />
</span>
<span class="wheeltype">
车轮类型：
<select></select>
</span>
</div>

$(".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、可以直接使用$("<option></option>").appendTo方法来新建一个选项并添加到下拉框中；

$("<option value=''>请选择汽车类型</option>").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);