第十一周内容回顾

最新推荐文章于 2024-06-22 15:10:18 发布
最新推荐文章于 2024-06-22 15:10:18 发布
阅读量220 收藏
点赞数
分类专栏： python 文章标签： 前端 servlet javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71967396/article/details/126575179
版权

第十一周内容回顾

文章目录

1、前端入门

1.1、前端简介

前端
与用户直接打交道得操作界面都可以称之为是前端

后端
不直接与用户打交道得内部真正执行核心业务逻辑得代码程序

前端学习
真正得前端工程师也需要学习很长得时间 我们作为后端工程师对前端目前只做最核心得了解 大致七天得学习

前端核心基础

  • HTML
    • 网页得骨架
  • CSS
    • 网页的 样式
  • JS
    • 网页的动态

1.2、HTTP超文本传输协议

四大特性

  1. 基于请求响应
  2. 基于TCP/IP之上作用于应用层的协议
  3. 无状态
  4. 无/短连接
1.2.1、数据格式

请求数据格式

  1. 请求首行（请求方式：有很多种 协议名称及版本）
  2. 请求头（一大堆K：V键值对）
  3. 换行
  4. 请求体（携带一些铭感的数据 不是所有的请求都有请求体）

响应数据格式

  1. 响应首行（响应状态码）
  2. 响应头（一大堆K：V键值对）
  3. 换行
  4. 响应体（一般情况下就是 浏览器）

1.3、响应状态码

利用数字来表示一些复杂的情况说明（类似于暗号）
**1XX：**服务端已经接收到你的请求正在处理 你可以继续提交或者等待
**2XX：**200 ok服务端给出了相应的响应
**3XX：**重定向
**4XX：**403请求不符合条件 404请求资源不存在
**5XX：**服务端内部错误

我们在公司还会自己定义更多的状态码
一般情况下从10000开始

2、HTML

2.1、HTML简介

超文本标记语言
是所有游览器展示的页面必备的！！

浏览器展示的界面 我们也称之为HTML页面 存储HTML语言的文件后缀一般是 .html

HTML 没有任何逻辑 所见即所得

HTML 注释语法

<!--注释内容-->

HTML 文件结构

<html> 所有的代码都必须写在html标签内部
    <head></head> head内的数据一般都不是给用户看的
    <body></body> body内的数据就是浏览器展示给用户看的
</html>

HTML 标签分类

  1. 单标签（自闭和标签）

    <img/>

  2. 双标签

    <a></a>

HTML 代码是不讲究缩进的 我们只是习惯了python的缩进语法

2.2、head内常见标签

标签标签功能
<title>控制网页小标题
<stytle></style>内部支持编写css控制标签样式的
<link>引入外部css文件
<script></script>内部支持编写JS代码 还可以通过src属性引入外部JS文件
<meta>通过内部属性的不同 可以有很多功能

2.3、body内基本标签

标签字符功能
h1~h6标题标签
<p></p>段落标签
<hr>分割线
<br>换行
<u></u>下划线
<s></s>删除线
<b></b>加粗

注意：有很多样式 可能存在很多种标签可以实现

块儿级标签 与行内 标签
块儿级标签：一块标签独占一行

行内标签：内部文本多大自身就占多大

2.4、body内基本符号

字符功能
&nbsp空格
gt大于号
lt小于号
amp&
yen￥
reg注册
copy版权

2.5、body内布局标签

div
块儿级标签

spen
行内标签

块儿级标签是可以通过CSS调整为不独占一行
标签之间很多时候可以嵌套

  • 块儿级可以嵌套任何类型标签

    p标签虽然是块儿级标签 但是不能嵌套块儿级标签

    行内标签只能嵌套行内标签

2.6、body内常见标签

a标签<a></a>

链接标签

  • herf可以填写网址 点击自动跳转
    • herf 还可以填写其他标签的id值 实现锚点功能
  • target 可以控制是否新建页面跳转
    • _self在原来页面跳转
    • _blank新起一个页面跳转

img 标签
图片标签

  • src 填写图片地址（网络地址 本地地址）
  • title 鼠标悬浮在图片上回提示信息
  • alt图片加载失败提示信息
  • width 调整图片高度
    • 上诉两给调整一个 另一个就会等比缩放

2.7、标签两个重大属性

下面的两个属性都是用来快速定位 需要操作的标签
id属性（一对一管理）
类似于身份证号 再同一个html页面上id值不能重复

classs属性（批量管理）
类似于分组 多个标签可以拥有相同的class值

2.8、列表标签

无序列表

