css+javascript

最新推荐文章于 2025-02-11 09:04:10 发布

热风吹

最新推荐文章于 2025-02-11 09:04:10 发布

阅读量202

点赞数

分类专栏： web基础

本文链接：https://blog.youkuaiyun.com/qq_34548401/article/details/84947969

版权

web基础专栏收录该内容

11 篇文章

订阅专栏

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;