- 博客(32)
- 收藏
- 关注
原创 键盘及滚轮事件
元素释放全局捕获:元素.releaseCapture();给元素设置全局捕获:元素.setCapture();什么是IE的全局捕获。
2022-09-13 21:48:11
229
1
原创 懒加载和事件对象
每一个事件都有事件对象 这个对象中用来记录和该事件有关的一些信息注意:在事件处理函数中才可以使用事件对象如何获取事件对象标准浏览器和IE浏览器 window.event老版本火狐浏览器 在事件处理函数中的第一个参数作为事件对象事件对象兼容标签.事件类型 = function(eve){ var ev = window.event || eve }事件流:当事件发生的时候 事件在父子节点之间固定的传递顺序事件流包含两种事件机制捕获型事件。
2022-09-09 22:24:04
179
原创 DOM 文档对象模型
BOM 浏览器对象模型 Browser Object Model 主要是针对浏览器进行操作 BOM给我们提供了很多工具方法,可以帮助我们快速操作浏览器window对象是整个BOM中的顶级对象 window对象包括下面的二级对象,其中二级对象中最特殊是document对象,document对象标识html节点 由document对象衍生出整个DOM。
2022-09-07 21:22:23
133
原创 自定义属性
属性的分类固有属性:系统给的 id class title自定义属性:程序员自己定义的 tag index添加自定义属性直接添加标签上(暂时获取不到)< div tag = "true" > < / div > //2.自定义属性直接写行间,可以直观看见,暂时无法获取写在行间的自定义属性 console . log(oDiv . tag);使用js添加:标签.属性名 = 属性值//3.通过js添加自定义属性,标签上看不见,但是可以直接使用 oDiv . a = true;//true。...
2022-08-31 21:30:49
1100
原创 定时器和函数封装
定时器的分类延时定时器语法: setTimeout(函数,时间)作用: 延迟一定的时间再去执行函数里面的代码,只会执行一次使用场景 :广告弹窗间歇定时器语法:setInterval(函数,时间)作用:每隔一定的时间就去执行函数中的代码 会执行多次使用场景:轮播图 倒计时 计时器 抽奖注意:定时器的时间单位是ms 1s = 1000ms。...
2022-08-30 22:44:58
65
原创 for循环
什么是属性什么是属性:存在开始标签上 属性名=属性值 例如class="box" id="wrap"固有属性:系统给定的属性 例如 class id style href src自定义属性:程序员自己定义的属性2.4.2设置和获取自定义属性如何设置和获取自定义属性......
2022-08-29 23:34:53
141
原创 流程控制语句
顺序结构(代码依次从上往下执行)选择结构(分支语句) if if-else if-else if-else switch循环结构:for while do-while for-in。
2022-08-25 22:45:29
50
原创 数据类型转换
/ 总结:Number可以转换的有:string类型(纯数字,""-0 " "-0) boolean(true-1 false-0) null(0)// parseFloat: 将数据转换成number类型,从左往右转换,遇到不能转换的或者是末尾结束,如果一开始都不能转换则是NaN 保留小数。console.log(10==="10")//false ===在进行比较的时候 不会隐式转换 必须一模一样才可以。console.log(11%2==0)//true 偶数 false 奇数。
2022-08-24 19:32:22
919
原创 JS交互
/ 2.设置样式 标签.style.样式名 = 值 注意:如果是-链接的样式 需要改成小驼峰命名 例如background-color改为backgroundColor。/*------------------------------了解-----------------------------*/// 5. 16进制 以0x开头 范围0-9 a-10 b-11 c-12 d-13 e-14 f-15。//string "检测数据"//"11" 是字符串的类型11。
2022-08-23 22:18:24
131
原创 JavaScript初识
基于对象和事件驱动的解释性脚本语言基于对象:JavaScript 是一种基于对象的语言,这意味着它能运用自己已经创建的对象,因此,许多功能可以来自脚本环境中对象的方法与脚本的相互作用。事件驱动:JavaScript 可以直接对用户或者客户输入做出响应,无须经过 web 服务器,它对用户的响应,以事件驱动的方式进行。解释性解释性:可以直接识别,读一行执行一行编译性:高级语言,c c++ ,先编译计算机能识别的,再执行(速度快)
2022-08-22 22:16:43
97
原创 定义帧动画
keyframes 动画名称(英文) {0% {/* 动画的开始 */}25% {/* 在25%的时候进行的一个动画 */}50% {/* 在50%的时候进行的一个动画 */}100% {/* 动画结束 */}}from,to表示开始、结束状态,也可以使用0%,100%定义@keyframes 动画名称(英文) {from {/* 动画开始 */}to {/* 动画结束 */}}...
2022-08-15 20:02:33
69
原创 布局技巧(等高布局)、(圣杯布局)、(双飞翼布局)
盒子层层嵌套,利用内层盒子高度变化,外层盒子的高度也会同步变化。等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。利用padding和margin负值相抵消。1.1、实现要点(需求)3.1、双飞翼实现步骤。1.2.2、实现步骤。1.3.2、实现步骤。2.2、圣杯实现步骤。...
2022-08-11 14:25:32
152
原创 移动端项目
视口简单来说就是浏览器显示页面内容的区域。视口:浏览器显示内容的屏幕区域,相当于PC端浏览器可视区 (白板区域)在PC端,正常的视口宽度就是整个浏览器的窗口可视区的宽度,会随着浏览器窗口大小的重置而缩放;...
2022-08-11 14:21:51
682
原创 弹性盒子 flex
弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和空白空间的分配操作方便,布局简单,移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中,不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括:弹性容器、弹性子元素——项目原理:为父元素设置flex属性,控制子元素的位置及排列方式应用场景 : 移动端。...
2022-08-11 14:20:05
89
原创 阿里矢量图标引入方法
注意新版iconfont支持多色图标,这些多色图标在Unicode模式下将不能使用,如果有需求建议使用symbol的引用方式。font-class是Unicode使用方式的一种变种,主要是解决Unicode书写不直观,语意不明确的问题。这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。-webkit-box-orientvertical;-webkit-line-clamp2;display-webkit-box;设置盒子的宽度(限制宽度)...
2022-07-30 00:55:53
1682
原创 BFC的特性及解决方法
原因浮动不会脱离文本流浮动的盒子会遮盖下面的盒子,但是下面盒子里的文字是不会被遮盖的,文字反而还会环绕浮动的盒子。原因垂直方向上的距离由margin决定,属于同一个BFC的两个相邻标签的margin会发生重叠。解决办法(特性6,4)bfc就是页面上的一个独立容器,容器里面的子标签不会影响外面标签。6、BFC就是页面上的一个隔离的独立容器,容器里面的子标签不会影响到外面标签,反之亦然。解决办法(特性6,4)bfc就是页面上的一个独立容器,容器里面的子标签不会影响外面标签。...
2022-07-30 00:54:46
298
原创 CSS 精灵(雪碧图、精灵图)、滑动门
css精灵英文叫法csssprites,通常被解释为“CSS图像拼合”或“CSS贴图定位”;其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position精确的定位出背景图片的位置css精灵图可以实现特殊形状的背景自由拉伸滑动,能适应不同字数的内容。...
2022-07-27 14:56:49
160
原创 CSS 定位
定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置(自由的在某个盒子内移动位置或者固定在屏幕中的某个位置)相对于元素本身的位置进行一个位置调整,占位依然在原来的位置,也就是说,元素设置相对定位后,其原来的位置还占位。定位模式通过position属性来设置,以下为常用四种定位模式静态定位,相对定位,绝对定位,固定定位。表示“将元素放在文档布局流的默认位置,HTML元素的默认值,即没有定位,遵循正常的文档流对象。top设置元素距离参照元素的顶部的位移,正值往下,负值往上。......
2022-07-27 14:52:47
1152
原创 兄弟关系、父子关系外间距塌陷解决方法,图片下间隙解决方法,图片居中的方法
图片间隙问题产生的原因父元素没有设置高度,由图片撑开,就会有图片三像素问题。方法2图片{displayblock;margin0auto;方法1父元素{text-aligncenter}1、兄弟关系外间距塌陷问题。2、父子关系外间距塌陷。...
2022-07-25 20:50:30
226
原创 CSS 盒模型
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括边距、边框、填充、和实际内容。(即装东西的容器)所有HTML标签可以看作盒子,在CSS中,"boxmodel"这一术语是用来设计和布局时使用的。(即网页布局就是利用CSS摆盒子)...
2022-07-21 22:00:20
431
原创 (基础)选择器的语法
CSS选择器是CSS规则的第一部分,每个CSS规则都以一个选择器或一组选择器为开始CSS选择器即用于“查找”(或选取)要设置样式的HTML元素的模式选择器可以分为基础选择器、复合选择器总结使用频率*通配符选择器通常用于重置样式【最不常用】。标签选择器定义的全局样式,单独使用要慎重。class类选择器基础选择器中最常用。id选择器用于页面中唯一模块,具有唯一性。...
2022-07-17 13:41:40
1576
原创 表格Table
表格由 table 标签来定义。每个表格均有若干行(由tr 标签定义),每行被分割为若干单元格(由 td 标签定义)。类比:excel表格&网页中的表格现在:用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系)注意:现在HTML 表格应该用于表格数据,而不是来实现网页布局tabletrtdth width\height语法 作用:定义表格的宽或高注:省略单位 默认pxbordercellpaddingcellspacingborderColor:
2022-07-14 11:58:36
144
原创 无序列表、有序列表、自定义列表
无序列表、有序列表、自定义列表 特性 宽度默认撑满整个父元素 高度默认由内容撑开 独立成行 自带外间距 自带内填充(内间距) 自带列表符,去掉自带列表符 li{ list-style: none; } css属性 list-style-type属性:列表符类型 circle空心圆|disc实心圆,默认值|square实心正方形|none去掉列表符 应用场景 : 新闻列表 、导航 、商品列表注意:ul.....
2022-07-13 20:32:27
700
原创 认识浏览器
web浏览器是用于读取HTML文件,并将其作为网页显示浏览器最重要的部分或其核心是渲染引擎,我们一般称为内核;内核的作用负责对网页语法的解释并渲染网页;五大浏览器:chrome、safari、Firefox、Opera、IE1.chrome 谷歌浏览器生产商:Google内核:webkit、blink2.Firefox 火狐浏览器生产商:Mozilla内核:gecko3.Safari 苹果浏览器生产商:苹果公司内核:webkit4.opera 欧朋浏览器生产商:挪威欧普拉软件公司内核:presto blin
2022-07-11 21:08:45
481
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人