JavaScript整合版——后端程序员学js，只读一文直接零基础入门，大学生期末考试不挂科宝典。

本文链接：https://blog.csdn.net/m0_59985125/article/details/125364666

文章目录

建议朋友们在学习的过程中，边写边看

建议朋友们在学习的过程中，边写边看

一、hello

<!DOCTYPE html> <!--声明-->
<html lang="en"> <!-- html标签表示html的开始  一般分为两部分，分别是：head和body -->
<head> <!--表示头部信息，一般包含三部分内容，title标签,css样式，js代码 -->
    <meta charset="UTF-8"><!--表示当前页面使用UTF-8字符集 -->
    <title>标题</title>  <!--表示标题 -->
</head>
<body><!-- 主体内容 -->
hello
</body>
</html>

二、html

1. 标签语法

   <!-- ①标签不能交叉嵌套 -->
   正确：<div><span>早安</span></div>
   错误：<div><span>早安</div></span>
   <hr />

   <!-- ②标签必须正确关闭(闭合) -->
   <!-- i.有文本内容的标签： -->
   正确：<div>早安</div>
   错误：<div>早安
   <hr />
   
   <!-- ii.没有文本内容的标签： -->
   正确：<br />1
   错误：<br >2
   <hr />
   
   <!-- ③属性必须有值，属性值必须加引号 -->
   正确：<font color="blue">早安</font>
   错误：<font color=blue>早安</font>
   错误：<font color>早安</font>
   <hr />
      
   <!-- ④注释不能嵌套 -->
   正确：<!-- 注释内容 --> <br/>
   错误：<!-- 注释内容 <!-- 注释内容 -->-->
   <hr />

2.font标签

需求1：在网页上显示我是字体标签，并修改字体为宋体，颜色为红色。

font标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
color属性修改颜色
face属性修改字体
size属性修改文本大小

<font color="red" face="宋体" size="7">我是字体标签</font>

3.特殊字符

<!-- 特殊字符
	需求1：把 <br> 换行标签 变成文本 转换成字符显示在页面上

	常用的特殊字符:
		<	===>>>>		&lt;
		>   ===>>>>		&gt;
	  空格	===>>>>		&nbsp;  记为“牛逼space”方便记忆
-->
	
我是标签<br/>
你好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;帅啊!

4.标题标签

需求1：演示标题1到标题6的

h1 - h6 都是标题标签
h1 最大
h6 最小
align 属性是对齐属性
left 左对齐(默认)
center 剧中
right 右对齐

<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h7>标题7</h7>

5.超链接（重点）

在网页中所有点击之后可以跳转的内容都是超链接

a标签是超链接
href属性设置连接的地址
target属性设置哪个目标进行跳转
_self 表示当前页面(默认值)
_blank 表示打开新页面来进行跳转

<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com" target="_self">百度_self</a><br/>
<a href="http://www.baidu.com" target="_blank">百度_blank</a><br/>

6.列表标签

分为三种：无序列表、有序列表、定义列表（出现的极少，不考虑）

需求1：使用无序列表方式，把东北F4，赵四，刘能，小沈阳，宋小宝，展示出来
ul 是无序列表、ol是有序列表
type属性可以修改列表项前面的符号
li 是列表项

<ul type="none">
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ul>

需求2：改为有序列表

<ol>
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ol>

7.img标签

img标签可以在html页面上显示图片

需求1：使用img标签显示一张美女的照片。并修改宽高，和边框属性

img标签是图片标签,用来显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置图片边框大小
alt属性设置当指定路径找不到图片时,用来代替显示的文本内容
在JavaSE中路径也分为相对路径和绝对路径.
相对路径:从工程名开始算

绝对路径:盘符:/目录/文件名
在web中路径分为相对路径和绝对路径两种
相对路径:
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略

绝对路径:
正确格式是: http://ip:port/工程名/资源路径

错误格式是: 盘符:/目录/文件名

<img src="1.jpg" width="200" height="260" border="1" alt="找不到"/>
<img src="../../2.jpg" width="200" height="260"  alt="找不到"/>
<img src="../imgs/3.jpg" width="200" height="260" />
<img src="../imgs/4.jpg" width="200" height="260" />
<img src="../imgs/5.jpg" width="200" height="260" />
<img src="../imgs/6.jpg" width="200" height="260" />

8.表格标签

需求1：做一个带表头的，三行，三列的表格，并显示边框
需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距。

table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距

tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式

b 是加粗标签

<table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <th>1.1</th>
        <th>1.2</th>
        <th>1.3</th>
    </tr>
    <tr align = "center">
        <td><b>2.1<b></td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

9.表格的跨行跨列

需求1：
新建一个五行，五列的表格，
第一行，第一列的单元格要跨两列，
第二行第一列的单元格跨两行，
第四行第四列的单元格跨两行两列。

colspan 属性设置跨列
rowspan 属性设置跨行

