js api part4

其他事件

页面加载事件

外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
原因:有些时候需要等页面资源全部处理完了做一些事情,老代码喜欢把 script 写在 head 中,这时候直接找 dom 元素找不到。
事件名: load
监听页面所有资源加载完毕:给 window 添加 load 事件

 不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件

                        当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像等完全加载
事件名: DOMContentLoaded
监听页面DOM加载完毕:给 document 添加 DOMContentLoaded 事件

页面滚动事件

滚动条在滚动的时候持续触发的事件。很多网页需要检测用户把页面滚动到某个区域后做一些处理, 比如固定导航栏,比如返回顶部。
事件名:scroll
监听整个页面滚动:window.addEventListenter.('scroll',function(){console.log('man!')})

scroll不会冒泡,要想给单独标签加上滚动条可以直接写在这个标签上

scrollLeft 和 scrollTop (属性)
获取被卷去的大小,获取元素内容往左、往上滚出去看不到的距离,这两个值是可读写的, 

<script>const div = document.querySelector('div')// 页面滚动事件window.addEventListener('scroll', function () {// 获取html元素写法  // document.documentElement  const n = document.documentElement.scrollTopif (n >= 100) {div.style.display = 'block'} else {div.style.display = 'none'}})</script>

 

返回顶部

    <script>// 点击返回页面顶部const backTop = document.querySelector('#backTop')backTop.addEventListener('click', function () {// 可读写// document.documentElement.scrollTop = 0window.scrollTo(0, 0)})</script>

小兔鲜显示导航和返回顶部案例

将融合在综合案例中来写

页面尺寸事件

window.addEventListener('resize',function(){console.log(manbaout)})

检测屏幕宽度 

这里其实有一个源码

元素尺寸与位置

就是通过js的方式,得到 元素在页面中的位置
●  获取宽高: offsetWidth和offsetHeight (内容 + padding + border)
获取元素的自身宽高、包含元素自身设置的宽高、padding、border。                                           获取的是数值,方便计算。 
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
●  获取位置:
1.offsetLeft和offsetTop
获取元素距离自己 定位父级元素 的左、上距离, 如果都没有则以 文档左上角 为准。
注意:offsetLeft和offsetTop 是只读属性

仿京东效果导航栏案例

<!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"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.content {overflow: hidden;width: 1000px;height: 3000px;background-color: pink;margin: 0 auto;}.backtop {display: none;width: 50px;left: 50%;margin: 0 0 0 505px;position: fixed;bottom: 60px;z-index: 100;}.backtop a {height: 50px;width: 50px;background: url(./images/bg2.png) 0 -600px no-repeat;opacity: 0.35;overflow: hidden;display: block;text-indent: -999em;cursor: pointer;}.header {position: fixed;top: -80px;left: 0;width: 100%;height: 80px;background-color: purple;text-align: center;color: #fff;line-height: 80px;font-size: 30px;transition: all .3s;}.sk {width: 300px;height: 300px;background-color: skyblue;margin-top: 600px;}</style>
</head><body><div class="header">我是顶部导航栏</div><div class="content"><div class="sk">秒杀模块</div></div><div class="backtop"><img src="./images/close2.png" alt=""><a href="javascript:;"></a></div><script>// 获取 headerlet header = document.querySelector('.header');// 获取sklet sk = document.querySelector('.sk');// 当窗口滚动距离 大于或者等于 sk距离父亲的距离 的时候 让header显示window.addEventListener('scroll', function () {// 网页距离 : document.documentElement// scrollTop : 是元素内容滚动的距离// offsetTop : 是距离自己定位离父元素的距离if (document.documentElement.scrollTop >= sk.offsetTop) {//让顶部元素显示header.style.top = 0;} else {// 让顶部元素隐藏header.style.top = '-80px';}});</script>
</body></html>

哔哩哔哩小红色滑块

缺少代码,但是有核心思想

通过视口来获得元素位置

