学习JavaWeb(一)——前端三剑客

前言:

今天开始来学习一下JavaWeb(基于IDEA)

跟着的课程是尚硅谷的javaweb课程,有需要的配套文件资源请点击这里:javaweb   提取码:0y5e

不过这篇文章先介绍HTML、CSS和JavaScript

 

 

 

 

 


web

JavaWeb

使用Java语言开发基于互联网的项目。

软件架构

C/S

Client/Server:客户端/服务端,在用户本地有一个客户端程序,在远程有一个服务器端程序。

优点:用户体验好
缺点:开发、安装、部署、维护 麻烦

B/S

Browser/Server:浏览器/服务端,只需要一个浏览器,用户通过不同的url,访问不同的服务器端程序。

优点:开发、安装、部署、维护 麻烦
缺点:如果应用过大,用户的体验可能会受到影响;对硬件要求高(带宽等要求)

资源分类:

  • 静态资源:使用静态网页开发技术发布的资源
    • 所有用户访问看到的结果是一样的,如:文本、图片、音频、视频、HTML、CSS、JavaScript
    • 如果用户请求的是静态资源,那么服务器会直接将静态资源内容发送给客户端浏览器,然后客户端浏览器内置解析引擎会解析资源,从而展示静态资源
  • 动态资源:使用动态网页技术开发的资源
    • 各个用户访问,得到的结果可能不一样,如:jsp/servlet、php、asp
    • 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送个客户端浏览器(浏览器解析引擎只能解析静态资源)

 


HTML

网页

网页前端三剑客,也是三个静态资源:html、css、JavaScript。

html:用于搭建基础网页,展示页面
css:决定页面布局样式,用于美化页面
JavaScript:控制页面的元素,让页面有一些动态效果(动态效果不同于动态资源)

网页的组成部分主要是三个部分:

  1. 内容(结构):网页看到的数据
  2. 表现:页面展示形式,比如布局、颜色,一般用css技术实现
  3. 行为:页面中元素与输入设备交互的响应,一般用javascript技术实现

 

什么是html

超文本标签语言

通过在文本中添加表示符,可以告诉浏览器怎么去显示其中的内容。

创建HTML

步骤:

  1. 创建工程
  2. 在工程下创建HTML页面

首先我们打开IDEA来创建项目,这里我们创建一个静态web项目

然后右键点击项目,新建,HTML文件,直接创建一个html文件(最好选html5),然后就建立一个静态网页了。

这个太简单了,不做示例了。

编写规范

<!DOCTYPE html>  <!--约束,声明-->
<html lang="en">   <!--html标签,表示html开始-->
<head> <!--头部,一般包含三部分:title标题、css样式、js代码-->
    <meta charset="UTF-8"> <!--表示字符集-->
    <title>标题</title>  <!--标题-->
</head>
<body>    <!--整个html页面显示的主题内容-->
    hello
</body>
</html>

类似这样。

标签

  • 标签格式:<标签>内容</标签>
  • 标签名大小写不敏感
  • 标签拥有自己的属性:
    • 基本属性:bgcolor=”red”
    • 事件属性:onclick=”alert(‘你好!’);”
  • 标签又分为:单标签和双标签
    • 单标签:<标签名 />
    • 双标签:<标签名>…封装的数据…</标签名>

简单一个小效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body bgcolor="#faebd7" >
    hello
<button onclick="alert('我喜欢你!')">按钮</button>
    <br/>有点意思
    <hr/>曾经沧海难为水
</body>
</html>

标签使用有以下一些规范

  1. 标签不能交叉嵌套
  2. 标签必须正确关闭
  3. 属性必须有值,属性值必须用引号引起来
  4. 注释不能嵌套

有一些语法错误浏览器会帮你修复,但是作为一个优秀的程序员,还是不要写错的好

 

块级元素和内联元素

元素又分为块级元素( Block-level)内联元素(Inline )

块级元素

以“块”来显示的标签,块级标签的元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。

一般可以通过属性、css等技术设置其高度、宽度、内/外边距。

非块级元素也可以通过css的display:block;将其更改成块级元素。

常见块级元素:p, h1~h6, div, ul

内联元素

通俗来说就是文本的显示方式,其宽度高度就是本身文字或图片的宽度高度,像文本一样的显示,不会独自占据一个行。

注意:在内联标签中,有一个标签,img标签,是有边距和宽度和高度的,叫行内块级标签

内联标签不会占据多余面积,没有内外边距,但是可以通过css来设置内边距,但是设置外边距只能设置左右外边距不能设置上下边距,即使设置了也无效;没有宽度和高度,css设置也无效;注意img标签和块级标签一样,有边距和宽高!所以img标签属于行内块级元素。

使用text-align对标签内容进行对齐方式的显示,如果是在行内元素和行内块级元素上面,可能看不出效果。
原因是,行内元素没有宽高,行内元素的宽高全部来自于内容的长度和高度。
行内块级元素默认也是没有设置宽高,但是行内块级元素可以设置宽度和高度。一旦设置了宽高以后,只要有剩余空间就可以看到对齐方式的效果。

常见内联元素: a, br, em, img, li, span

两种元素的转换

在css中可以通过display 对标签的显示特性[显示模式]进行设置,值有4种:

  1. block,以块状标签进行显示
  2. inline,以内联标签进行显示
  3. inline-block,以块状内联标签进行显示 ,类似图片这样的,一行可以有多个,同时具有宽高,内外边距。
  4. none,以隐藏标签进行显示[隐藏起来的标签],类似<input type=”hidden” >

 

font字体标签

示例:在网页上显示 我是字体标签,并修改字体为宋体,颜色为红色


<body bgcolor="#faebd7" >
<font color="red" face="宋体" size=20px>我是字体 </font>
</body>
</html>

特殊字符

示例:把<br>换行标签 变成文本 转换成字符显示在页面上

<br>会被浏览器解释成功能标签,所以如果我们要打印这种特殊字符串,应该利用html中的字符实体

 

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
引号 &quot; &#34;
撇号 &apos; (IE不支持) &#39;
分(cent) &cent; &#162;
£ 镑(pound) &pound; &#163;
¥ 元(yen) &yen; &#165;
欧元(euro) &euro; &#8364;
§ 小节 &sect; &#167;
© 版权(copyright) &copy; &#169;
® 注册商标 &reg; &#174;
商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

 

