前端笔记（HTML+CSS+JS）

最新推荐文章于 2024-05-07 02:27:10 发布
最新推荐文章于 2024-05-07 02:27:10 发布
阅读量598 收藏 10
点赞数 1
分类专栏： JavaWeb 文章标签： html javascript css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41558341/article/details/107405723
版权

前端

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F84yrwhf-1594961158965)(前端笔记.assets/image-20200515150515238.png)]

HTML

###1.基本概念

  • W3C标准

    • 结构化标准语言（HTML,XML)
    • 表现标准语言（CSS）
    • 行为标准（DOM,ECMAScript）

  • 基本标签

    <h1>标题标签</h1>
<p>段落标签</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
<br/>
<strong>粗体</strong>
<em>斜体</em>
<!--特殊符号
格式：&   ;-->
空&nbsp;格
大于:&gt;
小于:&lt;
版本：&copy;

  • 图像标签

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4NLFkFfr-1594961158971)(前端笔记.assets/image-20200513105936954.png)]

../返回上一级目录
相对路径和绝对路径

  • 超链接标签

    <a href="3.图像标签.html">点击到3</a>

<a href="https://www.baidu.com">
    <img src="../resources/image/1.jpg" alt="樱木" title="悬停" width="300" height="300">
</a>
<!--锚链接
1、设置锚标记
2.跳转到该标记
-->
<a name="down">down</a>//设置标记
<a href="4.链接标签.html#down">跳转到4的down</a>//跳转到该标记

  • 块元素：元素独占一行

  • 行内元素：标签内容组成一行

  • 列表标签

    <!--有序列表-->
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<!--无序列表-->
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<!--自定义列表
dl:无序列表标签
dt：标题
dd：列表项
-->
<dl>
    <dt>自定义列表标题</dt>
    <dd>1</dd>
    <dd>2</dd>
</dl>

  • 表格标签

    <!--
表格：table
tr：一行
td：一列
-->
<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">plancer</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

  • 媒体元素

    <audio src="../resources/audio/萤火虫和你.mp3" controls autoplay></audio>
<video src="../resources/video/xxx.mp4" controls autoplay></video>

  • 页面结构

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6fOETSzC-1594961158974)(前端笔记.assets/image-20200513131438873.png)]

  • 内联框架

    <iframe src="https://www.baidu.com" name="baidu" frameborder="0"></iframe>

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U92x8LNW-1594961158978)(前端笔记.assets/image-20200513132823505.png)]

  • 表单

    <form action="1stHTML.html" method="post">
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd" ></p>
<!--单选框-->
    <p>性别
        <input type="radio" value="boy" name="gender" checked>男
        <input type="radio" value="girl" name="gender">女
    </p>
<!--多选框-->
    <p>爱好
        <input type="checkbox" value="read" name="hobby">阅读
        <input type="checkbox" value="movie" name="hobby" checked>电影
        <input type="checkbox" value="sports" name="hobby">运动
    </p>
<!--按钮
图片按钮，跳转到form表单的action地址
-->
    <p>按钮：
        <input type="button" name="btn1" value="click">
<!--        <input type="image" src="../resources/image/1.jpg">-->
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
<!--下拉框-->
    <p>国家
        <select name="列表名称">
            <option value="China" selected>中国</option>
            <option value="USA">美国</option>
        </select>
    </p>
<!--文本域-->
    <p>
        <textarea name="textarea" cols="50" rows="10">文本</textarea>
    </p>
<!--文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
<!--邮箱验证-->
    <p>邮箱
        <input type="email" name="email">
    </p>
<!--URL-->
    <p>URL
        <input type="URL" name="url">
    </p>
<!--滑块-->
    <p>音量
        <input type="range" name="volume" min="0" max="100" step="2">
    </p>
<!--搜索框-->
    <p>
        <input type="search" name="search">
    </p>
</form>

  • 表单的应用

    • 隐藏域 hidden
    • 只读 readonly
    • 禁用 disabled

  • 表单验证

    • placeholder 提示信息
    • required 必须填写
    • pattern 正则表达式

CSS

1.什么是CSS

表现型语言（美化）

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

1.2 入门

语法

选择器{
    声明1；
    声明2；
    声明3；
}

规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zM9Mhlra-1594961158982)(前端笔记.assets/image-20200514090210885.png)]

1.3 css导入方式

优先级：行内>其他，内部和外部按照就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
<!--外部样式-->
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
<!--行类样式-->
<h1 >title</h1>
</body>
</html>

