html+css+js+快速入门

最新推荐文章于 2023-06-15 14:27:58 发布

L-xykeen

最新推荐文章于 2023-06-15 14:27:58 发布

阅读量453

点赞数 1

分类专栏： html 文章标签： css html javascript

本文链接：https://blog.csdn.net/jin_xinyu/article/details/124598350

版权

html 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

html

1.a标签

<!--使用name作为标记-->
<a name="top">顶部</a>
<!--target:表示窗口在哪里打开-->
<p><a href="http://www.baidu.com" target="_top">_top</a></p><br>
<a href="http://www.baidu.com" target="_blank">新开一个页面</a><br>
<a href="http://www.baidu.com" target="_parent">_parent</a><br>
<a href="http://www.baidu.com" target="_self">_self</a><br>
<!--
锚链接：
    1.需要一个锚标记
    2.跳转到标记
    回顶标签-->
<a href="#top">回到顶部</a><br>

<!--功能性连接
        邮件链接：mailto
        qq连接：网页搜qq推广

-->
<a href="mailto:2750317105@qq.com">点击联系我，邮箱</a><br>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2750317105&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2750317105:52" alt="qq交谈" title="qq交谈"/></a>

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>


<br>

<!--段落标签-->
<p>李锦彪</p>

<p>黄欣宇</p>

<!--水平线-->
<hr>

<!--换行-->
<br>
<p>锦欣宇</p>

<!--字体样式-->
<h1>字体样式</h1>
粗体：<strong>李锦彪</strong><br>
斜体：<em>李锦彪</em>

<br>

<!--空格-->
kong &nbsp&nbsp&nbsp&nbsp&nbsp 个 <br>
&ccupssm;

2.列表

<!--有序列表-->
<ol>
    <li>李锦彪</li>
    <li>黄欣宇</li>
    <li>锦欣宇</li>
    <li>帅</li>
</ol>
<hr>
<!--无序列表-->
    <!--应用范围：导航栏，侧边栏-->
<ul>
    <li>李锦彪</li>
    <li>黄欣宇</li>
    <li>锦欣宇</li>
    <li>帅</li>
</ul>
<!--自定义列表-->
    <!--dl：标签-->
    <!--dt：列表名称-->
    <!--dd：列表内容-->
    <!--公司网站底部-->
<dl>
    <dt>列表名称</dt>
    <dd>李锦彪</dd>
    <dd>黄欣宇</dd>
    <dd>锦欣宇</dd>
</dl>

3.表格

<!--表格
    行：tr
    列：td
	border：外层边框宽度
    -->
<table border="1px">
    <tr>
<!--        colspan跨列-->
        <td colspan="4">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
<!--        rowspan跨行-->
        <td rowspan="2">5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
</table>
-------------------------------------------
cellpadding：文字和内边框的距离
<table border="1px" cellpadding="10">
    <thead>
        <th>姓名</th>
        <th>年龄</th>
    </thead>
    <tbody>
        <tr>
            <td>李锦彪</td>
            <td>18</td>
        </tr>
        <tr>
            <td>黄欣宇</td>
            <td>18</td>
        </tr>
    </tbody>
</table>

4.媒体

<!--音频视频-->
<!--
    controls 控制条
    autoplay 自动播放-->
<!--<video src="../resources/video/4004-3post请求.mp4" controls autoplay></video>-->
<audio src="../resources/music/李家鑫%20-%20你懂得（完整版）.flac" controls autoplay></audio>

5.页面结构分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9qvVEgpd-1651757973417)(C:\Users\15751083927\AppData\Roaming\Typora\typora-user-images\image-20220427125832687.png)]

<header><h2>网页头部</h2></header>

<footer>标记脚部区域的内容</footer>

<section>web网页中的独立区域</section>

<nav>导航类辅助内容</nav>

6.iframe内联框架

<!-- iframe:内联框架
    src:引用网站地址
    w-h:宽-高
    name:框架标识名

    -->
<iframe src="http://www.baidu.com" frameborder="0"
        name="mainframe" width="1000px" height="500px"></iframe>

7.表单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lWAZPbOY-1651757973418)(C:\Users\15751083927\AppData\Roaming\Typora\typora-user-images\image-20220427131745952.png)]

