java前端笔记整理

最新推荐文章于 2024-07-29 14:22:26 发布

m0_72856913

最新推荐文章于 2024-07-29 14:22:26 发布

阅读量188

点赞数

文章标签： java 前端 servlet

本文链接：https://blog.csdn.net/m0_72856913/article/details/126693722

版权

一.HTML

什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

实例

<h1>这是一个标题</h1>

<h2>这是一个标题</h2>

<h3>这是一个标题</h3>

HTML 段落

HTML 段落是通过标签 <p> 来定义的。

实例

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

HTML 链接

HTML 链接是通过标签 <a> 来定义的。

实例

<a href="https://www.runoob.com">这是一个链接</a>

HTML 图像

HTML 图像是通过标签 <img> 来定义的.

实例

HTML 图像- 图像标签（ <img>）和源属性（Src）

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

实例

在浏览器显示如下：:

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

实例

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

实例

<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

在浏览器显示如下：

HTML 列表

HTML 支持有序、无序和定义列表:

HTML 列表

列表

第一个列表项
第二个列表项
第三个列表项

无序列表

列表项
列表项
列表项

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

Coffee
Milk

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器中显示如下：

Coffee
Milk

HTML <div> 和<span>

HTML 可以通过 <div> 和 <span>将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 分组标签

标签	描述
<div>	定义了文档的区域，块级 (block-level)
<span>	用来组合文档中的行内元素，内联元素(inline)

二.CSS

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 { color:red; text-align:left; font-size:8pt; }

而内部样式表拥有针对 h3 选择器的两个属性：

h3 { text-align:right; font-size:20pt; }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red; text-align:right; font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

style.css 文件样式代码如下：

h3 {
    color:blue;
}

实例

<head>  <link rel="stylesheet" type="text/css" href="style.css"/>  <style type="text/css"> /* 内部样式 */ h3{color:green;} </style> </head> <body> <h3>显示绿色，是内部样式</h3> </body>

尝试一下 »

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式，实例如下：

实例

<head>  <style type="text/css"> /* 内部样式 */ h3{color:green;} </style>  <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h3>显示蓝色，是外部样式</h3> </body>

CSS 背景

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color
background-image
background-repeat
background-attachment
background-position

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

实例

body {background-color:#b0c4de;}

CSS 背景

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color
background-image
background-repeat
background-attachment
background-position

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

实例

body {background-color:#b0c4de;}

背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

页面背景图片设置实例:

实例

body {background-image:url('paper.gif');}

CSS 文本格式

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

实例

h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}

所有CSS文本属性。

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

表格边框

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：

实例

table, th, td { border: 1px solid black; }

表格宽度和高度

Width和height属性定义表格的宽度和高度。

下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

实例

table { width:100%; } th { height:50px; }

表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左，右，或中心：

实例

td { text-align:right; }

垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

实例

td { height:50px; vertical-align:bottom; }

CSS 盒子模型

实例

p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }

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

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

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
border-style 值:

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框
边框宽度

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

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

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

实例

p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }
边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色：
name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"

边框-单独设置各边

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

实例

p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }

CSS 伪类

anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

实例

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

三.

JavaScript 使用

<script> 标签

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

实例

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

1.声明变量 var
语法：

var name = value；

2.变量命名的规则
变量命名必须是数字、字母、下划线_ 和 $ 符号组成；
变量名字不能以数字开头；
变量的名字不能是关键字；
在JS中，变量区分大小写；
变量的命令尽可能使用驼峰法命名；
例如：var a,
b,
c,
...
3.数据类型以及注意事项
数值类型总共有六个：

Number(数值)，String(字符串)，Boolean(布尔)，Undefined，Null，Object。

可以使用typeof来检测变量的数据类型是什么。

字符串
1>.这里必须使用单引号或者双引号来定义的才是字符串。
例如：
var str = 福尔摩斯;
和
var str = '福尔摩斯';
后者才是字符串定义。
2>.如果在字符串中要使用引号,或者在浏览器中显示引号，请加转义字符" \ "，同理其他符号也是一样的。可以看下面3.1.2图片。
例如：var str = '靓仔，你\'猴赛雷\'啊。'
3>.在这字符串的+号要注意一下，尤其是遇到一个字符串后，此后的所有加号都是字符串拼接。详情看图片3.1.3。
Boolean类型
两个值，true和false，在计算机内部存储中，true为1，false为0。
Undefined和Null
undefined表示一个声明一个没有赋值的变量，变量只声明的时候值默认是undefined。
null表示一个空，变量的值如果想为null,必须手动设置。
鼠标悬浮在图片上面就可以知道图片几号。