<ul> 可以添加参数 type="disc 实心默认 circle空心圆 square实心方块 nonne无样式"
	<li>python</li>
    <li>mysql</li>
    <li>httml</li>
</ul>
  • 页面上有规则的横向或者竖向的多个元素几乎使用的都是无序列表

有序列表

<ol type="1" start="10"> #第一个参数 为序号样式 第二个起始点
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ol>

表格标签

<table> #表格
    <thead> 字段
        <tr> 添加一行
            <th>id</th> 字段一 th相比td 粗一点
            <th>name</th>
            <th>pwd</th>
        </tr>
    </thead>
    <tbody> 数据
        <tr> 添加一行数据
            <td>001</td>
            <td>kk</td>
            <td>123</td>
        </tr>
    </tbody>
</table>

3、form 表单标签

能够 获取用户（输入 选择 上传）的数据并发送给后端服务器
form表单 能完成上述操作的不仅仅只有它

<form action="" method=""></form>

action 属性
用于控制数据的提交地址 不写的话就是朝当前页面所在地址提交
method 控制数据提交的方式

用户输入 账号密码

<p>账号：<input type="text"></p>
<p>密码：<input type="password"></p>

用户日期选择

<p>birthday:<input type="date"></p>

用户 邮箱填写 自动识别 @

<p>emil:<input type="email">
</p>

单选（性别）

<p>hoby:
	<input type="checkbox" name="hoby"> 唱
    <input type="checkbox" name="hoby"> 跳
    <input type="checkbox" name="hoby"> 篮球
</p>

上传文件 单个或多个

上传单个文件
<p>file:
    <input type="file">
</p>

上传多个文件
<p>file:
    <input type="file" multiple>
</p>

下拉单选

<p>province:
    <select name="" id="">
    	<option value="">上海</option>
        <option value="">浙江</option>
        <option value="">北京</option>
    </select>
</p>

下拉多选

<p>GF:
    <select name="" id="" multiple>
        <option value="">kk</option>
        <option value="">ming</option>
        <option value="">hong</option>
    </select>
</p>

大内容文本框

<p>简介
    <textarea name="" id="" cols="30" rows="10"></textarea>
</p>

提交数据

<input type="submit" value="用户注册">

重置输入的内容

<input type="reset" value="重置内容">

无功能按钮
可以后期自己添加功能

<input type="button" name="无功能按钮">

3.1、获取用户输入的标签两大重要属性

name 属性
类似于字典的键

value 属性
类似于字典的值

form表单在朝后端发送得到得数据时候 标签必须要有name 否则不会发送该标签得值

获取用户输入得input 标签理论上需要label配合使用

<p>
    <label for="username"> 这一步 可以让 输入框前得 注释能够被点击
        账号：<input type="text" mame="username" placeholder="账号" id="username"></label>
</p>

获取用户输入input标签 也可以添加背景提示
placeholder

<p>
    <label for="pwd">密码：<input tyep="text" name="password" placeholder="密码" id="pwd"></label>
</p>

获取的用户输入的标签如果不是让用户自己写而是选择 那么标签需要自己写value

<p>
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女
</p>

<p>
    <input type="checkbox" name="hoby" value="basketball" checked="checked">篮球
</p>

<select name="province" id="">
    <option value="sh">上海</option>
</select>

针对radio 和 checkbox 可以默认选中
checked="checked" 如果属性名和属性值 相等 那么可以简写成checked

<p>
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female" checked>女
</p>

针对option标签也可以默认选中
selected

4、CSS层叠样式表

调整标签样式
语法结构

选择器 {
    属性名1;属性值1;
    属性名2；属性值2；
}

**注释语法 **

/*注释内容*/

三种编写CSS的方式

  1. head 中 style标签内部直接编写（学习阶段使用 方便）
  2. head 中link标签引入外部css文件（最正规）
  3. 直接在标签内部通过style属性编写（不推荐）

4.1、CSS选择器

4.2、CSS基本选择器

选择标签
直接编写标签名来查找标签

/*查找所有的div标签 并将内部的文本颜色变为绿色*/
div{
    color:green;
}

类选择器
通过编写class值来查找标签

/*朝朝所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/ 
.c1{
    color:red;
}

id选择器
通过编写 id的值来精确查找标签

/*查找id值是d1的标签 并将内部的文本颜色 改为清色*/
#d1 {
    color:aquamarine;
}

通用选择器
查找所有的标签

查找所有的标签 并将内部的文本颜色改为蓝色
*{
    color:bulue;
}

4.3、css组合选择器