<!--
    表单：
    method:
        get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
        post：比较安全，传输大文件
    name:表单元素的名称
    maxlength：最长能写几个字符
    size：文本框长度
    value：默认初始值
	disabled：禁用，针对所有的input，不能提交到后台
	readonly|：只读,只针对输入框，可以提交到后台
	hidden：隐藏
	placeholder:提示信息
	required：非空判断
    -->
<!--action 表单提交的位置，可以是网站，也可以是一个请求处理地址-->



<!--提交数据form表单
	type属性：控制输入框的样式
	name属性：分组，携带数据的key   key：value
	value:选择框提交数据时的值，输入框的默认值

form表单触发提交数据的操作，必须写在form表单标签里面，写在外面就是普通按钮
提交：input submit
     button
-->
<form action="http://localhost:9696">
    用户名：<input type="text" name="username">
    密&nbsp码：<input type="password" name="password">
    <input type="radio" name="sex" value="boy">男
    <input type="radio" name="sex" value="girl">女
    <input type="checkbox" name="hobby" value="sleep">睡觉
    <input type="checkbox" name="hobby" value="good">大优秀
    <input type="checkbox" name="hobby" value="love">爱你
    <input type="submit">
</form>



<form action="我的第一个网页.html" method="post">
    
<!--文本输入框：<input type="text">-->
    <p>名字：<input type="text" name="username" placeholder="请输入"></p>
    <p>密码：<input type="password" name="pwd" required></p>

<!--单选框:radio
        value：单选框的值
        name:分组
        checked:默认选中
            -->
    <p>性别：
        <input type="radio" value="男" name="sex" checked>男
        <input type="radio" value="女" name="sex">女
    </p>
<!--多选框：<input type="checkbox">
        value：值
        name:分组
-->
    <p>爱好
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="eat" name="hobby" checked>吃
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="chat" name="hobby">聊天
    </p>

<!--按钮-->
    <p>按钮
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resources/images/A-女白.png">
    </p>


<!--下拉框-->
    <p>下拉框
        <select name="列表名称" id="">
            <option value="china">中国</option>
            <option value="荷兰">荷兰</option>
            <option value="美国">美国</option>
            <option value="朝鲜">朝鲜</option>
        </select>
    </p>

<!--文本域-->
    <p>反馈：
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

<!--文件域  <input type="file" name="files">
        上传文件-->
    <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="number" max="100" min="10" step="1">
    </p>

<!--滑块-->
    <p>滑块
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
    
<!--增强鼠标可用性
             <label for="mark">你点我试试</label>
             自动锁定id="mark" 的元素-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

<!--搜索框-->
    <p>搜索
        <input type="search" name="search">
    </p>
    
<!--reset：重置-->
    <input type="submit" value="提交">
    <input type="reset" value="重置">

8.特殊符号

空格：&nbsp
大于号：&lt
小于号：&gt
&符号：&amp

css3

引入

1.选择器

/*标签选择器*/
h1{
    color: red;
}
/*类选择器   可重复使用*/
.h2_x{
    color: green;
}
/*id选择器   全局唯一  优先级：id > class > 标签*/
#h3_id{
    color: #f18dfa;
}

2.层次选择器

后代选择器
子选择器
相邻兄弟选择器
通用选择器

/*类选择器   可重复使用*/
.h2_x{
    color: green;
}
/*id选择器   全局唯一  优先级：id > class > 标签*/
#h3_id{
    color: #f18dfa;
}
/*后代选择器  body 里面的p 通通使用该属性*/
body p{
    background-color: #f18dfa;
}
/*子选择器  body 的下一代是p标签 通通使用该属性*/
body>p{
    background-color: green;
}
/*相邻兄弟选择器 同辈 选一个 下一个p使用该属性*/
.active + p{
    background-color: cyan;
}
/*通用选择器 同辈下面所有  p使用该属性*/
.active ~ p{
    background-color: #0526ff;
}

3.属性选择器

/*存在id属性的元素  
    a[id]{} 或者 a[属性名=属性值]{}
    *= :是包含元素   a[属性名*=属性值]{}
    选中href中以http开头的元素：a[href^=http]{}
    选中href中以com结尾的元素：a[href$=com]{}
*/
a[class *= links]{
    background: chartreuse;
}

4.美化网页元素

