- 博客(34)
- 收藏
- 关注
RSS订阅原创 js的封装，箭头函数及this
浏览器窗口封装function innerWh (){ return { width:document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth, height:document.documentElement.clientHeight || document.body.clientHeight || window.i
2022-05-04 08:33:43
283
原创 JS函数基础知识
函数：函数调用两种方法：按钮调用：<button οnclick="fn()"></button>函数名直接调用：fn()传递函数两种方法：按钮里传递：<button οnclick="fn(a，b)"></button>函数名里直接传参：fn(a，b)变量：全局变量：在函数外声明的变量，网页上的所有脚本和函数都能访问它。作用域：在全局中都能被访问。（所有window对象的属性拥有全局作用域，所有末定义直接赋值的变量自动声明
2022-05-02 22:23:44
148
原创 Math 对象
Math：用于执行数学任务，不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。方法：Math.ceil()：对小数进行上舍入。Math.ceil(25.5); //返回26Math.ceil(-25.5); //返回-25Math.floor()：对小数进行下舍入。Math.floor(25.5); //返回25Math.floor(-25.5); //返回-26Math.round()：对小数进行四舍五入(注：在负数的情况下，当小数位
2022-04-28 16:37:45
211
原创 String的方法
trim()：可以去除字符串左右两边的空格， 不能去除字符串里面的空格。两种校验不能为空的方式：let a = prompt('请输入');//第一种校验不能为空的方式if(a.trim()==''){ alert('输入不能为空')}// 第二种校验不能为空的方式if(!a.trim().length){ alert('输入不能为空')}includes()：用于判断字符串是否包含指定的子字符串，包含为true，不包含为flase（不仅字符串可以使用，数组也可以使
2022-04-27 17:13:35
107
原创 String对象
String：用于处理文本（字符串）。let str = new String('xxx') /*对象类型*/let str = 'xxx' /*字符串类型*/String 对象方法concat()：连接两个或更多字符串，并返回新的字符串。replace()：在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。split()：把字符串分割为字符串数组。indexOf()：返回某个指定的字符串值在字符串中首次出现的位置。lastIndexOf()：从后向前搜索字符串，并
2022-04-26 17:17:07
68
原创 Date对象及String对象
Date 对象用于处理日期和时间。var 日期对象= new Date(参数)参数格式：MM DD,YYYY,hh:mm:ssDate 对象方法getFullYear()：返回Date对象的年份，其值为4位数。getMonth()：返回Date对象的月份，其值介于0~11之间(注: 0代表1月份)。getDate()：返回Date对象的一个月中的每一天，其值介于1~31之间。getDay()：返回Date对象的星期中的每一天，其值介于0~6之间(注: 0代表周日)。ge
2022-04-25 17:20:34
336
原创 JS数组的增删
concat：合并数组let arr1 = [1,2,3];let arr2 = [4,5,6];let arrAll = arr1.concat(arr2);注意：concat() 方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。pop：删除数组的最后一个元素，并返回删除的元素。arr.pop();shift：删除数组的第一个元素，并返回删除的元素。arr.shift();unshift：向数组的开头添加一个或更多元素，并返回新的长度。arr
2022-04-24 15:20:03
320
原创 JS对象及数组
对象：是带有属性和方法的特殊数据类型，JS中的所有事物都是对象（内置对象和自定义对象）。内置对象：Array：用于在单独的变量名中存储一系列的值。Date：用于操作日期和时间。String：用于支持对字符串的处理。Math：用于执行常用的数学任务，它包含了若干个数字常量和函数。自定义对象：语句：let 对象 ={ }；删除一个对象的属性：delete 对象.属性名。添加一个对象的属性：对象.属性 = 属性值。数组具有相同数据类型的一个或多个值的集合。创建数组的两种
2022-04-22 16:45:27
432
原创 JS循环及调试代码
breakbreak：用于终止某个循环，使程序跳到循环块外的下一条语句，在循环中位于break后的语句将不再执行，break语句不仅可以用在for循环中，也可以用在其他循环中。for (var i = 0; i < 5; i++) { //当i的值是3的时候，整个循环就终止了,不再继续循环了. if (i == 3) { break; } document.write(i+'<br>')}continuecontin.
2022-04-21 17:10:13
380
原创 while循环和函数
while循环//初始部分while(循环条件){ //循环操作 //迭代部分}do-while循环do{ //循环操作 //迭代部分}while(循环条件); 特点：先执行，再判断 至少执行一次。循环的优势：解决重复操作。减少代码编写量，使代码结构清晰。增强代码的可读性。多重循环：各循环可互相嵌套，一般不超过三层。外层循环变量变化一次，内层循环变量要变化一遍。函数含义：程序的基本单元，是完成特定任务的代码语句块。分类：系统函数（如parseIn
2022-04-20 17:44:36
670
原创 JS变定量及for循环
先使用变量后用var定义变量 会出现变量提升， 给变量一个初始值undefined。es6提供了新的声明变量的关键字：let，使用let，变量不会被重复声明。使用let不存在变量提升,会报错：annot access 'str' before initializationdocument.write(str);var str = '123';//let str = '123';es6提供了一个声明常量的关键字：const。给常量变量重新赋值会报错：Assignment to constant
2022-04-19 20:36:07
439
原创 js输出语句与程序结构（一）
逻辑运算符&&(与号) ||(或号) !(取反)输出语句在页面中打印：document.write("我打印了") 弹出框：alert('我弹出了') 在控制台普通打印：console.log('我在控制台打印了') 打印一个错误提示：console.error('你错了，原因是……') 打印一个警告提示：console.warn('警告你不能乱踩花草树木') 打印一个详细提示：console.info('详细提示') 开始计算：console.time('tim
2022-04-18 17:15:52
166
原创 JS数据类型及运算
JavaScript是一种基于对象和事件驱动的脚本语言。JavaScript特点：交互、脚本语言、解释性语言，边执行边解释。JavaScript组成：ecmascript(规范)，bom(浏览器对象)，dom(元素对象)。ECMAScript是一种语法标准语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象编码遵循ECMAScript标准。 BOM：Browser Object Model（浏览器对象模型）提供了独立于内容与浏览器窗口进行交互的对象。 DOM：Docu
2022-04-17 15:55:24
581
原创 元素水平垂直居中
实现行内元素实现水平和垂直居中的方式：1.单行文本text-align: center;line-height: Xpx;2.多行文本div{ height: 200px; width: 300px; border:1px solid red; text-align: center; display: table;}span{ display: table-cell; vertical-align: middle;}父.
2022-04-15 17:25:52
74
原创 媒体查询及响应式布局
媒体查询@mediascreen 就表示所有的电子设备的屏幕 print 表示打印机的屏幕 all 所有的设备 and：和，两个条件之间需添加max-width：表示小于等于这个宽度的时候 屏幕显示、min-width： 表示大于等于这个宽度的时候 屏幕显示。理想视口meta name="viewport"：理想视口width=device-width：显示的宽度为设备的宽度initial-scale=1.0：是否对屏幕的尺寸进行缩放 1.0表示不缩放em：相对于
2022-04-14 17:40:04
270
原创 flexbox布局（二）
align-content：定义多根轴线的对齐方式 flex-start 交叉轴的起点对齐 flex-end 交叉轴的终点对齐 center 交叉轴的中点对齐 space-between 与交叉轴两端对齐，轴线之间的间隔平均分布 space-around 每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间
2022-04-13 17:38:19
228
原创 flexbox布局
Flex基本概念采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。有水平主轴（main axis）和垂直交叉轴（cross axis），项目默认沿主轴排列。Flex布局语法块级元素 display : flex; 行内元素 display : inline-flex;flex-direction：决定主轴的方向（即项目的排列方向） row
2022-04-12 17:39:12
87
原创 CSS3动画及3D初识
animation动画animation实现动画构成：通过类似Flash动画的关键帧来声明一个动画。 在animation属性中调用关键帧声明的动画实现动画效果。关键帧：@keyframes。写兼容的时候浏览器前缀是放在@keyframes中间，例如：@-webkit-keyframes（兼容谷歌）、@-moz-keyframes（兼容火狐）。调用关键帧：animation: name duration timing-function delay iteration-count d
2022-04-11 17:39:07
198
原创 CSS过渡
transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等。ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）。ease-in：规定以慢速开始的过渡效果 (一开始会很慢 后面快结束的时候会加快)。ease-out：规定以慢速结束的过渡效果 (一开始会很快 后面快结束的时候会变慢)。ease-in-out：规定以慢速开始和结束的过渡效果。过渡属性（ transition-property ）定义转换动画的CSS属性名称。property：指
2022-04-10 21:06:20
207
原创 css定位
相对定位relative：相对自身原来位置进行偏移。特性：设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。 设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响。 设置相对定位的盒子原来的位置会被保留下来。position: relative;left: 20px;top:30px;位移前位移后相对自身原来的位置 距离左边20px 距离顶部30...
2022-04-08 17:39:29
654
原创 CSS3变形
CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果，每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。2D位移translate(tx,ty);tx：X轴（横坐标）移动的向量长度。ty：Y轴（横坐标）移动的向量长度。width: 100px;height: 100px;background:red;transform: translate(100px,20px);1. x轴向右移动100px y轴向下移动20px。
2022-04-07 17:43:06
202
原创 css浮动
浮动float： 属性值 说明 left 元素向左浮动 right 元素向右浮动 none 默认值，元素不浮动 注意：加了浮动的img无法把div撑住，会造成div的高度塌陷。内容修剪overflow 属性值 说明 visible 默认
2022-04-06 17:32:21
50
原创 CSS3渐变
线性渐变颜色沿着一条直线过渡linear-gradient ( position, color1, color2,…)position：渐变方向，color1：第一种颜色，color2：第二种颜色，...注意：不给方向，默认是从上到下顺序。background:linear-gradient(to top left,red,green)注意：从哪里来,是和 to top left相反的顺序 top的反向就对应bottom，left的反向就对应right。即从右下角到左上角
2022-04-05 17:14:11
426
原创 css边框与阴影
圆形边框border-radiusborder-radius: 20px 50px;两个值：第一值表示左上角和右下角的圆角大小，第二个值表示 右上角和左下角的圆角大小。border-radius: 10px 30px 50px;三个值：第一个值表示左上角的圆角大小，第二个值表示右上角和左下角的圆角大小，第三个值表示右下角的圆角大小。border-radius: 20px 10px 30px 50px;四个值：按照顺时针的顺序去设置 左上角，右上角，右下角，左下角。border-rad
2022-04-04 20:29:16
1405
原创 HTML5新增元素
input类型numbermax 规定允许的最大值,min 规定允许的最小值,step 规定合法的数字间隔(步长) ,value 规定的默认值。rangedate选择日、月、年month选择月、年week选择周和年time选择时间（小时和分钟）datetime选择时间、日、月、年（UTC时间 格林威治时间） 手动输入的时间 1993-12-22+03:22:60datetime-local选择时间、日、月、年（...
2022-04-01 17:10:40
66
原创 CSS3高级选择器
CSS3高级选择器 p:first-of-type 选择属性其父元素的首个<p>元素的每个<p>元素 p:last-of-type 选择属性其父元素的最后<p>元素的每个<p>元素 p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素 p:first-child
2022-03-31 17:09:58
65
原创 HTML5新增元素
HTML5HTML5是用于取代HTML和XHTML的标准版本。HTML5新增结构元素 header 页面或页面中某一个区块的页眉，通常是一些引导和导航信息 main 包裹主体的内容 nav 可以作为页面导航的链接组 section 页面中的一个内容区块，通常由内容及其标题组成 aside 非正文的内容，
2022-03-30 16:26:36
146
原创 盒子模型 二
内边距padding padding-top 上内边距 padding-right 右内边距 padding-bottom 下内边距 padding-left 左内边距 盒子模型div{ width: 200px; height: 200px; padding:30px; bor
2022-03-29 16:43:41
119
原创 盒子模型 一
盒子组成盒子模型是由外边距（margin） +边框（border）+内边框（padding） + 网页元素（content）边框边框的颜色边框为红色。 border-top-color 设置上边框的颜色 border-right-color 设置右边框的颜色 border-bottom-color 设置下边框的颜色 border-left-color
2022-03-28 17:25:51
55
原创 css 文本样式 超链接伪类 网页背景
文本修饰text-decoration: none 定义的标准文本，没有下划线 overline 设置文本的上划线 line-through 设置文本的删除线 underline 设置文本的下划线 直对齐方式vertical-align: middle 图片后面的文字垂直对齐方式为
2022-03-27 14:02:46
549
原创 css 字体属性与文本属性
字体属性字体大小font-size:12px;font-size:2em;注意：em是根据父元素的大小来的决定的，即2em的大小是父元素的两倍。字体风格font-style:italic;font-style:normal;italic和oblique，都表示斜体的意思。字体的粗细font-weight: bold;font-weight: lighter;font-weight: 100;注意：300即浏览器显示最细字体，即使设置更细的字体也不会有效果，
2022-03-25 17:43:12
697
原创 CSS的高级选择器
层次选择器选择器 类型 功能描述 E F 后代选择器 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 E>F 子选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 后代选择器ul li{ ...
2022-03-24 17:01:34
107
原创 表单+初部认识css
表单<input type="hidden" name="hideName" value="666"><input type="text" name="user" value="张三" readonly><input type="submit" value="提交" disabled><input type="radio" name="a" id="man" value="男"><label for="man">男</label
2022-03-23 16:29:29
1056
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人