前端基础知识

HTML
CSS
JavaScript
猜数字案例

HTML

HTML基本概念

HTML(Hyper Text Markup Language), 超⽂本标记语⾔
超文本 ：比文本更强大，可以表示图片、音频、视频等等

其中通过标签进行控制，这些标签都是定义好的

html 复制代码

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>

这里的<h1、h2和h3就是标签

标签名body放到<>中

html 复制代码

标签是成对出现的<h1> 为开始标签,</h1> 为结束标签

这里开始和结束标签中存放的就是此时这个标签的内容，此时开始标签中可能会带有"属性"，并且有的标签也可能是单个标签

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
       hello world
</body>
</html>

结构之间的结构关系，构成一个DOM树

工具推荐

这里使用记事本编辑html比较不是特别方便这里推荐使用

Visual Studio Code这个软件可以运行在Window、macOS 、Linux上，并且功能丰富

快速开发 VS Code上使用！+ enter / Tab都可以快速创建一个html框架，这里不会自动保存

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 
</body>
</html>

HTML常用标签

段落标签：p

原本这里内容是不会自动换行，因此这里可以使用 p 进行换行

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
 <!-- 段落标签 p 如果没有p就不会自动换行，此时这里前面也没有缩进 -->
    <p>这是一个段落</p>
   
     <p>这是一个段落</p>
    
     <p>这是一个段落</p>
</body>
</html>

1.p标签描述的段落，没有缩进

2.内容首尾部出换行，这里空格是无效的

3.html里面换行不是真的换行，换行需要使用对应标签

换行标签：br

br是一个单标签，并且间隙没有p标签大

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>

<!--  此时这里br也可以表示换行 其是一个单行标签 -->
   换行标签
    <p>这是一个段落</p>
   
    <p>这是一个段落</p>

    这是一个换行<br/>
    这是一个换行<br/>
    这是一个换行<br/>
</body>
</html>

p是段落标签，这里换行以后每一段之间有一行间距

br换行标签，所以行之间没有间距隔开

图片标签：img

html 复制代码

<img src="C:/Users/zxc06/OneDrive/图片/Screenshots/xingye.jpg" alt="" >

此时这里的src表示的是这个图片的路径，alt表示如果这个图片没有正常显示这里就会显示alt内容

此时就会将这个图片显示出来

上面这个是绝对路径，但是我们可以使用相对路径 .../表示上一级目录

html 复制代码

绝对路径
<img src="C:/Users/zxc06/OneDrive/图片/Screenshots/xingye.jpg" alt="" >
相对路径
<img src="../xingye.jpg" alt="这是一个人物"
 width="500px" height="500px" style="border: 2px solid black;" >

此时这里src目录就是以此时html所在位置为基准 ，在其上一级目录中找是否有这个图片

此时这个上一级中有这个图片

并且这里的style中border进行了设置了黑色边框

如果上一级中有这个图片文件，此时可以点击这个连接，并显示图片，反之如果找不到就不会显示

VS Code直接可以看

html 复制代码

//此时这里的 ./表示当前目录，但是当前目录并没有这个图片，因此就点击不出来
<img src="./xingye.jpg" alt="这是一个人物" 
width="500px" height="500px" style="border: 2px solid black;" >

此时这里没有找到图片，打开的时候就会显示原本 alt中的内容

超链接：a

href：表示点击后跳转哪个页面

target:打开⽅式.默认是_self.如果是_blank则⽤新的标签⻚打开

外部链接：href直接引用对应地址即可

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    外部连接
    <a href="https://wap.baidu.com/">百度</a>  
   
</body>
</html>

此时这里就是一个链接可以点击进入对应的页面，这里是百度的页面点击就会进入百度页面

html 复制代码

<a href="https://wap.baidu.com/" target="_blank">百度</a>

这里target默认是当前页面打开，但是这里_blank表示在新的页面打开

内部连接：网站内部之间的链接，写相对路径即可

html 复制代码

<a href="demo1.html" target="_blank">点击后会跳转到demo1.html</a>

此时这里自己跳转自己

此时点击这个链接就可以进行下载这个zip

空链接：使用#在href中占位

html 复制代码

<a href="#">空链接</a>

此时这里的空链接点击也没有效果