/*恢复原始状态*/
body,a,li{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

4.1.字体

/*
font-size:字体大小
font-family:字体
font-weight:字体粗细
color:字体颜色
*/

4.2 文本

opacity:透明度
text-align:对齐方式
text-indent:首行缩进
line-height:行高,和块的高度
text-decoration:underline  :下划线

4.3超链接伪类+阴影

a{
    text-decoration: none; /*去除下划线*/
    color: chartreuse;
}
a:hover{ /*鼠标激活*/
    color: green;
}
a:active{ /*鼠标按住的状态*/
    color: cyan;
}
#price{/*text-shadow: 阴影颜色  水平偏移  垂直偏移  阴影半径*/
    text-shadow: #f50000 10px 10px 10px;
}

4.4 列表

.nav{
    background: #97979a;
    width: 300px;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*ul li*/
/*
list-style:none :去掉原点
          circle：空心圆
          decimal：数字
          square：正方形
*/
/*ul{*/
/*    background: #97979a;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: green;
}

4.5 背景

div{
    width: 90%;
    height: 700px;
    border: 2px solid red;
    background-image: url("../resources/images/A-女白.png");/*默认是全平铺的*/
    background-size: 100%;
}
.nav1{
    /*background: 颜色  图片  图片位置  平铺方式*/
    background: red url("../resources/images/A-女白.png") 270px 100px no-repeat;
}

4.6 盒子模型

margin：外边框

padding：内边框

border：边框

margin: 0 auto;  居中
margin：上 下 左 右

4.7 display和浮动

/*
block:块元素
inline:行内元素
inline-block：是块元素，但是可以内联，在一行
float：左右浮动
*/
div{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    display: inline-block;
    float: left;
}
span{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    display: inline-block;
}

4.8 父级边框塌陷发现问题

增加父级元素高度
增加一个新的div标签清除浮动
overflow：hidden ：在父级元素增加

父级元素增加子类after

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

clear right:右侧不允许有浮动元素
clear left：左侧不允许有浮动元素
clear both：不允许有浮动元素

4.9 定位

相对定位：相对于原来的位置，进行偏移

/*相对定位*/
position: relative;
left：100px;
right:100px;
......

绝对定位

/*    绝对定位*/
    position: absolute;

固定定位

/*    固定定位*/
    position: fixed;

#content{
    width: 200px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;  # 防止溢出
    font-size: 12px;
    line-height: 25px;
    border: 2px #000 solid;
}
img{
    width: 200px;
    height: 200px;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 200px;
    top: 180px;
}
/*.tipText{*/
/*    color: white;*/
/*}*/
.tipBg{
    background: black;
    /*透明度*/
    opacity: 0.5;
}

4.10 z-index

控制层级

body{
    margin: 0;
    padding: 0;
}
.shadow{
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);  # color+透明度
    z-index: 88;
}
.mode{
    position: fixed;

    height: 200px;
    width: 200px;
    background-color: aliceblue;
    text-align: center;
    left: 50%;
    margin-left: -100px;
    /*值越大，层级越高*/
    z-index: 100;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rHdQMKd2-1651757973419)(C:\Users\15751083927\AppData\Roaming\Typora\typora-user-images\image-20220502202749966.png)]

4.11 动画

网页搜索关键词：

html5 xxx
源码之家等等

js

是一门世界上最流行的脚本语言

一定要精通js

1.快速入门

1.1引入javascript

内部：

<script>
  alert("hello world");
</script>

外部：

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

1.2基本语法入门

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vWmClDPB-1651757973420)(C:\Users\15751083927\AppData\Roaming\Typora\typora-user-images\image-20220430161657245.png)]

// 1、定义变量   变量类型  变量名=变量值
var num = 1;
// 2、条件控制
if (2>1 && 2>0){
    alert("true");
}else{
    alert("false");
}
// console.log(num)  在浏览器控制台打印变量

1.3数据类型

数值、文本、图形、音频、视频。。。

number

js不区分小数和整数，Number

123 //整数
123.3 //浮点数
1.123e3 //科学计数法
-99 //复数
NaN //not a number
Infinity  //表示无限大

字符串

‘abc’ “abc”

布尔值

true false

比较运算

=== 绝对等于（类型一样，值一样，结果为true）（使用===，不使用==）

须知：

NaN === NaN 这个与所有的数值都不相同，包括自己
只能通过isNaN（NaN）来判断这个数是不是NaN

数组

var arr=[1,23,3,4,'hello'];

取数组下标越界不会报错，会 undefined

