尚硅谷-JavaWeb Day2 CSS-JS

CSS

1. CSS：层叠样式表单，用于（增强）控制网页样式并允许将样式信息域网页内容分离的一种标记性语言；

2. CSS和HTML的组合方式：

　　第一种：标签的style属性上设置"key:value value"，修改标签样式；（复用性差，麻烦）

　　第二种：head标签中，使用style标签定义各种所需的css样式；（只能在同一页面内复用，不能在多个页面中复用，不方便维护）

　　第三种：把css样式携程单独的css文件，再通过<link>标签引入复用；

　　　　　<link> 标签专门用来引入css样式代码；<link rel="stylesheet" type="text/css" href="1.css">

3. CSS选择器

　　3.1 标签名选择器：格式是　　标签名{ 属性：值 }

　　3.2 id 选择器：可以通过id属性选择性的使用这个样式；格式是　　#id 属性值 { 属性：值 }

　　3.3 class 选择器：可以通过class属性有效的选择性地使用这个样式；格式是　　.class 属性值 { 属性：值 }

　　3.4 组合选择器：可以通过class属性有效的选择性地使用这个样式；格式是　　选择器1，选择器2，选择器n { 属性：值 }

JavaScript

1. JavaScript 弱类型（类型可变），Java强类型；

2. 特点：

交互性：可以实现信息的动态交互
安全性：不允许直接访问本地硬盘
跨平台性：只要是可以解释 JS 的浏览器都可以执行

3. JavaScript 和 html 代码的结合方式

　　第一种方式：只需要在 head 标签或者 body 标签中，使用 script 标签来书写 js 代码 <script type="JavaScript ">

　　第二种方式：使用 script 引用外部的js文件来执行，src 属性专门用来引入js文件的路径（可以是绝对/相对路径）

　　注：书写js代码和引入外部js文件只能二选一；

4. JavaScript 的变量

　① 变量类型：数值类型（number）、字符串类型（string）、对象类型（object）、布尔类型（boolean）、函数类型（function）；

　② 特殊值：undefined(未定义，所有js变量未赋初始值的时候，默认都是undefined)、null(空值)、NAN(Not a number 非数字非数值)；

　③ 定义变量的格式：var 变量名；或者 var 变量名 = 值；

　④ 关系运算符：等于（==，简单的做字面值的比较）、全等于（===，除了比较字面值之外，还要比较数据类型）

　⑤ 逻辑运算：与（&&）、或（||）、取反（!）；

　　　　&& 与运算的两种情况

- - 当表达式全为真，返回最后一个表达式的值；
  - 当表达式中，有一个为假，返回第一个为假的表达式的值；

　　　　|| 或运算的两种情况

- - 当表达式全为假，返回最后一个表达式的值；
  - 当表达式中，有一个为真，返回第一个为真的表达式的值；

　　　　&& 与运算和 || 或运算 有短路：当 && 或 || 运算有了结果后，后面的表达式不再执行；

　　　　注：逻辑运算的大前提：所有变量都可以作为一个boolean类型的变量去使用；

　　　　　　0，null，空字符串，undefine都认为是 false；

　⑥ 数组：格式（var 数组名=[ ] //空数组或 var 数组名=[1，’abc‘，true] //定义数组同时赋值）

　　　注：只要通过数组下标赋值，最大的下标值就会自动给数组扩容；

　⑦ 函数（使用 function 关键字来定义函数）：

　　　　定义函数的格式：

- - 第一种：function 函数名(形参列表) { 函数体... }
  - 第二种：var 函数名 = function(形参列表) { 函数体... }；

　　　　　　　定义带有返回值的函数，只需要在函数体内直接使用 return 语句返回值即可。

　　　　　　　注意：js中函数不允许重载，重载会直接覆盖掉上一次的定义，总是执行最后一个同名的函数；

　　　　函数的 arguments 隐形参数（只在 function 函数内）：在 function 函数中无需定义便可获取所有参数的变量；

6. JavaScript 的内置函数

　　typeof()：可以取变量的数据类型并返回；

　　test()：用于测试某个字符串是不是匹配定制的规则，匹配就返回true；（正则表达式规则.test() 来调用）

7. JS 中的自定义对象

　　① Object 形式的自定义对象：