4.代码注释
语法格式：

// 和 /* */

这里和html一样，此外，多运用 ctrl + / 来注释内容。

5.其他类型转换为字符串
使用toString()方法，来转换成字符串。
使用String(变量名),来转换成字符串。
使用+的一个特性来转换为字符串。
例如:
var n = 3;
var s = ' '+n;
console.log(typeof s); //使用typeof来检测s的类型。
可以在浏览器的Console下面查看一下，s的类型，是String类型。
6.数值类型转换
使用Number(变量名):
在将其他类型转换为数值类型时，例如：图片6.1.0。
注意： null转换数值型结果为‘0’；
undefined转换数值型结果为‘NaN’；
使用parseInt()转换，这里转换和Number()转换有点不同，尤其是null转换为数值时，显示NaN，而不是0。
例如：图片6.2。
使用parseFloat()转换
注意事项:图片6.3。

6.1

6.2

6.3
7.布尔类型转换
格式：

var name = Boolean('content');

使用Boolean()方法来转换为布尔型，只有这一种方法。看图7。

注意事项：

只要有内容就会输出true，没有内容输出false。
例如：
var a = Boolean(""); //输出false，因为没有内容。
var b = Boolean(" "); //输出true。因为有一个空格。

图7
8.算数操作符
这个就很简单，正常的，加(+),减(-),乘(*),除(/),取余(%)。

9.一元运算符
语法格式：

++ 或者 --

例如：
var n = 6;
n++;
console.log(n);

同时，注意++和 --，在前在后的结果和问题！

也就是n++和++n的区别，前者先执行后加1，后者是先加1后执行。

这里举一个例子可以看一下：

执行上面的结果发现是：13

执行上面的结构发现是：12

这就是n++和++n的区别，前者先执行后加1，后者是先加1后执行。同理n–和--n也是一样的

10.逻辑运算符
语法格式：

&& 逻辑与运算符; //同为真(true)，则结果为真(true)。
|| 逻辑或运算符; //只要有一个为真(true)，则结果为真(true)。
！逻辑非运算符; //取相反，当前为真(true)，则结果为假(false)；当前为假(false)，则结果为真(true)。
1
2
3
js中的数字0就是false,非0为true

在JS中，逻辑运算的结果是决定整个表达式的子表达式的值。

这里运算优先级，先运行 && ，再运行 || 。

例如：a || c && b;

先运行c && b ,在和a || 进行运算。

11.比较运算符
> 大于号，< 小于号
= 大于等于，<= 小于等于
== 等于，=== 全等，!= 不等于，!== 不全等

解释一下全等和等于：

全等比较的是值和类型。

等于只是比较值。

因为JS是一种弱类型语言，变量的数据类型存在自动转换。因此，等于==，也只是比较的是值。

12.赋值运算符
= ， += ，-= ，/= ，*= ，%=

上面这些很简单举个例子：

var a = 1;

var b = 2;

b += a;

//这里b += a就是b = b + a；同理其他的也是一样。

13.运算优先级
运算优先级从上往下：

1.()优先级最高

2.一元运算符 ++ ，-- ，！

3.算术运算符先 *，/ ，%，后 +， - 。和数学一样先乘除取余后加减。

4.关系运算符 > ，< ，>= ，<=

5.相等运算符 == ，=== ，!= ，!==

6.逻辑运算符先&& 后 ||

7.赋值运算 =

再判断一个复杂语句时，从上往下，依次来判断和推导出最后的结果，在中间推导出的小结果可以使用false或者true来直接替换原式。

14.流程控制
顺序结构：从上到下执行的代码就是顺序结构。
程序默认就是由上到下顺序执行的。
分支结构：根据不同的情况及判断，执行对应代码。
循环结构：重复执行一段代码。

这里包括了一下几种格式：

