仅供本人学习用，侵删。

今天的内容是css和js

1.css选择器

1. 标签名选择器

标签名选择器的格式是：

标签名{ 属性：值; } 标签名选择器，可以决定哪些标签被动的使用这个样式

2.id选择器

id 选择器的格式是：

# id的属性值{ 属性：值; } id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。

3.class选择器

class 类型选择器的格式是：

. class 属性值{ 属性：值; }

class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。

与id选择不同的地方在于，id是唯一的，但class可以重复使用。

4.组合选择器

组合选择器的格式是：

选择器 1，选择器 2，选择器 n{ 属性：值; } 组合选择器可以让多个选择器共用同一个 css 样式代码。

2.javascript

js与java不同，是弱类型语言

js与html的结合方式

1. 在 head 标签中，或者在 body 标签中，使用 script 标签来书写 JavaScript 代码

如：

<script type="text/javascript">
// alert 是 JavaScript 语言提供的一个警告框函数。
// 它可以接收任意类型的参数，这个参数就是警告框的提示信息
alert("Our paths converge");
</script>

2.使用 script 标签引入单独的 JavaScript 代码文件

如

<!--现在需要使用 script 引入外部的 js 文件来执行
src 属性专门用来引入 js 文件路径（可以是相对路径，也可以是绝对路径）
script 标签可以用来定义 js 代码，也可以用来引入 js 文件
但是，两个功能二选一使用。不能同时使用两个功能
-->
<script type="text/javascript" src="1.js"></script>

3.变量，运算，数组

JavaScript 的变量类型：

数值类型： number 字符串类型： string 对象类型： object 布尔类型： boolean 函数类型： function

JavaScript 里特殊的值：

undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined. null 空值 NaN 全称是：Not a Number。非数字。非数值

JS 中的定义变量格式： var 变量名; var 变量名 = 值

等于： == 等于是简单的做字面值的比较全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型

且运算： && 或运算： || 取反： !

注意js的与或也使用短路方式

JS 中数组的定义：

格式：

var 数组名 = []; // 空数组 var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素

4.函数

两种定义方式

方式一：

function 函数名(形参列表){ 函数体 }

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

方式二：

var 函数名 = function(形参列表) { 函数体 }

在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义

5.arguments隐形参数

就是创建的函数无需指定参数，直接用一个名为arguments的数组来使用参数。

如

<script type="text/javascript">
function fun() {
alert( arguments.length );//可看参数个数
alert( arguments[0] );
alert( arguments[1] );
alert( arguments[2] );
alert("a = " + a);
for (var i = 0; i < arguments.length; i++){
alert( arguments[i] );
}
alert("无参函数 fun()");
}

注意若调用fun函数时参数不足三个时，无参数的arguments中返回的是undefined

6.Object自定义对象

两种方式

方式一：

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

方式二：

对象的定义： var 变量名 = { // 空对象属性名：值, // 定义一个属性属性名：值, // 定义一个属性函数名：function(){} // 定义一个函数 }; 对象的访问：变量名.属性 / 函数名();

7.事件

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

8.事件的注册/绑定

事件的注册（绑定）指当事件响应后要执行哪些操作代码，执行哪个函数

静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。

动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。动态注册基本步骤： 1、获取标签对象 2、标签对象.事件名 = fucntion(){}

以onclick为例：

静态

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册 onclick 事件");
}
</script>
</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="onclickFun();">按钮 1</button>
</body>
</html>

动态

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">

// 动态注册 onclick 事件
window.onload = function () {
// 1 获取标签对象
/*
* document 是 JavaScript 语言提供的一个对象（文档）
* getElementById 通过 id 属性获取标签对象
**/
var btnObj = document.getElementById("btn01");
// 2 通过标签对象.事件名 = function(){}
btnObj.onclick = function () {
alert("动态注册的 onclick 事件");
}
}</script>
</head>
<body>
<button id="btn01">按钮 2</button>
</body>
</html>

<L2>css和js入门