后代选择器
两个选择器之间空格隔开 查找前面选择器获取到的标签内所有符号 空格后面选择器要求标签

/*查找div 标签内部所有的 span （后代）*/
#d1 span {
    color:blue;
}

儿子选择器
两个选择器之间大于号隔开 查找前面选择器获取到的标签 内部第一层级符合大于号后面选择器要求的标签

/*朝div标签内所有的儿子span*/
#d1>span{
    color:orange
}

毗邻选择器
两个选择器 加号隔开 查找前面选择器取到标签下方 紧挨着的一个 符合加号后面选择器要求的标签

#d1+span {
    color:red;
}

弟弟选择器
两个选择器 波浪隔开 查找 前面选择器取到的标签 下方所有的符合波浪后面选择器 要求的标签

#d1~span {
    color:green;
}

4.4CSS属性选择器

所有标签除了有自己默认的属性之外 还可以拥有自定义的任意属性

  • 默认属性：id class
  • 自定义属性：x=1 y=2

查找属性名含有name的标签

[name]{
    background-color:red;  /*背景色设为 红色*/
}

查找属性名含有那么 并且值是username 的标签

[name='username']{
    background-color:blue;
}

查找input标签并且 属性名含有name值是username的

input[name='username']{}

4.5、选择器之分组与嵌套

当多个选择器找到的标签需要调整相同的样式 那么可以合并

div,p,span {
    color:red;
}

并且合并的选择器彼此不干扰 也没有类型限制

#d1,c1,span {
    color:red;
}

还可以在选择器基础上添加额外的选择 使得查找更精确

span.c1 {
    color:red;
}

div#d1 {
    color:blue;
}

4.6、CSS选择器之伪类选择器

a标签 默认的颜色 有两种 紫色跟蓝色
紫色：谅解地址一家被点过了
蓝色：链接地址从来没有点击过

/*鼠标悬浮上去 之后样式改变 适用于所有含有文本的标签*/
a:hover {
    color: blue;
}
a

4.7、CSS选择器 之伪元素 选择器

通过CSS代码来操作标签的文本内容

/*将文本第一个字 修改样式*/
p:first-letter {
      font-size: 30px;
      color: red;
    }

/*在文本前面 添加文本 内容 且该内容 不会被选中*/
p:before {
        content:"哈哈哈哈!";
        color:red;
    }

/* 在文本后面添加 内容 且 该文本不会被选中*/
p:after {
      content: "哦哦哦";
      color: aqua;
    }
  • 为元素选择可以用在解决标签浮动所带来的负面影响 也可以用来做数据的防爬

4.8、选择器优先级

当多个选择器查找到相同的标签 改不同的样式 那么标签该听谁的

  1. 选择器相同 引入位置不同

    就近原则 覆盖上面 内容

  2. 选择器不同的情况

    行内 > id选择器 > 类选择器 > 标签选择器

    越精确 优先级越高

**强制修改标签样式的操作 !important **

div {
    color:red !import
}

4.9、字体样式

width 属性可以为元素设置宽度
height 属性可以为元素设置高度
块级标签才能设置宽度，行内标签的宽度由内容来决定

/*设置 字体大小*/
p {
    font=size:30px;
}

/*设置 字体更细*/
p {
    font-weight:lighter;
}

/*设置字体颜色样式*/
p {
    color: red; /*字体颜色*/
    color: rgb(61, 25, 21);  /*三基色 设定颜色*/
    color: #153d2f;  /*十六进制设置颜色*/
    color: rgba(252, 190, 6, 0.84);  /*设置颜色透明度（最后一位数）*/
}

设置文本居中

p {
    text-align:center;
}

取消文本下划线

a {
    text-decoration:none;
}

首行缩进

p {
    text-indent:32px;  字标签 默认16px 这是首行缩进两字符
}

5、背景属性

设置背景颜色

body {
    background-color: #b7b6b6;
}

设置图片为背景