2.选择器

作用：选择页面上某个或者某类元素

2.1基本选择器

标签选择器

class选择器：.类名

<style>
        .sa{
            color: darkcyan;
        }
    </style>
</head>
<body>
<h1 class="sa">title</h1>

id选择器：#id名；id全局唯一

  <style>
        #qwe{
            color: aquamarine;
        }
    </style>
</head>
<body>
<h1 id="qwe">title</h1>

优先级：id>class>标签选择器

2.2 层次选择器

2.1 后代选择器：body包括的所有p

<style>
        body p{
            background: greenyellow;
        }
</style>

2.2 相邻选择器：只有一个，向下，相邻的

.abc+p{
            background: greenyellow;
        }

在这里插入图片描述

2.3 子选择器：一层

body>p{
            background: greenyellow;
        }

<body>
<p>1</p>
<p class="abc">2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
</ul>
<p>4</p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tWegxRkh-1594961158987)(前端笔记.assets/image-20200514112122275.png)]

2.4 通用选择器:同一级的向下所有

.abc~p{
            background: greenyellow;
        }
<body>
<p>1</p>
<p class="abc">2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
</ul>
<p>4</p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ANvMBlq7-1594961158990)(前端笔记.assets/image-20200514112610082.png)]

2.3 结构伪类选择器
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: greenyellow;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: aquamarine;
        }
        /*p父级元素的第三个，且是当前元素p,按顺序*/
        p:nth-child(1){
            background: aqua;
        }
        /*p父级元素下的类型为p的元素的第二个，按类型*/
        p:nth-of-type(2){
            background: green;
        }
    </style>
</head>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J22Tprk5-1594961158992)(前端笔记.assets/image-20200514124847941.png)]

2.4 属性选择器

盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M5acPcSD-1594961158995)(前端笔记.assets/image-20200514143033839.png)]

<style>
        /*
        a标签中存在id属性的元素
         */
        a[id]{
            
        }
        /*
        a标签中id=first的元素
         */
        a[id=first]{
            
        }
        /*
        class中有links的元素
        =:绝对等于
        *=：包含
        ^=:以。。开头
        $=:以。。结尾
         */
        a[class*="links"]{
            
        }
    </style>

3.美化网页元素

span标签：重点突出的字用span套起来

3.1字体样式
font-family：字体
font-size:字体大小
font-weight：字体粗细
color：字体颜色
3.2 文本样式

1.颜色

rgba（r，g，b，a）a表示透明度

2.文本对齐的方式

text-align：center 居中

3.首行缩进

text-indent：2em 首行缩进

4.行高

当行高和标签高度一致时，可以上下居中

line-height：300px

5.装饰

text-decoration：

超链接去下划线：

<style>
    a{
text-decoration：none
}
</style>

6 .图片文本水平对齐

<style>
    img,span{
        vertical-align:middle;
    }
</style>
3.3 阴影
#price{
    text-shadow: 颜色 水平偏移（px） 垂直偏移 阴影半径
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fk4AOGCN-1594961158997)(前端笔记.assets/image-20200514154751175.png)]

3.4 超链接伪类

a和a：hover{}（表示悬停后的样式）

3.5 列表
/*
列表中每一个项的样式
none:去掉原点
circle:空心圆
decimal:数字
square:正方形
*/
ul li{
    list style:none;
}
3.6 背景

背景图片

div{
    background-image：url();
    /*默认是全部平铺的repeat*/
}
.div{
    background-repeat:repeat-x;/*水平平铺*/
}
.div{
    background-repeat:repeat-y;/*垂直平铺*/
}
.div{
    background-repeat:no-repeat;/*不平铺*/
}
.title{
    background: 颜色 url 图片位置 平铺方式;
}
ul li{对每个list列表项进行样式设置
    background-image：url
    background-repeat：no-repeat
    background-position：12px 24px；
}

4.盒子模型

4.1 名词

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0v5s7lOX-1594961159000)(前端笔记.assets/image-20200514163018425.png)]

4.2 边框

1.粗细

2.样式

3.颜色