<style>
body{
height: 2000px;
}
div {
width:200px; height: 200px; background-color:
pink; margin: 100px;
}
</style> 
</head> 
<body>
<div></div> 
<script>
const div = document.querySelector('div') 
console.log(div.getBoundingClientRect()) 
</script>
</body> 

 不用锚点链接做小兔鲜电梯导航

  
<script>// 第一大模块,页面滑动可以显示和隐藏(function () {// 获取元素const entry = document.querySelector('.xtx_entry')const elevator = document.querySelector('.xtx-elevator')// 1. 当页面滚动大于 300像素,就显示 电梯导航// 2. 给页面添加滚动事件window.addEventListener('scroll', function () {// 被卷去的头部大于 300 const n = document.documentElement.scrollTopelevator.style.opacity = n >= entry.offsetTop ? 1 : 0})// 点击返回页面顶部const backTop = document.querySelector('#backTop')backTop.addEventListener('click', function () {// 可读写// document.documentElement.scrollTop = 0window.scrollTo(0, 0)})})();// 第二第三都放到另外一个执行函数里面(function () {// 2. 点击页面可以滑动 const list = document.querySelector('.xtx-elevator-list')list.addEventListener('click', function (e) {// console.log(11)if (e.target.tagName === 'A' && e.target.dataset.name) {// 排他思想  // 先移除原来的类active // 先获取这个active的对象const old = document.querySelector('.xtx-elevator-list .active')// console.log(old)// 判断 如果原来有active类的对象,就移除类,如果开始就没有对象,就不删除,所以不报错if (old) old.classList.remove('active')// 当前元素添加 active e.target.classList.add('active')// 获得自定义属性  new   topic // console.log(e.target.dataset.name)// 根据小盒子的自定义属性值 去选择 对应的大盒子// console.log(document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop)// 获得对应大盒子的 offsetTopconst top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop// 让页面滚动到对应的位置document.documentElement.scrollTop = top}})// 3. 页面滚动,可以根据大盒子选 小盒子 添加 active 类window.addEventListener('scroll', function () {//  3.1  先移除类 // 先获取这个active的对象const old = document.querySelector('.xtx-elevator-list .active')// console.log(old)// 判断 如果原来有active类的对象,就移除类,如果开始就没有对象,就不删除,所以不报错if (old) old.classList.remove('active')// 3.2 判断页面当前滑动的位置,选择小盒子// 获取4个大盒子const news = document.querySelector('.xtx_goods_new')const popular = document.querySelector('.xtx_goods_popular')const brand = document.querySelector('.xtx_goods_brand')const topic = document.querySelector('.xtx_goods_topic')const n = document.documentElement.scrollTopif (n >= news.offsetTop && n < popular.offsetTop) {// 选择第一个小盒子document.querySelector('[data-name=new]').classList.add('active')} else if (n >= popular.offsetTop && n < brand.offsetTop) {document.querySelector('[data-name=popular]').classList.add('active')} else if (n >= brand.offsetTop && n < topic.offsetTop) {document.querySelector('[data-name=brand]').classList.add('active')} else if (n >= topic.offsetTop) {document.querySelector('[data-name=topic]').classList.add('active')}})})();</script>

日期对象

实例化

const date=new Date()//得到当前时间
const date1=new Date('2022-5-1 08:30:00')//指定时间

目标:能够使用日期对象中的方法写出常见日期
使用场景:因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式
getFullYear()获得年份获取四位年份

getMonth()获得月份取值为0~11

getDate()获取月份中的每一天,不同月份取值也不相同

getDay()获取星期,取值为0~6

getHours()获取小时,取值为0~23

getMinutes()获取分钟,取值为0~59

getSeconds()获取秒,取值为0~59 

页面显示日期

<style>
div{width:300px;
height:40px;
border:1px solid pink;
text-align:center;
line-height:50px;
}
</style>
</head>
<body><div></div><script>const div = document.querySelector('div')function getMyDate() {const date = new Date()let h = date.getHours()let m = date.getMinutes()let s = date.getSeconds()h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : sreturn `今天是: ${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}号 ${h}:${m}:${s}`}div.innerHTML = getMyDate()setInterval(function () {div.innerHTML = getMyDate()}, 1000)</script>
</body>