div#d1 {
        height:1000px;  /*调整块 高度*/
        width: 1000px;  /*调整长度*/
        background-image: url("https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c" );
        background-position: -342px 0px  /* 图片 漂移
}
  • 可以通过 网页开发者工具 来调整 图片移动

填写填充

div#d1 {
        height:1000px;  /*调整块 高度*/
        width: 1000px;  /*调整长度*/
        background-image: url("https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c" );
        background-position: -342px 0px  /* 图片 漂移
}

6、边框属性

给上下左右设定 边框

#d2 {
    height:1000px;
    width: 1000px;
    background-image: url("https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c" );
    border: 5px solid black;
}    
#d2 {
    height:1000px;
    width: 1000px;
    background-image: url("https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c" );
    /*border: 5px solid black;*/
	border-left: 10px solid red;  /**给左边 边框设置样式/
    border-top: 10px solid blue;  /**给上边边 边框设置样式/
    border-right: 10px solid green;  /**给右边 边框设置样式/
    border-bottom: 10px solid red;  /**给下面边 边框设置样式/

边框画圆
border-radius:50%

#d2 {
    height:500px;
    width: 500px;
    background-image: url("https://picx.zhimg.com/v2-c4f561cf0c23beced24b56f7fcac997c_r.jpg?source=1940ef5c" );
    /*border: 5px solid black;*/
    background-position: center center;
    border-radius: 50%;  /*在块儿级标签 画圆*/
}

7、display

隐藏标签
display:none

<style>
div {
    display: none;
}
</style>
  • 多用于非法用途 将原本的 显示的 账户输入窗口的 k值 清除
  • 创建一个隐藏标签 来绑定一个账户 用户已提交 提交的是该kv数据

使元素同时具备行内元素和块儿级元素的特点
display:"inline-block"

8、盒子模型

所有的标签的可以看成是一个快递盒

比喻实际名词
两个快递盒之间的距离标签之间的距离外边距（margin）
快递盒的厚度标签的边框边框（border）
盒子内物体距离盒子内壁内部文本与边框的距离内边距（padding）
物体自身的大小标签内部的内容内容

外边距操作
margin

margin-top:20px;  /*设置上外边距*/
margin-left:100px;  /*设置左外边距*/
margin-right:100px; /*设置右外边距*/
margin-bottom: 100px;  /*设置 下外边距为100px*/

body 标签自带8px的外边距

margin:0;简写形式 作用域上下左右
margin: 10px 20px; 上下 左右
margin: 10px 20px 30px 40px; 上右下左（顺时针）
margin 还可以让内部标签 居中显示
margin：100px auto 仅限于水平方向 居中
  • padding 使用方式与margin一致

9、浮动布局

靠左 或靠右浮动：float:left\right
浮动会造成 父标签坍陷 这是一个不好的现象 因为会引起歧义
解决福哦那个造成的父亲标签塌陷

.clearfix:after{
    content: '';  /*空文本*/
    display: block;  /*让其变成块儿级*/
    clear:both;  /*让其左右两边蹦年右浮动元素*/
}
  • 提前写好 上述的css擦欧总 遇到标签塌陷就给标签添加 clearfix类值 即可
  • 游览器针对文本 时优先展示的（浮动的元素如果 遮挡会想办法展示）

溢出属性

overflow属性值作用
visble默认值，内容不会被修剪，会是呈现在元素框之外
hidden内容会被修剪，并且其余内容是不可见的
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit规定从父元素继承 overflow 属性的值

10、定位

static（静态）
所有标签默认都不能直接通过定位修改位置 必须切换成下面三种之一

relatice（相对 定位）
相对于标签原来的位置咋定位

absolute（绝对定位）
基于已经定位过的父标签左定位（如果没有父表则以body为参照）

fixed（固定定位）
相对于浏览器窗口做定位

10.1、z-index

浏览器界面其实是一个三维坐标 z轴指向用户

11、JavaScript

跟java没有关系 主要是伪类噌热度

JavaScript 与 ECMASript的区别

  • 前者是后者的规划 后者是前者的一种实现
  • EcmaScript不是JavaScript唯一的部分 也不是唯一被标准化的部分
  • 完整的JavaScript 由以下三个不同的部分组成
    • 核心（ECMAScript）
    • 文档对象模型（DOM）
    • 浏览器对象模型（BOM）

JavaScript 是一门编程有传言（NodeJS 是能够 执行js在后端服务器运行的工具）

11.1、html引入js的方式

通过script标签键 直接编写js代码

<script>
	在这里写js代码
</script>

引入js文件 通过script 标签中 src属性 导入js文件

11.2、js变量与常量

在js中声明 变量和 常量 都需要使用关键字

  • var：全局有效
  • let：如果在局部名称空间中使用那么仅仅在局部名称空间有效
  • const：定义常量

JS也是动态类型：变量名绑定的数据值类型不固定

var name='jason'
name = 123
name =[11,22,33,]

11.3、js数据类型之数值类型

在js中常看数据类型可以使用typef

在js中整型浮点型称为数值类型number

parseInt()  //整数
parseFloat（） //小数

NaN : Not a Number不是一个数字

11.4、js数据类型之字符串类型

字符串 string

