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

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代码为例:



汽车厂商:

有数据


汽车类型:

有数据


车轮类型:



$(".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);













你可能感兴趣的:(JQuery)