表格标签table

table 标签：表示整个表格

tr : 表示表格的一行

td : 表示一个单元格

thead:表格的头部区域

tbody : 表格的主体区域

align 是表格对齐方式 algin = "center"

border表示边框

cellpadding : 内容距离边框的距离，默认1像素

cellspacing : 单元格之间的距离，默认为2像素

wideth/height : 设置尺寸

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <table align = "center" border="1" cellpading="0" cellspacing="0" width="500" 
height="500">
        <tr>
          <td>名字</td>
          <td>性别</td>
          <td>年龄</td>
        </tr>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td>18</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>

        </tr>
    </table>
</body>
</html>

html 复制代码

 <table align = "center" border="1" cellpading="0" cellspacing="0" width="500" 
height="500">
        <tr>
          <td>名字</td>
          <td>性别</td>
          <td>年龄</td>
        </tr>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td rowspan="2"> 18 </td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
        </tr>
        <tr>
          <td colspan="2">李四</td>
        </tr>
    </table>

此时这里的rowspan表示的占据多少行

colspan表示占据多少列

表单标签

form

html 复制代码

 <form action="test.html">
    <!-- form内容 -->
</form>

input&label

各种输入控制，文本框，按钮，单选框，复选框

type:可以取值，text , button , checkbox , file,radio等等

name : 给此时input起个名字，尤其是单选按钮，必须有相同名字才可以是单选

value : input中的默认值

checked：默认被选中，用于单选和复选按钮中

html 复制代码

  <form action="test.html">
      账号：<input type="text" name="Users" id=""></br>
      密码：<input type="password" name="password" id=""></br>
      性别：<input type="radio" name="sex" id = "male" value="0"> <label for="male">男 </label>
      <input type="radio" name = "sex" id="female"value = "1"><label for="female">女</label> </br>
 </form>

此时这里text表示文本框，password表示密码框，radio表示单选框

此时密码框写的内容会被隐藏

这里都给性别中男和女起了一个相同的名字 ，这样其才是单选框，如果没有这样做其就没有这种单选效果

像下面这样如果没有给input起相同名字，此时就没有起到单选的效果

html 复制代码

 <form action="test.html">
      账号：<input type="text" name="Users" id=""></br>
      密码：<input type="password" name="password" id=""></br>
      性别：<input type="radio" > 男 <input type="radio" >女
    </form>

此时这里的lable是让此时选择性别的是，点击男或者女字，其也可以进行选择性别

checkbox

复选框

html 复制代码

 爱好：
      <input type="checkbox" name="chec">吃饭 
      <input type="checkbox" name="chec" >睡觉
      <input type="checkbox" name="chec">打游戏

select标签

html 复制代码

学历：<select name="sel" id="">
        <option value="0">小学</option>
        <option value="1">初中</option>
        <option value="2">高中</option>
        <option value="3" selected = "selected">高中及以上</option>
      </select>

此时这里selected = "selected"是让这里的高中及以上是默认选择

textarea&button

textarea标签和button按钮

文本域中内容

html 复制代码

 简介：<textarea rows = "10" cols="100" ></textarea></br>
      注册：<input type="button" value="注册">
      <input type="submit" value="注册">

此时这里button按钮是没有用的，因为其并没有提交，所以这里点击第一个并没有任何效果，但是第二个会，因为其会提交

提交以后这里上面就会有一些账号密码信息，和一些键值对表示的信息

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>

    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
</body>
</html>

小问题：使用html写一个注册表格

这里用户注册是一个h1标题

此时就是使用一个table表格即可，放入用户名、手机号和密码，这里的注册是一个button按钮 ，这里登录是一个超链接

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<body>

    <h1>用户注册</h1>
    <table>
      <tr>
        <td>用户名</td>
        <td><input type="text" name="" id="" placeholder="请输入用户名"></td>
      </tr>
      <tr>
        <td>手机号</td>
        <td><input type="number" name="" id=""placeholder="请输入手机号"></td>
      </tr>
      <tr>
        <td>密码</td>
        <td><input type="password" name="" id=""placeholder="请输入密码"></td>
      </tr>
    </table>
    <div>
     
       <input type="submit"value="注册">
      <span>已有账号?</span> <a href="#">登录</a>
    </div>