var name ='kk'  //单引号
let name = "kk"  //双引号
var s1 = '你好啊$(name)'  //格式化输出

11.5、js数据类型之布尔值

bollean 布尔值

  1. True
  2. Faise
    1. （空字符串）
    2. 0
    3. null
    4. undefined
    5. NaN

null 与 undefined 的区别
null 可以理解为曾经拥有过 现在暂时空了

undefined 可以理解为从来没拥有过

11.6、js数据类型之对象（object）

JS中也是一切皆对象
所有事物都是对象：字符串、数组、函数···

11.6.1、对象之数组

就是python中列表

// 直接生成
let l1 = [12,'kk',22,44,55]

forEACH

将 数组的每个元素传递给回调函数 类似于for循环

forEach(function(value,index,arr)(value,index,arr))

l1.forEach(function(a){console.log(a)})

splice

l1 = [11,22,33,44]
l1.splice(2,1,'kk')
l1
[11,22,'kk',44,]

map

l1 = [11,22,33,44,55]

l1.map(function(value){return value + 1})
[12,23,34,45,56]

11.7、js类型之自定义对象（）

自定义对象 相当于 python中的字典
自定义对象 定义方式

//方式一
let d1 ={'name':'jason','pwd':123}

//方式二
let = new object()

获取键值的方式
d1 点键的方式获取值

11.8、运算符

自增
加号位置不同 其预算的流程也不同

var x=10
var res1=x++; //加号 值 后面 那么就是先赋值 在在进行自增
var res2=++x; //加号在值前面 那么就是 先自增 在赋值

弱等于 与强等于
==弱等于 js会自动 转换成相同数据类型
===强等于 不会自动转换 等于oython中的==

逻辑运算符

符号功能
&&等于python中and
||等于pyton中or
！等于python中的not

12、js流程控制

12.1、分支结构

  1. 单if分支

    if(条件){条件成立之后执行的代码}

  2. if····else分支

    if(条件){
    条件链成立之后执行的代码
}
else{
    条件不成立之后执行的代码
}

  3. if···elif····else分支

    if(条件1){
    条件1成立之后执行的代码
}
else if(条件2){
        条件1 不成立条件2成立执行的代码
        }
else{
    上述条件都不满足 后执行的代码
}

12.2、循环结构

for循环

for(let i=1;i<101;i++){
    console.log(i)
}

打印数组内所有数据值

l1 = [11,22,33,44,55,66,77,88,'kk']
for(let i=0 i<length(l1);i++){
    console.log(l1[i])
}

while循环

while(条件){
    循环体代码
}

13、函数

函数语法结构

function 函数名(形参){
    函数体代码
    return 返回值
}
function func(a,b){
    console.log(a,b)
}

参数个数 不需要一一对应 如果想要限制参数个数需要使用内置 关键字 arguments

function func(a,b){
    if(arguments.length===2){
        console.log(a,b)
    }
    else{
        console.log('参数个数不足')
    }
}

匿名函数

function(a,b){
    return a+b;
}

箭头函数

var f - function(v){
    return V;
}
var f = v => v;

14、js内置对象

类似于python中的内置函数名或内置模块
固定语法

var 变量名 = new 内置对象名();

14.1、Date日期对象

let Dobj = new Date();
dobj
Thu Aug 25 2022 20:38:11 GMT+0800 (中国标准时间)

dobj.toLocaleString()
'2022/8/28 20:38:11'

14.2、JSON 序列化对象

对象转换成JSON格式字符串
JSON.stringify

let d1 ={name:'kk',pwd:123}
let sd1 = JSON,stringify(d1)

JSON格式字符串 转换为对象
JSON.parse

let d2 =JSOn parse(sd1)

14.2、RegExp 正则

两种定义方式

//方式一:
let reg1 = new RegEXp("^[a-zA-Z][a-zA-Z0-9][5,11]");

//方式二:
let reg2 = /^[a-zA-Z][a-zA-Z0-9][5,11]"/

正则表达式中不能有空格 且不能为空，为空自动匹配undefined

15、BOM

BOM：浏览器对象模型
通过写js代码可以跟浏览器交互

打开 一个网页窗口

window.open('http://www.baidu.com','','height=100px,width=100px,left=500px')

关闭一个自己创建的页面

window.close()

客户端绝大部分信息
userAgent 作为游览器的标识

window.navigtor.userAgent

15.1、history对象

控制网页前进 或 返回上一页
history.forward()
history.back()

//控制网页 前进一页
window.history.forward()

//控制网页返回上一页
window.history.back()

15.2、location对象

查看当前网址 或跳转 至某网址
location.href

