代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 移动端适应 -->
<!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
<title>关键点</title>
<style>
* {
padding: 0;
margin: 0;
}
:root {
--bl: 15px; /*变量的定义*/
--cs: var(--bl); /*变量的调用*/
--xk: calc((100% - 1) * 5); /*代数式应用*/
}
div {
white-space: normal; /* 文本强制不换行 */
text-overflow: ellipsis; /* 文本溢出显示省略号 */
font-weight: normal; /* 加粗 */
cursor: pointer; /* 鼠标显示小手 */
/*
default 默认鼠标
not-allowed 红色禁止样式标准
move 移动样式
*/
vertical-align: top; /*设置垂直对齐方式-本质是调整基线位置*/
}
textarea {
resize: none; /*控制输入框是否可以被用户拖动缩放*/
outline: none; /*移除元素获得焦点时的效果*/
}
.clear-fixed::after {
content: "";
display: block;
height: 0;
visibility: hidden; /*定义当前元素是否可见 但是无论是否可见当前元素都会占据相应的空间*/
clear: both;
}
.clear-fixed {
*zoom: 1;
}
</style>
</head>
<body>
<!--
background
img position/size attachment repeat color
可缩写为:
background: url("img/自治团-html.jpg") left top/100% 100% scroll
no-repeat #0ff;
-->
<!-- textarea 文本输入框 -->
<textarea name="" id="" cols="30" rows="10" disabled="true"></textarea>
<!-- disabled属性↑由于控制是否禁用元素 -->
<a href="javascript:;"></a>
<!-- 置空a标签的跳转效果将其转换为执行一条空的js代码 -->
</body>
<script>
// 多人开发时隔绝其他代码的影响
/*
1.(function () {
})()
2.;
3.!+;
*/
//Number String Boolean null undefined Object
/*字符串
1)concat();用于连接字符串 不改变变量的实际值
2)substr(x,y);截取 不改变变量的实际值
参数一:截取的起始位置
参数二:截取的长度 若不写则从初始位置到最后全部截取
3)replace(x,y);替换 不改变变量的实际值
参数一:需要替换的值
参数二:被替换的值的目标值
注:只能替换第一个匹配值
4)split();将字符串转换为数组 不改变变量的实际值
参数:分割依据eg:split(",");以","分割将字符串为数组
5)length;获取str字符串的长度
6)indexOf();索引值
7)lastIndexOf("x");返回指定文本在字符串中最后一次出现的索引值
8)slice(x,y);截取 不改变原字符串
参数一:截取的起始位置的索引值
参数二:结束位置的索引值 可省略 若省略 这直接从起始位置截取到最后
8)trim();去除字符串开头的空格
*/
//数组操作↓
// concat(数组) 连接多个数组
// push()
// push()在数组末尾添加一个或多个元素 得到一个新的数组
// push()括号后面直接写想添加的元素或者数组 返回的也是新的数组
// shift();删除数组的第一个元素(角标为0的元素)
// unshift()在数组的前面添加新的元素
// pop();删除数组的最后一个元素()里面不要写参数
// includes();检查数组中是否有括号中的值 返回返回值为true/fales
// reverse
// reverse();翻转数组的内容()中不需要参数
// sort()
// sort();对数组进行排序
// slice
// slice(s,e);截取数组中的内容
// s指起始元素的小角标(从零开始计数)
// e结束位置元素的小角标(不包含当前元素)
// splice
// splice();从数组中的指定位置添加或者删除元素
// 参数一:开始添加或者删除的元素的角标(包含当前元素)
// 参数二:选择删除几个元素 可以写0
// 参数三及其之后的参数:向数组中添加的内容
var id = document.getElementById("id");
var className = document.getElementsByClassName("className");
var tagName = document.getElementsByTagName("tagName");
var querySelsector = document.querySelector("selector");
var querySelectorAll = document.querySelectorAll("querySelectorAll");
id.onclick = function () {}; //点击事件
id.onfocus = function () {}; //获得焦点事件
id.onblur = function () {}; //失去焦点事件
id.onmouseenter = function () {}; //鼠标进入事件
id.onmouseover = function () {}; //鼠标在元素内移动事件
id.onmouseout = function () {}; //鼠标到达元素外事件
id.onmouseleave = function () {}; //鼠标离开事件
id.onchange = function () {}; //当用户改变input输入框内容时执行一段Javascript代码 (也可用于在多选框修改输入值时调用需要的方法)
//---------------------------------------------------------------------
// clientX：当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；
// clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；
// screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
// screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
// offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
// offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置
//---------------------------------------------------------------------
// scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
// clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
// offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变
//---------------------------------------------------------------------
// 网页被卷去的高： document.body.scrollTop
// 网页被卷去的左： document.body.scrollLeft
//---------------------------------------------------------------------
/*
js 浮点型数据的算法存在缺陷 可通过一定的方法来解决
parseFloat(需要四舍五入的数据)*10需要运算的数据/10
需要保留小数位数时的方法↓
Math.round(parseFloat(需要四舍五入的数据)*10)/10 这样是保留1位小数
Math.round(parseFloat(需要四舍五入的数据)*100)/100 这样是保留两位小数
Math.round(parseFloat(需要四舍五入的数据)*1000)/1000 这样就保留三位小数了，以此类推
*/
//---------------------------------------------------------------------
/*
关于节点
(获取的节点是引用传递.当修改节点的父节点时并不是拷贝了一个节点过去而是直接将该节点移入了新的父节点下 原位置会变为空位子 此时会影响到在旧父节点下获取的节点集合所在的伪数组 使得伪数组的keyName和Key值出现从上往下的填补移动走的节点的现象 此时会导致调用该伪数组的函数或代码的结果出现错乱)
*/
//createElement 创建元素节点
var li = document.createElement("li"),
li1 = document.createElement("li");
//添加元素节点 格式: 父级元素.子级元素后添加节点 类似数组的push
var ul = document.querySelector("ul");
ul.appendChild(li);
li.innerText = "老二";
li1.innerText = "老三";
//插入节点 在指定元素的前面添加节点 格式: 父级节点.insertBefore(要添加的节点,指定元素)
ul.insertBefore(li1, ul.children[0]);
//----------------------------------------------------------------------
// scrollTo(Left,Top); 是scrollLeft和scrollTop的合写
/*
本地储存的优点
1.减少网络流量 一旦保存在本地后就可以避免像服务器发送我们的请求
2.性能好 从本地读取数据比服务器上的快很多 浏览器的缓存 可以达到秒显
cookie: 大小限制在4kb左右 主要用途在于保存登录信息 比如某些网站记住登录密码 保存在本地 生命周期有限制 可以是手动删除 关闭浏览器后cookie会被清除
Local Storage: h5新加入的技术 兼容性好 能被ie8 以上浏览器支持 存储的周期较长 可以存储5mb的信息 用于持久化本地存储 除手动删除外该数据不会失效
session Storage: 与Local Storage类似 可以储存10mb的信息 但是存储数据的生命周期不同 仅在当前网页会话下生效 一但关闭页面或者浏览器存储数据就会被清楚
方法
媒介.setItem("name", val)
媒介.getItem("name")
媒介.removeItem("name")
媒介.clear() // 清空
*/
//---------------------------------ES6---------------------------------
// 剩余参数
var sum = (...arrs) => {
let total = 0;
arrs.forEach((item) => (total += item));
return total;
};
</script>
<script src="../../JavaScript基础/00_jq/jquery.min.js"></script>
<script>
// JQ骚操作
$("className.eq(" + index + ")");
// JQ特殊方法
$().show(); // 显示 参数为数字时为动画效果
$().hide(); // 隐藏 参数为数字时为动画效果
$().eq(index); // 获取对应索引值的元素
// 节点操作
$().children("元素查找依据"); // 查找子节点
$().find("元素查找依据"); //查找后代节点
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手