<style>
        /*让body默认的margin设置为0*/
        /*h1,ul,li,body{*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*}*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background-color: aquamarine;
            line-height: 30px;
            margin: 0;

        }
        form{
            background: aquamarine;
        }
        div:nth-of-type(1) input{
            border: 1px solid black;
        }
        /*div:nth-of-type(2) input{*/
        /*    border: 1px solid aquamarine;*/
        /*}*/
        /*div:nth-of-type(3) input{*/
        /*    border: 1px solid aqua;*/
        /*}*/
    </style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FrcNKxxg-1594961159002)(前端笔记.assets/image-20200514173202842.png)]

4.3 内外边距

margin+border+padding+内容宽度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3LEjsS3j-1594961159004)(前端笔记.assets/image-20200514173831061.png)]

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

    <style>
        /*让body默认的margin设置为0*/
        /*h1,ul,li,body{*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*}*/
        #box{
            width: 300px;
            border: 1px solid red;
            margin:0 auto;//表示居中
        }
        h2{
            font-size: 16px;
            background-color: aquamarine;
            line-height: 30px;
            color: white;
            margin: 0 1px 2px 3px;
        }
        form{
            background: aquamarine;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px;
        }
        /*div:nth-of-type(2) input{*/
        /*    border: 1px solid aquamarine;*/
        /*}*/
        /*div:nth-of-type(3) input{*/
        /*    border: 1px solid aqua;*/
        /*}*/
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>

    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>

</div>
</body>
</html>
4.4 圆角边框
<!--radius第一个参数表示主对角线，第二个参数表示右对角线，四个参数就是顺时针
圆圈：radius等于半径
-->
<style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 30px 20px;
        }
    </style>
4.5 盒子阴影
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            border-radius: 50px;
            box-shadow:10px 10px 10px yellow;
        }
    </style>
</head>
<body>
<!--内容元素居中，块元素有固定宽度-->
<div style="width:500px;display: block;text-align: center ">
    <img src="images/1.jpg" alt="">
</div>
</body>
</html>

5.浮动

块级元素：独占一行

h1~h6 p div 列表

行内元素：不独占一行

span a img strong
5.1 display

行内元素可以被包含在块级元素中

block 块元素
inline 行内元素
inline-block 是块元素，但是可以写在一行

display:block;
5.2 float

float：left

5.3 父级边框塌陷问题
/*
clear right：右侧不允许有浮动元素
clear left：左侧不允许有浮动元素
clear both：两侧不允许有浮动元素
clear none；
*/

解决方案

1.增加父级元素宽度

2.浮动元素后面增加一个空的div标签，清除浮动

<div class="clear"></div>
.clear{
    clear:both;
    margin:0;
    padding:0;
}

3.overflow

在父级元素中增加一个overflow：hidden

4.父类添加一个伪类：after(推荐)，只需要在css中添加

块级元素+空内容+清除两侧浮动

#father：after{
    content:'';
    display:block;
    clear:both;
}

5.4 对比（使块级元素在一行）

  • display（inline-block）

    方向不可控制

  • float

    浮动起来，脱离标准文档流，要解决父级边框塌陷问题

6.定位

6.1 相对定位

相对于原来的位置，进行偏移，仍然在文档流中，原来的位置保留

position：relative

bottom：20px；距离底部20px

top

left，right

练习

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: #bd55a9;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background-color: darkblue;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>

</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lkXi6DyX-1594961159008)(前端笔记.assets/image-20200515094729238.png)]

6.2 绝对定位（相对于初始位置）

1.没有父级元素定位的前提下，相对于浏览器定位

2.若父级元素存在定位，我们通常相对于父级元素进行偏移

相对于父级和浏览器的位置，进行指定偏移，绝对定位不在标准文档流中，原来的位置不会保留

positon：absolute

父级元素 相对定位

6.3 固定定位

position fixed；

6.3 z-index

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7o0ETuTP-1594961159010)(前端笔记.assets/image-20200515102124814.png)]

z-index高度表示位于的层数，数值大表示位于顶层

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="img/2.jpg" alt=""></li>
        <li class="text">learning</li>
        <li class="bg"></li>
        <li>time</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 900px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 35px;
    line-height: 25px;
    border: 1px solid #000;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
/*子元素相对于父级进行绝对定位*/
.text,.bg{
    position: absolute;
    bottom: 30px;
    width: 900px;
    height: 25px;
}
.text{
    color: white;
    z-index: 999;
}
.bg{
    background-color: black;
    opacity: 0.5;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fsXEUWAC-1594961159014)(前端笔记.assets/image-20200515113416692.png)]

JavaScript

1.简介

脚本语言

精通

最新版本是ES6,浏览器支持es5。