这是自定义格式,不想写可以用系统的。

<body>
<div></div> 
<script>
const div = document.querySelector('div') 
//得到日期对象
const date = new Date()
div.innerHTML = date.toLocaleString() // 2022/4/1 09:41:21 
setInterval(function () {
const date = new Date()
div.innerHTML = date.toLocaleString() // 2022/4/1 09:41:21 
},1000)div.innerHTML = date.toLocaLeDateString() // 2022/4/1 
div.innerHTML = date.toLocaleTimeString() // 09:41:21 </script>
</body> 

时间戳

实际开发中,经常和后端对接口的时候就经常用到这个时间戳

使用场景: 如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成
时间戳:是指1970年01月01日00时00分00秒起至现在的 毫秒数 ,是一种特殊的计量时间的方式
算法:
将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
比如:将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms,1000ms 转换为就是 0小时0分1秒

 

1. 使用 getTime() 方法
const date = new Date()
console.log(date.getTime())
2.简写 +new Date()

重点记住 +new Date()     因为可以返回当前时间戳或者指定的时间戳

console.log(+new Date())
3. 使用 Date.now()

console.log(Date.now())     但是只能得到当前的时间戳, 而前面两种可以返回指定时间的时间戳

毕业倒计时效果

<!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" <!DOCTYPE html><style>.countdown {width: 240px;height: 305px;text-align: center;line-height: 1;color:#fff;background-color:brown;/* background-size: 240px; *//* float: Left;*/overflow: hidden;}.countdown .next {font-size: 16px;margin: 25px 0 14px;}.countdown .title {font-size: 33px;}.countdown .tips {margin-top: 80px;font-size: 23px;}.countdown small {font-size: 17px;}.countdown .clock {width: 142px;margin: 18px auto 0;overflow: hidden;}.countdown .clock span,.countdown .clock i {display: block;text-align: center;line-height: 34px;font-size: 23px;float: left;}.countdown.clock span {width: 34px;height: 34px;border-radius: 2px;background-color: □#303430;}.countdown .clock i {width: 20px;font-style: normal;}</style><body><div class="countdown"><p class="next">今天是2222年2月22日</p><p class="title">下班倒计时</p><p class="clock"><span id="hour">00</span><i>:</i><span id="minutes">25</span><i>:</i><span id="scond">20</span></p><p class="tips">18: 30: 00下课</p></div><script>// 函数封装 getCountTimefunction getCountTime() {// 1. 得到当前的时间戳const now = +new Date()// 2. 得到将来的时间戳const last = +new Date('2022-4-1 18:30:00')// console.log(now, last)// 3. 得到剩余的时间戳 count  记得转换为 秒数const count = (last - now) / 1000// console.log(count)// 4. 转换为时分秒// h = parseInt(总秒数 / 60 / 60 % 24)      // 计算小时// m = parseInt(总秒数 / 60 % 60)           // 计算分数// s = parseInt(总秒数 % 60)                // 计算当前秒数// let d = parseInt(count / 60 / 60 / 24)  // 计算当前天数let h = parseInt(count / 60 / 60 % 24)h = h < 10 ? '0' + h : hlet m = parseInt(count / 60 % 60)m = m < 10 ? '0' + m : mlet s = parseInt(count % 60)s = s < 10 ? '0' + s : sconsole.log(h, m, s)// 把时分秒写到对应的盒子里面document.querySelector('#hour').innerHTML = hdocument.querySelector('#minutes').innerHTML = mdocument.querySelector('#scond').innerHTML = s}// 先调用一次getCountTime()// 开启定时器setInterval(getCountTime, 1000)</script>
</body></html>

添加随机颜色

DOM节点操作

DOM节点:DOM树里每一个内容都称之为节点

元素节点: 所有的标签 比如 body、 div,html 是根节点

属性节点:所有的属性 比如 href

文本节点:所有的文本

查找父结点

 这是举了例子,XX.parentNode即可获得这个父对象

