Web前端知识点总结（一）

1.HTML:文档结构

2.CSS：文档样式，与HTML 交互 （选择器{属性：值}）
a.选择器：
元素选择器：p div img table…..
id选择器：#idName
类选择器：.className
组合选择器：body,p,h1……
后代选择器：p span(p下面的所有span)
子选择器： p>span(以p为父元素的第一代子元素span)
相邻兄弟选择器：p+span(紧接着p之后的一个span,并且它们具有相同的父元素)
属性选择器:img[alt] (所有具有alt属性的img)
img[alt=”#”] (所有alt属性等于#的img)
伪类选择器：p:first-child(p的第一个子元素)
a:hover,a:visited等
b. 属性：
文本属性：color,line-height,text-align,text-indent……
文字属性：font,font-family,font-weight,font-size
背景属性：background,background-color,background-image
background-repeat,background-position.
链接属性：a:hover,a:link,a:visited,a:active,text-decoration.(可控制其文本和文字属性)
列表属性：list-style,list-style-image,list-style-type,list-style-position
表格属性：border-collapse,border-spacing,caption-side,
边框属性：padding,margin,border
定位属性：position,left,top,float
属性值根据不同的属性确定

3.Javascript(含有本身众多语法):文档行为 与HTML和CSS 交互
I.与HTML交互
a.选择DOM元素：getElementById();
getElementsByTagName();
getElementsByClassName()
b.遍历DOM元素：（假设已选元素为ele）
获取父元素：ele.parentNode 返回类型：node
获取子元素：ele.firstChild 返回类型：node
ele.lastChild 返回类型：node
ele.childNodes 返回类型：nodes(所有子节点)
获取兄弟节点：ele.nextSibling 返回类型：node (下一个兄弟)
ele.previousSibling 返回类型：node (下一个兄弟)
c.操作DOM元素:
创建DOM节点：createElement(“div”)
createTextNode(“文本”)
添加DOM节点：appendChild(new node) （在节点最后一个子节点处添加新节点）
修改DOM节点：replaceChild(new node,old node)
删除DOM节点：removeChild(node)
d.对DOM元素属性操作：
获取元素属性值：getAttribute(“属性名”)
设置元素属性值：setAttribute(“属性名”，”属性值”)
e.为DOM元素添加事件（事件流：事件冒泡、事件捕获）
添加事件的方法：1.HTML事件处理
2.DOM 0级时间处理
3.DOM 2级事件处理
（注：存在浏览器兼容性的问题）
事件类型有：
1.UI事件（load、unload、resize..）
2.鼠标事件（click、dbclick、mouseout、mouseover….）
3.焦点事件（blur、focus..）
4.键盘事件（keydown、keyup..）
……..
II.与CSS样式交互
设置单个样式：ele.style.样式名=”样式值”
操作整个样式：ele.style.cssText=”整个样式字符串”(例如：”color:red;font-size:12px”)
(注：若某元素前面使用了单个元素设置属性后再用整个样式设置属性会将前面的覆盖掉)
javascript中还有很多重要的东西（DOM、BOM、AJAX、JSON等等核心技术）

I.对HTML操作
a.选择DOM元素：$(“”),双引号中可以是任意的CSS选择符
b.遍历DOM树：
向上遍历：parent() 直接父元素
parents() 全部父、祖父…元素
parentsUntil(“”) 父元素知道“”中的，不包括
向下遍历：children(“”) 直接子元素
find(“”) 一路向下的所有元素
同胞遍历：siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil(）
缩小范围（过滤）：eq(),first(),last()….
c.对DOM进行操作
添加DOM元素：
append() 把B追加到A尾部
prepend() 把B追加到A开头
after() 在A后追加B
before() 在A前追加B
删除元素：
remove()
empty()
复制元素：clone()
替换元素：
replaceWith()
replaceAll()
d.对DOM元素属性操作
获取和设置属性： attr() 类似Attribute()
删除属性：removeAttr()

II.对CSS操作
添加样式： addClass()
删除样式：removeClass()
切换样式：toggleClass()
设置获返回样式属性：css()
III.还有很多，事件，动画效果，Ajax等。（框架也不仅限于JQuery，还有很多）