对象

var person{
    name:'ljb',
    age:18
}

//去对象值
person.name;

1.4严格检查模式

<script>
  'use strict';  严格检查模式，预防js的随意性导致一些问题，放在第一行
  let i = 0;  局部变量尽量使用let
</script>

2.数据类型

2.1字符串

正常字符串我们使用单引号或者双引号包裹
注意转义字符\
多行字符串编写

var msg = 
    `
    李锦彪
    黄欣宇
    锦欣宇
    ` //多行字符，tab键上面

模板字符串

//模板字符串
let name = '李锦彪';
let age = 18;
let mg = `名字是：${name},年龄是：${age}`
alert(mg)

字符串的可变性 >>不可变
大小写转换

//注意这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()

student.indexOf(‘f’) >>返回字符下标
substring

student.substring(1)  //从第一个字符串截取到最后一个
student.substring(1,3)  //截取[1,3)

2.2数组

Array可以包含任意的数据类型

var arr = [1,2,3,4];

长度

arr.length

注意：加入给arr.length赋值，数组大小会发生变化、如果赋值过小元素会丢失

indexOf（），通过元素下标索引

indexOf（2）  //从一开始
2

字符串的“1”和数字1是不同的

slice（）截取Array的一部分，返回一个新的数组，类似于substring
push（），pop（）尾部

push：压入到尾部
pop：弹出尾部的元素

unshift（）、shift（）头部

unshift（）：压入到头部
shift（）：弹出头部的元素

排序sort（）

arr.sout()

元素翻转reverse（）

arr.reverse()

concat()

拼接
arr1 = arr.concat([7,8])  //返回一个新的数组，原数组不变
[1,2,3,4,7,8]

连接符join

arr.join('-')
1-2-3-4

多维数组

和java类似

数组：存储数据（如何存、如何取、方法都可以自己实现！）

2.3对象

若干个键值对

var 对象名={
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}
//定义 一个person对象，有三个属性
var person={
    name: '李锦彪',
    age: 18,
    email: '2777500@qq.com'
}

js中的对象使用大括号标起来，以键值对描述属性，使用‘,’隔开，最后一个不加‘,‘

1、对象赋值

person.name=‘李锦彪’

2、使用一个不存在的对象属性，不会报错 undefined

3、动态的删减属性，通过delete删除对象属性

delete person.name
true
person

4、动态的添加，直接给新的属性添加值即可

person.name = '李锦彪'

5、判断属性值是否在这个对象中 xxx in xxx

'age' in person
true
//继承
'toSring' in person
true

6、判断一个属性是否在这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

2.4流程控制

if判断

var age = 14;
if (age > 18){
    alert('heihei')
}
else{
    alert('娃娃')
}

while (age < 1){
    age -= 1;
}
for (let i = 0; i < age; i++) {
    alert(i);
}

2.5 map和set

Map

var map = new Map([['李锦彪',123],['黄欣宇', 456], ['锦欣宇', 789]]);
var name = map.get('李锦彪');//获得值
map.set('admin', 123456);//新增或修改
map.delete('admin');//删除值
console.log(name);

Set：无序不重复的集合

var set = new Set([3,1,12,3,3,3,4,4]); //去重
set.add(5);//添加值
set.delete(1);//删除值
set.has(1); //是否包含某个元素

2.6 iterator

遍历数组

//通过for of/ for in下标     实现迭代
var arr = [1,2,3,4,5];
for(var x of arr){
    console.log(x);
}

遍历Map

var map = new Map([['李锦彪',123],['黄欣宇', 456], ['锦欣宇', 789]]);
for(let x of map){
    console.log(x);
}

遍历Set

var set = new Set([3,1,12,3,3,3,4,4]);
for(let x of set){
    console.log(x);
}

3.函数

3.1定义函数

定义方式一

绝对值函数