所以,我们的示例应该这么写:


<body bgcolor="#faebd7" >
    我是&lt;br&gt;标签
</body>
</html>

标题标签

<h1>~<h6>

这个就是六种标题,h1最大、h6最小

另外标题标签有一个对齐属性经常会用到:

    <h1 align="left">标题</h1>
    <h2 align="center">标题</h2>
    <h3 align="right">标题</h3>
    <h4>标题</h4>

 

超链接标签

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

只要是利用<a>

<body bgcolor="#faebd7" >
    <a href="http://baidu.com" target="_blank">百度</a>
</body>
  • a标签是超链接,href属性设置跳转地址
  • target设置那个目标进行跳转:
    • _self:表示当前页面(默认)
    • _blank:表示打开新页面进行跳转

学一波英语——blank:空的、align:使……对齐

补充:href不仅可以跳转到网页,还可以打开一些本地资源,例如href=”mailto:123456789@gmail.com”,则会自动打开本地邮件客户端去发邮件。

列表标签

有序列表、无序列表(常用)

我们来创建一个无序列表

<body bgcolor="#faebd7" >
    <!--无序列表-->
    <ul>
        <!--列表项-->
        <li>刘德华</li>
        <li>郭富城</li>
        <li>张学友</li>
        <li>黎明</li>
    </ul>
</body>

效果大概是这样(ul 可以添加基本属性type来修改前面的黑点)

  • 刘德华
  • 郭富城
  • 张学友
  • 黎明

而有序列表,只需要修改 ul 为 ol 即可

  1. 刘德华
  2. 郭富城
  3. 张学友
  4. 黎明

img标签

可以在html页面上显示图片

示例:使用img标签显示一张美女的图片,并修改其宽高,和边框属性。

这里我们先了解一下路径问题:

  • 在JavaSE中路径分为绝对路径和相对路径
    • 绝对路径:盘符:/目录/文件名
    • 相对路径:从工程名开始算
  • 在web中路径分为绝对路径和相对路径
    • 绝对路径:http://ip:port/工程名/资源路径
    • 相对路径:. 、.. 、 文件名
<body bgcolor="#faebd7" >
    <img src="./imgs/test.jpg" width="370px" height="500px" />
</body>

路径一定要弄对

我们还可以给图片加一些效果(利用基础属性)

常见一些属性例如:

  1. width:设置图片的宽度
  2. height:设置图片的高度
  3. border:设置图片边框大小
  4. alt:设置当前路径找不到图片时,用来代替图片的文本

语义化标签

在html5中,为了提高程序的可读性,提供了一些标签:

  • <header>:标签内编写页面标题等内容
  • <footer>:标签内编写页脚的内容

后面可以结合css直接拿到标签来控制。

表格(重点)

普通效果

示例1:做一个 带表头的 , 三行,三列的表格,并显示边框,修改表格的宽度、高度

<body bgcolor="#faebd7" >
    <table border="3px" width="300px" height="300px">
        <tr>
            <th>1.1</th>
            <th>1.2</th>
            <th>1.3</th>
        </tr>
        <tr>
            <td>2.1</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>
</body>

示例2:修改表格的对齐方式,单元格间距

<body bgcolor="#faebd7" >
    <table align="center" border="3px" width="300px"
                  height="300px" cellspacing="0px">
        <tr>
            <th>1.1</th>
            <th>1.2</th>
            <th>1.3</th>
        </tr>
        <tr>
            <td>2.1</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>
</body>

总结一下常用:

  • table:表格标签
    • border:设置表格边框
    • width:设置表格宽度
    • height:设置表格高度
    • align:设置表格相对于页面的对象
    • cellspacing:设置单元格间距(建议设为 0)
  • tr:行标签
  • th:表头标签
  • td:是单元格标签
    • align:设置单元格文本的对齐方式
  • b:加粗标签

 

 

跨行跨列效果

示例:新建一个五行,五列的表格,第一行,第一列的单元格要跨两列,第二行第一列的单元格跨两行,第四行第四列的单元格跨两行两列

利用好基本标签 colspan 和 rowspan 即可,注意删除多余的表格

<body bgcolor="#faebd7" >
    <table align="center" border="3px" width="300px"
                      height="300px" cellspacing="0px">
        <tr>
            <th colspan="2">1.1</th>
            <th>1.3</th>
            <th>1.4</th>
            <th>1.5</th>
        </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>
</body>

 

iframe框架标签

可以在HTML页面上打开一个小窗口去加载一个单独的页面。

    <iframe src="http://baidu.com" width="500" height="450"></iframe>

iframe常与列表搭配,作为列表选项的预览窗口

搭配方式如下:

  1. 在iframe中添加一个基本属性——name,并设置一个值
  2. 在a标签中设置基本属性target的值为上面这个值
<body bgcolor="#faebd7" >
    我是一个单独的完整的页面<br/><br/>
    <iframe name="turn" src="http://baidu.com" width="500" height="450"></iframe>
    <br/><br/>
    <ul>
        <li><a href="http://baidu.com" target="turn">百度</a></li>
        <li><a href="http://bing.com" target="turn">必应</a></li>
    </ul>
</body>

表单标签(重点!)

什么是表单?

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

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

主要利用的标签是 form 标签

<body bgcolor="#faebd7" >
    <form>
        用户名称:  <input type="text" value="默认值" /><br/>
        用户密码:<input type="password" /><br/>
        确认密码:<input type="password" /><br/>
        性别:<input type="radio" name="sex" checked="checked" />男
              <input type="radio" name="sex" />女 <br/>
        兴趣爱好:<input type="checkbox" />Java
                <input type="checkbox" />C++
                <input type="checkbox" />C#
                <input type="checkbox" />JavaScript
                <input type="checkbox" />Python  <br/>
        国籍:<select>
        <option selected="selected">中国</option>
        <option>美国</option>
        <option>日本</option>
        <option>加拿大</option>
            </select><br/>
        自我评价:<textarea rows="10" cols="20">我是默认值</textarea><br/>
        <input type="reset" value="重新来过"/>
        <input type="submit" value="就这样交了"/>
        <input type="button" value="一个没用的按钮"/>
        <input type="file"/>
        <input type="hidden" value="重新">
    </form>