<body>
<div class="yeye">
<div class="dad">
<div class="baby">x</div>
</div>
</div>
<script>
const baby = document.querySelector('.baby')
console.log(baby)//返回dom
console.log(baby.parentNode)//返回dom对象
console.log(baby.parentNode.parentNode)//返回dom对象
</script>
</body>
<body>
<div class="box">
我是广告
<div class="box1">X</div>
</div>
<div class="box">
我是广告
<div class="box1">X</div>
</div>
<script>
const closeBtn = document.querySelectorAll('.box1')
for (let i = 0; i < closeBtn.length; i+) {
closeBtn[i].addEventlistener('click', function(){
this. parentNode. style.display = 'none'
})</script>
</body>

子节点

childNodes 属性,获得所有子节点、包括文本节点(空格、换行)、注释节点等               children 属性(重点) 仅获得所有元素节点,返回的还是一个 伪数组, 例如:父元素.children

兄弟节点

1. 下一个兄弟节点: nextElementSibling 属性
2. 上一个兄弟节点: previousElementSibling 属性

增加节点

document.createElement('标签名')

追加节点

要想在界面看到,还得插入到某个父元素中
(1) 插入到父元素的最后一个子元素: 父元素.appendChild(要插入的元素)
(2)插入到父元素中某个子元素的前面:父元素.insertBefore(要插入的元素,在哪个元素前面)

你们错了,其实这种方式开发中很少用,都是用框架

最开始没有元素会得到一个空数组,空数组[0]返回undefined 然后你继续用insertBefore 也不会报错的,刚刚试过了,最开始没有也不会报错

学成在线案例渲染

缺少源码...?

克隆节点和删除节点

元素.cloneNode(布尔值)

特殊情况下我们新增节点按如下操作:                                                                                            1.复制一个原有的节点  2.把复制的节点放到指定的元素内部
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值。

若为true,则克隆时会包含后代节点一起克隆。                                                                              若为false(默认),则克隆时不包含后代节点。

 深拷贝与浅拷贝

<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const ul = document.querySelector('ul')
//1克隆节点元素.cloneNode(true)
// const li1 = ul.children[0].cloneNode(true)
// console.log(li1)
//2,追加
ul.appendChild(ul.children[0].cloneNode(true))
</script>
</body>

在 JavaScript 原生 DOM 操作中,要删除元素必须通过 父元素删除。
语法: 父元素.removeChlid(子元素), 如不存在父子关系则删除不成功
删除节点和隐藏节点(display:none) 是有区别的:
隐藏节点还是存在的,但是删除,则从html中删除节点
显然的

Mobile端事件

目标:了解M端常见的事件
移动端也有自己独特的地方。比如触屏事件touch (也称触摸事件),Android和IOS都有。
• 触屏事件touch (也称触摸事件),Android和IOS都有。
• touch对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)

对屏幕或者触控板操作。
•常见的触屏事件如下:
触屏touch事件 说明
touchstart " 手指到一个DOM元素时触发
touchmove 手指在一个DOM元素上滑动时触发
touchend 手指从一个DOM元素上移开时触发

学习轮播 插件的基本过程
1. 熟悉官网,了解这个插件可以完成什么需求   https://www.swiper.com.cn/
2. 看在线演示,找到符合自己需求的demo    https://www.swiper.com.cn/demo/index.html
3. 查看基本使用流程    https://www.swiper.com.cn/usage/index.html
4. 查看APi文档,去配置自己的插件    https://www.swiper.com.cn/api/index.html
注意:多个swiper同时使用的时候, 类名需要注意区分

下载好后,打开package..............

P123

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/7319.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

获取转转数据,研究完转转请求,tx在算法方面很友好。

本篇文章仅供学习讨论。 文章中涉及到的代码、实例&#xff0c;仅是个人日常学习研究的部分成果。 如有不当&#xff0c;请联系删除。 在研究完阿里的算法以后&#xff08;其实很难说研究完&#xff0c;还有很多内容没有研究透&#xff0c;只能说暂时告一段落&#xff09;&…

