- 博客(33)
- 收藏
- 关注
原创 变量&作用域
一、函数的调用和调用方式方法一:fn(实参);function fn(形参){alert(1)}方法二:<button onclick="fn(实参)">调用方法2</button>注:若使用return,函数就会停止执行,并返回指定的值二、变量1、全局变量在函数外声明的变量,或者不使用var或let或const来定义一下的变量为全局变量,且网页上的所有脚本和函数都能访问它,并且在页面关闭后被删除2、局部变量在函数内部.
2022-05-02 13:29:04
304
原创 Math对象
1、max 返回最大值document.write(Math.max(4,9,100)); //返回1002、min 返回最小值document.write(Math.min(-3,-6,-99)); //返回-993、ceil 向上取整document.write(Math.ceil(-25.1)); //返回-254、floor 向下取整document.write(Math.floor(25.999)); //返回255、round 四舍五入取整数,但负数的时候, 但小
2022-04-28 15:10:08
248
原创 String的其他方法
1、toLowerCase() 把字符串转换为小写2、toUpperCase()把字符串转换为大写3、字符串的截取(1)substr(start,length)从start位置开始(索引号),length表示取的个数(2)slice(start,end)从start位置开始,截取到end位置,end取不到(最后一个字符取不到),接受负数正数从0开始,从左往右数负数从-1开始,从右往左数(3)substring(start,end)从start位...
2022-04-27 14:18:14
228
原创 String字符串
1、字符串不可变即使同一个字符串变量名又再次赋值了,只是代表给它新开辟了一个存储空间,原来的字符串依旧保留2、根据字符返回位置(1)从前往后数:字符串变量名字.indexOf(‘要查找的字符’, 开始查找的起始位置)(2)从后往前数:lastIndexOf3、根据位置返回字符charAt( 索引号) charCodeAt(索引号) 判断用户按下哪个键4、合并字符串 concat5、替换字符中中的内容replace('被替换的字符串','取代原来字符串的..
2022-04-26 21:29:52
197
原创 Date对象
一、定义:Date 对象用于处理日期和时间,首字母大写的内置函数是构造函数二、应用1、返回当前日期和时间2、返回指定日期和时间格式有多种,但是必须为字符串,如果是数字类型,月从0开始计算即0为1月(1)字符串类型的多种格式参照格式:MM DD,YYYY,hh:mm:ss(2)数字型时3、Date的常用方法(1)返回年timer.getFullYear()(2)返回月timer.getMonth()(3) 返回日timer.getDat.
2022-04-25 15:02:29
366
原创 JavaScript数组
一、创建数组的方式1、字面量创建2、构造函数创建Array首字母必须大写,并且前面要加new二、遍历数组将数组中的每个元素都访问一遍
2022-04-24 11:06:25
1328
原创 JavaScript对象
一、对象定义对象由属性和方法组成,包括创建对象和内置对象二、创建对象包括三种方式:利用字面量创建、利用new Object创建、构造函数创建对象(一)利用字面量创建步骤:(1)创建对象var obj={ }注意点:属性名后面用冒号,各属性之间用逗号隔开(2)调用对象调用属性:方法1:console.log(obj.属性名) 方法2:console.log(obj['属性名'])调用方法:...
2022-04-22 15:01:47
979
原创 循环的退出&代码的调试
一、循环退出两者通常与条件语句搭配使用。1、continue:是退出本次(当前循环)但继续执行剩余次数循环2、break:不符合条件就退出整个循环,下面语句不再执行二、调试代码的三种方式1、console.log 控制台查看2、alert 弹出框查看3、debugger 使用步骤:(1)打开控制台 刷新一次,按f10或点击跳过按钮 (2)按f8或点击播放按钮,终止调试,调试结束后,需要把debugger删...
2022-04-21 14:00:21
639
原创 JavaScript函数
1、何为函数函数:被设计为执行特定任务的代码块,可以实现代码复用。2、函数的使用先声明再调用,一次声明多次调用,不调用则不执行声明函数: function 函数名( ){ ....}调用函数:函数名( )3、函数的参数形参: 声明函数中,函数名后面括号里的值为形参实参:调用函数中,函数名后面括号里的值为实参如何传递参数:将实参里的内容传送到形参里,形参接收再进行函数体的执行。4、函数的返回值 return将函数内部处理好的结果返还给调用者,函数内部只能出.
2022-04-20 14:53:43
568
原创 for & for in循环
1、循环for语法:for(声明循环次数的初始变量;循环条件;变化值){循环体 }例题2、循环for in常用于对数组或对象的属性进行循环操作。语法: for (变量 in 对象) {//循环执行的语句}补充:数组是具有相同数据类型的一个或多个值的集合...
2022-04-19 21:25:32
153
原创 js分支语句
一、概念1、定义: 分支语句可以让我们有选择性的执行想要的代码2、分类: If分支语句、三元运算符、 switch 语句(一) If分支语句1、单分支if(条件){满足条件执行的内容 }2、双分支if(条件){满足条件执行的内容 }else{不满足条件执行的内容}3、多分支if(条件1){执行代码1}else if(条件2){执行代码2}else if(条件n){执行代码n}else{不满足条件执行的内容}(二)三元
2022-04-18 20:28:13
1204
原创 JS 变量
一、JavaScript1、定义:JavaScript是运行在客户端(浏览器)的编程语言2、组成:ECMAScript、Web APIs (DOM、BOM)3、书写位置:内部、外部、内嵌4、核心语法:变量、注释、语法约定、数据类型、运算符号、数组、控制语句二、变量变量是指存储数据的容器,并不是数据本身。(一)变量的基本使用1、声明变量和赋值var 变量名=赋值(1)先声明变量再赋值(2)同时声明变量和赋值(3)为多个变量名赋值的时,以逗号隔开,只.
2022-04-17 11:18:03
777
原创 媒介查询 & rem
一、媒体查询(响应式布局)1、定义@media 可以针对不同的屏幕尺寸设置不同的样式,也可以针对不同的媒体类型定义不同的样式2、语法@media mediatype and|not|only (media feature){ css-code}(1)Mediatype 查询类型 值 all 用于所有设备 screen 用于电脑屏幕、平板电脑、手机等 p
2022-04-14 15:05:52
443
原创 flex属性2
6、align-content修改flex-wrap属性的行为。与align-items相似,但它不对齐弹性项目,而是对齐flex线。7、align-self交叉轴上的对齐方式,允许单个项目有与其他项目不一样的对齐方式,可以覆盖align-items属性,但在多根轴线下(align-content)是没有效果的。8、order排序order值越小,越排在前面,order的值默认为0四、flex的其他属性1、flex-grow定义项目的放大比例,默认为0,即如果存在剩余..
2022-04-13 15:27:32
178
原创 flex属性
一、定义采用flex布局的元素,称为flex容器,里面的子元素为item。二、语法(1)块级元素: display:flex(2)行内元素: display:inline-flex 设为flex布局以后,flex item的float、clear、vertical-align属性将失效三、flex容器的属性 容器属性 说明 flex-direction 决定主轴的方向(项目的排列方向) ..
2022-04-12 14:45:36
8551
原创 CSS3 animation&perspective属性
一、animation属性1、定义:animation属性通过调用关键帧声明的动画 实现更为复杂的动画效果2.运用步骤(1)设置关键帧@keyframes freedom(名字自定义){0%{自定义样式属性}50%{自定义样式属性}100%{自定义样式属性}(2)调用关键帧animation: name duration delay timing-function iteration-count direction(1)animation:iteration
2022-04-11 14:41:54
266
原创 CSS3过渡
CSS3过渡属性 是一种动画转换的过程,如渐现、渐弱、动画快慢等。语法:transition:[transition-property transition-duration transition-timing-function transition-delay ]1、property:指定的CSS3的属性如高度、宽度、背景颜色等,一般为了方便写all,支持所有样式。2、duration:定义转换动画的时间长度,就是设定完成这个动画的时间。值为0,过渡效果立即执行值为正数,等到设置的数值
2022-04-10 17:28:51
276
原创 CSS定位
一、定位的组成(1)定位模式:由position属性设置 属性值 语义 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 (2)边偏移:定位的盒子移动到的最终位置 边偏移属性 示例 描.
2022-04-08 14:50:06
358
原创 CSS变形
1、translate平移注:x轴和y轴的值为正时,表示向右和向下移动x轴和y轴的值为负数时,表示向左和向上移动2、scale 2D缩放语法: transform:scale{sx,sy}sx表横向坐标(盒子宽度) sy 表纵向坐标(盒子高度)scale后面值只写一个,表示宽高都变化相等的倍数ScaleX(sx):表示只设置x轴的缩放transform:scale(2,1) = transform:scaleX(2)transform:scale(1,2...
2022-04-07 15:25:18
772
原创 float属性
1.语法: float:none/left/right2.浮动特性:(1)浮动元素会脱离标准流脱离标准流的控制,移动到指定位置,并且浮动的盒子不再保留原先位置,也就是说后面的盒 子可以前进占据已经浮动盒子的位置(2)如果多个盒子都设置了浮动,则浮动的元素会一行内显示并且元素顶部对齐且盒子与盒子之间无空隙,一行不够(父级元素装不下)则自动换行依旧贴着顶部对齐(3)浮动元素会具有行内块元素特性(但盒子与盒子之间不会有空隙)任何元素都可以浮动,添加浮动后具有行内块元...
2022-04-06 15:43:09
1303
原创 文字渐变&over-flow属性
一、文字渐变1.线性渐变:linear gradientBackground:linear-gradient(position,color,color) position 说明 bottom 从上到下 left 从左到右 Bottom-left 从右上到左下 注:渐变的方向是和设定的值相反的。如top-right:渐变是从左下到
2022-04-05 18:06:09
626
原创 圆角边框、阴影、background
一、圆角边框语法:border-radius: 100px/50%属性值越大 弧度越大利用border-radius属性制作圆形的两个条件①元素的宽度和高度必须一样(正方形)②属性值为宽度/高度的一半,或者直接写50%(长方形无法设置成一个圆)如果是长方形,想设置成圆角矩形,则Border-radius:属性值设置为高度的一半 属性值 1个值 所有角都变化相同弧度 2个值
2022-04-03 18:58:20
394
原创 表单初级验证
表单初级验证好处:减轻服务器压力、保证数据的可行性和安全性方法:placeholder、required、pattern1、placeholder其后面输入的文字会在文本框内显示,为用户提供一种提示,当文本框输入内容时,提示语小时适用于Input标签中的password、text、search、url、email2、required输入这个属性的input标签是必填项,否则用户无法提交3、pattern (后期学)输入的内容必须符合正则表达式所指的规则,否则无法提交表
2022-04-01 14:58:36
178
原创 HTML5新增&选择器权重
一、新增全局属性1、 contenteditable:规定是都允许用户编辑内容2、hidden:对元素进行隐藏本质上还是display:none实现二、HTML5 废除属性(使用仍有效)1、table中的border cellpadding width bgcolor<table border= , cellpadding= , width=, bgcolor > </table>2、html标签中version版本号属性3、a元素或者link元素的c
2022-03-31 14:56:55
490
原创 HTML5新增结构和网页元素
1、新增语义化标签如header、footer、main、nav、aside、article、section(内容和标题组成)例题例子中,为了让页面占据整个屏幕的高度,不算滚动条的高度,在article和article属性中分别加入了line-height:calc(100vh - 90px)。 宽度表示vw:viewport-widthcalc是用css用来计算的方法即用整个屏幕的高度(100vh)- header的高度 - nav的高度 -footer的高度在用减法.
2022-03-30 15:28:39
134
原创 padding以及行、块元素
一、内边距 padding(1)属性:padding-left/right/top/bottom(2)简写属性(同border和margin)(3)padding会影响盒子实际大小也就是说盒子已经有高度和宽度,在指定内边框,会把盒子撑大解决方法;让 width/height 减去多出来的内边距大小即可。开发中直接在最开始设置*{padding=0 padding=0}避免这种情况二、元素1.块元素block:无论内容多少,该元素独占一行(可以换行)hr p h...
2022-03-29 15:05:09
419
原创 盒子模型的组成
一、盒子模型的组成就是把 HTML 页面中的布局元素(块元素)看作是一个矩形的盒子,也就是一个盛装内容的容器。 由border、content、padding内边距、margin外边距组成二、边框 border1、border的属性 属性 作用 border-width 定义边框粗细,单位px, 系统默认3px 或:thin(1px) medium(3px) thick(5px) bor..
2022-03-28 16:46:41
4696
原创 CSS背景
1.背景颜色background-color:red/#ccc/rgb/rgba2.背景图片background-image:url(图片地址)常见于logo或者装饰性的小图片或者超大的背景图片3.背景平铺background-repeatbackground-repeat:repeat/no-repeat/repeat-x(沿水平平铺)/repeat-y(沿垂直方向)4.background-positionbackground-position:x y;另一种写法:backg
2022-03-27 01:24:04
36
原创 字体&文本属性
一、字体属性 font-style font-weight font-size font-family Italic/normal/oblique bold/number/light/bolder px/em/rem 字体 Microsoft yahei 字体复合属性书写格式(必须遵循以下效果才有作用)fo..
2022-03-25 15:18:38
55
原创 CSS day1
一、上一章补充1.只读和禁用属性2.隐藏属性值3.标注标签二、CSS day1(一) CSS的样式表1.内部/内嵌样式表正在上传…重新上传取消注:理论上style标签可放在html文件任何位置,但一般放在<head>中方便控制整个页面2.行内样式表正在上传…重新上传取消适用于简单修改,直接在需要修改的标签中进行修改3.外部样式表 (使用最多)控制多个页面 link rel=样式单独写到CSS文件中,之后将其引入.
2022-03-23 14:41:13
274
原创 前端表单学习
一、表单域标签: <form method=post/get></form>post:数据不会直接显示在地址栏,有加密效果get:输入的数据的名字和值直接在地址栏显示二、表单元素1.input<input type= “属性值”/>属性 属性值 描述 type text、checkbox radio reset hidden password image(定义图像形制提交按钮) file(定义文
2022-03-22 15:07:42
914
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人