</body>
</html>

CSS

前端中html可以表示这个页面有什么，但是这样并不美观，因此CSS就可以对其页面进行美化
CSS(Cascading Style Sheet) ，层叠样式表, ⽤于控制⻚⾯的样式

CSS能够对⽹⻚中元素位置的排版进⾏像素级精确控制,实现美化⻚⾯的效果.能够做到⻚⾯的样式和结构分离

CSS引入方式

html 复制代码

选择器 + { 声明}
这里选择器可以确定修改谁
声明决定修改成啥，并且这里的声明都是一些键值对

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>一个段落</p>
    <p>一个段落</p>

    <div>一个div</div>
    <div>一个div</div>

    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>

</body>
</html>

此时上面并没有颜色，因此可以使用上面三种方式对其进行修改

1.内部样式

这里的内部标签通常放到head中，但是放到body中也能被正常解析

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!--内部标签 -->
    <style>
        p{
            color: red
            
        }
        div{
            color: rgb(180, 220, 22)
        }
        span{
            color: blue
        }
    </style>
</head>
<body>
    <p>一个段落</p>
    <p>一个段落</p>

    <div>一个div</div>
    <div>一个div</div>

    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>

</body>
</html>

这里可以通过color进行颜色选择，也可以使用rgb进行颜色选择

但是写在这里的head内部只可以当前这一个文件写，因此可以将这里style放到一个css文件中，然后引用这个css文件即可

2.外部样式

css 复制代码

一个css代码
p{
   color: red         
}

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <p>一个段落</p>
    <p>一个段落</p>

    <div>一个div</div>
    <div>一个div</div>

    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>

</body>
</html>

这里通过一个link进行外部CSS文件进行解析

html 复制代码

<link rel="stylesheet" href="demo.css">

这样的确可以实现其他html文件也可以使用这里的CSS的代码，但是上面这样修改都是修改这里的所有 p 、div标签等等，因此这里有了行内样式

3.行内样式

html 复制代码

<p style="color: red;">一个段落</p>
    <p style="color: blue;">一个段落</p>

    <div>一个div</div>
    <div>一个div</div>

    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>

这里可以在其标签里面进行样式控制，但是如果这里面控制样式比较多，此时代码美观就不是特别好

CSS选择器

1.标签选择器

上面head标签中设置器格式中内部标签其实就是标签选择器

css 复制代码

/* 选择所有的a标签, 设置颜⾊为红⾊ */ 
a {
 color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */ 
div {
 color: green;
}

2.类选择器

还是将其放到style进行使用，但是其使用方式不同

html 复制代码

<style>
       .red{
            color: red;
        }
        .blue{
            color: blue;
        }
    </style>

此时这里使用需要用到class

html 复制代码

 <p class="red">一个段落</p>
 <p class="blue">一个段落</p>

3.ID选择器

html 复制代码

 <style>
        .red{
            color: red;
        }
        .blue{
            color: blue;
        }
        /* id选择器 */
        #div1{
            font-size: 32px;
        }
    </style>

html 复制代码

 <p class="red" id="div1" >一个段落</p>
 <p class="blue">一个段落</p>

这里标签中需要使用id来进行使用，这里就进行字体大小修改

4.通配符

就是将页面中的所有格式都修改成同一个格式

html 复制代码

    <style>
         /* .red{
            color: red;
        }
        .blue{
            color: blue;
        }
        id选择器
        #div1{
            font-size: 32px; */
      /* } */
      *{
        color: #ff0000;
      }
    </style>

这里颜色选择是16进制方式进行选择，这里表示的是红色，也就是将rgb转化成16进制

5.复合选择器

html 复制代码

    <style>
        /* 表示子孙 */
        ul  a{
        color: red;
       }
      

       ol li{
        color: purple;
       }
    </style>

此时这里这里的 ul 和 a并不一定是相邻标签，这里是其孩子标签

html 复制代码

    <style>
        /* 表示子孙 */
        li>a{
        color: red;
       }
      

       ol li{
        color: purple;
       }
    </style>

但是如果是 li > a，那此时a是li的孩子标签才可以进行修改，如果不是则修改无效