服务智能化公共生活场景人员检测计数,基于YOLOv5全系列参数模型【n/s/m/l/x】开发构建公共生活场景下人员检测计数识别系统

在当今社会&#xff0c;随着科技的飞速发展&#xff0c;各种智能化系统已广泛应用于各个领域&#xff0c;特别是在人员密集、流动性大的场合&#xff0c;如商场、火车站、景区等&#xff0c;智能人员检测计数系统发挥着至关重要的作用。特别是在特殊时期&#xff0c;如节假日、…

cmake进阶:变量的作用域说明三(从函数作用域方面)

一. 简介 前一篇文章从函数作用域方面学习了 变量的作用域。文章如下&#xff1a; cmake进阶&#xff1a;变量的作用域说明一&#xff08;从函数作用域方面&#xff09;-CSDN博客cmake进阶&#xff1a;变量的作用域说明二&#xff08;从函数作用域方面&#xff09;-CSDN博客…

C++:多继承虚继承

在C中&#xff0c;虚继承&#xff08;Virtual Inheritance&#xff09;是一种特殊的继承方式&#xff0c;用于解决菱形继承&#xff08;Diamond Inheritance&#xff09;问题。菱形继承指的是一个类同时继承自两个或更多个具有共同基类的类&#xff0c;从而导致了多个实例同一个…

Problem 5: Whack-A-Mole打地鼠

实战题&#xff1a;打地鼠 内容如附件所示&#xff1a; 测试数据为:1,2,4,8,9,10,11,14 答案为&#xff1a;10,2,4 原始分布&#xff1a; 击打10号 击打2号 击打4号 要求&#xff0c;所示实例解以图示的方式给出&#xff0c;并且5组测试数据都需要测试&#xff0c;…

Labels and Databases for Mac:强大的标签与数据库管理工具

Labels and Databases for Mac是一款集标签制作与数据库管理于一体的强大工具&#xff0c;专为Mac用户打造&#xff0c;旨在提供高效、便捷的标签制作与数据管理体验。 这款软件拥有丰富的内置标签格式&#xff0c;用户可轻松创建各种标签、信封和卡片&#xff0c;满足个性化需…

PopChar for Mac v10.1激活版:特殊字符输入工具

PopChar for Mac是一款专为Mac用户设计的字符输入工具&#xff0c;其简单直观的功能使得查找和插入特殊字符变得轻而易举。 PopChar for Mac v10.1激活版下载 首先&#xff0c;PopChar为Mac提供了访问所有字体字符的能力&#xff0c;包括那些难以通过键盘直接输入的字符。用户只…

STM32编译前置条件配置

本文基于stm32f104系列芯片&#xff0c;记录编程代码前需要的操作&#xff1a; 添加库文件 在ST官网下载标准库STM32F10x_StdPeriph_Lib_V3.5.0&#xff0c;解压后&#xff0c;得到以下界面 启动文件 进入Libraries&#xff0c;然后进入CMSIS&#xff0c;再进入CM3&#xff…

【DevOps】探索Linux命令行世界:深入了解Shell的力量

目录 一、Linux Shell 详细介绍 1. Shell基础概念 2. Shell的功能特性 3. 常用Shell命令与技巧 4. 高级Shell特性与实践 二、常见的Shell及其比较 1. Bash (Bourne Again SHell) 2. Zsh (Z Shell) 3. Fish (Friendly Interactive SHell) 4. Ksh (Korn SHell) 5. Csh …

青春送温暖 立夏寄真情

&#xff08;通讯员&#xff1a;赵灿飞 图&#xff1a;杨美、孙红浪&#xff09; 在青春洋溢的五月&#xff0c;为传承中华民族尊老敬老的传统美德&#xff0c;促进当代青年与老人的跨代交流&#xff0c;增强青年的社会责任感和使命感&#xff0c;传递正能量和关爱困难群体…

linux下sd卡的备份与还原

