logic51551的博客

原创 获取节点对象的方法

var oDiv = document.querySelector('div'); 1,获取当前标签中所有的子级节点 执行结果,是一个伪数组,可以forEach() 形式是与 querySelectorAll() 获取的伪数组是一样的 console.log( oDiv.childNodes ); 2,获取当前标签中,所有的元素节点/标签节点 ...

原创 事件监听兼容方式

兼容方式 普通浏览器 标签对象.addEventListener('事件类型' , 事件处理函数) 事件类型必须是字符串形式,直接写事件类型名称,不能有on 低版本IE浏览器 标签对象.attachEvent('on事件类型' , 事件处理函数) var oDiv = document.getElementById('div'); 一般...

原创 事件的监听

作用: 如果是普通的事件绑定,相同事件类型,只能绑定一个事件处理函数 如果同一个类型,绑定多个事件处理函数,后绑定的事件会覆盖之前绑定的事件 语法: 标签对象.addEventListener(事件类型 , 事件处理函数) 第三个参数: true / false(默认值) 事件的获取方式 冒泡 : 从...

原创 存储在事件对象中的属性

1, 事件对象.offsetX 事件对象.offsetY 点击是,距离 边框线内 标签左上角 坐标 2, 事件对象.clientX 事件对象.clientY 点击时,距离 视窗窗口 左上角 坐标 3, 事件对象.pageX 事件对象.PageY 点击时,距离 页面 左上角 坐标 ...

原创 标签的一些属性

readonly 只读属性 禁止使用标签,不能操作,但是可以传参只能看,不能改,可以传参 disabled 禁用属性 禁止使用标签,不能操作,也不能传参 你就当没有这个标签 multiple 多选属性 file,select,可以按ctrl进行多选 都是 布尔属性 在JavaScrip...

原创 可视窗口的宽度高度

情况1:包括滚动条的宽度高度包含有滚动条宽度高度 滚动条的大小,有的时候是16,有的时候是17 结果只是数值 window.innerHeight 高度 window.innerWidth 宽度情况2:不包括滚动条宽度高度document.documentElement.clientHeight 高度document.documentEle...

原创 对象操作

一, 对象的基本介绍对象也是数据的集合是通过属性和属性值来定义数据属性的作用就类似于,数组的索引下标对象是没有length属性的一般从数据库获取的数据形式[{},{},{},] 数组,forEach循环 , for , for...in 对象,只能使用 for...in 循环 对象的基本操作方法 基本操...

原创 dom

获取标签对象document.getElementById()document.querySelector() 获取一个标签对象 document.getElementsByClassName() document.getElementsByClassTagName() 获取伪数组,不能forEach()循环 document.getElementsByNa...

原创 服务器、ip、域名、端口的名词解释

服务器 所谓服务器,就是装载了服务器软件的电脑 作用:可以将电脑作为一个终端,电脑中的内容可以在网上被访问 也就是你写的网页,可以通过服务器软件,被其他电脑通过地址访问到 服务器软件 : Apache 阿帕奇服务器 IP地址 每一台电脑,...

原创 Data() 对象参数的写法

方法1:常用方法// 一个字符串,来表示指定的时间// 年月日,时分秒,都是定完整// ‘2000-10-12 8:30:00’// ‘2000/10/12 8:30:00’// ‘2000 10 12 8:30:00’// ‘2000,10,12 8:30:00’ var d = new Date('2000-10-12 8:30:00');方法2:不常用的方法// 使...

原创 BOM 操作

BOM 操作// 浏览器对象模型// 可以操作浏览器的方法// 所谓的操作浏览器的方法,是各个浏览器厂商提供给我们的// 浏览器厂商允许我们操作浏览器,我们才可以操作,如果不允许,就不能操作// 各个浏览器厂商,都有自己的特点,因此,BOM操作,有兼容性需要考虑弹窗操作1,提示框 / 警告框// window.alert(‘弹出内容\n警告内容’);2，输入框// 作用: w...

原创 异步执行

所谓的异步执行 计算机程序执行分为同步执行,和异步执行 所谓的同步执行,就是正常的计算机程序执行的3大顺序流程 顺序控制语句 从上至下,从左至右 分支控制语句 if,switch 循环控制语句 for,while,do...while,for...in,forEach() ...

原创 js数组去重