<table width="500" height="500" cellspacing="0" border="1">
   <tr>
      <td colspan="2">1.1</td>
      <td>1.3</td>
      <td>1.4</td>
      <td>1.5</td>
   </tr>
   <tr>
      <td rowspan="2">2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      <td>2.4</td>
      <td>2.5</td>
   </tr>
   <tr>
      <td>3.2</td>
      <td>3.3</td>
      <td>3.4</td>
      <td>3.5</td>
   </tr>
   <tr>
      <td>4.1</td>
      <td>4.2</td>
      <td>4.3</td>
      <td colspan="2" rowspan="2">4.4</td>
   </tr>
   <tr>
      <td>5.1</td>
      <td>5.2</td>
      <td>5.3</td>
   </tr>
</table>

10.iframe框架标签（内嵌窗口）

ifarme标签可以在页面上开辟一个小区域显示一个单独的页面
ifarme和a标签组合使用的步骤:
1 在iframe标签中使用name属性定义一个名称
2 在a标签的target属性上设置iframe的name的属性值

<iframe src="4.标题标签.html" width="500" height="400" name="abc"></iframe>
<br/>

<ul>
    <li><a href="1.标签语法.html" target="abc">1.标签语法.html</a></li>
    <li><a href="2.font标签.html" target="abc">2.font标签.html</a></li>
    <li><a href="3.特殊字符.html" target="abc">3.特殊字符.html</a></li>
</ul>

11.表单标签（重点）

什么是表单？

表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。

需求1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。

form标签就是表单
input type=text 是文件输入框 value设置默认显示内容
input type=password 是密码输入框 value设置默认显示内容
input type=radio 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value属性修改按钮上的文本
input type=submit 是提交按钮 value属性修改按钮上的文本
input type=button 是按钮 value属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域 (是给程序使用的)

当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中

textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度

maxlength 限制密码长度

<form>
    <h1 align="center">信息注册</h1>
    <table align="center">
        <tr>
            <td>用户姓名：</td>
            <td><input type="text" value="默认内容"></td>
        </tr>
        <tr>
            <td>输入密码：</td>
            <td><input type="password" value="123" maxlength="4"></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="123" maxlength="4"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex">男
                <input type="radio" name="sex" checked="checked">女
                <input type="radio" name="sex">wsl
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" checked="checked">javascript
                <input type="checkbox">java
                <input type="checkbox">c++
                <input type="checkbox">python
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select>
                    <option selected="selected">--选择国籍--</option>
                    <option >中国</option>
                    <option>小日本</option>
                    <option>成都</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td>
                <textarea cols="30" rows="5">默认</textarea>
            </td>
        </tr>
        <tr>
            <td><input type="reset" value="重置" ></td>
           <td align="center"><input type="submit" value="提交"></td>

        </tr>
        <tr>
            <td align = "center"><input type="file"></td>
            <td><input type="hidden"></td>
        </tr>
    </table>
</form>

11.1 表单标签提交的细节

form标签是表单标签
action属性设置提交的服务器地址
method属性设置提交的方式GET(默认值)或POST

表单提交的时候，数据没有发送给服务器的三种情况：
1、表单项没有name属性值
2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3、表单项不在提交的form标签中

GET请求的特点是：
1、浏览器地址栏中的地址是：action属性[+?+请求参数]

点击提交后的地址栏中：

http://localhost:8080/	服务器地址
？	分隔符
action=login&username=默认内容&pwd=123&sex=girl&hobby=js&country=none&desc=默认	请求参数（表单的信息）

请求参数的格式是：name=value&name=value
eg: pwd=123 & sex=girl & hobby=js & country=none
2、不安全
3、它有数据长度的限制

POST请求的特点是：
1、浏览器地址栏中只有action属性值
2、相对于GET请求要安全
3、理论上没有数据长度的限制

<form action="http://localhost:8080" method="get">
    <input type="hidden" name="action" value="login" >
    <h1 align="center">信息注册</h1>
    <table align="center">
        <tr>
            <td>用户姓名：</td>
            <td><input type="text" name="username" value="默认内容"></td>
        </tr>
        <tr>
            <td>输入密码：</td>
            <td><input type="password" name="pwd" value="123" maxlength="4"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="boy">男
                <input type="radio" name="sex" value="girl" checked="checked">女
                <input type="radio" name="sex" value="wsl">wsl
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input name="hobby" type="checkbox" value="js" checked="checked">javascript
                <input name="hobby" type="checkbox" value="java">java
                <input name="hobby" type="checkbox" value="cpp">c++
                <input name="hobby" type="checkbox" value="py">python
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select name="country">
                    <option value="none" selected="selected">--选择国籍--</option>
                    <option value="cn">中国</option>
                    <option value="jp">小日本</option>
                    <option value="cd">成都</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td>
                <textarea name="desc" cols="30" rows="5">默认</textarea>
            </td>
        </tr>
        <tr>
            <td><input type="reset" value="重置" ></td>
            <td align="center"><input type="submit" value="提交"></td>

        </tr>
        <tr>
            <td align = "center"><input type="file"></td>
            <td><input type="hidden"></td>
        </tr>
    </table>
