web前端基础笔记
关注
分享
扫一扫
文章平均质量分 50
web前端基础笔记
路宇
强大自己是解决问题的唯一方法。
展开
-
JavaScript 使用axios工具包发送Ajax请求
使用axios工具包，三种方法get请求post请求使用axios函数发送ajax请求<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-原创 2022-01-04 17:12:57 · 1362 阅读 · 0 评论 -
JavaScript 在jQuery发送Ajax请求
前言:在jQuery中发送Ajax请求的三种方法：get请求post请求通用型方法Ajax三种方法的具体使用看以下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con原创 2022-01-03 17:40:53 · 712 阅读 · 0 评论 -
JavaScript 中使用Ajax进行网络请求响应JSON字符串数据
一、首先看服务端代码const express = require('express');const app = express();app.get('/', (request, response) => { response.send('HELLO Android');});app.post('/server', (request, response) => { //设置响应头 设置允许跨域 response.setHeader('Access-Control原创 2022-01-03 11:46:19 · 1887 阅读 · 0 评论 -
JavaScript 中使用Ajax进行网络post请求和get请求
前言：使用Ajax进行网络请求，默认是异步请求，而且不需要刷新页面，就可以发送请求，获取服务端返回来的数据。一、Ajax的get请求做一个实例来使用Ajax,点击button按钮后，在div中显示服务器返回来的response响应体内容，具体注释已经在代码中给出了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-U原创 2021-12-31 17:48:41 · 4608 阅读 · 0 评论 -
JavaScript 使用对象字面量创建对象、使用new Object创建对象
前言：一、使用对象字面量创建对象对象字面量： 就是花括号{ }里面包含了表达这个具体事物(对象)的属性和方法。{ }里面采取键值对的形式表示键：相当于属性名值：相当于属性值，可以是任意类型的值(数字类型，字符串类型，布尔类型，函数类型等)演示代码如下，注释已经在代码中给出<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>原创 2021-12-30 17:13:58 · 5469 阅读 · 0 评论 -
CSS 中过渡动画(transition)的使用
前言： 通过模仿进度条进度，来练习使用过渡动画。HTML代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .bar { margin: 0 auto; width: 150px; height: 15px; border: 1px solid red;原创 2021-12-27 15:18:31 · 1117 阅读 · 0 评论 -
JavaScript 使用js修改页面元素
下面我们通过使用js来修改p标签内文字的内容：HTML如下：<div style="margin: 20px 0"> <button id="showTime">显示当前时间</button> </div> <div id="time">2021-12-19</div>之后通过js来修改id=“time” div中的元素，代码如下： var showTime = document.qu原创 2021-12-19 14:28:37 · 4119 阅读 · 1 评论 -
JavaScript基础之操作元素，修改元素属性
实现效果：js代码如下：<body> <button id="android">Android开发</button> <button id="java">Java开发</button><br> <img src="img/10b92e374bebdbe9b648ba29d1d7e72.png" title="Android"> <script type="text/javascript">原创 2021-10-27 16:09:15 · 354 阅读 · 0 评论 -
JavaScript 使用原生js和jquery两种方法，实现tab栏切换
代码如下，具体注释已经在代码中给出：<!DOCTYPE html><html lang="en"><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">原创 2021-12-18 22:14:43 · 1701 阅读 · 1 评论 -
CSS 中相对定位(relative)与绝对定位(absolute)的详解
position:relative 相对定位详解相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。相对定位的特点：它是相对于自己原来的位置来移动的(移动位置的时候参考点是自己原来的位置)原来在标准流的位置继续占有，后面的盒子仍然以标准流的方对待它(不脱标，继续保留原来的位置)。因此相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。position:absolute 相对定位详解绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的（拼爹型）。绝对定位的特点：如果没有祖原创 2021-12-14 22:17:22 · 6613 阅读 · 0 评论