CSS+DIV+JQuery实战视频总结_html/css_WEB-ITnose

在牛腩中学习过CSS和DIV，在JS中学习过CSS+JS 封装，在这里又回顾了一遍，也作为查漏补缺，也算比较系统的复习了一遍吧。

css核心内容主要包括四个方面：标准流，盒子模型，浮动和定位，而在B/S前台页面的布局中，它们也起着决定性作用。盒子模型来确定每个元素的具体大小，边框和间距等，浮动定位与标准流结合来确定页面中元素之间的排列顺序和位置布局等，再加上一些基础的CSS样式如背景图片，颜色等就能形成格式各样的web页面了。

DIV：CSS中定位技术的一种，作为一个单独的模块出现。与span相对。而CSS中定位还包括如position的relative和absolute方式，它们可以结合起来进行使用，使页面出现较为复杂的定位效果。

JS：为了使CSS所设计好的页面能够呈现出一个动态的效果，同时为了解决其他语言在客户端与服务器端之间交互的速度缓慢的问题，可以采用JavaScript技术，而JQuery则是一个兼容多种浏览器的一个经过封装好的轻量级的JS库，利用它，可以更加方便的对页面中的各种元素设计各种动态效果。

而这二者间有着不可分割的关系:仔细分析发现，在JS设计动画效果时，许多看似很复杂的效果，其实都是通过设定页面元素的CSS样式来控制的。比如图片的淡入淡出是通过opacity样式来控制的，而滚动，加速减速等这些动画效果也只是通过一些如元素位置，大小等简单的CSS样式或者DOM元素属性加上一些简单的方法如setTimeout和setInterval等简单的函数封装而成的。为了方便，同样JS中也提供了一些方法来设置或获取CSS样式。

css查漏补缺，过滤器：

Ie: opacity:filter(alpha=50);//w3c opacity:0.5/*2、blur模糊*/.blur{	filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);}/*3透明色*/	.chroma{		filter:chroma(color=FF6800);		/* 去掉金黄色 */	}/*4、flip翻转*/	.flip1{		filter:fliph;	/* 水平翻转 */	}	.flip2{		filter:flipv;	/* 竖直翻转 */	}	.flip3{		filter:flipv fliph;	/* 水平、竖直同时翻转 */	}/*5、遮罩*/	.mask{		filter:mask(color=#8888FF);	/* 遮罩 */	}/*6、波浪*/	span.wave1{			filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4);	}

JS:李炎恢的视频中讲的挺全面的，针对于JQuery，视频中主要讲了有关于在实际应用中经常遇到的一些方法，在这里总结一下：

1.实现连缀：封装$()来返回一个JQuery对象。这里理解的JQuery对象其实和博客前端例子中的Base基础库核心对象一样。通过定一个一个构造函数对象，为这个对象的原型对象定义许多封装好的方法，以供外界进行调用，同时每次执行完成后，返回这个对象本身，以便下一次继续实现连缀调用。这样大大方便了编程人员，这也充分体现了JQuery的write less,do more的设计理念。

2、常用方法：

1.获取和设置属性

html(),css(),val(),scrollLeft/Top(),height()/width(),outerWidth(true)/Height(true)

2.显示隐藏

hide()和show()，slideDown()和slideUp()，toggle()和slideToggle()，fadeOut()/fadeIn()//这里要注意参数的使用slow,fast,normal或者直接为数字

3.动画效果

animate(),dequeue()

4、其他

Is()方法，scroll(),appendTo(),插件的使用，浏览器版本和类型的判断browser，JSON数据格式等等。

以上是关于JQuery视频中讲到的一些基础的知识概括。此外还包括一些基础的AJAX的封装函数如ajaxStart()和ajaxStop(),ajaxComplete(),$().get(),$().post（）等。

小结：CSS和JS二者的结合共同构成了如今网站中丰富多彩的web页面，基于JQuery是JS的一个封装库，在封装时，针对浏览器差异，应尽量采用能力控制而尽量摒弃版本控制的方式进行封装。同时，针对于封装好的JS库，也应该尽量去理解封装的原理，以达到知其然，知其所以然，以便今后建立我们自己的JS库。