if语法：
if( true or false ){
}else if{
}else{
}

switch语法：
switch( 值 ){
case 值:
code;
break;
case 值2:
code1;
break;
default:
code2;
break;
}

循环语句只要condition成立就执行里面的代码。
while循环语句：
while(condition){
code;
}
while是先判断，再执行！

这里的do…while和while语句不同！！！
do…while语句是先执行一遍code，然后在条件判断！
do…while语句：
do{
code;
}while(循环条件);

for语句：
for(初始表达式; 判断表达式; 自增或自减运算){
code;
}

举例1：打印一个倒立三角形

       var s = '';
       for(var i=0;i<10;i++){
           for(var j=i;j<10;j++){
               s += "* "
           }
           s += "\n"
       }
       console.log(s);
1
2
3
4
5
6
7
8
举例2：打印乘法口诀

       var s = '';
       for(var i=1;i<10;i++){
           for(var j=i;j<10;j++){
               s += i+' * '+j+'='+i*j+' ';
           }
           s+='\n';
       }
       console.log(s);
1
2
3
4
5
6
7
8
跳出循环：
continue 和 break语句
1.break:while循环break是用于永久终止循环。即不执行本次循环中break后面的语句,直接跳出循环。
2.continue:while循环continue是用于终止本次循环。即本次循环中continue后面的代码不执行,进行下一次循环的入口判断。
在上面的语句中熟练的运用这两个语句！

15.JS中的数组
15.1 数组格式
语法格式：

1.字面量方式创建的数组
var array = []; //空数组
var array2 = [1,‘A’,2,‘B’]
如果想打印array2数组，直接使用下面语句就可以：
console.log(array2);

2.声明构造函数方式创造数组
var array = new Array();//空数组
var array2 = new Array(1,‘A’,‘2’,‘B’);
获取数组长度，array2.length就可以了。

3.数组里面可以有数组，这样样的数组成为多维数组(二维数组、三维数组 …)
例如：
var a1 = [1,2,‘A’,‘B’];
var a2 = [1,2,a1,‘A’,‘B’];
console.log(a2);

15.2 获取数组中的元素
数组中的元素从0开始！！
多维数组获取的时候，只需要填好相应的元素标号就可以了。

15.3 遍历数组
遍历数组需要使用for循环或者while循环，并且熟练使用length来决定数组长度。
下面是一个while循环例子：

15.4 数组求和
和遍历一样，使用for循环。

16. 函数
16.1 函数的声明以及调用
1.关键字声明
function 函数名(){
code;
}

2.表达式声明
var f_name = function(){
code;
}

函数声明后，里面的代码是不会执行的；
除非调用这个函数，否则，不管在什么情况下都不会执行函数种的代码。

16.2 函数的形参和实参
形参格式：
function fun1(形参1,形参2,形参3, …){
code; //形参是在声明函数时候
}

实参格式：
fun1(实参1,实参2,实参3, …) //调用的时候

实参将数值，传递给形参。
例如：

       function f1(a,b){
           console.log(a+b);
       }
       f1(1,2);
       f1(1,3);
       f1(1,4);
1
2
3
4
5
6
16.3 函数的返回值
语法格式：
function f1(a,b){
code;
return c;
}

返回值很重要，调用时返回的结构，就是由return来返回。
如果没有返回值或返回值为空，则变量接受到的返回值为undefined。
例如：

       function f(a,b){
               var c = a-b;
               return ; // 没有返回值，则返回undefined。
       }
       var f = f(1,2);
       console.log(f);
1
2
3
4
5
6
注意：
函数种，return之后，不管有什么代码，都不会被执行！！
也就是执行完return后，函数的调用结束。

16.4 匿名函数
匿名函数，函数本身是没有名字的。
匿名函数格式一：
var fun = function(){
code;
}

匿名函数格式二：（自调用的匿名函数，立即执行函数）
( function(){
code; // 使用括号将函数做一个整体括起来。
} ) (); //这里的括号用来调用。

16.5 函数做为参数
函数也是一种数据类型。
之前说的六个数据类型当中，其中对象包含了数组和函数。
可以使用typeof判断一下：

函数作为返回值：
例如：
function f1(){
var a = 10;
var f2 = function(){
alert(2);
}
return f2;
}
var f = f1();
f();

