第十一周内容回顾

第十一周内容回顾

文章目录

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')
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值