总结js常用的dom操作（js的dom操作API）
前言很多同学用惯了jquery操作dom，让他们用js操作的时候，常常力不从心，本文总结了常用的js的dom操作方法，供大家翻阅！其实说起js操作dom，我很久很久之前有篇文章，jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法，但是不是很系统。不能说是API，今天来系统总结一下！
节点查找API
document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是> document，其它元素也支持 getElementsByClassName 方法；document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。document ...
笔记-13-JavaScript初探
登录页面示例点击明文和密码切换显示。
<!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> * { margin: 0; padding: 0; } .box1 { width: 600px; height: 400px; margin: 100px auto; text-align: center; ...
笔记-012-综合案例 学成在线
学成在线案例对前面所学知识的巩固。
<!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="css/index.css"></head><body> <!-- 头部 start --> <div class="header w"> <!-- logo 部分 --> <div class="logo&quo ...
笔记-011-浮动(float)
清除浮动为什么？
父级没高度
子盒子浮动了
影响了下面的布局
清除浮动的方式（4种）
额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .fahter{ width: 400px; border: 1px soli ...
笔记-010-CSS盒子模型
盒子模型页面布局要学习三大核心，盒子模型、浮动、定位。
网页布局的本质网页布局过程：
先准备好相关的网页元素，网页元素基本都是盒子BOX。
利用CSS设置好盒子样式，然后摆放到相应位置。
往盒子里装内容。网页布局的核心本质：利用CSS摆盒子。
盒子模型（BOX Model）组成所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器。CSS盒子模型本质是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、实际内容。
边框（border） border-width, border-style, border-color。 /* 用法一：明确指定宽度值 *//* 当给定一个宽度时，该宽度作用于选定元素的所有边框 */border-width: 5px;/* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 */border-width: 2px 1.5em;/* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 */border-width: 1px 2em 1.5cm;/* 当给定四个宽度时，该宽度分别依次作用 ...
笔记-009-CSS的三大特性
CSS的三大特性CSS有三个非常重要的特性：层叠性、继承性、优先级/font>
层叠性相同选择器给设置同样的样式时，此时就会出现一个样式覆盖另一个冲突的样式，层叠性主要解决样式冲突的问题。层叠性原则：
样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
样式不冲突，不会层叠。
继承性子标签会继承父标签的某些样式，如文本颜色和字号。简单理解就是子承父业。
恰当的使用可以简化代码，降低CSS样式的复杂性。
子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及color属性）
行高的继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title& ...
笔记-008-CSS的背景
CSS的背景背景属性可以设置：背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
<!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> .div1 { width: 400px; height: 260px; display: inline-block; background-color: pink; } .div2 { ...
笔记-007-CSS元素显示模式
元素显示模式简介指元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。HTML元素一般分为块元素和行内元素。
块元素常见的块元素有： h1~h6, p, div, ul, ol, li 等，<div>是最典型的块元素。块级元素特点：
自己独占一行。
高度、宽度、外边距及内边距都可以控制。
宽度默认是容器（父元素）的100%。
是一个容器及盒子，里面可以放行内元素和块级元素
行内元素常见的行内元素有： a, strrong, b, em, i, del, s, ins, u, span等，<span>是最典型的行内元素，也称内联元素行内元素的特点：
相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
注意：
链接里面不能再放链接。
特殊情况链接<a>里面可以放块级元素，但是给<a>转换成块级显示模式最安全。
行内块元素行内元素有几个特殊的标签<img />、<input ...
一键安装脚本为CentOS 7 添加Swap交换分区
方法一：输入
wget https://cdn.jsdelivr.net/gh/evrstr/shell@latest/swap.sh && chmod +x swap.sh && bash swap.sh
然后回车，根据提示设置swap。
方法二：1.新建脚本swap.sh#!/usr/bin/env bashGreen="\033[32m"Font="\033[0m"Red="\033[31m" #root权限root_need(){ if [[ $EUID -ne 0 ]]; then echo -e "${Red}Error:This script must be run as root!${Font}" exit 1 fi}#检测ovzovz_no(){ if [[ -d "/proc/vz" ]]; then ec ...
笔记-006-CSS基础选择器
CSS基础选择器标签选择器标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
<!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: brown; font-size: 48px; } div { color: cornflowerblue; ...
| {{date}} | {{temperature}} | {{humidity}} | ||
| {{time}} | ||||
| {{ip}} | {{city}} | {{daylight}} | ||