16.6 函数作用域

全局作用域，不使用var声明的变量是全局变量，不推荐使用。
变量推出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁。

对于全局作用域的三个例子：
例1：

例2：

例3：

可以看到上面的三种不同位置的全局变量得到的不同的结果。

JS 代码的运行分为两个阶段。
1：解析（编译）阶段
语法检查，变量及函数进行声明。
2：运行阶段
变量的赋值，代码流程的执行，从上往下。

所以上面三个例子会出现不同的结果。

注意：
1.如果函数与变量同名，那么函数声明会替换变量声明。
例如：

**但是，因为声明在赋值前面，所以在最后赋值时，输出要非常小心！**例如：

function a(){
console.log(‘aaa’);
}
var a = 1;
console.log(a);

或者

var a = 1;
function a(){
console.log(‘aaa’);
}
console.log(a);

这里结果就变成了 1，因为声明在前面，而赋值在最后！！！

16.7 函数的作用域链
举个例子：

17. JavaScript 对象
1.字面量声明对象
var obj1 = {};

2.对象中的数据都是键值成对存在
通常来说，值是函数则成为方法，其他类型的值都是属性。
var obj2 = {
age:12,
height:195,
name:‘张三’,
sex:function(){
}
};

3.实例化方式声明对象（内置构造函数）
var obj2 = new Object();

4.自定义构造函数方式
function fun(){

}
var f = new fun(); //实例化自定义构造函数方式

以下两个获取对象属性或者方法的例子：

18. this用法
18.1 指向对象中的this
直接举个例子：

var obj1 = {
   age:18,
   name:'老铁',
   fun:function(){
       // 在方法中的this就是这个方法所在的对象
       var s = this.age;
   }

}
1
2
3
4
5
6
7
8
9
实际上this指向的就是obj1这个对象。
也就是说上面的this.age就等于obj1.age。
只不过this替换了obj1这个对象。

18.2 指向全局对象的this
在一个普通的函数种也是有this的，并且这个this指向的是全局对象(window)。

function f(){
console.log(this);//这里可以直接打印出来运行一下。
}
1
2
3
18.3 this的指向
直接上例子：

k = '678';
function fun(){
   console.log(this.k);
}
var o1 = {
       k:'123',
       f:fun, //调用fun()函数
}
var o2 = {
       k:'345',
       f:fun, //调用fun()函数
}
o1.f();
o2.f();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
这里的this，就非常灵性，指向的自然是相对应的k值，this运行在那个对象下，就指向那个对象。

注意函数是否带括号！！！

函数带括号的相当于调用函数：
var o1 = {
age:18,
fun:function () {
console.log(this.age);
}
}
var o2 = {
age:16,
fun:o1.fun(),
}
o2.fun();
上面得到的结构就是18，因为这是调用完成后的结果。

没有带括号的函数：
var o1 = {
age:18,
fun:function () {
console.log(this.age);
}
}
var o2 = {
age:16,
fun:o1.fun, //只是把o1的键值对中的值，给传递过来了。
}
o2.fun();
这里没有带括号，结果就是16，因为fun函数没有被调用执行。
这里的fun:o1.fun就等于
fun:function () {
console.log(this.age);
}
只是把键值对中的值转递过来了，并没有调用。

19. 对象的遍历和删除
遍历语法格式：

for … in
for(键 in 对象)
for
例如：

var o1 = {
   name:'老铁',
   age:18,
   sex:'female'
}
for(var a in o1){
       console.log(o1[k]);
}
1
2
3
4
5
6
7
8
for … in … 循环不仅可以遍历对象，还可以遍历数组。

删除属性语法格式：

删除属性：delete
例如：

var o1 = {
   name:'老铁',
   age:18,
   sex:'female'
}
console.log(o1); //先看一眼内容
delete o1.age;
console.log(o1); //这时里面应该没有了age属性。
1
2
3
4
5
6
7
8
20. 包装对象
这里介绍以下三种原始类型：
数值，字符串，布尔
原始类型的数据在一定条件下可以自动转为对象，这就是包装对象。

例如：

var v1 = new Number(123);
console.log(v1);
1
2
上面的结果就是Number {123}。