html 复制代码

 <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#">ccc</a></li>
    </ul>
    <ol>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ol>

常用的CSS

html 复制代码

 <style>
        /* 颜色 */
        .text{
            color: red;
        }
        /* 字体大小 */
        .text{
            font-size: 32px;
        }
    </style>

此时颜色可以使用英文单词、rgb、十六进制表示

border边框

border-width 设置边框粗细

border-style 设置边框类型 dotted(点)，solid:实线,double:双线，dashed:虚线

border-color 设置边框颜色

html 复制代码

    <style>
        div{
            border: red solid 1px;
        }
        span{
            border: blue solid 1px;
        }
    </style>

html 复制代码

    <div >我是一个div</div>
    <div >我是一个div</div>
    <div><a href="#">超链接</a></div>

    <span>span111</span>

html 复制代码

    <style>
       
        div{
            border: red solid 1px;
        }
        div{
            border-width: 1px;
            border-color: red;
            border-style: solid;
        }
        
    </style>

此时这两个div表示的意思是一样的，只不过上面这个全部放一起了

width/height 宽度和高度

只有块级元素：h1 - h6，p ，div等

行内元素：a span

此时这里的块级元素独占一行，才可以进行设置宽高

行内元素不独占一行，所有不可以设置宽高

html 复制代码

    <style>

        div{
            border: red solid 1px;
            width: 500px;
            height:50px;
        }

        span{
            border: blue solid 1px;
            /* 此时这里不能独占一行的进行设置宽和高是没有意义的 */
             width: 500px;
            height:50px;
        }
    </style>

html 复制代码

<div >我是一个div</div>
    <div >我是一个div</div>
    <div><a href="#">超链接</a></div>

    <span>span111</span>

此时就对其进行了修改，但是这里span不是独占一行，所以这里设置宽和高是没有意义的

可以使用

display: block将其修改称为块级元素

display: inline将其修改成行级元素

html 复制代码

    <style>

        span{
            display: block;
            border: blue solid 1px;
            /* 此时这里不能独占一行的进行设置宽和高是没有意义的 */
            width: 500px;
            height:50px;
        }
    </style>

此时这里将其span修改成了块级元素，此时就可以进行修改了

此时也可以对边框每个方向的宽度进行设置

html 复制代码

<style>
 div{
            border: red solid 1px;
            border-top-width: 2px;
            border-left-width: 3px;
            border-right-width: 5px;
            border-bottom-width: 7px;
            width: 500px;
            height:50px;
         }
</style>

html 复制代码

<style>
 div{
            border: red solid 1px;
            border-top-width: 2px;
            border-left-width: 3px;
            border-right-width: 5px;
            border-bottom-width: 7px;

            border-top-style: solid;
            border-left-style: double;
            border-right-style: dashed;
            border-bottom-style: dotted;
             width: 500px;
            height:50px;
         }
 </style>

此时的边框样式也可以进行修改

这里border-width 和 border-style可以直接传入多个参数，有对应意义

只给两个参数

html 复制代码

<style>
  div{
            border-color: red;
            border-style: dotted double;

            width: 500px;
            right: 100px;
          }

</style>

此时第一个参数表示上下，第二个参数表示左右

html 复制代码

<style>
  div{
            border-color: red;
            border-style: dotted double solid;

            width: 500px;
            right: 100px;
          }

</style>

三个参数，第一个表示顶部，第二个表示左右，第三个表示底部

html 复制代码

<style>
  div{
            border-color: red;
            border-style: dotted double solid dashed;

            width: 500px;
            right: 100px;
          }

</style>

四个参数，依次顶 -》右-》底-》左

padding

设置内容和边框之间的距离

原本这里是这样的，但是我们认为这里

html 复制代码

<style>
    div{
            border-color: red;
            border-style: dotted double solid dashed;
            padding: 100px; 
            width: 500px;
            right: 100px;
          }

</style>

这里进行修改后就会变成这样

这里依旧是可以设置4个方向的值，并且也可以直接使用一个padding给其参数的个数，参数个数不同其含义也不同，和上面的一样

margin：外边距，设置元素和元素之间的距离

html 复制代码

<style>
       div{
            border-color: red;
            border-style: dotted double solid dashed;
            padding: 100px;
            /* margin: 100px;  */
            width: 500px;
            right: 100px;
          }