</body>

知识点:

  1. form标签就是表单
  2. input type=text 是文本输入框,value 是默认显示内容
  3. input type=password 是密码输入框,value 是默认显示内容
  4. input type=radio 是单选项,name标签可以进行分组,checked使其默认选中
  5. input type=checkbox 是复选框,checked使其默认选中
  6. input type=reset 是重置按钮,value可以修改按钮上的文本
  7. input type=submit 是提交按钮,value可以修改按钮上的文本
  8. input type=button 是普通按钮,value可以修改按钮上的文本
  9. input type=file 是提交文件按钮(文件上传域),实现文件上传
  10. input type=hidden 是隐藏域,当我们要发送某些信息,而这些信息不需要用户看见、参与,就会使用隐藏域。
  11. select 标签是下拉列表框
  12. option 标签是下拉列表框中的选项,selected 设置默认选中
  13. textarea 表示多行文本输入框(起始标签和结束标签中的内容是默认值),rows 属性设置可以显示几行的高度,cols 属性设置每行可以显示几个字符宽度。

这样非常的不美观,我们可以按照表格的形式来安排布局,例如:

<body bgcolor="#faebd7" >
    <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" />
                </td>
            </tr>
            <tr>
                <td>
                    确认密码:
                </td>
                <td>
                    <input type="password" />
                </td>
            </tr>
            <tr>
                <td>
                    性别:
                </td>
                <td>
                    <input type="radio" name="sex" checked="checked" />男
                    <input type="radio" name="sex" />女
                </td>
            </tr>
            <tr>
                <td>
                    兴趣爱好:
                </td>
                <td>
                    <input type="checkbox" />Java
                    <input type="checkbox" />C++
                    <input type="checkbox" />C#
                </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 rows="10" cols="20">我是默认值</textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="reset" value="重新来过"/>
                </td>
                <td align="center">
                    <input type="submit" value="就这样交了"/>
                </td>
            </tr>
        </table>
    </form>
</body>

这样效果就好多了。

很多人可能好奇这个form标签是做什么的?没有这个标签,这个表单也可以正常显示。

form其实主要负责我们向服务端提交表单

主要是通过编辑 action属性 与 method属性

<body bgcolor="#faebd7" >
    <form action="http://127.0.0.1:3012" method="get">
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>
                    用户名称:
                </td>
                <td>
                    <input type="text" value="默认值" />
                </td>
            </tr>
            <tr>
                <td>
                    用户密码:
                </td>
                <td>
                    <input type="password" />
                </td>
            </tr>
            <tr>
                <td>
                    确认密码:
                </td>
                <td>
                    <input type="password" />
                </td>
            </tr>
            <tr>
                <td>
                    性别:
                </td>
                <td>
                    <input type="radio" name="sex" checked="checked" />男
                    <input type="radio" name="sex" />女
                </td>
            </tr>
            <tr>
                <td>
                    兴趣爱好:
                </td>
                <td>
                    <input type="checkbox" />Java
                    <input type="checkbox" />C++
                    <input type="checkbox" />C#
                </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 rows="10" cols="20">我是默认值</textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="reset" value="重新来过"/>
                </td>
                <td align="center">
                    <input type="submit" value="就这样交了"/>
                </td>
            </tr>
        </table>
    </form>
</body>

提交之后,我们会发现网页会跳转到这个地址

http://127.0.0.1:3012/?sex=on

熟悉Get请求的朋友应该知道,分隔符后面就是我们的提交参数,可是为什么只有sex呢?

以下情况如果不注意,会导致表单没有提交

  1. 表单需要name属性值
  2. 单选、复选(下拉列表的option标签)都需要添加value属性,以便发送给服务器
  3. 表单项需要在提交的form标签中

form中的属性method的基本方法常见的有两个——post、get

GET提交特点

  • 浏览器地址栏中的地址是:action属性[+?+请求参数],请求参数的格式是 name=value&name2=value2
  • 不安全
  • 他有数据长度的限制(根据浏览器不同而不同)

POST提交特点

  • 浏览器地址栏中只有地址栏(action属性内容)
  • 相对于GET更安全
  • 理论上不限制数据长度

 

其他标签

  • div标签:默认独占一行(盒子标签)
  • span标签:它的长度是封装数据的长度
  • p:默认会在段落的上方或下方各空出一行,如果已有就不再空(段落标签)

 


CSS

学习CSS,请备好CSS Handbook

这里我免费分享给大家

链接:https://pan.baidu.com/s/1rDP2rkQj3vMtXknndu1ZBA
提取码:8sod

概念

CSS是【层叠样式表单】。是用于(增强)控制网页样式信息与网页内容分离的一种标记性语言

 

语法规则

基本语法规则非常简单

选择器 {
    属性:值
}
  • 选择器:  可以决定你的页面中哪些元素会受影响
  • 属性(property): 是你要改的样式名,并且每一个属性都有一个值。属性和值被冒号分开,并被花括号包围,这样就组成了一个完整的样式声明(declaration)
    • 多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开,虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)

CSS和HTML中的结合方式

一. style基本属性

CSS不一定就要用一个新文件,我们可以直接在标签的style基本属性上设置 样式声明(declaration)

示例:分别定义两个 div,span 标签,分别修改样式为:边框1个像素,实线,红色

<body bgcolor="#faebd7" >
    <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>
</body>

div标签独占一行

span标签随文本内容变化而变

 

二. style标签定义样式

我们可以在head标签中使用style标签,定义好css样式

过场经验:IDEA下,使用Ctrl+r 进行替换,替换成空白,可以快速删除雷同代码

代码如下,利用标签选择器

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        div{
            border:1px solid red;
        }
        span{
            border:1px solid red;
        }
    </style>
</head>
<body bgcolor="#faebd7" >
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>