在Ubuntu上制作SD卡备份镜像&#xff0c;你可以使用dd命令。以下是一个基本的步骤和示例代码&#xff1a; 插入SD卡到电脑。确定SD卡设备路径&#xff0c;使用lsblk或sudo fdisk -l命令。确定备份镜像文件的路径。使用dd命令制作备份。 示例代码&#xff1a; bash# 查看连接的…

ubuntu 安装单节点HBase

下载HBase mkdir -p /home/ellis/HBase/ cd /home/ellis/HBase/ wget https://downloads.apache.org/hbase/2.5.8/hbase-2.5.8-bin.tar.gz tar -xvf hbase-2.5.8-bin.tar.gz安装java jdk sudo apt install openjdk-11-jdksudo vim /etc/profileexport JAVA_HOME/usr/lib/jvm/…

(delphi11最新学习资料) Object Pascal 学习笔记---第11章第1节(混合引用中的错误)

11.1.3 混合引用中的错误 ​ 在使用对象时&#xff0c;你通常应该只使用对象变量或接口变量来访问它们。混合使用这两种方法会破坏对象 Pascal 所提供的引用计数机制&#xff0c;并可能导致极难跟踪的内存错误。在实践中&#xff0c;如果你决定使用接口&#xff0c;你可能应该…

windows驱动开发-内核编程技术汇总(五)

使用安全字符串函数 和应用层不一样的是&#xff0c;windows内核完全使用Unicode字符串&#xff0c;许多支持AsciiC的windowsAPI&#xff0c;是在应用层完成项Unicode的切换的。许多系统安全问题是由缓冲区处理不善和生成的缓冲区溢出引起的。 糟糕的缓冲区处理通常与字符串操…

利用super解决问题

1 问题 在继承问题中&#xff0c;我们可以怎么使用super函数呢&#xff1f; 2 方法 super() 函数是用于调用父类(超类)的一个方法&#xff0c;目的是用来解决多重继承时父类的查找问题。Python中类的初始化都是init(), 所以父类和子类的初始化方式都是init(), 但是如果子类初始…

代码随想录算法训练营第56天| 583. 两个字符串的删除操作*、 72. 编辑距离*

583. 两个字符串的删除操作* 力扣题目链接 代码 示例代码 class Solution { public:int minDistance(string word1, string word2) {vector<vector<int>> dp(word1.size() 1, vector<int>(word2.size() 1));for (int i 0; i < word1.size(); i) dp…

代码随想录算法训练营Day12 | 二叉树理论基础、递归遍历、迭代遍历、统一迭代

今日收获&#xff1a; 二叉树的递归遍历二叉树的迭代遍历&#xff0c;中序的迭代法和前、后序不一样二叉树的统一迭代法主要是用了标记法来实现&#xff08;要处理的节点放入栈之后&#xff0c;紧接着放入一个空指针作为标记&#xff09; 二叉树理论基础篇 题目分类 题目分…

第一篇:刚接触测试你应该知道什么

欢迎你接触软件测试这一行业。 刚接触它时&#xff0c;你肯定或多或少会有疑惑&#xff0c;我该做什么&#xff1f;大家口口相传的软件测试就是 【点点点】 真的是你日常的工作吗&#xff1f; 那么本文我将陪你一起&#xff0c;对我们刚接触到测试这个工作以后&#xff0c;应该…

创建混合索引的原则

创建SQL混合索引的原则如下&#xff1a; 选择合适的列&#xff1a;混合索引应该包含那些经常用于WHERE、JOIN、ORDER BY和GROUP BY子句中的列。选择最常被查询的列&#xff0c;以提高查询的性能。 考虑列的顺序&#xff1a;混合索引的列的顺序应该根据查询的频率和使用的方式进…

x86中汇编伪指令.byte,.short,.int,.long,.word的理解

1[.byte] .byte expressions: 定义一个字节, 并为之分配空间. 2[.short] .short expressions: 定义一个短整型, 并为之分配空间. 3[.int] .int expressions: 定义一个整型,并为之分配空间. 4[.long] .long expressions: 定义一个长整型, 并为之分配空间. 5[.word] .word expres…