js+css学习感悟

一直听说js和css简单易学，自己做了项目之后感觉不好学，页面的布局好像没有思路，尤其是css定位，自己一知半解，不太明白设计思路，现在对学到的知识做一个总结。

1、刚进入页面的时候，默认选中第一个div或者列表中的第一个用：first即可：$(".alb-nav:first")；

2、点击自定义单航栏切换div时，点击事件添加样式，并传递该单航栏的隐藏id（通过判断有无点击样式类获取该控件）查询响应，注意点击事件前先移除掉有点击样式的类，模块进来时默认选中第一个之前移除带有点击样式的类；

3、查找控件时，注意jQuery的属性选择；如find，next，children，attr，hasClass，removeClass，addClasss，this；在控件上加id时添加属性，将查询的id赋值给属性；

4、当多个单航栏通过循环添加，其类名一样 ，注意切换样式时用each遍历每一个控件：$(".have-click-source").each(function()；

5、用到的事件：mouseenter（鼠标指上去变化）；mouseleave（鼠标移除变化）；trim（去掉空格）；model（模态框，用来弹窗）；blur（控件失去焦点事件）；注意：当控件循环展示每个都带有这个类时，需要在绑定焦点事件之前先解绑：$(".pagename-font").unbind("blur");

6、带有某属性的div的滑动：$("div[proClassId="+id+"]").slideDown();

7、点击页面跳转：window.open("edit?id="+$(elem).attr("pageid"));

8、当将页面的输入框的名称和属性变为json字符串样式传入数据库时，each遍历每个输入框，获取key值和value值，定义一个json字符串样式的对象，var obj = {column:key,alias:value};将每个的值存入这个对象；然后定义一个数组;var sqlColumn = [];利用push将obj对象存入数组中；sqlColumn.push(obj);转化形式传入后台：JSON.stringify(sqlColumn)；

9、ajax请求成功前的回调函数，触发局部操作；如测试连接前的等待时间加缓存图片，用beforeSend : function()；css相关：

10、div默认独占一行，当添加display: inline-block; 时变成块元素，不独占一行；

11、position: absolute;是绝对定位，是依据他的第一个父元素进行定位；position: relative；是相对定位，依据它原先的位置定位；

12、添加模块div时注意需要父容器

13、margin和padding的区别：margin是容器相对另一个容器的外边界的距离；padding是容器的元素相对边框的距离；

14、overflow：元素溢出时的操作；如滚动，隐藏，裁剪；cursor：显示的光标类型；

15、可多了解一些通用的控件名称，如单航栏nav等；