</form>

12.其他标签

需求1：div、span、p标签的演示
div标签默认独占一行
span标签它的长度是封装数据的长度
p段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）

 	<div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>p段落标签1</p>
    <p>p段落标签2</p>

三、css

1.border

1.1 border-style 值:

none: 默认无边框

dotted:定义一个点线框

dashed: 定义一个虚线框

solid: 定义实线边界

double: 定义两个边界。两个边界的宽度和border-width的值相同

groove: 定义3D沟槽边界。效果取决于边界的颜色值

ridge: 定义3D脊边界。效果取决于边界的颜色值

inset:定义一个3D的嵌入边框。效果取决于边界的颜色值

outset: 定义一个3D突出边框。效果取决于边界的颜色值

1.2 边框宽度：

通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值）和 thick。

**注意：**CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。

1.3 边框颜色：

border-color属性用于设置边框的颜色。可以设置的颜色：

name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”

您还可以设置边框的颜色为"transparent"。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

1.4 边框-单独设置各边:

在CSS中，可以指定不同的侧面不同的边框：

border-style属性可以有1-4个值：

border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
border-style:dotted solid double;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
border-style:dotted;
- 四面边框是 dotted

上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用

1.5 边框-简写属性

上面的例子用了很多属性来设置边框。

T你也可以在一个属性中设置边框。

你可以在"border"属性中设置：

border-width
border-style (required)
border-color

eg : border:5px solid red;

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

2. css

需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。

<div style="border: 1px solid red;">div标签1</div>
<div style="border: 1px solid red;">div标签2</div>
<span style="border: 1px solid red;">span标签1</span>
<span style="border: 1px solid red;">span标签2</span>

问题：这种方式的缺点？

1.如果标签多了，样式就多了，代码量非常庞大

2.可读性非常差

3.css代码没什么复用性可言

改进1：

style标签专门用来定义css样式代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
        /* 需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。*/
        /*注意：css注释和html注释不同*/
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>div标签1</div>
    <div>div标签2</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>

问题：这种方式的缺点？

1.只能在同一页面内复用代码，不能在多个页面中复用css代码

2.维护起来不方便，实际项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了

改进2：

把css样式写成一个单独的css文件，再通过link标签引入即可复用。

使用html的******标签，导入css样式文件

创建一个css文件为1.css

div{
     border: 1px solid yellow;
 }
span{
    border: 1px solid red;
}

在html中使用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link标签专门用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href="1.css"/>

</head>

<body>
    <div>div标签1</div>
    <div>div标签2</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>

3.css选择器

3.1标签名选择器

格式：

标签名{

属性：值;

}

标签名选择器，可以决定哪些标签被动的使用这个样式。

需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。

<head>
   <meta charset="UTF-8">
   <title>标签名选择器</title>
   <style type="text/css">
      div{
         border: 1px solid yellow;
         color: blue;
         font-size: 30px;/*字体大小*/
      }
      span{
         border: 5px dashed  blue;
         color: yellow;
         font-size: 20px;/*字体大小*/
      }
   </style>
</head>
<body>

   <div>div标签1</div>
   <div>div标签2</div>
   <span>span标签1</span>
   <span>span标签2</span>
</body>

3.2 ID选择器

格式：

#id属性值{

属性：值;

}

id选择器，可以让我们通过id属性选择性的去使用这个样式。

需求1：分别定义两个 div 标签，
第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
字体大小30个像素。边框为1像素黄色实线。

第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式修改的字体颜色为红色，字体大小20个像素。
边框为5像素蓝色点线。

<head>
   <meta charset="UTF-8">
   <title>ID选择器</title>
   <style type="text/css">

      #id001{
         color: blue;
         font-size: 30px;
         border: 1px yellow solid;
      }

      #id002{
         color: red;
         font-size: 20px;
         border: 5px blue dotted ;
      }

   </style>
</head>
<body>    

   
   <div id="id002">div标签1</div>
   <div id="id001">div标签2</div>
</body>

3.3 class选择器（类选择器）

格式：

**.**class属性值{

属性：值；

}

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

需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。

<head>
   <meta charset="UTF-8">
   <title>class类型选择器</title>
   <style type="text/css">
      .class01{
         color: blue;
         font-size: 30px;
         border: 1px solid yellow;
      }

      .class02{
         color: grey;
         font-size: 26px;
         border: 1px solid red;
      }
   </style>
</head>
<body>

   <div class="class01">div标签class01</div>
   <div class="class02">div标签</div>
   <span class="class01">span标签class01</span>
   <span>span标签2</span>
</body>

id与class的区别：

id相当于人的身份证，不可以重复；class相当于人的名称可以重复

一个html标签只能绑定一个id名称；一个html标签可以绑定多个class名称

3.4 组合选择器

格式：

选择器1，选择器2，选择器n{

属性：值；

}

组合选择器可以让多个选择器共用同一个css样式代码。

需求1：修改 class=“class01” 的div 标签和 id=“id01” 所有的span标签，
字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。