indexOf()// 将原始数组中的数据,写入到新的数组中// 如果新数组中没有这个数据,indexOf() 结果是 -1 。我们再进行写入操作使用双层for循环,来完成对数组中数值的比较// 如果数值相同,就删除其中一个数值 // 从第一个数值开始循环,第一个数值和其后的所有数据进行比较 // 如果要是数值相同,就删除之后的数值 // 循环次数比较多先将...

原创 js冒泡排序

原创 js数组操作

通过索引下标来操作数组通过索引下标,来修改数组中,存储的单元的数据// 对已存在的索引下标,进行赋值,进行的是重复赋值,会覆盖之前存储的数据这里第一个值北京被替换为武汉通过索引下标,来新增数组的单元// 对不存在的索引下标,进行赋值,是新增数组单元的操作间隔索引会自动生成间隔数量相应的空白单元数组变量.unshift(新增的数据) 在数组的起始位置新增单元数组变量.push...

原创 js数组

// 数组// 所谓的数组,就是数据的集合// 基本数据类型 : 在变量中只能存储一个单元的数据;// 数组,是数据的集合,可以存储多个单元的数据 // 数组的创建方式 // 1,字面量方式 // var 变量 = [ 数据1 , 数据2 , 数据3 , ..... ]; // 在 [] 中,定义多个数据单元,中间使用逗号间隔根据数组的内容,生成...

原创 变量的作用域

作用域变量的作用范围全局作用域 / 全局变量定义在函数之外的变量局部(私有)作用域 / 局部(私有)变量定义在函数内部的变量作用域的基本原则全局变量可以在函数内部直接使用,局部变量默认只能在函数内部使用函数中变量的使用原则调用使用1,优先使用当前作用域中存储的变量2,如果当前作用域没有这个变量,去父级作用域中,找这个变量3,如果当前作用域和所有的父级作用域都没有这个变量,执...

原创 js函数

什么是函数:函数就是实现固定功能的代码块， 函数是工具,是实现功能的工具，函数是通过其中的代码,来实现所谓的功能函数的特性:// 封装: 将需要的代码,写入到函数中// 重复: 一个函数可以反复调用// 调用: 可以在任意需要位置上调用执行代码 // 函数的定义/函数的封装 所谓的封装,就是将程序,放在 函数的 { } 中,就是函数程序的封装，函数封装时,程...

原创 数据转换

NaN 是什么 为什么 NaN == NaN 执行结果是falseNaN 即 Not a Number , 不是一个数字，JS中number数据类型中除了浮点型和整数型外的一个特殊的值 NaN。NaN是用来表示是否属于number类型的一种状态: 是或否。它不是一个确切的值。当一个表达式返回了NaN 时，表示该表达式中存在不可以转化的变量,并返回了无效的结果，而不是返回了一个确切的值。如果非要...

原创 初识js

一、JavaScrip的三种语法形式和css类似：css的行内式是直接在标签内部定义css代码 ， JavaScript的行内式,也是在标签内部直接定义JavaScript代码。（不推荐使用，书写不方便，不利于重复利用）css的内部式是在head标签中,定义style标签,并通过各种选择器来定义标签样式，JavaScript的内部式是在 head标签的最后,或body标签的最后,来定义一个sc...

原创 浅谈响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。在项目中会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“...

原创 flex布局中的问题

在进行flex布局时发现父元素的宽度会自动占满上一个父元素宽度的百分之百。如果在不给父元素固定宽高，并且给子元素固定宽高的情况下，子元素是不能撑开父元素的宽高的，这也违背了flex布局的初衷。所以flex布局一般用于宽高固定的父元素此时子元素所占空间大于父元素此时最下方两个盒子已经溢出父元素了给父元素进行溢出隐藏后可直观的观察到，flex布局中的宽高一定是固定的，不会被子元素撑开...

原创 新手尝试制作小米首页

Document 应对疫情小米服务业务调整通知 小米商城 MIUI IoT 云服务 金融 ...

原创 grid网格布局。逆战班

grid网格布局是什么网格布局是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项...

原创 css动画的实例讲解（逆战班）

今天总结了css动画的主要定义和用法。animation-name(必填) //名称animation-duration(必填) //完成动画时间animation-timing-function //动画运动速度值： linear 匀速ease(默认) 变速(...