function abs(x)
{
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

一旦执行到return代表函数结束，返回结果；

如果没有执行return ，函数执行完也会返回结果，结果就是undefined

定义方式二

var abs = function(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

function(x){…} 这是一个匿名函数，但是可以把结果赋值给abs，通过就可以调用函数

方式一和方式二等价

调用函数

abs(10);

参数问题：可以传递任意一个函数，也可以不传递参数

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

arguments

arguments是一个js免费赠送的关键词

代表，传递进来的所有参数，是一个数组！

var abs = function (x) {
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    if (x >= 0){
        return x;
    }else{
        return -x;
    }
}

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数~

rest

获取除了已经定义的参数之外的参数

var abs = function (x,y, ...rest) {
    console.log('x->'+x);
    console.log('y->'+y);
    console.log(rest);//返回数组
}

rest参数只能写在后面，必须用…标识

3.2 变量的作用域

在js中，var定义变量实际是有作用域的
假设在函数体中声明，则在函数外无法使用
如果两个函数使用了相同的变量名，只需要重新定义即可
内部函数可以访问外部成员，反之则不行
函数查找变量从自身开始函数开始，有内向外，假设外部存在函数内部同名的变量，函数会使用内部变量，屏蔽外部变量
变量应放在函数头部
全局变量

全局对象 window

'use strict'
var x = 'xxx';
alert(x)
alert(window.x)

var old_alert = window.alert;

window.alert = function (){
    
};
//发现alert（）失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

js实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在作用域没有找到，报错 RefrenceError

规范

//唯一全局变量
var ljb = {};

//定义全局变量
ljb.name = '李锦彪';
ljb.add = function (a, b){
    return a + b;
}

局部作用域let

for (let i = 0; i < 10; i++) {
    
}

出了for循环就无法使用 i

建议使用let定义局部变量

常量const

const pi = 3.14； //只读

3.3 方法

var ljb = {
    name: '李锦彪',
    birth: 2000,
    age: function (){
        //今年-出生年
        var now = new Date().getFullYear();
        alert(now - this.birth);
    }
}
//属性
ljb.name;
//方法一定要加（）
ljb.age();

apply

function  getAge(){
    //今年-出生年
    var now = new Date().getFullYear();
    return now - this.birth;
}
var ljb = {
    name: '李锦彪',
    birth: 2000,
    age: getAge()
}
getAge.apply(ljb,[]); //this.指向了ljb，参数为空

4 内部对象

标准对象

4.1 Date

var now = new Date();
now.getFullYear();//年
now.getMonth();//月  0~11 代表月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒

now.toLocalString();//本地时间  2022/5/3 下午15:36:15

now.getTime(); //时间戳  全世界统一  1970 1.1 0:00:00

4.2 json

是一种轻量级的数据交换格式

在js中一切皆为对象，任何js支持的类型都可以使用json来表示；

格式：

对象都用{}
数组都用[]
所有的键值对都用 key：value

//字典转换为json对象
var j = JSON.stringify(ljb);
alert(j);
//json解析,参数为json字符串
var obj = JSON.parse('{"name":"李锦彪","age":18}');

4.3 Ajax

原生的js写法，xhr异步请求
jQury 封装好的方法 $(“#name”).ajax(“”)
axios请求

4.4 正则 RegExp

//一般写法
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); //只能是英文字母，数字和_，并且首字母是英文字母，长度6-12
var s = 'hello';
reg1.test(s);
false
//简化写法
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
reg2.test(s);
false

//-------g表示全局----------
s.match(/o/g); //查找所有得到o
s.search(/h/g); //查找字符串中符合正则表达式的内容位置，返回第一个匹配到的元素的索引位置，加不加g效果想相同
s.split(/o/g); //按照正则表达式进行切割，得到一个新值，原数据不变
s.replace(/o/g, "s");  //对字符串按照正则进行替换    全局匹配
s.replace(/o/gi, "s"); //对字符串按照正则进行替换    全局匹配，不区分大小写

4.5 Math（）对象

Math.abs(x); 返回绝对值
Math.exp(x); 返回e的指数
Math.floor(x); 小数部分直接舍去
Math.log(x);  返回数的自然对数（底为e）
Math.max(x,y);  
Math.min(x,y);
Math.pow(x,y);
Math.random();  返回0~1之间的随机数
Math.round(x);  把数 四舍五入  为最接近的数
Math.sin(x);
Math.sqrt(x);  返回数的平方根
Math.tan(x);

5 面向对象

var ljb = {
    name: '李锦彪',
    birth: 2000,
    age: function (){
        //今年-出生年
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
var hxy = {
    name: '黄欣宇'
}
//原型对象
hxy.__proto__ = ljb;

5.1 class继承

class 关键字

定义一个类，属性，方法

//定义一个学生的类
class Student{
    constructor(name) { //构造方法
        this.name = name;
    }
    //方法
    hello(){
        alert('hello方法');
    }
}
var ljb = new Student('李锦彪');
ljb.hello();

继承

//定义一个学生的类
class Student{
    constructor(name) {
        this.name = name;
    }
    //方法
    hello(){
        alert('hello方法');
    }
}

class xiaoStudent extends Student{
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }
    mygrade(){
        alert('黄欣宇');
    }
}

var ljb = new Student('李锦彪');
var hxy = new xiaoStudent('黄欣宇', 450);

6 操作BOM对象（重点）

BOM：浏览器对象模型

6…1 window.Navigator

（不建议使用）

Navigator：封装了浏览器的信息

大多数时候，我们不会使用navigator对象，因为会被人修改！

不建议使用这些属性来判断和编写代码

6.2 screen

screen.width
1536
screen.height
864

6.3 location(重要)

location 代表当前页面的URL信息

location.host：主机
location.href：连接
location.protocol：协议
location.reload：f reload（） //刷新网页
//设置新的地址
location.assign('https://www.baidu.com');

6.4 document

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

document.title
'百度一下，你就知道'
document.title='李锦彪'
'李锦彪'

6.5 获取具体的文档树节点

<dl id="app">
    <dt>name</dt>
    <dd>李锦彪</dd>
    <dd>黄欣宇</dd>
    <dd>锦欣宇</dd>
</dl>

js中：
var dl = document.getElementById('app');

6.6 获取cookie

document.cookie
''

6.7 劫持cookie

www.taobao.com （登录淘宝，天猫也自动登录）

<script src="aa.js"> </script>
//恶意人员：获取你的cookie上传到 它服务器

服务器端可以设置cookie：httpOnly (只读)

6.8 history

代表浏览器记录

history.back(); //后退
history.forward(); //前进

6.9 提示框

prompt('你要冲多少？', '李锦彪');

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0QJvARtG-1651757973421)(C:\Users\15751083927\AppData\Roaming\Typora\typora-user-images\image-20220503204715515.png)]

6.10 计时器相关（相对重要）

//概念
var t = setTimeout('JS语句', 毫秒); //第一个参数js语句多数是写一个函数，不然一般js语句到这里就执行了，先用函数封装一下，返回值t其实就是一个id值（浏览器给你自动分配的）
------------------------------------------
var a = setTimeout(function (){confirm("are you sure")}, 3000); //3 秒后执行函数
clearTimeout(a)  //3秒内执行，停止执行函数
-------------------------------------------
var a = setInterval(function (){confirm("are you sure")}, 3000);  //每隔3秒执行一次
clearInterval（a）//清除计时器

7. DOM （重点）

更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的节点

文档对象模型

文档节点(document对象)：代表整个文档
元素节点(element对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)
js 可以通过DOM创建动态的HTML
js 能够改变页面中所有的HTML属性
js 能够改变页面中所有的HTML元素
js 能够改变页面中所有的css样式
js 能够对页面中的所有事件作出反应（鼠标点击事件，鼠标移动事件等）

7.1 查找标签

直接查找

//对应css选择器

var btn  = document.getElementsByClassName('btn'); //根据class属性获取（可以获取多个元素，所以返回的是一个数组）
var btn1  = document.getElementById('d1'); // 根据ID获取一个标签 
var btn2  = document.getElementsByTagName(a);  //根据标签名获取标签合集，返回一个数组    获取a标签

间接查找

var btn  = document.getElementsByClassName('btn');
var j1 = btn.parentElement;  //父节点标签元素
var j2 = btn.children;  //所有字标签
var j3 = btn.firstElementChild;  //第一个字标签元素
var j4 = btn.lastElementChild;  //最后一个字标签元素
var j5 = btn.nextSibling;  //下一个兄弟标签元素
var j6 = btn.previousSibling;  //上一个兄弟标签元素

7.2 更新DOM节点

dl.innerText;  //获得值
dl.innerText = '李锦彪';  //修改值
dl.style.xxx = xxx;  //改变样式

7.3 删除DOM节点

步骤：先获取父节点，在通过父节点删除自己

<div class="cl1">
    <p id="p1">李锦彪</p>
    <h1>黄欣宇</h1>
</div>
----------------------------------------
var p1 = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(father.children[0])

7.4 插入节点

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干！会产生覆盖

追加：

var d1 = document.getElementById('d1');
d1.appendChild(js);  //追加js节点

创建标签

var dd = document.getElementById('dd');

var newp = document.createElement('p'); //创建一个p标签
newp.id = 'newp';
newp.innerText = '人才啊';
dd.appendChild(newp);
----------------------------
//创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');

7.5 文本操作

d1.innerText = "<a href='www.baidu.com'>百度</a>";
d1.innerHTML = "<a href='www.baidu.com'>百度</a>";  //能够识别标签

7.6 属性操作

d1.setAttribute('age', 18);
d1.removeAttribute('age');

7.7 class的操作

var d = document.getElementById('oo');
d.classList;//获得这个标签的class属性的所有的值
d.classList.add('xx2'); //添加class值
d.classList,remove('xx2');  //删去class值
d.classList.contains('xx2');  //判断是否有xx2class属性。有返回true，否则false
d.classList.toggle('xx2'); //有就删除class  xx2，没有就添加

7.8 事件

onclick  //当用户点击某个对象时调用的事件句柄
ondblclick  # 当用户双击某个事件时调用的事件句柄


================================================
onfocus  # 元素获得焦点
onblur  //# 元素失去焦点  应用场景：用于表单验证，用户离开某个输入框时，代表已经输完，我们可以对他进行验证
************************************************
//onfocus 事件获取光标
var inp = document.getElementById('username');
inp.onfocus = function (){
    var d = document.getElementById('d1');
    d.style.backgroundColor = 'pink';
}
//失去光标触发的时间
inp.onblur = function (){
    var d = document.getElementById('d1');
    d.style.backgroundColor = 'green';
}
************************************************
================================================   
    
onchange  # 域的内容被改变  应用场景：通常用于表单元素，当元素内容被改变时触发。（select联动）
*************************************************
<select name="select" id="select">
    <option value="ljb">李锦彪</option>
    <option value="jxy">锦欣宇</option>
    <option value="hxy">黄欣宇</option>
</select>
------------------------------------------------
//onchange 事件
var s = document.getElementById('select');
s.onchange = function (){
    //this.options:拿到所有标签   this.selectedIndex：拿到选中的标签
    console.log(this.options[this.selectedIndex].innerText+'好好看');
}

//onchange  input事件实时获取文本框内的内容
inp.onchange = function (){
    console.log(this.value);
}
*************************************************    
================================================    
    
onkeydown  //# 某个键盘按键被按下    应用场景：当用户在最后一个输入框按下回车按键时，表单提交
onkeypress  # 某个键盘按键按下并松开
onkeyup  # 某个键盘按键被松开
onload  # 一张页面或一幅画像完成加载
onmousedown  #鼠标按钮被按下
onmousemove  # 鼠标被移动
onmouseout  # 鼠标从某元素离开
onmouseover  # 鼠标移到某元素之上

onselect  # 在文本框中的文本被选中时发生

方式一

<div class="c1" id="d1" onclick="f1();">
    <p>李锦彪</p>
</div>
---------------------------------
function f1(){
    var d = document.getElementById('d1');
    d.style.backgroundColor = 'yellow';
}

方式二

流行

<div class="c1" id="d1">
    <p>李锦彪</p>
</div>
-----------------------------------------
var d = document.getElementById('d1');
d.onclick = function (){
    d.style.backgroundColor = 'yellow';
}

方式三

//this 表示当前标签
<div class="c1" id="d1" onclick="f1(this);">
    <p>李锦彪</p>
</div>
---------------------------
function f1(this){
	this.style.backgroundColor = 'yellow';
}

8 操作表单(验证)

表单是什么：

文本框 test
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password

获取提交的信息加密

//引入md5 加密算法
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>


<!--
表单绑定提交事件
onsubmit = 绑定一个提交检测的函数，true， false
将这个结果返回给表单，使用onsubmit接收
onsubmit="return f1()"  //return false 阻止提交， true同意提交
-->
<!--<form action="#" method="post" onsubmit="return f1()">-->
<form action="#" method="post">
    <p>
        用户名: <input type="text" name="username" id="username" required>
    </p>
    <p>密码：
<!--        隐藏提交-->
        <input type="password" id="input-password" required>
        <input type="hidden" id="md5-password" name="password">
    </p>

<!--    绑定事件-->
    <button onclick="f1()">提交</button>
</form>

---------------------------------------------------
// var input_text = document.getElementById('username');
// //得到输入框的值
// input_text.value;
// //修改输入框的值
// input_text.value = '123';

// var boy = document.getElementById('boy');
// var girl = document.getElementById('girl');
// //对于单选框、多选框等固定的值，.value 只能取到当前的值
// console.log(boy.checked); //查看返回结果 是否为true
// console.log(girl.checked); //查看返回结果

function f1(){
    var name = document.getElementById('username');
    var pswd = document.getElementById('input-password');
    var md5_pswd = document.getElementById('md5-password');
    md5_pswd.value = md5(pswd.value);

    return false;
}

9 jQuery

jQuery库：里面存在大量的js函数

jQuery对象和DOM对象

jQuery找到的标签是对象称为---jQuery对象
原生js找到的对象称为---DOM对象
DOM对象只能只用dom对象的方法
jQuery对象也是，不能使用dom对象的方法

转换
jQuery对象转dom对象 -- jQuery对象[0]  实例：$('#id1')[0];
dom对象转jQuery对象 -- $(dom对象);

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
公式：$(selector).action()
-->
<a href="" id="test-jquery">点我</a>

</body>
<script type="text/javascript" src="lib/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/ljb.js"></script>
</html>

-------------------------------------------------------
'use strict'

//选择器就是css的选择器
$('#test-jquery').click(function (){
    alert('hello jquery');
});

9.1 jQuery选择器

9.1.1 基本选择器

id选择器
$('#d1')

class选择器
$('.c1')

标签选择器
$('标签名')---$('div')

选择器找到的可能是多个标签，会放到数组里，但还是jQuery对象，能够直接使用jQuery的方法，意思是找到的所有标签进行统一设置，如果要单独设置选中的所有标签中的某个标签，可以通过索引取值的方式找到，通过索引取值拿到的标签，是个dom对象，

9.1.2 基本筛选器

<ul>
    <li>李锦彪</li>
    <li>锦欣宇</li>
    <li id="d3">黄欣宇</li>
    <li>憨熊</li>
    <li id="d5">大帅锅</li>
    <li>人才呦</li>
</ul>


:first  -- 实例：$('li:first')
:last
:eq(索引值) -- 实例：$('li:eq[2]')  支持负数
:odd  -- 找到所有奇数
:even -- 找到所有偶数
:gt(index) -- 匹配所有大于给定索引值的元素
:lt(index) -- 匹配所有小于给定索引值的元素
:not(元素选择器) -- 移出所有满足not条件的标签
:has(元素选择器) -- 选取所有包含一个或多个标签在其内的标签（指的是后代元素中）

9.1.3 属性选择器

$('[title]')
$('[title=xx]')

//多用于input标签
$('input[type=xx]')

9.1.4 表单筛选器

:text
:checkbox
:password
:file
:radio
:submit
:reset
:button

$(':enabled')  //可以用的
$(':checked')  // 选中的标签
$(':selected')  // 下拉框选中的标签

9.2 事件

//当网页加载完毕之后，响应事件
$(function (){
    $('#d1').mousemove(function (e){
        $('#dd').text('x:'+e.pageX+'y:'+e.pageY);
    });
});

$('#d1').mouseup(function (e){
    $('#dd').text('李锦彪');
});

9.3 筛选器方法

下：
$('#d1').next();  找到下一个兄弟标签
$('#d1').nextAll();  找到下面所有的兄弟标签
$('#d1').nextUntil('#dd3');  直到找到 id 为 dd3 的标签
上：
$('#d1').prev();
$('#d1').prevAll();
$('#d1').prevUntil('d0');
父亲元素：
$('#d1').parent()
$('#d1').parents()
$('#d1').parentsUntil('body')

a charset=“UTF-8”>
Title

点我

‘use strict’

//选择器就是css的选择器
$(‘#test-jquery’).click(function (){
alert(‘hello jquery’);
});


### 9.1 jQuery选择器

#### 9.1.1 基本选择器

```js
id选择器
$('#d1')

class选择器
$('.c1')

标签选择器
$('标签名')---$('div')

选择器找到的可能是多个标签，会放到数组里，但还是jQuery对象，能够直接使用jQuery的方法，意思是找到的所有标签进行统一设置，如果要单独设置选中的所有标签中的某个标签，可以通过索引取值的方式找到，通过索引取值拿到的标签，是个dom对象，