2.入门

2.1 引入js

内部

<!--    内部引入-->
<!--    <script>-->
<!--        alert("hello");-->
<!--    </script>-->

外部

<script src="js/qj.js"></script>

test

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    内部引入-->
<!--    <script>-->
<!--        alert("hello");-->
<!--    </script>-->
<!--    外部引入-->
    <script src="js/qj.js"></script>
</head>
<body>
</body>
</html>
2.2 语法

区分大小写；变量名为var，不区分类型；

console.log():浏览器打印

浏览器调试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JWlVcUyF-1594961159016)(前端笔记.assets/image-20200515155245402.png)]

2.3 数据类型

数值，文本，图形，音频，视频

变量

不以数字，#开头

number

不区分小数和整数，Number

1.23e3 
-54
NaN//not a number
Infinity//无穷大

比较运算符

=
== 等于，值相等就判断相等
=== 绝对等于，类型和值同时相同，才判断相同

NaN===NaN,false

isNaN(NaN),true

浮点数问题：

console.log((1/3)===(1-2/3)):false
//避免使用浮点数计算
Math.abs((a-b)<0.0000001)

null和undefined

  • null 空
  • undefined 未定义

数组

var arr=[1,2,'hello',null,true];

对象

大括号

var person = {
    name="1",
    age=3,
    tags=['js']
}
//取对象的值
person.name
2.4 严格检查格式
'use strict';//写在第一行
let i=1;//局部变量用let

3.数据类型

3.1 字符串

1.字符串 " "或者‘ ’

2.转义字符

\u4e2d \u#### Unicode字符
\x41 ASCII字符

3.多行字符串

var msg=
            `hello
            world
            你好`

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8CmS9gz5-1594961159018)(前端笔记.assets/image-20200515163836600.png)]

4.模板字符串

let name='plancer';
let msg=`hello,${name}`;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3BLU6hPh-1594961159021)(前端笔记.assets/image-20200515164130512.png)]

5.字符串长度

str.length

6.不可变，可通过字符串下标取字符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LSsKHgKy-1594961159023)(前端笔记.assets/image-20200515164410856.png)]

7.大小写转换

str.toUpperCase()
str.toLowerCase()

8.str.indexOf(‘t’)

9.substring：同java

3.2 数组

1.长度

arr.length

可以改变arr的长度，未被赋值以emtpy替代

2.indexOf，通过元素获得下标索引

字符串“1”和1不同

3.slice（）截取数组的部分，返回新数组

4.push（），pop（）

push（）：压入尾部
pop（）：尾部弹出

5.unshift（），shift（） 头部

unshift（）：压入头部
shift（）：头部弹出

6.排序 sort()

7.元素反转 reverse（）

8.concat（）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kFGxZJXS-1594961159025)(前端笔记.assets/image-20200515170358282.png)]

9.连接符 join

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SHeeVRUU-1594961159028)(前端笔记.assets/image-20200515170625681.png)]

10.多维数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WJlcxRxi-1594961159032)(前端笔记.assets/image-20200515170614658.png)]

3.3 对象
var 对象名 = {
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}

键都是字符串，值是对象

3.动态的删减属性

delete person.name

4.动态添加，直接给新属性赋值

5.判断属性或者方法是否在对象中 xxx in xxx

6.判断属性是否是这个对象自身拥有的hasOwnProperty（）

a.hasOwnProperty('toString')//方法不加（）
a.hasOwnProperty('age')
3.4 流程控制

forEach 循环

var age=[1,2,3,4,5,6];
        age.forEach(function (value) {
            console.log(value);
})

for …in

 //for(var index in object){}
for(var num in age){
     
 }
3.5 Map和Set

es6新特性

Map：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mGHgtiKW-1594961159037)(前端笔记.assets/image-20200515173600277.png)]

Set：无序不重复

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8G5uOmNP-1594961159040)(前端笔记.assets/image-20200515173632709.png)]

3.6 iterator遍历map和set

遍历数组

var arr=[3,4,5]
for(var x of arr){
    console.log(X)
}
//打印具体的值 for in是索引

遍历map

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8T5m4Szb-1594961159042)(前端笔记.assets/image-20200515174134694.png)]

遍历set

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MWZm6rER-1594961159044)(前端笔记.assets/image-20200515174148429.png)]

4.函数

4.1 定义函数

方式一

function abs(x){
    
}

若没有执行return，执行完返回undefined

方式二