</style>

此时这里距离就和上面不一样了

此时这里仍然是可以设置4个方向的值

JavaScript

JavaScript基本概念

JavaScript(简称JS) ,是⼀个脚本语⾔,解释型或即时编译型的编程语⾔.虽然它是作为开发Web⻚⾯的脚本语⾔⽽出名，但是它也被⽤到了很多⾮浏览器环境中

最初是由JavaScript之⽗布兰登.艾奇(Brendan Eich)编写的，由于当时他对Java并不感兴趣，所有仅仅使用短短10天就搞出来了，但是时间短也导致了当时一些这个语言编写的东西有些混乱

但是其实Java和JavaScript并没有关系，这里只不过JavaScript是为了蹭一下Java热度，当时Java比较火，一次编写到处运行，但是这个大佬还是瞧不起Java

HTML : 网页的结构(骨)

CSS : 网页的表现(皮)

JavaScript : 网页的行为(魂)

引入方式

和CSS类似，也是有3种

行内样式

html 复制代码

<body>
    <input type="button" value="点击一下" onclick="alert('hello world')">
</body>

内部样式

CSS将这里的内部样式放到了head中，但是此时JavaScript建议的是放到body中，但是放到head中也是可以的

html 复制代码

<body>
    <input type="button" value="点击一下" onclick="alert('hello world')">
    <script>
        //内部样式
        alert('hello JavaScript')
    </script>
</body>

此时这里进入这个就直接显示了alert的内容

外部样式

将这里js代码放到一个文件中，直接引用这个文件即可使用

js 复制代码

alert('hello Script')

html 复制代码

<body>
    <input type="button" value="点击一下" onclick="alert('hello world')">
    <script src="js.js"></script>
</body>

基础语法

数据类型

命名规则：组成字符可以是任何字⺟、数字、下划线（_）或美元符号（$）

数字不能开头，建议使用大驼峰

+可以进行字符串拼接

JavaScript是一门动态弱类型语言，此时var类型可以放不同类型的值，随着程序运行，变量类型可能发生改变

html 复制代码

 <script>
        var name = 'zhangsan';
        console.log(typeof name);
        name = 12;
        console.log(typeof name);
        
</script>

此时这里console是可以打印日志，这样在其网页可以使用F12开发者工具的console看日志信息

html 复制代码

  <script>
        var a = 10;
        console.log(typeof a);//number
        var b = 'hello';
        console.log(typeof b);//string
        var c = true;
        console.log(typeof c);//boolean
        var d;
        console.log(typeof d);//undefined
        var e = null;
        console.log(typeof e);//null
</script>

此时这里如果没有初始化器类型就是undefined，如果是空的话就是object是

运算符

此处的运算符大部分和Java类似，但是有些Java并没有

此时 == 比较相等，会进行隐式类型转化, ===比较相等不会进行隐式类型转化

html 复制代码

<script>
        console.log(1 == '1');
        console.log(1 === '1');
</script>

此时==比较的是里面的内容，而 ===比较内容和类型

JavaScript对象

数组

html 复制代码

 <script>
        var arr = new Array();
        var arr2 = [];
        var arr3 = [1,2,'hello',true];

        console.log(typeof arr);
        console.log(typeof arr2);
        console.log(typeof arr3);
</script>

js中并不要求数组中元素类型必须是相同类型，这里可以不同

数组增删查改

html 复制代码

<script>
//查找
        var arr = new Array();
        var arr2 = [];
        var arr3 = [1,2,'hello',true];
        console.log(arr3);//数组内容
        console.log(arr3.length);//数组长度
</script>

html 复制代码

 <script>
 //增
        var arr3 = [1,2,'hello',true];
        arr3[4] = 123;//添加一个元素
        console.log(arr3);
 </script>

html 复制代码

 <script>
 //改
        var arr3 = [1,2,'hello',true];
        arr3[3] = false;//修改元素
        console.log(arr3);
</script>

html 复制代码

 <script>
 //删
        var arr = new Array();
        var arr2 = [];
        var arr3 = [1,2,'hello',true];  
        arr3.splice(3,1);
        console.log(arr3);
        console.log(arr3.length);