//查看当前网址
window.location.href
'https://fanyi.youdao.com/'

//跳转至 某网页
window.location.href='www.baidu,com'

刷新网页 重新加载
location.reload()

window.location.reload()

15.3、弹出框

确认框
confirm()
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

警告框
alert()

提示框
当提示框出现后 用户需要输入值 然后点击确认或取消按钮 才能继续操作prompt

15.4、计时器

关键字作用
setTimeout定时任务
setInterval循环定时任务
clearInterval停止循环定时任务

16、DOM

16.1、查找标签

根据id 查找 标签
结果是标签本身

document.getElementById('d1')

<div id="d1">div</div>

根据class 查找标签
结果是数组

document.getElementsByClassName('c1')

HTMLCollection(2) [div.c1, p.c1]

根据 标签类型 获取标签
结果是数组

document.getElementsByTagName('div')

//HTMLCollection(3) [div#d1, div.c1, div, d1: div#d1]

**涉及到DOM的操作 的JS代码应该放在文档的body标签 内部的最下方 **

16.2、操作节点

创建标签对象

let aEle = document.createElement('a')  //创建一个a标签

给标签添加属性

aEle.href = 'https://www.baidu.com'  //给a标签添加 href属性

给标签添加文本

aEle.innerText = '前往百度主页'  //给给 a标签 添加 文本

<a href="https://www.baidu.com">前往百度主页</a>

让创建 的标签添加至文档流中（页面上）
该方式为动态创建 临时有效

div1Ele.append(aEle)  //通过查找到的标签 点 append 添加 创建好的a标签 值末尾

div1Ele.insertBefore(aEle,div1Ele.firstElementChild)  //添加至指定节点的前面
16.2、属性操作

设置标签的自定义属性
setAttribute

//setAttribute 标签可以定义 默认属性也可以定义自定义属性
img1.setAttribute('src','111.png')

img1.setAttribute('aaa','kkk')
  • 通过点的形式定义的 属性 只能是默认属性
16.3、文本操作

获取标签内所有文本与标签（可以创建子标签）
innerHTML

div1Ele.innerHTML

'\n  div\n  <a href="https://www.baidu.com">前往百度主页</a><p>div&gt;p\n  <span>div&gt;p&gt;span</span>\n  </p>\n  <span>div&gt;span</span>\n  <p>div&gt;p</p>\n'  //不同的标签通过撬棍 符分割

//创建子标签
div1Ele.innerHTML= '<h3> 这是innerHTML</h5>'
div1Ele
<div id="d1"><h3> 这是innerHTML</h3></div>

获取标签内文本
innerText

div1Ele.innerText

'div 前往百度主页\n\ndiv>p div>p>span\n\ndiv>span\n\ndiv>p'

17、JS操作扩展

17.1、JS获取用户输入

获取用户输入 选择
通过 标签 点 value 获取属性值

document.getElementById('d1').value

'1241414'

获取用户上传的文件数据
通过 标签 点 file 获取文件 数组 通过[0] 取值 获取文件对象

document.getElementById('d5').files[0]

File {name: '1825659-20191014121946473-388162006.jpg', lastModified: 1658977320884, lastModifiedDate: Thu Jul 28 2022 11:02:00 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 99607, …}

17.2、JS类属性操作

获取标签 所有class的属性值
classList

let div1Ele = document.getElementsByClassName('c1')[0]  // 存储classname 含有c1的第一个标签
div1Ele.classList //获取该标签 所有类属性值 数组

添加 标签 class属性值
classList.add()

div1Ele.classList.add('c5')

判断 标签 class属性值是否存在
classList.contains()

div1Ele.classList.contains('c5') //返回值为布尔值

true

删除 标签 classs属性值
classList.remove()

div1Ele.classList.remove('c3')

当该属性值 不存在时 添加 该属性值 存在便删除该属性值

div1Ele.classList.toggle('c3')  //存在即删除 并返回False
false

//不存在 尾部追加 返回True
17.3、 JS样式操作

通过 style关键字 来修改标签样式
style

改变 标签 背景颜色

pEle.style.backgroundColor = 'red'

18、事件

事件可以简单理解为是给html标签绑定了一些额外的功能(能够触发js代码的运行)

18.1、绑定事件

建议使用方式二绑定

// 方式一：通过添加属性绑 执行的函数
<input type="button" value="开关" onclick="func1()">
<script>
function func1(){
    alert('bong!!')
}
</script>

//方式二：通过 标签.属性 绑定执行的函数 可以查找到多个标签 批量绑定
<button id="d1">
    双击