var abs=function(x){

}

通过abs仍然可以调用函数。

可以传递任意个数参数或者不传递参数。

如果不存在参数，如何规避？

var abs = function(x){
    //手动抛出异常来判断
    if(typeof x!=='number'){
        throw 'Not a Number';
    }
    if(x>0=){
       return x;
       }else{
        return -x;
    }
}

arguments表示传递进来的所有参数。arguments[i]表示传递进来的第i个参数，从0开始。

reset

es6新特性，获取除了已经定义的参数之外的所有参数。

function aaa(a,b,...rest){
   
}
4.2 变量的作用域
//内部函数可以访问外部函数的成员，反之不行
function fun(){
    var x=1;
    function fun1(){
        var y=x+1;//可以
    }
    var z=y+1;//不可以
}

若内外函数变量重名，函数查找变量从自身函数开始

提升变量的作用域

function qj(){
    var x="x"+y;
    console.log(x);
    var y='y';
}

结果：xundefined

说明：js执行引擎，自动提升了y的变量声明，但是没有赋值。相当于下段代码：

function qj(){
    var y;
    var x="x"+y;
    console.log(x);
    y='y';
}

全局对象window

var x='xxx';
alert(x);
alert(window.x);//所有的全局变量，都会自动绑定在window对象下

alert（）本身绑定在window下

规范

绑定到全局变量上，而不是window

//唯一全局变量
var factory={};
//定义全局变量
factory.name='';
factory.add=function (a,b){
    return a+b;
}

代码全部放入自定义的唯一全局变量中

jQuery

ES6引入let，解决局部作用域冲突问题。

const 常量

4.3 方法

定义方法

var plancer ={
    name:'1922',
    birth:1997,
    age: function (){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
//属性
plancer.name
//方法+（）
plancer.age()

this指向调用它的对象，把对象中的方法拆开

function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;
}
var plancer ={
    name:'1922',
    birth:1997,
    age: getAge
}

在js中可以指定this的指向

apply

function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;
}
var plancer ={
    name:'1922',
    birth:1997,
    age: getAge
}
getAge.apply(plancer,[]);

5.对象

标准对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iR7LlYWz-1594961159048)(前端笔记.assets/image-20200516154529564.png)]

5.1 Date
var now = new Date();
now.getFullYear();//年
now.getDate()0;//日期
now.getDay();//星期几
now.getTime();//时间戳

转换

now.toLocalString();
5.2 JSON

简介：轻量级的数据交换格式。

JS支持的类型可以用JSON来表示。

格式：

  • 对象用{}
  • 数组用[]
  • 键值对用key：value

JSON字符串和JS对象的转化

var user = {
            name:"plancer",
            age:3,
            sex:'male'
        }

        //对象转换为json字符串：{"name":"plancer","age":3,"sex":"male"}
        var jsonUser = JSON.stringify(user);

        //字符串转化为对象：{name: "plancer", age: "3", sex: "male"}
        var obj=JSON.parse('{"name":"plancer","age":"3","sex":"male"}');

对象和JSON的区别

var obj = {a:'hello',b:'hellob'};
var json = '{"a":"hello","b":"hellob"}';
5.3 Ajax

6.面向对象编程

原型对象

原型

//xxx的原型是person，可以使用person中有的方法
xxx.__proto__ =person;

class继承

//定义一个学生的类
class Student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert('hello')
    }
}
//继承类
class fresh extends students{
}

本质：继承的类是对象原型

原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zh2LiVI9-1594961159050)(前端笔记.assets/image-20200516184335614.png)]

7.操作BOM对象（重点)

操作浏览器对象

window :浏览器窗口

Navigator:封装了浏览器信息

screen:屏幕尺寸

location:重要

host:""
href:""
protocol:"https:"//协议
reload:f relaod()//刷新网页
//设置新的地址
location.assign('')

document代表当前的页面，HTML DOM文档树

document.title

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>
<script>
    var dl = document.getElementById('app');
</script>

获取cookie

document.cookie

劫持cookie原理

获取你的cookie上传到他的服务器

服务器端可以设置cookie：httpOnly

history

history.back()
history.forward()

8.操作DOM对象（重点）

DOM文档对象模型

核心

浏览器网页就是一个DOM树形结构

  • 更新DOM节点
  • 得到DOM节点
  • 删除DOM节点
  • 添加DOM节点
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementById('father');
    
    var children=father.children;//获取父节点下的子节点