注意,选择器类型如果是标签选择器,则整个页面的这个标签都会受到影响。

另外补充,在style标签内部,就不在是html文件的语法了,比如注释,要使用 /*   */ 方式。

 

三. 单独CSS样式文件(常用)

考虑到大项目的维护性等原因,我们经常使用这种方式。

使用html的<link rel=”stylesheet” type=”text/css” href=”./style.css”  /> 单标签 导入CSS样式文件。

html文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" type="text/css" href="./CSS/test.css" />
</head>
<body bgcolor="#faebd7" >
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

test.css内容

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

 

标签名选择器

标签名{
      属性:值
}

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

示例:在所有div标签上修改字体颜色为蓝色,字体大小为30个像素,边框为1像素,蓝色实线,并且修改所有span标签的字体为红色,字体大小为20个像素,边框为5像素蓝色虚线。

div{
    border:1px solid yellow;
    color:blue;
    font-size: 30px;
 }
span{
    border:5px dashed blue;
    color:red;
    font-size: 20px;
}

只要标签名选择器引到页面中,就会在整个页面生效

 

id选择器

#选择器{
      属性:值
}

示例:

第一个div标签的id为id001,然后根据id属性定义css样式修改字体颜色为蓝色,字体大小为30个像素,边框为1像素,黄色实线

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

test.css

#id001{
    border:1px solid yellow;
    color:blue;
    font-size: 30px;
 }
#id002{
    border:5px dashed blue;
    color:red;
    font-size: 20px;
}

hello.html

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

类型选择器

.选择器{
      属性:值
}

示例:修改class属性值为 class01 的span或div标签,字体颜色为蓝色,字体大小为30个像素,边框为1像素黄色实线。

.class01{
    border: 1px solid  yellow;
    color:blue;
    font-size: 30px;
}

 

组合选择器

选择器1,选择器2,选择器n{
       属性:值
}

可以让多个选择器公用同一个 样式声明(declaration)

示例:修改 class=”class01″的div标签 和 id=”id01″ 所有的span标签,字体颜色为蓝色,字体大小为20个像素,边框为1像素黄色实线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .class01,#id01{
            color: blue;
            font-size: 20px;
            border: 1px solid yellow;
        }
    </style>
</head>
<body bgcolor="#faebd7" >
    <div class="class01">div标签1</div>
    <div class="class01">div标签2</div>
    <span id="id01">span标签2</span>
    <span>span标签2</span>
</body>
</html>

盒子模型

在html页面中的各个元素都可以看成是多个盒子,这就是盒子模型。

盒子模型可以帮助我们控制布局。

我们常用控制布局的css属性:

  • margin:外边距,该元素对外边距
  • padding:内边距,该元素对内边距
    • 注意:默认情况下,内边距会影响盒子大小,即盒子边框会因为内边距而变大,可以设置box-sizing:border-box,这样盒子的width和height就是最终的大小,不会受到padding的影响了。

  • float:浮动,让块级元素向左/右位置浮动,通常用于将多个div浮动到同一行(需要设置div的width)

 

后话:

常见的css样式内容介绍的不多,就先写到这里了,用的时候更多可以参考上面分享的Handbook。

 


JavaScript

介绍

javascript 语言诞生主要是完成页面的数据验证。因为它运行在客户端,需要运行浏览器来解析执行 JavaScript 代码。

javaScript是网景公司的产品,最早取名为LiveScript,为了吸引更多的java程序员,后来改名为 javascript。

Java是强类型

JavaScript是弱类型

  • 交互性(他可以做的就是信息的动态交互)
  • 安全性(不允许直接访问本地磁盘)
  • 跨平台性(只要是可以解释JS的浏览器都可以执行,和平台无关)

 

JavaScript 和 html 代码的结合

第一种方式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript">
        for(let i=0;i<10;i++)
            alert('有意思');
    </script>
</head>
<body>
</body>
</html>

定义了之后,打开页面就会直接运行

第二种方式

也是将js代码写在外部文件中,然后通过<script>标签导入当前页面

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

注释

单行注释:// 注释内容

多行注释:/* 注释内容*/

 

数据类型

js中的数据类型分为两种:

  • 原始数据类型:
    • number:数字。
      • 整数
      • 小数
      • NaN
    • string:字符串(不管单引号还是双引号,没有“字符”的概念)
    • boolean:布尔,true/false
    • null:一个对象为空的占位符
    • undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
  • 引用数据类型:对象

js中的原始数据类型其实也就可以大致等于Java中的基本数据类型。

变量

变量:一小块存储数据的内存空间

Java语言是强类型的语言,而JS是弱类型的语言

  • 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
  • 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据

我们一般使用var来定义变量,但是也可以不用var:

  • 用var:定义的变量是局部变量
  • 不用var直接定义:定义的变量是全局变量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript">
        //定义Number类型
		var num=1;
		var num2=1.2;
		var num3=NaN;
		//输出到页面上
		document.write(num+"<br/>");
		document.write(num2+"<br/>");
		document.write(num3+"<br/>");
		//定义string类型
		var str="abc";
		var str2="edf";
		document.write(str+"<br/>");
		document.write(str2+"<br/>");
		//定义boolean
		var flag=true;
		document.write(flag+"<br/>");
		//定义null、undefined
		var test=null;
		var test2=undefined;
		var test3;
		document.write(test+"<br/>");  //打印null
		document.write(test2+"<br/>");  //打印undefined
		document.write(test3+"<br/>"); //打印undefined
    </script>
</head>
<body>
</body>
</html>

可以利用运算符 typeof 来查看变量的类型,不过你会发现,typeof(null的变量),结果会是object,而不是原始数据类型null,这个是一个经典的js的bug,至今未解决。

引用W3CShool的话:“您也许会问,为什么 typeof 运算符对于 null 值会返回 “Object”。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript(客户端脚本语言的标准) 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。”

运算符

一元运算符

只有一个运算符的运算符

  • ++:自增
  • –:自减

同很多语言一样,++/–在前,则先自增/减后运算;++/–在后,则先运算后自增/减。

  • +:正数
  • -:负数

这两个运算符也常常用于不同数据类型转number