原始值，可以自动当作对象来调用，因此可以调用各种属性以及方法。
如果包装对象使用完成，会自动立即销毁。

例如：

var str = '123';
console.log(str.length);
1
2
21. 数学对象（标准库对象，内置对象）
这里记录几个很常用的：

Math.abs() // 函数取绝对值

Math.random() //函数返回一个浮点数，范围在[0,1)之间。
公式：取2到8之间的数字
Math.random()*( 8 - 2 ) + 2
获取 n - m 之间的随机数值
Math.random() * (m - n) + n
往后取特定的范围都这样取值！！！

Math.floor() //返回小于或等于一个给定数字的最大整数。

22. 日期对象
实例化构造函数获取时间对象

这里显示的是中国标准时间。
var date = new Date();
console.log(date);

这里显示的是毫秒。
var date2 = Date.now();
console.log(date2);

获取特a定的年月日小时等。
var date3 = new Date();
console.log(date3.getDetHours()); //获取当前小时
console.log(date3.getDate()); //获取当前日
console.log(date3.getFullYear); //获取年份
console.log(date3.getMonth() + 1); //获取月份
这里强调一下，JS中月份的数组是从0开始的，所以要+1。
JS中获取的时间是计算机本地时间。

23. 数组Array对象
使用push()方法向数组里面最后一个添加元素：

var arr = [1,2,3,4,5,6,7];
var s = 8;
arr.push(s);
console.log(arr);
1
2
3
4
使用pop()方法删除最后一个元素：

var arr = [1,2,3,4,5,6,7];
arr.pop();
console.log(arr);
1
2
3
使用slice()方法，由begin和end(不包括end),这里只是提取了一部分，原数组不变：

var arr = [1,2,3,4,5,6,7];
console.log(arr.slice(2,4));
console.log(arr);
1
2
3
使用concat()方法，来合并数组：

var arr = [1,2,3,4,5,6,7];
var arr2 = ['A','B','C'];
var arr3 = arr.concat(arr2);
console.log(arr);
console.log(arr3);
1
2
3
4
5
使用join()方法和分隔符来将所有数组中的元素连接成字符串：

var s = arr.join();
console.log(s);
这里显示的字符串，中间会参杂“ ，”，因此需要分隔符的帮助。
例如：
没有分隔符号：
var s = arr.join('');
console.log(s);
分隔符为‘ - ’：
var s = arr.join('-');
console.log(s);

1
2
3
4
5
6
7
8
9
10
11
使用forEach()方法对数组的每一元素执行一次提供的函数。

24. 字符串对象
举例学一些常用的：

indexOf()方法来查找相应的字符或字符串第一次出现的位置：

var s = 'wasdfsdfsdf';
var arr = s.indexOf('d');
console.log(arr);
1
2
3
substr(start , Length)方法返回一个字符串中从指定位置开始到指定字符数的字符。

var s = 'wasdfsdfsdf';
var arr = s.substr(2,5);
console.log(arr);
1
2
3
上面就是从索引为2的位置开始的后5位。

toLowerCase()方法，将所有字符转换为小写。
toUpperCase()方法，将所有字符转换为大写。

var s = "Hello,World"
var arr = s.toLowerCase();
console.log(arr);
1
2
3
replace(‘被替换’ , ‘要替换’)方法，替换字符或字符串。

trim()方法会从一个字符串的两端删除空白字符。

以下是一个查询JS的一些相关内函数和语句的网站，可以看看：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

这个网站必备的！

25. JavaScript 补充
25.1 没有用var声明的变量
没有用var声明的变量会默认成为window下的属性，我们可以使用window.变量名来调用它。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
carname = "Window_value";
function myfun(){
document.getElementById("id").innerHTML = window.carname;
}

</script>
<body>
<p id="id">我是一个段落</p>
<button type="button" οnclick="myfun()">按钮</button>
</body>
</html>

m0_72856913

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
java前端笔记整理

HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言:HyperTextMarkupLanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签HTML 使用标记标签来描述网页HTML 文档包含了HTML标签及文本内容HTML文档也叫做web 页面CSS 指层叠样式表 (CascadingStyleSheets)样式定义如何显示HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表。
复制链接

扫一扫