CSS样式表单，JavaScript语法格式（JSON）（二）CSS样式表格式，位置以及导入方式。Javascript语

CSS样式表

CSS全称Cascading Style Sheets (层叠样式表)

CSS作用：美化HTML静态网页

CSS语法

选择器【选择符】{属性：属性值；属性2：属性值2.....}

CSS选择器

标签选择器：选中所有匹配标签元素

语法：标签名{}

ID选择器：选中【匹配指定id属性值】元素

语法：

定义：#ID名

匹配：

<div id="ID名"></div>

类选择器：选中【匹配指定class属性值】元素

语法：

定义：.类名

匹配：

<div class="类名"></div>

CSS嵌入方式

行内样式表

书写位置：书写标签行内

内部样式表

书写位置：书写在head标签内，<style>标签中

外部样式表

书写位置：书写在外部xxx.css文件中，使用link导入。导入格式如下

 <link href="demo.css" rel="stylesheet" type="text/css">

样式表优先级【就近原则】

行内样式表>内部样式表>外部样式表

描述同一属性会被覆盖。

css中颜色取值问题

关键字

如：red，green，blue

十六进制

如：#ff0000或者#f00

rgb()

如：rgb(255,0,0)

JavaScript

JavaScript的特点

js是脚本语言，边解释边执行。它也是面向对象的，不仅可以创建对象，也能使用现有的对象。但是它不是纯粹的面向对象的语言。不能够实现多态。js是一个弱类型语言（Java是强类型语言），js是动态类型语言（java是静态类型语言）。js是跨平台的。

JavaScript的HelloWorld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>


</head>
<body>
<input type="button" value="Hello" id="btn">

<script>
  var btn = document.getElementById("btn");
  btn.onclick = function (){
    alert("Hello! This is JS!")
  }
</script>
</body>
</html>

JS的变量

声明变量的关键字

var

let【ES6之后推荐使用】

JS中变量的注意事项

1 JS中定义变量，可以任意赋值【任意数据类型，数值】

2 js中变量可以不声明，直接赋值之后使用【不建议】

3 变量名严格区分大小写

JS数据类型

使用typeof()方法，判断变量数据类型

基本数据类型

数值型：number

字符型：String

布尔型：boolean

空值型：null

未定义：undefined【只声明，未赋值】

对象数据类型

数组对象

函数对象

一般对象

JS运算符

类java运算

算数运算符
关系【比较】运算符
逻辑运算符
三元运算符
...

”==“和”===“的区别【面试题】

==：判断变量数值是否相等
===：判断变量是否全等
!==：判断是否不全等

全等：

数据类型相等且数值相等。

不全等：

数据类型不等或者数值不等或者数据类型和数值均不等。

流程函数

与java语法一致

JS数组

数组定义

<script>
    var arr = new Array();
	let arr2 = [];
</script>

数组使用

JS中使用数组，可以任意赋值【任意数据类型，任意数值】。JS中的数组，是可以自动扩容的。

数组示例：

<script>
	var arr = new Array("zhangsan",18,true);
    for (var i = 0; i < arr1.length; i++) {
    console.log(i+":"+arr1[i]);
  }
    
    let arr = ["张三","李四",2021];
  for (let i = 0; i < arr.length; i++) {
    console.log("arr["+i+"]"+arr[i]);
  }
</script>

JS中的函数

java中的方法

定义方法：

访问修饰符返回值类型方法名([参数列表]){}

调用方法:

对象名.方法名()

定义函数

普通函数

function 函数名([参数列表]){}

匿名函数

function([参数列表]){}

调用函数

JS中调用函数时，不检查函数的形参与实参的匹配情况（不会报编译时错误）。

普通函数调用

js中形参和实参数量不一致的情况

实参数量＞形参数量时：自动忽略多余实参

实参数量＜形参数量时：

①参数类型是【number】：返回NaN【not a Number】

②参数类型【string】：返回，参数undefined

匿名函数的调用

事件名 = function(){}

或者 var fun = function(){}

调用函数时，使用函数名和函数名()是有区别的

函数名：使用函数引用

函数名()：触发也就是立即执行函数

arguments封装实参，将所有的实参封装到arguments数组中去。

JS中函数的重载和重写问题

JS中是没有函数重写问题的，并不能自定义一个类（只是我们可以自定义方法去作为一个“类”去人为实现“继承”，那就要具体问题具体分析了）。

JS中也没有函数重载问题，JS后面同名的函数覆盖前面所有的同名函数（无论调用函数运行的位置在哪里，都只能调用到最后一个同名函数）。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>方法</title></head><body><script>  function method(){    alert("无参方法");  }  method();  /*同名方法最后面的哪个函数会覆盖前面所有同名函数，即使在前面函数后面紧接着调用也是无效的*/  function method(i){    alert("有参方法，参数是："+i);  }  method(12);</script></body></html>