<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">

        .class01,#id01{
            color: blue;
            font-size: 20px;
            border: yellow 1px solid;
        }


    </style>
</head>
<body>

   <div class="class01">div标签class01</div> <br />
   <span id="id01">span 标签</span>  <br />
   <div>div标签</div> <br />
   <div>div标签id01</div> <br />
</body>

4.css常用样式

<head>
    <meta charset="UTF-8">
    <title>常用样式.html</title>
    <style type="text/css">

        div{
            color: red;
            border: 1px yellow solid;/*边框*/
            width: 300px; /*宽度*/
            height: 300px; /*高度*/
            background-color: green; /*背景颜色*/
            font-size: 30px; /*字体大小*/
            margin-left: auto; /*div居中*/
            margin-right: auto; /*div居中*/
            text-align: center; /*文本居中*/
        }
        table{
            border: 1px red solid; /*设置表格边框*/
            border-collapse: collapse; /*将表格和单元格边框合并*/
        }

        td{
            border: 1px red solid;/*设置单元格边框*/
        }

        a{
            text-decoration: none;/*去下划线*/

        }

        ul{
            list-style: none;/*去掉无序列表前的修饰*/
        }

    </style>
</head>
<body>
    <ul>
        <li>11111111111</li>
        <li>11111111111</li>
        <li>11111111111</li>
        <li>11111111111</li>
        <li>11111111111</li>
    </ul>
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
    </table>
    <a href="http://www.baidu.com">百度</a>
    <div>我是div标签</div>
</body>

margin：

margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的

margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

可能的值:

值	说明
auto	设置浏览器边距。这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

margin属性可以有一到四个值。

margin:25px 50px 75px 100px; (上、右、下、左：顺时针)
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;（上、左右、下：对称）
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;（上下、左右）
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

border-collapse:

border-collapse:collapse; 边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

border-collapse:separate; 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

border-collapse:inherit; 规定应该从父元素继承 border-collapse 属性的值。

text:

属性	描述
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

list：

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

四、JavaScript

js是弱类型语言：类型可变

特点：

1.交互性（信息的动态交互）

2.安全性（不允许直接访问本地硬盘）

3.跨平台性（只要是可以解释js的浏览器都可以执行，和平台无关）

1. JavaScript和HTML代码的结合方法

1.1 第一种方法

只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //alert是JavaScript语言提供的一个警告框函数
        //它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("hello javascript");
    </script>
</head>

1.2 第二种方式

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

现在需要使用script引入外部的js文件来执行
src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

script标签可以用来定义js代码，也可以用来引入js文件，但是，两个功能二选一。不能同时使用两个功能

不过，可以写两个script标签分别执行两种方式

创建一个js文件2.js

alert("hello javascript");

再建立一个html文件

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="2.js">
    </script>

    <script type="text/javascript">
        alert(111);
    </script>
</head>

2. 变量

什么是变量？变量是可以存放某些值得内存的命名。

JavaScript的变量类型：

数值类型： number

字符串类型：string

对象类型： object

布尔类型： boolean

函数类型： function

JavaScript里的特殊值：

undefined 未定义，所有js变量未赋于初始化值的时候，默认值都是undefined

null 空值

NAN 全称是：Not a Number。非数字，非数值

JavaScript中的定义变量格式：

var 变量名；

var 变量名=值；

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i;
        // alert(i); //undefined
        i=12;
        // alert(i);//12
        //typeof()是JavaScript语言提供的一个函数
        //它可以获取变量的数据类型返回
        i="abc";
        alert(typeof (i));//string

        var a= 12;
        var b="abc";
        alert(a*b);//NAN
        alert(typeof (a*b));//number
    </script>
</head>

2.1 关系（比较）运算

等于： == 等于是简单的做字面值的比较

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

2.2 逻辑运算

且运算： &&

或运算： ||

取反运算：！

在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用

0、null、undefined、”“（空串）都认为是false；

<script type="text/javascript">
    var a=0;
    if(a){
        alert("零为真");
    }else {
        alert("零为假");
    }

    var b=null;
    if(b){
        alert("null为真");
    }else {
        alert("null为假");
    }

    var c=undefined;//也可以不赋值
    if(c){
        alert("undefined为真");
    }else {
        alert("undefined为假");
    }

    var d="";//一个空格都不能有
    if(d){
        alert("空串为真");
    }else {
        alert("空串为假");
    }
</script>

&& 且运算。

有两种情况：

第一种：当表达式全为真的时候。返回最后一个表达式的值。

第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算

第一种情况：当表达式全为假时，返回最后一个表达式的值

第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且 && 与运算和 ||或运算有短路。

短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行

<script type="text/javascript">

		var a = "abc";
        var b = true;
        var d = false;
        var c = null;
    
        alert(a && b);//true
        alert(b && a);//abc
        alert(a && d);//false
        alert(a&&c);//null
        alert(a&&d&&c);//false
        alert(a&&c&&d);//null

        alert(d||c);//null
        alert(c||d);//false
        alert(a||c);//abc
        alert(b||c);//true