</button>
<script>
let btnEle = document.getElementById('d1')
btnEle.ondblclick = function(this){
    alert('peng!!')
}
</script>

事件中 关键字this
this 指代的是当前被操作的标签对象

let btnEle = document.getElementById('d1')
btnEle.onclick = function(this){
    alert('peng!!')
    console.log(this)
}

等待文档加载完毕之后再取执行一些代码
windowd.conload

19、jQuery 基本使用

jQuery() >>> $()

19.1、选择器

id选择器

$("#d1")

标签选择器

$("tagName")

class选择器

$(".className")

19.2、基本筛选器

$('div:first') //第一个
$('div:last') //最后一个
$('div:eq(index)') //通过索引 取值
$('div:even') //匹配所有索引值为偶数的元素 从0开始计数
$('div:odd')  // 匹配所欲索引值为计数得元素，从0 开始
$('div:gt(index)') //匹配所有大于给定索引值得元素
$('div:lt(index)')  //匹配所有小于给定索引值得元素
$('div:not(元素选择器)') //筛选掉所欲满足not条件得标签
$('div:has(元素选择器)')  //选取所有包含一个或多个标签在其内得标签（指得是从后代元素找）

19.3、表单筛选器

可以看成是属性选择器优化而来

$(':checked')
$('input:checked')

常用 表单筛选器