　　　　　对象的定义：

- - var 变量名 = new Object(); // 对象实例（空对象）
  - 变量名.属性名 = 值;　　　　 // 定义一个属性
  - 变量名.函数名 = function(){ }; // 定义一个函数

　　　　　对象的访问：变量名.属性/函数名()；

　　② { } 花括号形式的自定义对象：

　　　　　对象的定义：

　　　　　　　　var 变量名 = {　　//空对象

　　　　　　　　　　属性名：值，　//定义一个属性　　　　

　　　　　　　　　　函数名：function(){ }　　// 定义一个函数

　　　　　　　　};

　　　　　对象的访问：变量名.属性/函数名()；

8. JS 中的自定义事件（电脑输入设备与页面进行交互的相应）

　　常用的事件：

- onload：加载完成事件；（页面加载完成之后，常用于做页面 js 代码初始化操作）
- onclick：单击事件；（常用于按钮的单机响应操作）
- onblur：失去焦点事件；（常用于输入框失去焦点后验证其输入内容是否合法）
- onchange：内容发生改变事件；（常用于下拉列表和输入框内容发生改变后操作）
- onsubmit：表单提交事件；（常用于表单提交前，验证所有表单项是否合法）

　　事件的注册（绑定）（告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件响应）

　　　　静态注册事件：通过 html 标签的事件属性直接赋予事件响应后的代码；

　　　　动态注册事件：指先通过 js 代码得到标签的 dom 对象，通过 dom对象.时间名=function(){ } 赋予事件响应后的代码；

　　　　　　动态注册基本步骤：（1）获取标签对象；（2）标签对象.事件名=function(){ }；window.onload=function(){....}；

9. DOM 模型（Document Object Model 文档对象模型）

　　作用：把文档中的标签、属性、文本转换为对象来管理；

　　Document 对象的理解

- 管理了所有的 HEML 文档内容；
- 是一种树结构的文档，有层级关系；
- 所有标签都对象化；
- 可以通过 document 访问所有的标签对象；

　　Document 对象中的方法介绍

　　　　以下方法：当我们要操作一个标签的时候，一定要先获取这个标签的对象；

　　　　① 通过标签的id属性查找标签dom对象，elementId是标签的id属性值；

　　　　　　document.getElementById(elementId)；　

　　　　② 通过标签的name属性查找标签dom对象，elementName是标签的Name属性值；

　　　　　　document.getElementByName(elementName)；

　　　　　　返回多个标签对象集合，集合的操作和数组一样，集合中每个元素都是 dom 对象；顺序是html页面中的顺序；

　　　　③ 通过标签名查找标签dom对象，tagname是标签名；

　　　　　　document.getElementBytagName(tagname)；

　　　　　　按照指定标签名来进行查询，并返回集合；其他同上；

　　　　④ 方法，通过给定的标签名，创建一个标签对象，tagName是创建的标签名；

　　　　　　document.createElement(tagName)；

　　　　注：三个查询方法的顺序（一定要在页面加载完成之后执行，才能查询到标签对象，加载顺序是页面从上到下）

　　　　　　有 id属性，优先使用 getElementById 方法来查询；

　　　　　　没有 id属性，优先使用 getElementByName 方法查询；

　　　　　　最后按标签名查询 getElementBytagName；

10. 正则表达式：查文档；

11. dom 对象查询

　　节点就是标签对象；

　　方法：通过具体的元素结点调用

　　　　getElementsByTagName() 方法获取当前结点的指定标签名孩子结点；

　　　　appendChild(oChildNode) 方法，可以添加一个子节点，oChildNode是要添加的孩子结点；（在加载页面之后调）

　　属性：

- childNodes 属性：获取当前结点的所有子节点；
- firstChild 属性：获取当前结点的第一个子节点；
- lastChild 属性：获取当前结点的最后一个子节点；
- parentNode 属性：获取当前节点的父节点；
- nextSibling 属性：获取当前节点的下一个结点；
- previousSibling 属性：获取当前节点的上一个结点；
- className 属性：用于获取或设置标签的 class 属性值；
- nnerHTML 属性：表示获取/设置起始标签和结束标签中的内容；
- innerText 属性：表示获取/设置起始标签和结束标签中的文本；