- 博客(101)
- 收藏
- 关注
原创 模块与组件
1,模块与组件js模块化,模块是指能实现特定功能的js文件组件就是能实现特定功能效果的代码的集合,(这里的效果即包括结构也包括样式,一个组件可以包括html css以及js的代码片段)一个页面中可能包含多个组件,当一个页面中只有一个组件时,也不能认为组件就是页面,他俩只能是包含关系问题:用html描述一下什么是组件一个页面中,它是由多个html元素组成的,如h1,div ul,每个html标签都实现了不同的功能效果,我们就可...
2022-03-01 11:55:18
657
原创 移动端适配(rem、viewport、百分比)
1.视口:视觉视口、布局视口、完美视口(让布局视口与视觉视口相等,就是完美视口)-视觉视口:就是我们看到的手机的窗口的大小-布局视口:就是我们网页的大小(原本的布局视口要大于视觉视口)使用viewport适配就可以:(缩放比为1:1,就是让视觉视口与布局视口一样,)rem适配(root element:即根节点字体的大小):在开发时,ui提供一套设计稿,为了能在不同的手机上呈现一样的效果(一致的最终目标是等比例,手机屏幕大,元素就大,小就小,动态...
2022-03-01 09:43:04
779
原创 三种像素的区别
1.物理像素:物理像素我们有时又称为屏幕的分辨率,我们所看的图片其实是由一个一个小的发光点组成的,这些小的能显示光源的小点就是物理像素点,如电脑,屏幕的分辨率也越高,屏幕越清晰,同一个频幕上,屏幕的分辨率越高,物理像素点的个数越多,像素点越小,呈现的图片越精致越清晰2.设备独立像素和css像素:他俩的单位都是px注意:物理像素是真实存在的像素,而设备独立像素和css像素不是,他们是虚拟像素这三种像素的关系具体如下:CSS像素、设备独立像素、设备像素之间...
2022-02-28 21:35:19
1871
原创 js------JSON
注意:json中的值不能为函数下面这两个都为JSON,第一个为对象json,第二个为数组json下面这几种都为json将json转换为js对象,或将js对象转换为json:都是使用JSON的方法---parse()方法将JSON转换为对象,stringify()方法将对象转换为JSON 注意JSON这个工具类在ie7及以下版本的浏览器中不支持,...
2021-12-29 21:54:06
356
原创 js-----类的操作
1、修改元素的样式:通过style属性:通过class属性:这种是用b2将b1替换掉 如果我们希望在b1的基础上添加b2(b1和b2都有的样式,b2把b1覆盖掉),则需要使用+=的方式,注意b1和b2之间要留有空格为了防止添加以后,再次点击按钮时,还会再将已经存在的class属性添加进去,我们需要判断元素中是否含有该class属性,判断函数如下: 添加了判...
2021-12-29 15:01:02
428
原创 【无标题】
1. 在实际设计项目时,我们不进需要引入重置样式表,我们还要为当前页面创建一个样式表;由于项目往往含有很多的网页,这些网页也有一些相同的样式,所以还需要创建一个公共样式表(如解决高度塌陷的样式,网页字体的样式)如下:2.在写网页的时候内容并不是铺满整个网页的 ,一般内容区宽度为1000px或1200px左右,所以在设计网页时要看确定好网页内容区宽度,并将其设置在公共样式表里,到时候直接引入就可 ...
2021-12-28 22:18:06
134
原创 html----公共样式表
1. 在实际设计项目时,我们不进需要引入重置样式表,我们还要为当前页面创建一个样式表;由于项目往往含有很多的网页,这些网页也有一些相同的样式,所以还需要创建一个公共样式表(如解决高度塌陷的样式,网页字体的样式)如下:2.在写网页的时候内容并不是铺满整个网页的 ,一般内容区宽度为1000px或1200px左右,所以在设计网页时要看确定好网页内容区宽度,并将其设置在公共样式表里,到时候直接引入就可 ...
2021-12-28 22:17:49
654
原创 html--元素在辅轴、主轴上的分布
1、flex-wrap:设置元素在容器中是否会自动换行。 可选值:wrap----元素在容器中沿着辅线自动换行 nowrap----元素不会自动换行(默认值) wrap-reverse-------元素沿着辅线反方向自动换行 2、justify-content:设置主轴中空白空间的分配(即设置元素在主轴中如...
2021-12-28 22:15:54
287
原创 js------轮播图练习
1、当自动切换完最后一张图片时(1-5),而不是将蓝色的框再逆着倒回去(5-1),而是需要直接切换到第一张这里我们就需要将第一张图添加到最后,也作为最后一张图,此时再切换到最后一张时,直接将蓝色的框的left值设置为波第一张图的时候(即立即将它的left值设置为0),由于前后都是一样的图,这中细微的诧异是看不出来的。...
2021-12-28 22:03:22
309
原创 js------使用定时调用来实现使盒子移动的动画效果(循环定时器setInterval(function(){},循环时间)
注:获取元素样式的函数的缺点:再ie浏览器中,如果获取的样式事先没有指定,那他会返回auto,所以在使用这个函数时,对与没有设置的样式,先给他指定一个值
2021-12-27 21:17:22
1117
原创 js-----延时调用(超时定时器setTimeOut())
1、延时调用定义及与定时调用的区别:下面这个刚设置完延时调用,就取消了,所以函数一次都不会执行:
2021-12-27 19:58:05
544
原创 js------定时调用
1、要求:注:当开启多个定时调用时,就是根据这个定时器的标识来区分他们,如关闭定时器时,就需要将定时器的标识作为参数传入,来关闭这个定时器实际操作:
2021-12-27 15:41:49
379
原创 js-----BOM
1、bom:注:-window作为全局对象时,全局作用域中的变量会作为window的属性保存,全局作用域中的函数会作为window的方法保存 -bom是用来操作浏览器的,dom是用来操作网页的 -注意上面这些属性都是作为 window对象的属性来保存的,可以通过window对象来使用(window.对象),也可以直接使用,(使用时第一个字母不用大写)2.navigator:...
2021-12-27 10:59:06
180
原创 js-----拖拽2
1.setCapture:当对一个元素设置了setCapture以后,如下图,即使点击其他元素,也会将这个点击变为点击这个元素。一旦设置以后,他会一直进行捕获。我们可以通过releaseCapture来取消捕获。需要注意:相应的解决办法:如果浏览器中有该方法,则使用,没有则不适用,对releaseCapture也是如此解决办法的另一种写法 :-下面这个操作防止在鼠标松开以后,点击其他的地方,也会被box1捕获,这样点击其他的地方还是相当于点击box1....
2021-12-26 17:36:50
235
原创 js-----事件的委派
下面给ul绑定单击响应事件,这样点击每个li里面的超链接都会被触发,需要注意的是,下面背景为#bfa的整个区域都是ul,点击下面这个区域的任何部分都会触发事件不止超链接我们可以通过target来解决这个问题:...
2021-12-25 20:54:05
193
原创 js------事件对象
1.事件(Event) - 事件对象 - 当响应函数被调用时,浏览器每次都会将一个事件对象作为实参传递进响应函数中,这个事件对象中封装了当前事件的相关信息,比如:鼠标的坐标,键盘的按键,鼠标的按键,滚轮的方向。 - 可以在响应函数中定义一个形参,来使用事件对象,但是在IE8以下浏览器中事件对象没有做完实参传递,而是作为window对象的属性保存 - 例子: 元素.事件 = function(event){ eve...
2021-12-25 11:34:59
416
原创 js----使用dom来操作css
1.DOM对CSS的操作 - 读取和修改内联样式 - 使用style属性来操作元素的内联样式,无法读取样式表(在style中设置的样式)中的样式 - 读取内联样式: 语法:元素.style.样式名 - 例子: 元素.style.width ...
2021-12-24 16:44:59
2027
原创 js------DOM查询的其他方法
document对象的其他的属性和方法:注意凡是返回一组的都是放到数组里,对于具体的需要用数组的方式来找到 document.all - 获取页面中的所有元素,相当于document.getElementsByTagName("*"); document.documentElement - 获取页面中html根元素 documen...
2021-12-21 22:05:17
179
原创 js-----DOM
注意:document就是文档节点- 事件(Event): - 事件指的是用户和浏览器之间的交互行为。比如:点击按钮、关闭窗口、鼠标移动 - 我们可以为事件来绑定回调函数来响应事件。 - 绑定事件的方式: 1.可以在标签的事件属性中设置相应的JS代码,当事件被触发时,这些代码将会执行,这种写法称为结构和行为耦合,不推荐使用 ...
2021-12-20 16:07:23
103
原创 js----正则表达式
1、正则表达式:正则表达式是一个对象,用typeof检查正则表达式,会返回一个object - 正则用来定义一些字符串的规则,程序可以根据这些规则来判断一个字符串是否符合规则,也可以将一个字符串中符合规则的内容提取出来。 - 创建正则表达式 - var reg = new RegExp("正则","匹配模式"); - var reg ...
2021-12-20 14:36:34
781
原创 js-----字符串的方法
1、字符串的相关的方法:字符串在底层是以数组的形式保存的,在操作字符串时把他想象成一个数组;如字符串"hello",在底层保存时是["h","e","l","l","o"], 所以我们可以获得字符串中的每一个字符(字符串名[索引]), length: - 获取字符串的长度 -用法:字符串名.length charAt(): - 根据索引获取指定位置的字符,不会对原字符串产生影响 ...
2021-12-16 22:22:00
213
原创 10.flex------02.弹性元素的样式
1、弹性元素的样式基本上就以下几种:flex-grow、flex-shrink、flex-basis以及order 2、flex-grow用来指定弹性元素的伸展系数(类似于弹簧能弹多少) 3、flex-shrink用来指定弹簧的压缩系数(类似于弹簧能压缩多少),弹簧的压缩系数计算比较麻烦,具体压缩多少,与弹性元素的大小及压缩系数有关 4、flex-basis:用来指定弹性元素在主轴上的基本长度(类似于弹簧的最初长度);如果主轴是横向的,则...
2021-12-16 21:21:17
160
原创 js------断点
在外部浏览器,打开控制台,选择脚本,然后点击代码左侧,设置断点(设置完断电后需要刷新一下浏览器),代码执行到断点处停止执行,只有让他执行时他才会执行设置完断点,刷新后,点击那个黄色箭头(单步执行),就可以查看代码执行流程,...
2021-12-16 21:20:57
288
原创 js-----原型
1、原型(prototype) - 创建一个函数以后,解析器都会默认在函数中添加一个属性prototype,prototype属性指向的是一个对象,这个对象我们称为原型对象。 - 当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性指向该构造函数的原型对象。这个隐含的属性可以通过对象.__proto__来访问。当函数作为普通函数调用prototype没有任何作用 - 原型对象就相当于一个公共的区域,凡是通过同一个构造函数创...
2021-12-16 21:19:37
641
原创 js------函数的方法
1、call()和apply():- call() - apply() -语法: 函数对象.call() 函数对象.apply() 注意: function f...
2021-12-16 11:43:47
1042
原创 js------数组的剩余方法:concat
1、concat():将两个数组或多个数组连接到一起,并将新的数组返回。不会对原数组产生影响,多个数组之间使用逗号隔开。语法:数组1.concat(数组2,数组3) 数组3和数组2是要和数组1拼接到一起的数组注意:concat(),不仅可以使数组连接到一起,还可以使元素与数组拼接到一起。2、join():可以将一个数组转换为一个字符串,不会对原数组产生影响,而是将转换后的字符串作为结果返回。可以在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素之间的...
2021-12-15 22:11:10
1308
原创 js------数组的方法和遍历数组
1、数组的方法 - push(): - 用来向数组的末尾添加一个或多个元素(多个元素之间通过逗号隔开,比length添加的要方便,length只能在末尾添加一个),并返回数组新的长度,可以将要添加的元素作为数组的参数传递,这样这些元素将会自动添加到数组的末尾 -该方法会将数组新的长度作为返回值返回 - 语法:数组.push(元素1,元素2,元素N) - pop(): ...
2021-12-14 22:28:47
624
原创 js-----数组
1、数组(Array):数组也是一个对象,是一个用来存储数据的对象,和Object类似,但是它的存储效率比普通对象要高(所以在开发中,经常使用数组来开发一些数据),不同的是,普通对象以字符串作为属性名的,数组是使用数字作为索引操作元素,(注意:属性在对象里叫属性,在数组里叫元素,实际上都一样;即在对象中使用属性名,在数组中使用索引,在对象中使用属性值,在数组中使用元素) - 数组中保存的内容我们称为元素 - 数组使用索引(index)来操作元素 ...
2021-12-14 20:11:35
1270
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人