css+javascript

css：cascading style sheets

• 基本语法：

  • 选择器+声明 eg: p{color:red}

• css选择器

  • 标签选择器 p{} div{}
    类选择器 .类名
    ID选择器 #id{}

• css的位置

  • style属性中，行内样式表
  • style标签中，内部样式表
  • .css文件中，外部样式表
    • link 标签引入
      • type 类型
      • rel 规定当前文档和被引入文档的关系，引入方式
        • “shylesheet” 全部浏览器支持
      • href 位置
  • 样式冲突：就近原则

• CSS中的颜色

  • CSS中的颜色用RGB颜色：红色(red)、绿色(green)、蓝色(blue)——光学三原色表示。
  • RGB中每种颜色都用两位十六进制数表示，0表示没有光，F表示最强的光，并按红、绿、蓝的顺序排列，前面再加上#号。
  • 例如：#000000黑色；#FFFFFF 白色；#FF0000红色；
    - #00FF00绿色；#0000FF蓝色等等。
  • 十六进制色 红蓝黄每个使用两个十六进制数表示
    • 十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
  • RGB 颜色
    • RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。
  • RGBA 颜色
    • RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
    • RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
  • HSL 颜色
    • HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。
    • HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。
    • HSL 颜色值得到以下浏览器的支持：IE9+、Firefox、Chrome、Safari 以及 Opera 10+。
  • HSLA 颜色
    • HSLA 颜色值是 HSL 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
    • HSLA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
  • 预定义/跨浏览器颜色名
    • ？？？

javaScript

• 基于对象和事件驱动的脚本语言

  • 特点：js是一种弱类型语言，还是一种动态语言。

• 变量
  1.变量声明
  - 定义：js是基于对象和事件驱动的脚本语言
  - 特点：js是一种弱类型语言，对数据类型不敏感()
  - 使用var声明变量
  - js是一种动态语言，使用期间，可以随意赋值
  2.变量赋值
  3.变量严格区分大写小写

• 函数对象

  1. 定义函数
     1. function 函数名(){}
     2. var fun = function(){}
  2. 函数调用
     1. 函数名加()即可
     2. js中函数调用时不检查形参和实参匹配
        1. 形参 = 实参，正常现象
        2. 形参 < 实参，自动忽略多余参数
        3. 形参 > 实参，
           1. 实参为string，值undefined
           2. 实参为number，NaN
  3. NaN(not a number)

• 在js中创建对象的两种方式

  1. var object = new Object();
  2. var json = {key:value, key2:value2};

• 事件，绑定到事件上执行

  • 定义函数对象
  • 获取对象
  • 绑定函数

	函数
声明	不会执行
绑定到指定控件上	不会执行
触发事件	执行

• 嵌入方式
  1. 写到标签的事件属性中：结构与行为相耦合，不建议使用
  2. 写到script标签中，script标签放到head标签中，无法获取按钮对象
  3. 写到script标签中，script标签放到body标签后面，不符合我们的习惯
  4. 使用window.onload，完美解决此问题
  5. 引入外部的js文件

//绑定，使用window.onload方式
<script type="text/javascript">
	window.onload = function(){
		var dd = document.getElementById("btnId");
		dd.onclick = function(){
			alert("hello");
		}
	}
</script>

文档对象模型Document Object Model

• DOM定义了访问和处理 HTML 文档的标准方法。是W3C国际组织制定的统一标准，在很多计算机语言中都有不同实现
• 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点
• DOM节点
  • 分类
    • 文档节点
    • 元素节点
    • 文本节点
    • 属性节点

操作

• 查找节点
  • 查询元素节点
    1. document.getElementById(“id值”)
    2. document.getElementsByTagName(“标签名”)
    3. document.getElementsByName(“name值”)
  • 具体的元素节点范围内查找子节点
    1. element.childNodes 查找子节点，返回节点数组
    2. element.firstChild 查找第一个子节点，返回节点对象
    3. element.lastChild 查找最后一个子节点，返回节点对象
    4. element.getElementsByTagName(“标签名”) 查找制定标签名的子节点，返回节点数组
  • 父节点
    1. element.parentNode
  • 查找指定元素节点的兄弟节点
    1. node.previousSibling
    2. node.nextSibling
• 查找节点，处理属性
  1. 读取属性值
     元素对象.属性名
  2. 修改属性值
     元素对象.属性名 = 新的属性值
• 获取文本值
  • 获取文本节点父节点
  • 获取父节点的第一个子节点
    • parentEle.firstChild
  • 获取文本节点的节点值
    • parentEle.firstChild.nodeValue
• innerHTML
  • 返回对象的起始位置到终止位置的全部内容,包括Html标签。
  • 读取元素内部HTML代码
  • 元素对象.innerHTML
  • 修改元素内部HTML代码
  • 元素对象.innerHTML=HTML代码
• js中的文本问题
  1. innerHTML:获取|设置文本信息（解析HTML标签）
     • innerText:获取|设置纯文本信息（不解析HTML标签）
  2. value,获取value属性值
• 阻止当前默认操作
  • return false;