JavaScript 使用axios工具包发送Ajax请求-爱代码爱编程
使用axios工具包，三种方法 get请求post请求使用axios函数发送ajax请求<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
JavaScript 在jQuery发送Ajax请求-爱代码爱编程
前言: 在jQuery中发送Ajax请求的三种方法： get请求post请求通用型方法Ajax三种方法的具体使用看以下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equ
JavaScript 中使用Ajax进行网络请求响应JSON字符串数据-爱代码爱编程
一、首先看服务端代码 const express = require('express'); const app = express(); app.get('/', (request, response) => { response.send('HELLO Android'); }); app.post('/server', (reques
JavaScript 中使用Ajax进行网络post请求和get请求-爱代码爱编程
前言： 使用Ajax进行网络请求，默认是异步请求，而且不需要刷新页面，就可以发送请求，获取服务端返回来的数据。 一、Ajax的get请求 做一个实例来使用Ajax,点击button按钮后，在div中显示服务器返回来的response响应体内容，具体注释已经在代码中给出了 <!DOCTYPE html> <html lang="en"
JavaScript 使用对象字面量创建对象、使用new Object创建对象-爱代码爱编程
前言： 一、使用对象字面量创建对象 对象字面量： 就是花括号{ }里面包含了表达这个具体事物(对象)的属性和方法。 { }里面采取键值对的形式表示 键：相当于属性名值：相当于属性值，可以是任意类型的值(数字类型，字符串类型，布尔类型，函数类型等)演示代码如下，注释已经在代码中给出 <!DOCTYPE html> <html>
CSS 中过渡动画(transition)的使用-爱代码爱编程
前言： 通过模仿进度条进度，来练习使用过渡动画。 HTML代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .bar { mar
JavaScript 使用js修改页面元素-爱代码爱编程
下面我们通过使用js来修改标签内文字的内容： HTML如下： <div style="margin: 20px 0"> <button id="showTime">显示当前时间</button> </div> <div id="time">2021-12-19</div
JavaScript 使用原生js和jquery两种方法，实现tab栏切换-爱代码爱编程
一、使用原生js实现tab栏切换 代码如下，具体注释已经在代码中给出： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
CSS 中相对定位(relative)与绝对定位(absolute)的详解-爱代码爱编程
position:relative 相对定位详解 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。 相对定位的特点： 它是相对于自己原来的位置来移动的(移动位置的时候参考点是自己原来的位置)原来在标准流的位置继续占有，后面的盒子仍然以标准流的方对待它(不脱标，继续保留原来的位置)。因此相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。
JavaScript基础之操作元素，修改元素属性-爱代码爱编程
实现效果： js代码如下： <body> <button id="android">Android开发</button> <button id="java">Java开发</button><br> <img src="img/10b92e374bebdbe9b648
关于字体颜色渐变-爱代码爱编程
关于文字颜色渐变处理，这样会使字体给人的可观性更强，下面介绍怎么让它变成好看有颜色的字体。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
关于文字阴影和盒子阴影-爱代码爱编程
在做一些项目时，会利用阴影来让页面变得更加优美，但这个东西，用得好就是锦上添花，用得不好那就是雪上加霜；今天主要写写关于它的用法。 首先是文字阴影：text-shadow: h-shadow v-shadow blur color; 其中： h-shadow: 必需，指水平阴影的位置，可以是负值，为负值时阴影是向左移动； v-shadow: 必需，指垂直
聊天气泡制作-爱代码爱编程
制造聊天气泡，准备一个div类名fa，如下代码： .fa { margin: 100px auto; width: 80px; height: 40px; border: 1px solid #000; position: re
三角形制作-爱代码爱编程
关于小型三角形制作，在项目中，我们会用到三角形定位到矩形盒子上就会让盒子产生倾斜效果以达到想要的目的。 首先三角形代码如下：div { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #f00; }
关于精灵图比例缩小-爱代码爱编程
我们需要在原精灵图的基础下做出比例缩小或放大，取决于一个属性：background-size** 例如：有一张精灵图的像素是400×400，我们需要将它缩小1倍，那么可以用以下语句： background: url(../images/splite.png) no-repeat -80px; width: 15px; height: 15px backg
弹性布局flex-爱代码爱编程
关于弹性布局flex的注意事项 设置了弹性布局后display:flex;其子元素的浮动float、clear、和vertical-align会失效。在没有设宽高的盒子加弹性布局后，会影响默认盒子的宽高度。使用justify-content: space-between;时一定要给它设宽度，不然会没有效果，交叉轴aligin-item: center;一
关于z-index层级关系-爱代码爱编程
重要： 层级：z-index；使用条件--------除了定位的static以外，其它定位都可以触发这个属性；浮动、标准盒子无属性； 使用场景及注意事项： 1.默认不设值后来的盒子居上(上层)； 2.父亲设置了z-index *子级无法放在父级下方(无论子级的z-index为何值)； **拼爹效应：其中一个父级小于另一个父级，那么前者子级的z-index无
关于盒子外边距合并-爱代码爱编程
外边距合并，对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上边距会与子元素的上边距合并，合并后的外边距取两者中的较大者。即使父元素的上外边距为0，也会发生合并。 即为当父盒子里的子盒子给它一个margin值时，子盒子的移动会影响父盒子一起移动： 这里当子盒子给了margin-top: 20px时，没有达到预想效果，使得与父盒子分离并距离