注意:在JS中,若运算数不是运算符所要求的类型,那么JS引擎将自动将运算数进行类型转换。所以我们有必要了解一下其他字符转Number:

  1. string转number:如果字面值是数字,则按照字面值转换;如果字面值不是数字,则转为NaN
  2. boolean转number:true转1;false转0

算术运算符

  1. +
  2. *
  3. /
  4. %

这个没啥好说的

比较运算符

比较方式:

  • 类型相同:直接比较
    • number:按照数字顺序比较
    • string:按照字典顺序(ASCII码)比较。按位逐一比较,直到得出大小为止。
  • 类型不同:如果是===,直接返回false;如果是其他比较运算符(>、<、==),会先进行类型转换再比较

字面非数字的字符串和数字比较,即NaN和数字比较,返回结果都是false,因为任何值==NaN,结果都是false,甚至NaN==NaN,结果也是false

逻辑运算符

  • 且运算:&&
  • 或运算:||
  • 非运算:!

!非运算符

不同类型转boolean:

  1. number:0、NaN为false;其他为真
  2. string:空串””为false;其他为真
  3. null&&undefined:false
  4. 对象 :值不为null,则为true

&&且运算

有两种情况:

  1. 当表达式全为真的时候,返回最后一个表达式的值
  2. 当表达式中,有一个为假的时候,返回第一个为假的表达式的值
var a="abc";
var b=true;
var c=null;
var d=false;
alert(b&&a);  //true,返回abc
alert(a&&b);  //true,返回true
alert(a&&d);  //false,返回false
alert(a&&c);  //false,返回null

|| 或运算

  1. 当表达式全为假时,返回最后一个表达式的值
  2. 当表达式中,有一个为真的时候,返回第一个为真的表达式的值
var a="abc";
var b=true;
var c=null;
var d=false;
alert(b||a);  //true,返回true
alert(a||b);  //true,返回abc
alert(a||d);  //true,返回abc
alert(d||c);  //false,返回null

短路现象:短路现象就是说,当 && 或者 || 有了结果之后(比如 false后面用&&、true后面用|| ),后面的表达式就不在执行了。

三元运算符

表达式?值1:值2

如果表达式为true,返回值1;否则返回值2

 

基本对象

js中的常用基本对象:

  1. Array:数组对象
  2. Function:函数对象
  3. Boolean(boolean的包装类型)
  4. Date
  5. Math
  6. Number(number的包装类型)
  7. String(string的包装类型)
  8. RegExp
  9. Global

Array对象

创建

  • var  数组名=new Array(元素列表)
  • var  数组名=new Array(默认长度)
  • var  数组名=[元素列表];

特点

  • 数组类型可变
    <script  type="text/javascript">
		var arr=[1,"abc",true]; 
		document.write(arr+"<br/>"); //1,abc,true
    </script>
  • 数组的长度是可变的:当你访问超过总定义大小的下标时,数组会自动扩容;如果该下标对应的元素没有赋值过,那么会是undefined。
    <script  type="text/javascript">
		var arr=[1]; 
		arr[7]="有意思";
		document.write(arr[0]+"<br/>"); //1
		document.write(arr[7]+"<br/>"); //有意思
    </script>

属性

  • length:数组的长度

方法

方法 描述
concat() 连接两个或更多的数组,并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素,并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串,并返回结果。
toLocaleString() 把数组转换为本地数组,并返回结果。
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
valueOf() 返回数组对象的原始值

 

Function对象

创建

第一种:

function 方法名称(形参列表){
      方法体
}

第二种:

var 方法名=function(形参列表){
      方法体
}

注意:js中不允许重载,如果你重载,那将直接覆盖之前的同名方法,因为你的方法名其实就是Function对象,如果给对象重新赋值,则前值会被覆盖。

Function对象的特点:

  • 方法定义时,形参的类型(var)不用写
  • 方法是一个对象,如果定义名称相同的方法,会覆盖
  • 在JS中,方法的调用只与方法名称有关,和参数列表无关,如果你不按形参列表传参,方法中的对应形参会是undefined
  • 在方法声明中,有一个隐藏的内置对象(数组),arguments封装了所有的实际参数
    <script  type="text/javascript">
		//求两个数的和
        var add=function(a,b){
			return a+b;
		}
		alert(add(1,2));  //弹出3
		//求任意个数的和
		var add=function(){
			var sum=0;
			for(var i=0;i<arguments.length;i++){
				sum+=arguments[i];
			}
			return sum;
		}
		alert(add(1,2,3,4));  //弹出10
    </script>

Function对象中自带属性:

  • length
    <script  type="text/javascript">
        var fun=function(a,b){
		
		}
		alert(fun.length);  //弹出2
    </script>

Date对象

创建

var  date=new Date();

此时直接输出date会打印当前时间:Sat Aug 01 2020 22:18:48 GMT+0800 (中国标准时间)

常用方法

  • toLocaleString():返回当前date对象对应的时间本地字符串格式(返回值根据你的操作系统语言有关)。
    <script  type="text/javascript">
		var date=new Date();
		document.write(date.toLocaleString()); 
                //打印2020/8/1 下午10:22:17 
    </script>
  • getTime():获取毫秒值。返回当前时期对象描述的时间到1970年1月1日零点的毫秒值差。

Math对象

特点

  • Math对象不用创建,可以直接使用方法

属性

  • PI:圆周率

常用方法

  • round(x):把数四舍五入为最接近的整数。
    <script  type="text/javascript">
		document.write(Math.round(3.6)+"<br/>");  //4
    </script>
  • floor(x) :对数进行下舍入。
  • random():返回 0 ~ 1 之间的随机数(含0,不含1,和Java一样)。
    <script  type="text/javascript">
		//取1~100之间的随机整数
		var a=Math.floor(Math.random()*100)+1;
		document.write(a);
    </script>

RegExp对象

正则表达式

正则表达式:定义字符串的组成规则

正则表达式的匹配语法非常的庞大,可以参考这个W3CShool的网页