</script>

3. 数组（重点**）

JavaScript中数组定义的方式：

格式：

var 数组名=[]；//空数组

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

<script type="text/javascript">
    var arr=[];//定义一个空数组
    alert(arr.length);//0

    arr[0] =12;
    alert(arr[0]);//12
    alert(arr.length);//1  长度可变

    //JavaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
    arr[2]="abc";
    alert(arr.length)//3
    alert(arr[1]);//undefined
    for(var i=0;i<arr.length;i++){
        alert(arr[i]);
    }
    
</script>

4. 函数（重点***）

4.1 函数的两种定义方式

4.1.1 第一种，使用function关键字来定义函数

格式如下：

function 函数名（形参列表）{

函数体

}

<script type="text/javascript">
    function fun() {
        alert("无参函数fun()被调用")
    }
    //函数被调用才会执行
    fun();

    function fun2(a, b) {
        alert("有参函数fun2()被调用了 a="+a+" b="+b);
    }
    fun2(12,"abc");

</script>

在JavaScript语言中，如何定义带有返回值的函数？

只需要在函数体内直接使用return语句返回值即可！

//定义带有返回值的函数
function sum(num1,num2){
    var result = num1+num2;
    return result;
}
alert(sum(100,50));

4.1.2 第二种

格式：

var 函数名 = function（形参列表）{函数体}

<script type="text/javascript">
    var fun = function () {
        alert("无参函数");
    }
    fun();

    var fun1 = function (a, b) {
        alert("有参函数fun2()被调用了 a="+a+" b="+b);
    }
    fun1(1,2);

    var fun3 = function (num1, num2) {
        return num1+num2;
    }
    alert(fun3(100,200));

</script>

在JavaScript中不允许重载，重载会直接覆盖了之前的函数

4.2 函数的arguments隐形参数（只在function函数内）

就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。

隐形参数特别像Java基础中的可变长参数。

public void fun(Object…args);

可变长参数其实就是一个数组

那么js中的隐形参数就和java的可变长参数一样。操作类似数组。

<script type="text/javascript">
    function fun(a){
        alert(arguments.length);//查看参数个数
        // alert(arguments[0]); //1
        // alert(arguments[1]); //ad
        // alert(arguments[2]); //true

        alert("a="+a);//1   里面的参数取第一个值且不影响arguments的使用

        for(var i=0;i<arguments.length;i++){
            alert(arguments[i]);
        }
        alert("无参函数fun()");
    }
    fun(1,"ad",true);
</script>

需求：要求编写一个函数。用于计算所有参数相加的和并且返回

<script type="text/javascript">
function sum(num1,num2){

        var result = 0;

        for(var i=0;i<arguments.length;i++){
            result += arguments[i];
        }

        return result;
    }
    alert(sum(1,2,3,4,5,"abc",6,7));//15abc67 （string类型之前都为number类型）

</script>

若只想计算number类型的和

<script type="text/javascript">
function sum(num1,num2){
    var result = 0;

    for(var i=0;i<arguments.length;i++){
        if(typeof(arguments[i])=="number"){
            result += arguments[i];
        }
    }
    return result;
}
alert(sum(1,2,3,4,5,"abc",6,7));//18
</script>

5.JavaScript中的自定义对象（扩展内容）

5.1 Object形式的自定义对象

对象的定义

var 变量名 = new Object()； //对象实例（空对象）

变量名.属性值 = 值； //定义一个属性

变量名.函数名=function(){} //定义一个函数

对象的访问：

变量名.属性名/函数名();

   <script type="text/javascript">

        var obj = new Object();
        alert(typeof (obj)); //object
        obj.name="tom";
        obj.age=18;
        obj.fun=function (){
            alert("姓名："+this.name+",年龄："+this.age);
        }


        alert(obj.age);
        obj.fun();

    </script>

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

对象的定义和访问：

var 变量名 = { //空对象

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

属性名：值, //属性之间要加逗号，最后一个不用加逗号

函数名：function(){} //属性和函数之间也要加逗号

};

<script type="text/javascript">
    var obj={
        name:"tom",
        age:18,
        fun:function (){
            alert("姓名："+this.name+",年龄："+this.age);
        }
    }
    alert(obj.name);
    obj.fun();
</script>

6.JavaScript中的事件

什么是事件？是电脑输入设备与页面进行交互的响应。我们称之为事件。

6.1 常用的事件

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

6.2 事件注册又分为静态注册和动态注册两种

什么是事件的注册（绑定）？

其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或绑定。

6.2.1静态注册事件

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

6.2.2动态注册事件

是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){} 这种形式赋予事件响应后的代码，叫动态注册。

动态注册的基本步骤：

1.获取标签对象

2.标签对象.事件名=function(){}

6.2.3 onload

静态注册方式：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onload事件的方法
        function onloadFun() {
            alert("静态注册onload事件，所有代码")
        }
    </script>
</head>
<!--静态注册onload事件
        onload事件是浏览器解析完页面之后就会自动触发的事件