$(':text')
$(':password')
$(':file')
$(':radio')
$(':checkbox')
$(':submit')
$(':reset')
$(':button')
$(':enabled')
$(':disabled')
$(':checked')
$(':selected')
Tao.686
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第一周考试错题回顾
a1026472254的博客
08-01 981
第一周考试错题回顾 . 1关于Python变量赋值下面表达式写法正确的是（A ） A x = y = z = 1 B x, y, z = 1 C x == 1 D x += 1 （没声明x） 2下列代码的执行结果肯定不会是(D ) print(int(random.random()*6-3)); .random方法只能在0-1间取值 A -1 B 0 C 2 D 3 3下列代码的运行结果是（ ...
华清远见嵌入式培训_第一周回顾与反思
Anccccc的博客
08-27 1966
在华清远见嵌入式培训的第一个周，第一周学的东西不多但很细，借此文章，以这种碎碎念的方式回顾重点、重复盲点、加深印象，复习、总结和反思本周的学习，仅供后期自己回顾使用。
往期回顾和开学第二周总结
wsdchong的博客
09-20 1038
爱焦虑的人运气都不会太差。有危机意识，未雨绸缪，才能不被温水煮青蛙； 凡是过往，皆是序章。现在才刚刚开始。风起云涌就是现在。 一主一备双引擎、开源商业两相宜。
【2022第十二周总结-三月份月度总结】包含对第九 ， 十，十一周的回顾。
qq_43398404的博客
03-27 1642
本周回顾： 个人博客网站搭建 使用的是华为云加宝塔搭建，宝塔挺方便，但是下周最好抽一下时间完成一下linux的学习。 使用vue实现前后端分离的前端项目创建过程最好写一篇文章记录一下。先下载node.js（包含了node和npm，这里说一下node其实就是相当于声明引用了哪些“节点”，这和html里面的link标签是一样的，相当于声明了依赖），用命令行检查一下，这个时候node和npm都是装好的，npm就比较厉害了可以通过 在项目目录下直接npm install把项目依赖都解决掉 --》 创建基本的vue
Java学习第11周总结
lucasshj的博客
04-19 119
周总结 收获 本周除了学习了新的内容（注解，请求响应），还拓展了反射的内容，结合自定义连接池，周末的作业相对综合一些，我将以前学过的jdbc的内容也结合运用起来，也算是一个回顾，老师的讲课风格很细致，也会经常带我们回顾，慢慢发现了边学边回顾的重要性。 不足 本周学习的方法好多，而且很多也结合到了之前的知识点，需要串联起来，掌握的还不够牢固，课下有时间会回顾一些之前的内容 状态 本周学习内容个人感觉...
第十周作业
weixin_30263277的博客
04-30 1535
这个作业属于那个课程 刘未鹏的博客：怎样花两年时间面试一个人 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/MS/homework/3167 我在这个课程的目标是 知道自己以后的发展方向 这个作业在那个具体方面帮助我实现目标 知道自己以后的学习方向 参考文献 怎样花两年时间面试一个人 一、刘未鹏的博客：怎样花两年时间面试一...
第十一周 周结 （堆栈）
weixin_45603327的博客
05-11 121
题目链接：https://vjudge.net/contest/372390 再次回顾了之前所学的内容，没啥进步，会卡在贪心问题上面，贪心问题需要加强训练训练。堆栈记住用法，多熟练就OK吧。晚安晚安。
第十三届蓝桥杯 个人经历回顾及经验总结
热门推荐
lishuaigell的博客
04-11 2万+
每解决一类问题可以总结出一些模板，下次遇到同类问题可以直接套用。我建议这些知识点都要掌握：BFS，DFS，DFS回溯，DFS动态规划，DP动态规划，剪枝，01背包，完全背包，多重背包，分组背包，并查集，种类并查集，二分，哈希，贪心，哈夫曼树，优先队列，双指针，滑动窗口，快速幂，Floyd，余数定理，gcd，lcm，唯一分解定理–求质数求约数，三角数前n项和公式，公比为2的等比数列前n项和公式，前缀和，差分，单调栈，布什博弈，威左夫博弈，（反）尼姆博弈，最长递增子序列，最长公共子序列，编辑距离，分割等和子集等
回顾一年的工作历程_回顾历程、总结经验、展望未来
weixin_39621075的博客
12-30 1466
原标题：回顾历程、总结经验、展望未来小孩儿小孩儿你别馋过了腊八就是年新年的钟声已然敲响是不是在为即将到来的春节小长假感到兴奋？淡定 淡定享受美好假期之前我们还有更重要的事情要做哦～ 1月12日第十八项目部2018年度项目经理(执行经理)述职会在万科项目召开，第十八项目部项目经理周军、专职副书记崔波，商务经理李文栋、技术总工吴波、各项目负责人及班子成员共计32人参加此次会议。会议由项目负责人工作述...
第十一周学习周报20181119-20181125
千秋莫负
11-25 453
一、回顾《Person Transfer GAN to Bridge Domain Gap for Person Re-Identification》 二、看了一篇新的论文 《Upaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks》 1.背景，现有重识别的不足 1）许多image-to-image...
五年级数学上册第十五周往年数学知识点.doc
10-14
往年数学知识点
人工智能课件第一次课42.pptx
01-07
课程成绩由平时表现和实验成绩组成，占总分的20%，而期末考试则占据了80分，将在第十周随堂进行。 课程内容分为四大部分： 1. **绪论**（3学时） - **人工智能的界定**：探讨人工智能的定义，强调AI是设计具有...
老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料
05-15
├─(98) 02 python全栈3 day54 Django内容回顾（一）.avi ├─(99) 03 python全栈3 day54 Django内容回顾（二）.avi ├─(100) 04 python全栈3 day54 Django内容回顾（三）.avi ├─(101) 05 python全栈3 day54 ...
编程狂人第十二期
02-17
编程狂人是推酷网旗下的周刊，每周一发布，并且同步发布pdf离线版本，内容以开发技术，编程语言，框架等为主，并且配有一周IT业界新闻！ 目录 业界新闻 斯坦福大学发布免费在线文本分析工具 Parse发布Bolts，一个...
管理学(周三多第六版)笔记及考试重点整理(长春工程学院管理学院)学创编.pdf
03-12
此外，书中还讨论了决策、计划、组织设计、组织变革和组织文化等主题，如第五章涉及决策过程和决策方法，第六章和第七章探讨计划的制定和实施，第八章讲解组织设计，第九章涉及组织变革和组织文化的构建，第十一章和...
日常工作记录目录
与海
06-21 193
EasyExcel实现二维码下载与展示
netcore 生成验证码
qq_51172697的博客
06-20 306
提供一个生成验证码和校验的接口。
若以框架学习（3），echarts结合后端数据展示，暂时完结。
最新发布
m0_51798113的博客
06-22 238
前三天，参加毕业典礼，领毕业证，顿时感到空落落的失去感，没有工作，啥也没有，总感觉一辈子白活了。因为数据太多了，有1000条，其实可以限制下不查那么多。由于自己前端技术问题，迟迟不能完成，所以我又网上搜了下。调整了下代码，终于完成了前后端echars数据。前端当初没搞懂，后端就太简单了，返回一个map。修改后的代码如下，大家可以参考下。然后在main.js中配置。自己的界面先用一个案例。导入echartss。//导入echats。
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 365
【element 】修改下拉菜单
计算机专业实习日记12篇.docx
11-17
第一天，我在公司的人事部经理的介绍下，认识了IT部门的李主管以及负责指导我的员工们。李主管向我介绍了公司的基本情况和部门的运作，并详细讲解了实习过程的计划和安排。按照计划，我开始学习ASP和SQL的基础知识的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值