JS内置对象

常用类对象

Array、Date、Math

浏览器对象

window：浏览器对象模型核心对象

location：封装浏览器中URL【地址栏】没使用location可以操作URL

<script>location.href = "https://www.baidu.com";location = "https://www.baidu.com";</script>

DOM对象

document

...（同后）

JS自定义对象

使用new Object()定义对象

使用{}定义对象【json对象】

JSON语法

var jsonObj = {key:value,key2:value2....}

一般建议json对象中key使用string数据类型，因为string比较稳定。

json对象中value使用js支持数据类型（八种【包括number，string，boolean，null，undefined，对象，数组，函数】）即可。

JS提示框

alert():只有确定按钮提示框

[window.]alert();

confirm():含有确定按钮和取消按钮提示

[window.]confirm();

中括号中内容可写可不写。

练习：确认删除，确认跳转

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>确认删除？</title></head><body><p id = "text">文本</p><input type="button" id = "del" value="删除"><input type="button" id = "s" value="跳转百度"><script>     /*json对象*/  var jsonObj = {"zhangsan":89,"lisi":91,"wangwu":99};      var delbtn = document.getElementById("del");  function cfm(){    var con = window.confirm("确认删除");    if (con==true){      document.getElementById("text").innerText="";    }  }  delbtn.onclick = cfm;      function send(){    var con = window.confirm("真的要跳转吗？");    if(con==true){      location.href = "https://www.baidu.com";    }  }  document.getElementById("s").onclick = send;</script></body></html>

JS常用事件

单击事件：onclick

失去焦点事件：onblur

文本改变且失去焦点事件：onchange

表单提交事件：onsubmit

单击submit按钮时，触发表单提交事件。

JS的嵌入方式【书写位置】

行内JS

书写在HTML标签的事件属性中，如onclick事件，示例代码：

<button id="btnId" onclick="alert('hello Js###');">SayHello</button>

内部JS

书写script标签中，script标签可以书写在html中的任意位置，一般建议在body后面使用（因为标签没有定义的话，script中的函数是获取不到标签的）。

外部JS

书写在外部xxx.js文件中，使用script标签的src属性引入外部js方可使用。

建议使用外部js，js与html耦合度最低。

优势：

高内聚，低耦合。提高程序扩展性，降低维护成本等。

示例代码：使用外部js文件

var btnEle = document.getElementById("btnId2");btnEle.onclick = function(){    alert("hehe");}

导入外部js文件

<body>   <button id="btnId" onclick="alert('hello Js###');">SayHello</button>   <button id="btnId2">SayHello2</button></body>/*导入外部js文件*/<script type="text/javascript" src="demo.js"></script><script type="text/javascript">   alert("guoqiang");</script>

JS操作DOM对象

DOM是什么

DOM全称是：Document Object Model【文档对象模型】。

通常为了便于处理数据，会把文档封装为对象模型。其中有一些名词如下：

文档节点：指的是整个文档。
元素节点：HTML标签
属性节点：HTML标签的属性
文本节点：HTML标签内部的文本值。

怎样使用JS去操作DOM

1.操作文档节点

查询

document.getElementById():通过id获取元素节点
document.getElementsByTagName():通过标签名获取元素节点
document.getElementsByName():通过元素name属性值获取元素节点
document.getElementsByClassName():通过元素class属性值获取元素节点。

2.操作元素节点

新增

document.createElement("标签名"):创建元素节点
element.appendChild(ele):将ele添加到element所有子节点后面

删除

element.remove():删除某个标签

修改

parentEle.replaceChild(newEle,oldEle):用新节点替换原有的旧子节点。

查询——子节点

element.children 查询所有子节点
element.firstElementChild 查询第一个子节点
element.lastElementChild 查询最后一个子节点

查询——父节点

element.parentElement 查询父节点

查询——兄弟节点

element.previousSibling 查询前一个兄弟节点
element.nextSibling 查询后边一个兄弟节点

3.操作属性节点

元素节点.属性名

4.操作文本节点

element.value:操作表单中的文本
element.innerText:操作成对标签内部的文本
element.innerHTML:操作成对标签内部HTML

element.innerText和element.innerHTML的区别是：

element.innerText获取的是纯文本内容。

element.innerHTML获取的结果可能包含HTML标签。

如：
获取段落p的 innerHTML测试测试
element.innerText结果是：

获取段落p测试

element.innerHTML结果是：

获取段落p测试