</script>

这里splice表示的是从3下标开始删除1个元素

函数

html 复制代码

// 创建函数/函数声明/函数定义 
function 函数名(形参列表) {
 函数体
 return 返回值;
}
// 函数调⽤ 
函数名(实参列表) // 不考虑返回值 
返回值 = 函数名(实参列表) // 考虑返回值

html 复制代码

 <script>
        function hello(){
            console.log('hello');
        }
        hello();
</script>

参数匹配问题

html 复制代码

<script>
        //参数问题
        function add(a,b){
            sum = a+b;
            console.log(sum);
            return sum;
        }
        add(10);
        add(10,20,30);
        add('aa',3);
        add('aa');
</script>

参数少的话就会出现未定义问题，参数多的话就回来进行截取，把后面多的元素截取掉

对象

html 复制代码

<script>
        var a = {}; // 创建了⼀个空的对象 
        var student = {
        name: '张三',
        age: 18,
        sayHello: function() {
        console.log("hello");
        }
    };
    console.log(a);
    console.log(student.name);
    console.log(student['age']);
    student.sayHello();
</script>

此时这里a并没有初始化，所以是一个Object对象

html 复制代码

 <script>
        //通过构造方法创建对象
        function Cat(name , type){
            this.name = name;
            this.type = type;

            this.miao = function(){
                console.log('喵喵喵');
            }
        }

        var mimi = new Cat('咪咪','中华田园猫');
        console.log(mimi.name +" " +  mimi.type);
        mimi.miao();
</script>

JQuery

JQuery是一个快速、简洁且功能丰富的JavaScript框架，对JavaSript常用功能进行了封装，提供了选择器和DOM操作，让其编写代码更加高效

直接可以通过引入对应库就可以使用

html 复制代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

地址https://releases.jquery.com/

uncompressed: ⾮压缩版本(易读,但是⽂件较⼤,传输速度慢)

minified:压缩版(不易读,⽂件⼩,性能⾼,开发中推荐)

slim:精简瘦⾝版,没有Ajax和⼀些特效

slim minified: slim的压缩版

但是使用外部库，这样可能出现不可以访问的问题，所以此时推荐将其下载到本地，放到项目中也可以使用

此时就可以这样使用了

html 复制代码

<script src = "jquery-3.7.1.js"></script>

html 复制代码

<script >
   $(selector).action();
</script>

$( )是JQuery提供的一个全局函数，用于选择和操作 HTML元素

selector选择器，用来查询 HTML元素

action操作，是对元素的操作

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "jquery-3.7.1.js"></script>
</head>
<body>
    <button type="button"> 点击消失 </button>
    <script>
    //此时这里等东西全部加载好才可以执行
        $(document).ready(function(){
            $('button').click(function(){
                $(this).hide();
            })
        });
    </script>
</body>
</html>

此时这里只要点击button按钮，这个按钮就会消失

JQuery选择器

这里选择器都以$开头的

并且和CSS类似，可以通过标签选择，也可以通过 .class选择，也可以通过#id进行选择

JQuery事件

JS想要创建动态页面，必须感知用户的行为，此时页面中的一些操作都会产生一个事件被JS获取到，从而执行其他复杂操作

事件组成

1.事件源：那个元素触发的

2.事件类型:点击、选中、修改

3.事件处理程序：如何处理

操作元素

获取和修改元素内容

这里可以对其内容进行获取，也可以进行修改，有参数的时候就是修改，没有参数的时候就是获取

获取元素

html 复制代码

</script>

    <div id = "div"> <span> hello world</span></div>
    <input type="text" id = 'input'value="你好">
    <script>
        let html = $('#div').html();
        console.log(html);
        let val = $('#input').val();
        console.log(val);

        let text = $('#div').text();
        console.log(text);
    </script>

此时这里html()会返回元素内容并且也包含html标签

val() 返回当前表单的值

text() 返回所选元素内容

设置元素内容

html 复制代码

<div id="test"></div>
    <div id="test2"></div>
    <input type="text" value="">

    <script>
    $(document).ready(function () {
        $("#test").html('<h1>设置html</h1>');//修改格式和内容
        $("#test2").text('<h1>设置text</h1>');//修改内容
        $("input").val("设置内容");
    });
    </script>