下面是几个常用的匹配规则:

  • 单个字符:
    • \d:单个数字字符[0-9]
    • \w:单个单词字符[a-zA-Z0-9]
  • 量词符号
    • ?:表示出现0次或1次
    • *:表示出现0次或多次
    • +:出现1次或多次
    • {m,n}:表示 m<=数量<=n
      • {,n}:表示最多n次
      • {m,}:表示最少m次
  • 首尾限制
    • ^:首部限制
    • $:尾部限制

正则表达式对象

RegExp意为正则表达式对象,在我们的前端设计中会经常使用(在爬虫、Linux的某些命令也领教过好几次了)

创建

  • var  reg=new RegExp(“正则表达式”);   :注意,这种方法下正则规则通过字符串方式传入,需要对敏感字符转义,例如”\w”需要写成”\\w”
  • var reg=/正则表达式/;

方法

  • test(参数):验证指定的字符串是否符合正则表达式的规范
    <script  type="text/javascript">
		var username="aadsadasf";
		var reg=/^\w{6,12}$/;
		alert(reg.test(username)); //true
    </script>

Global对象

特点

  • 这是一个全局对象,这个Global中封装的方法不需要对象就可以直接调用。即“方法名();”

方法

  • encodeURI()  :URL编码
  • decodeURI()  :URL解码
  • encodeURIComponent()  : URL编码,编码的字符更多(例如?、/等符号)
  • decodeURIComponent()  :URL解码

什么是URL编码:浏览器中数据传输的时候,是通过一些协议来传输,例如我们的超文本传输协议——HTTP协议,这些协议不支持中文的传输,如果想要把中文数据发送到服务端,就需要对中文数据进行转码,我们经常用的就是URL转码,而且浏览器和HTTP协议中默认的一般也是URL转码。

编码规则大致说一下就是:每个字节(8位),即可以用两个十六进制表示,例如“10010101”,16进制表示就是“95”,前面再加一个百分号——%95,就编好了一个字节的信息,至于几个字节代表汉字,就得看汉字的编码方式了。

我们可以做个试验,用IE浏览器百度搜索“蝙蝠侠”,然后URL地址栏中会有“%E8%9D%99%E8%9D%A0%E4%BE%A0”,9个百分号,看来是9个字节,我们搜了三个汉字,URL编码后是9个字节,说明我们的汉字使用的是utf-8编码(UTF-8:三个字节一个汉字;GBK:两个字节一个汉字)

    <meta charset="UTF-8">  //以utf-8显示
    <title>Title</title>
    <script  type="text/javascript">
          var str="蝙蝠侠";
	  var encode=encodeURI(str);
	  document.write(encode);
          //页面显示:%E8%9D%99%E8%9D%A0%E4%BE%A0 
	  var s=decodeURI(encode);
	  document.write(s);
          //页面显示:蝙蝠侠
    </script>

另外,URI是通一资源标志符(Uniform Resource Identifier, URI),表示的是web上每一种可用的资源,如 HTML文档、图像、视频片段、程序等都由一个URI进行标识的。URL是URI的一个子集。它是Uniform Resource Locator的缩写,译为“统一资源定位符”

  • parseInt():将字符串转为数字,逐一判断每一个字符是否为数字,直到不是数字为止,将前面字面上的数字转成number。
    <script  type="text/javascript">
		 var a="1232as3df";
		 a=parseInt(a); 
		 document.write(a+"<br/>");
		 //结果是1232,而不是NaN
    </script>

如果字符串第一个字符就不是数字,那么这个转换结果就是NaN

  • isNaN():判断某个值是否是NaN

为什么不直接“x==NaN”来判断?你忘了,NaN六亲不认,任何值==NaN结果都是false,哪怕NaN==NaN,结果也是false。

  • eval(参数):计算 JavaScript 字符串,并把它作为脚本代码来执行。

网络安全中“文件上传问题”就是利用这种方法来得到服务端的控制权。

 

自定义对象

Object形式的自定义对象

对象的定义:

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

对象的访问:

变量名.属性名/函数名()
    <script type="text/javascript">
        var obj=new Object();
        obj.name="华仔";
        obj.age=18;
        obj.fun=function(){
            alert("姓名"+this.name+" 年龄"+this.age);
        }
        alert(obj.name)
        obj.fun()
    </script>

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

对象的定义

var 变量名={}        //空对象
var 变量名={
       属性名:值,      //定义一个属性
       属性名:值,     //定义一个属性
       函数名:function(){}    //定义一个函数
}

对象的访问

    <script type="text/javascript">
        var obj={
            name:"华仔",
            age:18,
            func:function(){
                alert("姓名:"+this.name+"年龄:"+this.age);
            }
        }
        //变量名:属性/函数名()
        alert(obj.name);
        obj.func();
    </script>

js中的事件

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

功能:某些组件被执行了某些操作之后,触发某些代码的执行。

常用的事件:

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

静态注册

什么是事件注册(绑定)?

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

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

 

动态注册

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

动态注册基本步骤:

  1. 获取标签对象
  2. 标签对象.事件名(Function对象) = function(){}

动态注册可以有效解耦

onload事件

静态

浏览器解析完页面后,自动触发的事件,onload一般写在 body 中

onload可以直接加载标签上

<body onload="alert('静态注册onload事件')">

</body>

这样打开页面就会弹窗,但是如果我们是有很多的代码,一般不会这样做,一般我们会在script脚本中定义好方法,然后在body标签的onload属性中调用方法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onload事件的方法
        function onloadFun(){
            alert("静态注册onload事件");
        }
    </script>
</head>
<body onload="onloadFun()">
</body>

像是这样

动态

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function(){
            alert("动态注册的onload事件");
        }
    </script>
</head>

onclick事件

点击按钮时触发事件

静态:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFunc(){
            alert("静态onclick");
        }
    </script>
</head>
<body>
    <button onclick="onclickFunc()">按钮</button>
</body>

动态

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function(){
            //1-获取标签对象
            var btnObj=document.getElementById("btn");
            //2-通过标签对象.事件名=function(){}
            btnObj.onclick=function () {
                alert("动态注册");
            }
        }
    </script>
</head>
<body>
    <button id="btn">按钮</button>
</body>

onblur事件

失去焦点时触发事件