</script>

更新节点

<div id="id1">

</div>
<script>
    var id1=document.getElementById('id1');
</script>

操作文本

  • id1.innerText=‘123’ 修改文本的值
    - [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kJZTyk4J-1594961159052)(前端笔记.assets/image-20200517095338222.png)]

可以解析HTML文本标签

操作CSS

id1.style.color='yellow'
"yellow"
id1.style.fontSize='80px'
"80px"

删除节点

通过获取父节点，再删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var self=document.getElementById('p1');
    var father=p1.parentElement;
    father.remove(self)

    //删除时一个动态的过程,删除第0个，则原来的节点数目减少一个
    father.removeChild(father.children[0])
</script>

插入节点

获取到DOM节点后，如果这个DOM节点时空的，可以通过innerHTML来增加元素。

如果添加元素，不改变原来的值，使用appendChild

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b6nwlQMN-1594961159054)(前端笔记.assets/image-20200517102152135.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xDvYHTTM-1594961159057)(前端笔记.assets/image-20200517102208104.png)]

创建一个新的标签，实现插入

<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    //通过js创建新节点
    var newP=document.createElement('p');
    newP.id='newP';
    newP.innerText='hello';
    //创建一个标签节点
    var myScript=document.createElement('style');
    myScript.setAttribute('type','text/javascript');

    //创建一个Style标签
    var myStyle=document.createElement('style');//创建一个空的标签
    myStyle.setAttribute('type','text/css');//设置标签类型
    myStyle.innerHTML='body{background-color:aqua;}';//设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle);

</script>

标签的id.innerText

insertBefore

//包含（）内节点的节点，insertBefore(新节点,目标位置节点);
list.insertBefore(js,ee);

9.操作表单（验证）

DOM树的一个节点，form

获取要提交的信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KRxMWv1l-1594961159059)(前端笔记.assets/image-20200517112247836.png)]

提交表单.md5加密密码，表单优化

onclick点击一定跳转

<form action="https://www.baidu.com" method="post">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span> <input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
<!--onclick绑定点击按钮后的事件-->
    <button type="submit" onclick="aaa()">提交</button>
</form>
<script>
    function aaa() {
        alert(1);
        var uname=document.getElementById('username');
        var pwd=document.getElementById('input-password');
        var md5pwd=document.getElementById('md5-password');

        console.log(uname.value);
        console.log(pwd.value);
        //MD5加密
        md5pwd.value=md5(pwd.value);
        console.log(md5pwd.value);
        
    }
</script>

优化后

只有return方法返回true，才会提交到表单，跳转到action页面，false，只调用aaa(),但不会发生跳转。

浏览器抓包显示form表单中name属性的字段

input hidden隐藏域的作用：隐藏域的值在前端页面是看不到的，往后台传值时，不希望被看到

    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<form action="https://www.baidu.com" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span> <input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
<!--onclick绑定点击按钮后的事件-->
    <button type="submit">提交</button>
</form>
<script>
    function aaa() {
        alert(1);
        var uname=document.getElementById('username');
        var pwd=document.getElementById('input-password');
        var md5pwd=document.getElementById('md5-password');

        console.log(uname.value);
        console.log(pwd.value);
        //MD5加密
        md5pwd.value=md5(pwd.value);
        console.log(md5pwd.value);
        return true;
    }
</script>

10.jQuery

封装了js函数的函数库

语法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>//引入在线jquery
</head>
<body>
<a href="" id="jquery">点击</a>
<!--语法
$('css选择器').click(function(){

})
-->
<script>
    $('#jquery').click(function () {
        alert('1')
    })
</script>
</body>

选择器:包含css中的所有选择器

$('p').click();
$('#id1').click();
$('.class1').click();

事件

    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--获取区域内鼠标的坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    移动区域
</div>
<script>
    //网页加载完成后，响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    });
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NcrPjMtV-1594961159062)(前端笔记.assets/image-20200517185641190.png)]

操作DOM

节点文本操作

$('#test-ul li[name=python]').text()//获取值
$('#test-ul li[name=python]').text('设置值')
$('#test-ul li[name=python]').html()
$('#test-ul li[name=python]').html('<strong>123</strong>')

css的操作

$('#test-ul li[name=python]').css({"color","red"})

元素的显示和隐藏：本质display：done

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

TIPS

1.JS(Jquery源码，游戏源码)

2.html，css，（down网站修改，看效果）