-->
<body onload="onloadFun()">

</body>

动态注册方式：

<script type="text/javascript">

    //onload事件动态注册。是固定写法
    window.onload = function () {
        alert("动态注册的onload事件")
    }
</script>

6.2.4 onclick

静态注册方式：

<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>

动态注册方式：

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

6.2.5 onblur

静态注册方式：

    <script type="text/javascript">
        //静态注册失去焦点事件
        function onblurFun() {
            //console是控制台对象，是由JavaScript语言提供，专门用来向浏览器打印输出，用于测试使用
            //log()是打印的方法
            console.log("静态注册onblur事件")
        }
    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun()"><br/> 
    <!--在f12中查看-->
</body>

动态注册方式：

    <script type="text/javascript">
        //动态注册onblur事件
        window.onload=function () {
            //1.获取标签对象
            var pwdObj = document.getElementById("pwd");
            // alert(pwdObj);//object HTMLInputElement
            //2.通过标签对象.事件名 = function(){};
            pwdObj.onblur = function () {
                console.log("动态注册onblur事件");
            }
        }
    </script>
</head>
<body>
    密码:<input id="pwd" type="text"><br/>
</body>

6.2.6 onchange

静态注册方式：

    <script type="text/javascript">
        function onchangeFun() {
            alert("女神改变");
        }
    </script>
</head>
<body>
请选择女神：
<!--静态注册方式-->
<select onchange="onchangeFun()">
    <option>--女神--</option>
    <option>wsl</option>
    <option>zw</option>
    <option>thh</option>
</select>
</body>

动态注册方式：

<script type="text/javascript">
        //动态注册onchange事件
        window.onload = function () {
            //1.获取标签对象
            var selObj = document.getElementById("sel01");
            //2.通过标签对象.事件名 = function(){};
            selObj.onchange = function () {
                alert("男神改变");
            }
        }
    </script>
</head>
<body>
请选择男神：
<select id="sel01">
    <option>--男神--</option>
    <option>wsl</option>
    <option>zw</option>
    <option>thh</option>
</select>
</body>

6.2.7 onsubmit

静态注册方式：

    <script type="text/javascript">
        //静态注册表单提交事件
        function onsubmitFun() {
            //要验证所有表单是否合法，如果有一个不合法，就阻止表单提交
            alert("静态submit事件——发现不合法")

            return false;
        }

    </script>
</head>
<body>
<!--return false可以组织表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
    <input type="submit" value="静态注册">
</form>
</body>

动态注册方式：

    <script type="text/javascript">
        window.onload = function () {
            //1.获取标签对象
            var fmObj = document.getElementById("fm01");
            //2.通过标签对象.事件名 = function(){}
            fmObj.onsubmit = function (){
                alert("动态注册onsubmit事件——不合法")
                return false;
            }
        }
    </script>
</head>
<body>
<form action="http://localhost:8080" method="get" id="fm01">
    <input type="submit" value="动态注册">
</form>
</body>

7.DOM模型

DOM全称是 Document Object Model 文档对象模型

就是把文档中的标签、属性、文本，转换成为对象来管理。

7.1Document对象（重点***）

在这里插入图片描述

Document对象的理解：

1.Document它管理了所有的html文档内容

2.Document它是一种树结构的文档。有层级关系。

3.它让我们把所有的标签都对象化

4.我们可以通过document访问所有的标签对象。

什么是对象化？

javase举例：有一个人年龄18岁，女性，名字为张三。把这个人的信息对象化。

Class person{

private int age;

private String sex;

private String name;

}

那么html标签要对象化怎么办？

<body>
   <div id="div01">
       div01
    </div> 
</body>

模拟对象化，相当于：

class Dom{

private String id; // id 属性

private String tagName; //表示标签名

private Dom parentNode; //父亲

private List children; // 孩子结点

private String innerHTML; // 起始标签和结束标签中间的内容

}

7.2Document对象中的方法介绍（重点***）

document.getElementById(elementId)	通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)	通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)	通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName)	方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

注：

document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询

如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询

如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