静态:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //静态注册失去焦点事件
        function onblurFunc(){
            console.log("静态注册");
        }
    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFunc()"/><br/>
    密码:<input type="text"/><br/>
</body>

信息打印在了浏览器的控制台

动态:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var obj=document.getElementById("passwd");
            obj.onblur=function (){
                console.log("动态注册");
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text"/><br/>
    密码:<input type="text" id="passwd"/><br/>
</body>

信息打印在了浏览器的控制台

这里测试最好不要用alert,因为可能会产生冲突

 

内容发生改变

选择内容发生改变时触发事件

静态

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onChange(){
            alert("女神已经改变了");
        }
    </script>
</head>
<body>
    请选择你心中的女神
    <select onchange="onChange()">
        <option selected="selected">-女神-</option>
        <option>小红</option>
        <option>小丽</option>
        <option>小敏</option>
    </select>
</body>

动态

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var obj=document.getElementById("select01");
            obj.onchange=function(){
                alert("动态注册");
            }
        }
    </script>
</head>
<body>
    请选择你心中的女神
    <select id="select01">
        <option selected="selected">-女神-</option>
        <option>小红</option>
        <option>小丽</option>
        <option>小敏</option>
    </select>
</body>

表单提交事件

在表单提交前,验证表单内容是否合法

如果不合法就拦截提交。

静态

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onSubmit(){
            alert("静态注册");
            return false;
        }
    </script>
</head>
<body>
    <form action="http://localhost:8080"
          method="get" onsubmit="return onSubmit();">
        <input type="submit" value="静态注册" />
    </form>
</body>

注意两个return很重要,这样才能阻止用户提交。

动态

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var obj=document.getElementById("onsubmit01");
            obj.onsubmit=function(){
                alert("动态注册表单");
                return false;
            }
        }
    </script>
</head>
<body>
    <form action="http://localhost:8080"
          method="get" id="onsubmit01">
        <input type="submit" value="动态注册" />
    </form>
</body>

注意要renturn  false,才能拦截,如果不拦截,return true即可。

 

DOM模型

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

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

Document对象

祭上这张图

<html>
<head>
    <title>MyHtml.html</title>
</head>
<body>
    <a href="http://www.baidu.com">我的连接</a>
    <h1>我的标题</h1>
</body>
</html>

Document对象的理解

  1. Document 它管理了所有的HTML文档内容
  2. document 它是一种树结构的文档,有层级关系
  3. 它让我们把所有的标签都对象化
  4. 我们可以通过document访问所有的标签对象

Document对象的方法

更多内容欢迎参考w3cschool

 

方法 描述
close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open() 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

 

示例:结合正则表达式检测用户名是否符合规则(校验规则:必须由字母、数字、下划线组成,长度5-12)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFunc() {
            //usernameObj就是一个DOM对象,可以.出来type等属性
            //.value 就是对应输入框的值,可以跟踪变化
            var usernameObj=document.getElementById("username");
            //校验规则:必须由字母、数字、下划线组成,长度5-12
            //正则表达式登场
            var patt=/^\w{5,12}$/;
            //正则表达式对象的test方法可以检测是否符合匹配规则
            if(patt.test(usernameObj.value)){
                alert("用户名合法");
            }else{
                alert("用户名不合法");
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text" id="username" value="默认值"/>
    <button onclick="onclickFunc()">校验</button>
</body>

常见验证提示效果

上面的例子的弹窗提示不免有些low,我们来升级一下

body内容变成:

<body>
    用户名:<input type="text" id="username" value="默认值"/>
    <span id="usernameSpan" style="color: red;"></span>
    <button onclick="onclickFunc()">校验</button>
</body>

head中的判断变成:

        // 正则表达式对象的test方法可以检测是否符合匹配规则
        if(patt.test(usernameObj.value)){
                //innerHTML表示起始标签和结束标签之间的内容
                usernameSpanObj.innerHTML="用户名合法";
            }else{
                //innerHTML表示起始标签和结束标签之间的内容
                usernameSpanObj.innerHTML="用户名不合法";
            }
        } 

就好了,innerHTML可以得到两个标签之间的内容,可读可写。

如果想要用对错图片来表明,就只要把usernameSpanObj.innerHTML="用户名不合法"; 换成 usernameSpanObj.innerHTML="<img src=\"wrong.png\" width=\"12px\" height=\"12px\">";即可,当然,记得导入图片资源。

 

正则表达式对象(补充)

常见语法规则请见以下两个网址:

W3CSchool 

菜鸟教程

正则表达式是描述字符模式的对象。

正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。

我们可以新建RegExp对象来创建匹配规则

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //表示要求字符串中,是否包含字母e
        var pott=new RegExp("e");  //也可以这么写:/e/
        var str="abcd";
        alert(pott.test(str));
    </script>
</head>

会弹窗 false

 

var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;

  • pattern(模式) 描述了表达式的模式
  • modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

注意:当使用构造函数创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \)。比如,以下是等价的:

var re = new RegExp("\\w+");
var re = /\w+/;

\w:可以匹配字母、数字、下划线,是最常用的表达式

getElementsByName方法

这个方法与刚才的ByID不同,这个会根据name属性,返回多个DOM对象

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll() {
            var hobbys=document.getElementsByName("hobby");
            hobbys.forEach(item=>{
                item.checked=true;
            })
        }
        function checkReverse(){
            var hobbys=document.getElementsByName("hobby");
            hobbys.forEach(item=>{
                item.checked=!item.checked;
            })
        }
        function checkNo() {
            var hobbys=document.getElementsByName("hobby");
            hobbys.forEach(item=>{
                item.checked=false;
            })
        }
    </script>
</head>
<body>
兴趣爱好:
<!--checked 表示复选框的选中状态-->
<input type="checkbox" name="hobby" />Java
<input type="checkbox" name="hobby"/>C++
<input type="checkbox" name="hobby"/>C#
<input type="checkbox" name="hobby"/>JavaScript
<input type="checkbox" name="hobby"/>Python <br/>
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkReverse()">反选</button>
<button onclick="checkNo()">全不选</button>
</body>
</html>

getElementsByName返回的是一个DOM对象的集合

