第一季度总结

转眼来到公司已经三个月了  , 在这期间有收获也有困惑 , 对于现在手上的工作其实是不满的 , 我是通过培训接触到的java  , 然而对于不爱读书的我 , 学习的并不理想 , 刚到公司的时候好多事情都难以上手 , 而且我的这家公司非常小 , 基本进来什么事都要去做 , 从写需求设计到编码开发 , 对于我这样刚从培训里走出来的小菜鸟 , 负荷是在太重 , 特别是像我这样学的还并不好的人 , 后来经过领导商议决定让我做前端(因为公司前端没人) , 可能是前端上手比java容易 , 又或者是自己有一点java的基础 , 反而觉得在前端这块学习进步的特别快 , 在培训的时候写静态页面也写了不少 , 对于html还是蛮熟悉的 , 又经过这段时间的使用 , 摸索 ,  相比于刚进公司的自己 ,  js技术也是突飞猛进 , 还通过项目空余时间自己写了一个仿京东商城 , 大体页面的功能基本都实现了 , 本来已经很没信心的我又重燃了斗志 , 原来自己也是可以做出东西来的 . 在工作之余我喜欢看看网上优秀的博客 , 从其中学习其他同行的经验 , 其中有一篇对我印象特别深 , 他谈的并非是纯技术层面的东西 , 而是告诉别人  , 对于我们做技术这行 , 总结的重要性 , 刚使用过的技术点 , 用过了或许是有印象  , 但不保证下次你就还会用 , 不总结只能记住常用的技术 , 总结了才能收获全部的技术 . 这句话我思考了很久 , 非常认同 . 于是我想将这段时间所学习的知识点做一次总结 :

 1.布局定位 , 

在做商城页面的时候  , 第一点就是布局的问题 , 为了让页面在不同尺寸显示下格局不被打乱 , 需要用到绝对定位和相对定位的技术 , 

要用到position属性的 : relative(相对定位),absolute(绝对定位)

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

2.显示隐藏 ,

为了实现某些动态效果 , 会频繁的利用js或jq控制div的显示和隐藏 ,

要用到visibility(visibility,hidden);display(block,none)

visibility:使用该属性控制div隐藏时 , 空间仍被占用

display:使用该属性控制div隐藏时 , 元素的位置不被占用

以上两种属性需要根据页面布局的需求 , 选择合适的 

3.属性变更 ,

为了提升用户体验度 , 当鼠标移动到某区域的时候 , 经常会显示不同的背景色 , 制造高亮区域 , 那么类似这样的效果是怎样实现的呢?

通过js或jq设置或变更style标签下的元素的属性 

js的用法如下 :

document.getElementById('ssid').value = '你好呀'-------- 获取id为ssid的标签并设置其value值为 '你好呀'

document.getElementByName('ssname').style.backgroundColor = '#999999' -------- 获取name为ssname的所有标签并设置其背景颜色为灰色

document.getElementByTagName('button').style.fontSize = '12px' --------更改所有button的字体大小为12像素

jq的用法如下 :

$('#ssid').val('你好呀');-------- 获取id为ssid的标签并设置其value值为 '你好呀'

$('div[name="ssname"]').css('background-color','#999999');-------- 设置name为ssname的所有div标签的背景颜色为灰色

$('button').css('font-size','12px');--------更改所有button的字体大小为12像素

4.查找及定位元素(父元素,子元素及兄弟元素等等)

parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")

parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素

children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个jQuery对象返回，

children()则只会返回节点

prev()，返回上一个兄弟节点，不是所有的兄弟节点

prevAll()，返回所有之前的兄弟节点

next(),返回下一个兄弟节点，不是所有的兄弟节点

nextAll()，返回所有之后的兄弟节点

siblings(),返回兄弟姐妹节点，不分前后

find(expr),跟filter(expr)完全不一样。filter()是从初始的jQuery对象集合中筛选出一部分，而find()的返回结果，不会有初始集合中的内容，

比如$("p"),find("span"),是从p元素开始找,等同于$("p span")