此时这里会进行修改，如果这后面方法中有参数就是要修改成的内容

获取 / 设置元素属性

JQuery 中 attr()⽅法⽤于获取属性值.同理有参数就是设置属性

html 复制代码

<a href="https://www.jd.com/" id = 'jd'>超链接</a>
    <script>
        let href = $('#jd').attr("href");
        console.log(href);
</script>

获取这里面超链接的值

设置

html 复制代码

<a href="https://www.jd.com/" id = 'jd'>超链接</a>
    <script>
        console.log($('#jd').attr("href"));
        $('#jd').attr("href","https://www.baidu.com/");
        console.log($('#jd').attr("href"));
</script>

此时这里原本是jd的链接，现在修改成baidu的链接了

获取/设置CSS属性

html 复制代码

 <div style="color: red;">一个文本</div>
    <script>
        let color = $('div').css('color');
        console.log(color);
</script>

这里也可以获取其此时CSS里面的属性，此时获取上面这个颜色

html 复制代码

<div style="color: red;">一个文本</div>
    <script>
        let color = $('div').css('color');
        console.log(color);
        $('div').css('color','blue');
        console.log( $('div').css('color'));
</script>

此时这里对其颜色进行修改

添加元素

append()：在被选元素的尾部插入内容

prepend()：被选元素头部插入内容

after()：被选元素之后插入内容

before()：被选元素前插入内容

html 复制代码

 <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <img src="../xingye.jpg" style="width: 200px; height: 200px;">

    <script>
        $('ol').append('我是append');
        $('ol').prepend('我是prepend');
        $('ol').before('我是before');
        $('ol').after('我是after');
    </script>

删除元素
remove() ：删除被选元素及其子元素
empty()：删除被选元素的子元素

html 复制代码

  <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
   <img src="../xingye.jpg" style="width: 200px; height: 200px;">

    <script>
        $('ol').remove();//移除整个元素
        //$('ol').empty();//清空
        $('ol').append('我是append');
        $('ol').prepend('我是prepend');
        $('ol').before('我是before');
        $('ol').after('我是after');
    </script>

html 复制代码

  <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
   <img src="../xingye.jpg" style="width: 200px; height: 200px;">

    <script>
        //$('ol').remove();//移除整个元素
        $('ol').empty();//清空
        $('ol').append('我是append');
        $('ol').prepend('我是prepend');
        $('ol').before('我是before');
        $('ol').after('我是after');
    </script>

猜数字案例

每次要输入猜的数字，点击猜这个按钮，就会猜的次数++，结果显示猜大了，还是猜小了

点击这里重新开始就会重新生成1~100之间的数字，猜的次数重置为0

1.此时这里先生成一个随机数

2.获取其输入框中内容进行比较输出结果

3.猜对了以后，可以点击重新开始游戏进行将一些数据重置

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
    <script src = "jquery-3.7.1.js"></script>
</head>
<body>
<div style="margin: 0 auto;width: 500px;">
    <button id = "reset">从新开始游戏</button><br />
    请输入要猜的数字：<input type="number" id = "inputNum"> <button id = "guess">猜</button><br />
    已经猜的次数：<span id = "count"> 0 </span><br />
    结果：<span id = "result"></span>
</div>
    <script>
        let randNum = Math.floor(Math.random() * 100) + 1;//生成1~100之间的随
        // 机数
        console.log(randNum);
        let count = 0;

        //猜数
        $('#guess').click(function(){
        //更新猜的次数
            count++;
            $('#count').text(count);
            //获取输入文本框中内容，并进行比较
            let inputNum = $("#inputNum").val();
            if(inputNum < randNum){
                $("#result").text("猜小了");
                $("#result").css('color','red');
            }else if(inputNum > randNum){
                $("#result").text("猜大了");
                $("#result").css('color','red');
            }else{
                $("#result").text("猜对了");
                $("#result").css('color','green');
            }
        });

        $("#reset").click(function(){
            count = 0;
            randNum = Math.floor(Math.random() * 100) + 1;
            $("#inputNumber").val("");
            $("#count").text(count);
            $("#result").text("");
        });

    </script>
</body>
</html>