getElementsByTagName方法

  • 这个方法是按照指定标签名进行查询,并且返回集合。
  • 集合中都是DOM对象
  • 集合中元素顺序,是他们在html页面中从上到下的顺序

改变上面的示例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll() {
            var inputs=document.getElementsByTagName("input");
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked=true;
            }
        }
        function checkReverse(){
            var inputs=document.getElementsByTagName("input");
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked=!inputs[i].checked;
            }
        }
        function checkNo() {
            var inputs=document.getElementsByTagName("input");
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked=false;
            }
        }
    </script>
</head>
<body>
兴趣爱好:
<!--checked 表示复选框的选中状态-->
<input type="checkbox" />Java
<input type="checkbox"/>C++
<input type="checkbox" />C#
<input type="checkbox" />JavaScript
<input type="checkbox" />Python <br/>
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkReverse()">反选</button>
<button onclick="checkNo()">全不选</button>
</body>
</html>

这里要使用for循环

三个方法的注意

  • 如果有id,优先使用这个getElementById方法查询;没有id属性,则使用getElementByName方法来查询;如果没有id,也没有name,则最后使用getElementByTagName方法。
  • 浏览器是按顺序去读语句,尽量将这三个语句放在方法中或者Window.onload中

节点的常用属性和方法

可以简单理解为节点就是标签对象

 

属性 / 方法 描述
element.accessKey 设置或返回元素的快捷键。
element.appendChild() 向元素添加新的子节点,作为最后一个子节点。
element.attributes 返回元素属性的 NamedNodeMap。
element.childNodes 返回元素子节点的 NodeList。
element.className 设置或返回元素的 class 属性。
element.clientHeight 返回元素的可见高度。
element.clientWidth 返回元素的可见宽度。
element.cloneNode() 克隆元素。
element.compareDocumentPosition() 比较两个元素的文档位置。
element.contentEditable 设置或返回元素的文本方向。
element.dir 设置或返回元素的内容是否可编辑。
element.firstChild 返回元素的首个子。
element.getAttribute() 返回元素节点的指定属性值。
element.getAttributeNode() 返回指定的属性节点。
element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
element.getFeature() 返回实现了指定特性的 API 的某个对象。
element.getUserData() 返回关联元素上键的对象。
element.hasAttribute() 如果元素拥有指定属性,则返回true,否则返回 false。
element.hasAttributes() 如果元素拥有属性,则返回 true,否则返回 false。
element.hasChildNodes() 如果元素拥有子节点,则返回 true,否则 false。
element.id 设置或返回元素的 id。
element.innerHTML 设置或返回元素的内容。
element.insertBefore() 在指定的已有的子节点之前插入新节点。
element.isContentEditable 设置或返回元素的内容。
element.isDefaultNamespace() 如果指定的 namespaceURI 是默认的,则返回 true,否则返回 false。
element.isEqualNode() 检查两个元素是否相等。
element.isSameNode() 检查两个元素是否是相同的节点。
element.isSupported() 如果元素支持指定特性,则返回 true。
element.lang 设置或返回元素的语言代码。
element.lastChild 返回元素的最后一个子元素。
element.namespaceURI 返回元素的 namespace URI。
element.nextSibling 返回位于相同节点树层级的下一个节点。
element.nodeName 返回元素的名称。
element.nodeType 返回元素的节点类型。
element.nodeValue 设置或返回元素值。
element.normalize() 合并元素中相邻的文本节点,并移除空的文本节点。
element.offsetHeight 返回元素的高度。
element.offsetWidth 返回元素的宽度。
element.offsetLeft 返回元素的水平偏移位置。
element.offsetParent 返回元素的偏移容器。
element.offsetTop 返回元素的垂直偏移位置。
element.ownerDocument 返回元素的根元素(文档对象)。
element.parentNode 返回元素的父节点。
element.previousSibling 返回位于相同节点树层级的前一个元素。
element.removeAttribute() 从元素中移除指定属性。
element.removeAttributeNode() 移除指定的属性节点,并返回被移除的节点。
element.removeChild() 从元素中移除子节点。
element.replaceChild() 替换元素中的子节点。
element.scrollHeight 返回元素的整体高度。
element.scrollLeft 返回元素左边缘与视图之间的距离。
element.scrollTop 返回元素上边缘与视图之间的距离。
element.scrollWidth 返回元素的整体宽度。
element.setAttribute() 把指定属性设置或更改为指定值。
element.setAttributeNode() 设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData() 把对象关联到元素上的键。
element.style 设置或返回元素的 style 属性。
element.tabIndex 设置或返回元素的 tab 键控制次序。
element.tagName 返回元素的标签名。
element.textContent 设置或返回节点及其后代的文本内容。
element.title 设置或返回元素的 title 属性。
element.toString() 把元素转换为字符串。
nodelist.item() 返回 NodeList 中位于指定下标的节点。
nodelist.length 返回 NodeList 中的节点数。

 

补充

动态添加节点:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload= function () {
            //在内存中<div></div>
            var divObj=document.createElement("div");
            //还是在内存中
            divObj.innerHTML="今夜风雨";
            //给body标签添加divObj,他就显示出来了
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>
</body>
</html>

页面显示:今夜风雨

JS案例

我们来使用我们的知识构造一个点灯开关的案例:

<body>
	<div style="text-align:center"> 
	<img id="light" src="img/OFF.png">
	</div>
<script>
	/* 1.获取图片对象
	   2.绑定单机事件(动态注册)
	   3.每次点击切换图片
	*/
	var isOpen=false;
	
	//1.获取图片对象
	var light=document.getElementById("light");
	//2.绑定单机事件
	light.onclick=function(){
		//3.切换图片
		if(!isOpen)
			light.src="img/ON.png";
		else
			light.src="img/OFF.png";
		isOpen=!isOpen;
	}
	light.onmouseover = function ()
    {
		light.style.cursor="pointer";
    };
</script>
</body>

最后一张图

最后奉上一张js的简单总结图:

 

 

 


商业转载 请联系作者获得授权,非商业转载 请标明出处,谢谢

 

 

发表评论