7.2.1getElementById 方法示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        需求：当用户点击了校验按钮，要获取输入框里的内容。然后验证其是否合法
        验证的规则是：必须由字母，数字，下划线组成。并且长度为5到12位
         */
        function onclickFun() {
            //1.当我们要操作一个标签的时候，一定要先获取这个标签对象。
            var usernameObj = document.getElementById("username01");
            // alert(usernameObj);//object HTMLInputElement 它就是dom对象
            // alert(usernameObj.value);
            var usernameText=usernameObj.value;
            //如何验证字符串，符合某个规则，需要使用正则表达式
            var patt=/^\w{5,12}$/;
            /*
            text()方法用户测试某个字符串，是不是匹配我的规则
            匹配返回true，不匹配返回false
             */
            if(patt.test(usernameObj)){
                alert("用户名合法");
            }else {
                alert("用户名不合法");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username01" value="wsl">
    <button onclick="onclickFun()">校验</button>
</body>
</html>

JavaScript RegExp 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //表示字符串中，必须包含字母e
        // var patt=new RegExp("e");
        // var patt = /e/; //也是正则表达式
        // alert(patt);// /e/

        // var patt=/[abc]/; //表示要求字符串中，是否包含字母a或b或c任意一个
        // var patt=/[a-z]/; //表示要求字符串，是否包含小写字母
        // var patt=/[A-Z]/; //表示要求字符串，是否包含大写字母
        // var patt=/[0-9]/; //表示要求字符串，是否包含任意数字
        // var patt = /\w/; //表示要求字符串，是否包含字母，数字，下划线
        // var patt = /a+/; //表示要求字符串中包含至少一个a
        // var patt = /a*/; //表示要求字符串，是否包含 零个 或 多个 a
        // var patt = /a?/; //表示要求字符串，是否包含 零个 或 一个 a
        // var patt = /a{3}/; //表示要求字符串，是否包含连续三个a
        // var patt = /a{3,5}/; //表示要求字符串，是否包含至少连续三个的a，最多五个连续的a
        // var patt = /a{3,}/;  //表示字要求符串，是否包含至少连续三个的a
        // var patt = /a$/;  //表示要求字符串，必须以a结尾
        // var patt = /^a/;  //表示要求字符串，必须以a开头
        // var patt = /^a{3,5}$/; //要求字符串从头到位必须完全匹配
        var patt=/^\w{5,12}$/; //表示要求字符串，从头到尾检查，是否包含字母、数字、下划线，且为5到12位

        var str = "abc123D";
        alert(patt.test(str));//false
        //问题：var patt = /a{3,5}/; 最大什么时候有用？
    </script>
</head>
<body>

</body>
</html>

常见的验证提示效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        需求：当用户点击了校验按钮，要获取输入框里的内容。然后验证其是否合法
        验证的规则是：必须由字母，数字，下划线组成。并且长度为5到12位
         */
        function onclickFun() {
            //1.当我们要操作一个标签的时候，一定要先获取这个标签对象。
            var usernameObj = document.getElementById("username01");
            // alert(usernameObj);//object HTMLInputElement 它就是dom对象
            // alert(usernameObj.value);
            var usernameText=usernameObj.value;
            //如何验证字符串，符合某个规则，需要使用正则表达式
            var patt=/^\w{5,12}$/;
            /*
            text()方法用户测试某个字符串，是不是匹配我的规则
            匹配返回true，不匹配返回false
             */

            var usernameSpanObj = document.getElementById("usernameSpan");
            //innerHTML表示起始标签和结束标签中的内容
            //innerHTML 这个属性可读、可写
            // alert(usernameSpanObj.innerHTML);

            if(patt.test(usernameText)){
                // alert("用户名合法");
                usernameSpanObj.innerHTML="<img src=\"right.png\" width=\"18\" height=\"18\">";
            }else {
                // alert("用户名不合法");
                usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username01" value="wsl">
    <span id="usernameSpan" style="color: red">
    </span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

7.2.2 getElementsByName 方法示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll() {
            //让所有的复选框都选中
            //document.getElementsByName("");是根据 指定的name属性查询返回多个标签对象集合
            //这个集合的操作和数组一样
            //集合中每个元素都是dom对象
            //这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            // alert(hobbies);//[object NodeList]
            // alert(hobbies.length);//3
            // alert(hobbies[0]);//[object HTMLInputElement]

            //chencked表示复选框选中状态。如果选中是true，不选中是false
            //这个属性可读、可写
            // alert(hobbies[0].checked); //true
            // alert(hobbies[1].checked); //false

            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=true;
            }
        }
        //全不选
        function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            //chencked表示复选框选中状态。如果选中是true，不选中是false
            //这个属性可读、可写
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=false;
            }
        }
        //反选
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                // if(hobbies[i].checked){
                //     hobbies[i].checked=false;
                // }else {
                //     hobbies[i].checked=true;
                // }
                hobbies[i].checked=!hobbies[i].checked;//取反
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">c++
    <input type="checkbox" name="hobby" value="java">java
    <input type="checkbox" name="hobby" value="js">javascript
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

7.2.3 getElementsByTagName方式示例代码

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

        function checkAll() {
            //getElementsByTagName();是按照指定标签名来进行查询并返回集合
            //这个集合操作跟数组一样
            //集合中都是dom对象
            //集合中元素顺序 是他们在html页面中从上到下的顺序。
            var inputs = document.getElementsByTagName("input");
            // alert(inputs);//[object HTMLCollection]
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>
兴趣爱好：
<input type="checkbox"  value="cpp" checked="checked">c++
<input type="checkbox"  value="java">java
<input type="checkbox"  value="js">javascript
<br/>
<button onclick="checkAll()">全选</button>

</body>
</html>

7.2.4 createElement方法示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            //现在需要我们写js代码来创建html标签，并显示在页面上
            //标签内容：<div>学习</div>
            var divObj = document.createElement("div");//在内存中 <div></div>
            // alert(divObj);//[object HTMLDivElement]
            var textNodeObj = document.createTextNode("学tm的"); //有一个文本节点对象 #学tm的

            divObj.appendChild(textNodeObj); //

            // divObj.innerHTML = "学习";//<div>学习</div>，但还是在内存中
            //添加一个子元素
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

7.3 节点的常用属性和方法

节点就是标签对象

方法：

通过具体的元素节点调用

getElementsByTagName()

方法，获取当前节点的指定标签名孩子节点

appendChild(oChildNode)

方法，可以添加一个子节点，oChildNode是要添加的孩子节点

属性：

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

7.4 DOM查询练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
   window.onload = function(){
      //1.查找#bj节点
      document.getElementById("btn01").onclick = function () {
         var bjObj = document.getElementById("bj");
         // alert(bjObj);//[object HTMLLIElement]
         alert(bjObj.innerHTML);
      }
      
      //2.查找所有li节点
      var btn02Ele = document.getElementById("btn02");
      btn02Ele.onclick = function(){
         var lis = document.getElementsByTagName("li");
         alert(lis.length);
      };
      //3.查找name=gender的所有节点
      var btn03Ele = document.getElementById("btn03");
      btn03Ele.onclick = function(){
         var genders = document.getElementsByName("gender");
         alert(genders.length);
      };
      //4.查找#city下所有li节点
      var btn04Ele = document.getElementById("btn04");
      btn04Ele.onclick = function(){
         //1.获取id为city的节点
         //2.通过city节点。getElementByTagName按标签名查
         var lis = document.getElementById("city").getElementsByTagName("li");
         alert(lis.length);
      };
      //5.返回#city的所有子节点
      var btn05Ele = document.getElementById("btn05");
      btn05Ele.onclick = function(){
         //1.获取id为city的节点
         //2.通过city获取所有子节点
         alert(document.getElementById("city").childNodes.length);//9 空格也是字符串，所以也算节点
      };
      //6.返回#phone的第一个子节点
      var btn06Ele = document.getElementById("btn06");
      btn06Ele.onclick = function(){
         var phObj = document.getElementById("phone");
         alert(phObj.firstChild.innerHTML); //IOS
      };
      //7.返回#bj的父节点
      var btn07Ele = document.getElementById("btn07");
      btn07Ele.onclick = function(){
         //1.查找id为bj的节点
         var bjObj1 = document.getElementById("bj");
         //2.bj节点获取父节点
         alert(bjObj1.parentNode.innerHTML);
      };
      //8.返回#android的前一个兄弟节点
      var btn08Ele = document.getElementById("btn08");
      btn08Ele.onclick = function(){
         //1.获取id为android的节点
         //2.通过android节点获取前面兄弟节点
         alert(document.getElementById("android").previousSibling.innerHTML);
      };
      //9.读取#username的value属性值
      var btn09Ele = document.getElementById("btn09");
      btn09Ele.onclick = function(){
         alert(document.getElementById("username").value);
      };
      //10.设置#username的value属性值
      var btn10Ele = document.getElementById("btn10");
      btn10Ele.onclick = function(){
         document.getElementById("username").value="thhsb";
      };
      //11.返回#bj的文本值
      var btn11Ele = document.getElementById("btn11");
      btn11Ele.onclick = function(){
         alert(document.getElementById("bj").innerText);
      };
   };
</script>
</head>
<body>
<div id="total">
   <div class="inner">
      <p>
         你喜欢哪个城市?
      </p>

      <ul id="city">
         <li id="bj">北京</li>
         <li>上海</li>
         <li>东京</li>
         <li>首尔</li>
      </ul>

      <br>
      <br>

      <p>
         你喜欢哪款单机游戏?
      </p>

      <ul id="game">
         <li id="rl">红警</li>
         <li>实况</li>
         <li>极品飞车</li>
         <li>魔兽</li>
      </ul>

      <br />
      <br />

      <p>
         你手机的操作系统是?
      </p>

      <ul id="phone">
         <li>IOS</li>
         <li id="android">Android</li>
         <li>Windows Phone</li>
      </ul>
   </div>

   <div class="inner">
      gender:
      <input type="radio" name="gender" value="male"/>
      Male
      <input type="radio" name="gender" value="female"/>
      Female
      <br>
      <br>
      name:
      <input type="text" name="name" id="username" value="abcde"/>
   </div>
</div>
<div id="btnList">
   <div><button id="btn01">查找#bj节点</button></div>
   <div><button id="btn02">查找所有li节点</button></div>
   <div><button id="btn03">查找name=gender的所有节点</button></div>
   <div><button id="btn04">查找#city下所有li节点</button></div>
   <div><button id="btn05">返回#city的所有子节点</button></div>
   <div><button id="btn06">返回#phone的第一个子节点</button></div>
   <div><button id="btn07">返回#bj的父节点</button></div>
   <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
   <div><button id="btn09">返回#username的value属性值</button></div>
   <div><button id="btn10">设置#username的value属性值</button></div>
   <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>