plancer16
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap前端框架笔记 +css+html
01-06
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。 一个框架、多种...
前端笔记，html+css+sass+js
01-28
前端笔记，html+css+sass+js
HTML+CSS+JS学习（持续更新中）
m0_46486963的博客
10-28 5301
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置使用a标签来定义超链接，href属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素，那么嵌套的元素就相当于一个超链接。在网页中HTML专门用来负责网页的结构，所以在使用HTML标签的时候，应该关注的是标签的语义，而不是他的样式，这里先介绍几个基本的于一标签，还有些常用的标签放在后面具体讲解。标签用来向页面中引入一个外部的音频文件。
【Html + Js + CSS——电流壁纸
2401_84103284的博客
04-27 226
毕竟工作也这么久了 ，除了途虎一轮，也七七八八面试了不少大厂，像阿里、饿了么、美团、滴滴这些面试过程就不一一写在这篇文章上了。我会整理一份详细的面试过程及大家想知道的一些问题细节毕竟工作也这么久了 ，除了途虎一轮，也七七八八面试了不少大厂，像阿里、饿了么、美团、滴滴这些面试过程就不一一写在这篇文章上了。我会整理一份详细的面试过程及大家想知道的一些问题细节。
2024年前端最新【Html + Js + CSS——电流壁纸(1)，干了5年前端开发还没掌握binder机制
最新发布
2401_84435192的博客
05-07 846
打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loaderif(x!let a1 = 1;let r2 = 0;let g2 = 0;let b2 = 0;let a2 = 1;t。
HTML+CSS+JS笔记
2301_79880794的博客
01-18 1164
超文本标记语言编程语言标记语言web 页面。
前端知识学习笔记（重构版）
permi_yaxileni的博客
01-26 1173
前置知识：HTML，CSS <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
【前端】html+js+css开发入门超详细介绍
呆呆的猫的博客
08-31 1896
html, js和css是前端开发入门的基础知识, 学完这些即可进阶学习vue, react等框架, 本文从实战入手介绍了前端的概貌, 便于入门阶段对前端展示层有一定的认知和开发能力
前端HTML5+CSS+JavaScript学习笔记.docx
05-24
在学习前端开发时，理解并熟练掌握HTML5、CSS和JavaScript这三者的结合至关重要，它们共同构成了网页的静态结构、视觉样式和动态行为。不断练习和实践，才能更好地运用这些知识创建出美观、交互性强的网页。
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
前端第一阶段笔记HTML+CSS
08-15
【HTML与CSS基础】 HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，它定义了网页的结构。...随着技能的提升，可以进一步学习更复杂的布局、响应式设计、JavaScript交互以及前端框架等高级概念。
html+css+javascript笔记完整版
03-03
完整版，详细，前端学习的宝典.内容包括HTML,CSS,JAVASCRIPT的内容，讲解详细易懂，掌握其中的原理
JS实现动态给图片添加边框的方法
10-24
主要介绍了JS实现动态给图片添加边框的方法,涉及javascript操作图片border的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
html+css入门
AI蜗牛之家
09-20 1969
好早之前写的，今天突然看到了，发出来吧，不能浪费自己的劳动力啊！！！1. 基础知识html可扩展超文本标记语言 让你的每个想法成为现实 是一个平台，css，gs API 定位、音频、视频 在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。2. <html></html> html5程序 <head></head> 头部 <
前端HTML+CSS+JS+AJAX知识点
Zidee的博客
02-02 1657
微笔记
HTML+CSS+JS学习笔记
Ambitio_N的博客
10-28 157
HTML+CSS+JS学习笔记 学习笔记pdf文档下载
css设置字与字之间的距离he行与行之间的距离
zszhuo2011的专栏
01-29 4156
css设置字与字之间的距离 style="line-height:400%;font-weight: bold;word-spacing:4;letter-spacing:2;" 改变letter-spacing的大小就可以了,值越大,字与字这间的距离也就越大 css设置行与行之间的距离 line-height:20px;padding:10px 0px;margin10px 0p
html+css+js笔记
烙大饼
09-24 178
五大主流浏览器内核 1、IE浏览器内核：Trident内核，也是俗称的IE内核； 2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核； 3、Firefox浏览器内核：Gecko内核，俗称Firefox内核； 4、Safari浏览器内核：Webkit内核； 5、Opera浏览器内核：最初是自己的Presto内核，后来加入谷歌大军，从...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值