CjpYummy-优快云博客

原创闭包的学习

闭包（closure）是 JavasSript 的一大难点，也是它的特色。很多高级应用都要依靠闭包来实现。 1、变量作用域要理解闭包，首先要理解 JavasSript 的特殊的变量作用域。变量的作用域无非就两种：全局变量和局部变量。 JavasSript 语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。注意点：在函数内部声明变量的时候，一定要使用 var 命令。如果不用的话，你实际上声明的是一个全局变量！ 2、如何从外部读取函数内部的局部变量？

2022-05-03 06:43:43 217 1

原创 Math 对象

Math 对象用于执行数学任务不是一个构造函数，所以不需要new来调用，而是直接使用里面的属性和方法即可常用方法 ceil( ) 对小数进行向上舍入（向大的数跑） floor( ) 对小数进行向下舍入（向小的数跑） round( ) 把数四舍五入为最接近的数，在负数的情况下，当小数位是5的时候，不会五入，会舍去 random( ) 返回0.0~1.0之间的随机数（包括0，不包括1）例如：0.7526642586288201 应用的场景抽奖 pow( ) 计算次方值。例如Math.p

2022-04-28 15:43:16 202

原创 string的常用方法补充

toUpperCase（）把字符串转换为大写 substr（）从起始索引号提取字符串中指定数目的字符 substring（）提取字符串中两个指定的索引号之间的字符 slice（）提取字符串的某个部分，并以新的字符串返回被提取的部分 ...

2022-04-27 16:08:24 293

原创 String对象

String对象 var str = new String（参数） 1、定义字符串的第一种方式：使用构造函数 2、定义字符串的第二种方式：字面量的方式 String常用方法和属性 length 字符串的长度 charAt（）返回在指定位置的字符（注：字符串中第一个字符的下标是0） concat（）连接字符串 replace（）用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串 ...

2022-04-26 16:20:57 156

原创 Date对象和String对象

Date对象用于处理日期和时间首字母大写的内置函数是构造函数 new Date() 可以理解为构造函数Date使用new实例化一个时期对象oDate let oDate = new Date(); document.write(oDate); 日期的格式有多种 ★必须是字符串的类型常用方法： getDate（）返回Date对象的一个月中的每一天，其值介于1~31之间 getDay（）返回Date对象的星期中的每一天，其值介于0~6之间（注：0-周日） getHou

2022-04-25 16:02:00 311

原创 JS数组的基本操作

concat 合并两个数组并生成一个新数组，不会改变原数组 pop 删除数组的最后一项， pop会返回被删除的一项原数组的最后一项会被删除 unshift在数组的最前面添加一项原数组的前面会添加一项 unshift 会返回新数组的长度 shift 在数组的最前面删除一项原数组的最前面的一项会被删除 shift的返回值是前面被删除的那一项 indexOf 返回字符在数组中的索引如果字符不存在数组中，会返回-1 sp...

2022-04-24 14:35:27 198

原创对象object

内置对象： Array：用于在单独的变量名中存储一系列的值 Date：用于操作日期和时间 String：用于支持对字符串的处理 Math：用于执行常用的数学任务，它包含了若干个数字常量和函数自定义对象：对象是带有属性和方法的特殊数据类型对象名.属性名称对象名.方法名称(参数表) var obj = { uname：'张三'， age：18， sex：'男'， sayHi：function（）{ console.log（ ' hello! ' ）; }...

2022-04-22 17:25:55 198

原创 break、continue关键字以及Chrome调试

break关键字 break关键字用于立即跳出整个循环（循环结束）。例如： <script> let arr=[10,20,30,40,50]; for(var i=0;i<arr.length;i++){ if(arr[i]>30){ *当arr[i]的值是40的时候，整个循环就终止了，不再继续循环了* break; } document.write(arr[i]+'<br>'); } </script&g...

2022-04-21 15:51:42 269

原创函数的学习

循环的优势：解决重复操作减少代码编写量，使代码结构清晰增强代码的可读性函数的含义：程序的基本单元，是完成特定任务的代码语句块函数分类：系统函数（如parseInt() ）、自定义函数（如luck() ）函数的特征：实现一定的功能、可以返回一个结果 return、可以有参数 ...

2022-04-20 15:59:37 304

原创 while循环、do-while循环

while循环 while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。语法结构如下： while（条件表达式）{ //循环体 } 执行思路： 1、先执行条件表达式，如果结果为true，则执行循环体代码；如果为false，则退出循环，执行后面代码 2、执行循环代码 3、循环代码执行完毕后，程序会继续判断执行条件表达式，如果条件仍然为true，则会继续执行循环体，直到循环条件为false，整个循环过程才会结束案例：用while循环打印1~100以内(

2022-04-20 14:47:29 1140

原创 JS中的循环

for循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下 for（初始部分；条件判断；改变循环变量值）{ 循环操作 } 初始部分：就是用var声明的一个普通变量，通常用于作为计数器使用条件判断：就是用来决定每一次循环是否继续执行，就是终止的条件改变循环变量值：是每次循环最后执行的代码，经常用于我们计时器变量进行更新（递增或递减） for-in循环常用于对数组或对象的属性进行循环操作，其语法结构如下 for (变量 in 对象) { ...

2022-04-19 22:14:16 321

原创 Javascrip的运算以及程序结构的了解

比较运算 > < >= <= == === != ！== >和< 就是比较大小，比较的结果会以布尔类型展示，千万不要连续比较因为这样只要有一个满足都会返回true >= 大于或者等于只要有一个满足条件，就返回true <= 小于于或者等于只要有一个满足条件，就返回true == 只比较值 === 不仅比较值而且还比较类型 !=（不等于）只比较值不...

2022-04-18 18:39:58 642

原创初学JavaScript

什么是JavaScript？ JavaScript是一种基于对象和事件驱动的脚本语言。 JavaScript特点？交互、脚本语言、解释性语言、边执行边解释 JavaScript组成：ecmascript(规范) bom(浏览器对象) dom(元素对象) ECMAScript是一种语法标准语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象编码遵循ECMAScript标准 BOM：Browser Object Model（浏览器对象模型）提供了独立于内容与浏览器窗口进

2022-04-17 00:01:07 491

原创水平垂直居中的几种方式

行内元素实现水平垂直居中： text-align: center;（text-align: center只能实现文本的垂直居中） line-height: 50px;（line-height不能实现多行文本的垂直居中） padding:50px;（不固定高度的垂直居中通过设置padding实现）使用display设置为table，配合样式vertical-align设置为middle来实现，如下：父元素{ display：table； } 子元素{ display：table-c

2022-04-15 17:15:26 1352

原创媒体查询、响应式布局、移动端兼容

媒体查询屏幕的查询类型mediatype有多种，比如电脑屏幕、打印机等 sreen 就表示所有电子设备的屏幕 print 表示打印机的屏幕 all 用于所有设备关键字 and 可以将多个媒体特性连接到一起，相当于“且”的意思 not 排除某个媒体类型。相当于"非"的意思，可以省略 only 指定某个特定的媒体类型，可以省略媒体特性（屏幕的尺寸） width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小可见区域宽度 max-width ...

2022-04-14 17:08:07 397

原创弹性盒模型的补充

多根轴线的对齐方式 align-content 属性值说明 flex-start 与交叉轴的起点对齐 flex-end 与交叉轴的终点对齐 center 与交叉轴的中点对齐 space-between 与交叉轴两端对齐，轴线之间的间隔平均分布 space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 stretch（默认值）轴线占满整个交叉轴 ★ 子元素不设置高度或者高度auto order 定义项目的排列顺序。数值越小，排列越靠前，默...

2022-04-13 17:21:39 113

原创弹性盒布局

布局原理： flex是flexble Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局 1、当我们为父元素设为flex布局以后，子元素的float、clear和vertical-align属性都将失效 2、伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局采用flex布局的元素，称为flex容器（flex container），简称‘容器’。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称'项目'。总结flex布

2022-04-12 16:05:21 583

原创 css3动画

动画animation是由两个部分组成的：设置关键帧+调用关键帧浏览器支持属性名 IE Firefox Chrome Opera Safari animation 10+ 5.0+ 4.0+ 12+ 4.0+ 设置关键帧（通过类似Flash动画的关键帧来声明一个动画） @keyframes spread { 0% {width:0;} 33% {width:23px;} 66% {width:46px;} ...

2022-04-11 17:51:06 486

原创透明度以及CSS3的新特性

透明度：opacity:x； x的值为0~1，值越小越透明，可以写为opacity: .5; ie低版本支持filter:alpha(opacity=x) x值为0~100，值越小越透明 CSS3过渡 transition:要过渡的属性花费时间时间曲线何时开始； 1.属性：想要变化的CSS属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以了。 2.花费时间：单位是秒（必须要写单位）比如2s 3.运动曲线：默认是ease 4.何.

2022-04-09 22:39:01 776

原创定位的了解

为什么需要定位？ 1、某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 2、当我们滚动窗口的时候，盒子的固定屏幕某个位置的。所以：1.浮动也已让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 2.定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子。定位的组成定位：是将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移定位模式 position：属...

2022-04-08 14:40:11 384

原创 CSS的高级特效

2D位移：translate 书写方式 transform:translate(tx,ty); tx 表示【x轴(横坐标)移动的向量长度】 ty 表示【y轴(纵坐标)移动的向量长度】 2D缩放：scale 书写方式 transform: scale(1,1); scale(1,1)表示不放大也不缩小 scale(2,2)表示宽度和高度放大了两倍 scale(.5,.5)表示宽度和高度都缩小一倍 ☆缩小和放大的时候都是从中心开始的 ...

2022-04-07 15:09:56 360

原创浮动的学习

什么是浮动？ float 属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘。语法如下：选择器{ float:属性值；} 属性值说明 left 元素向左浮动 right 元素向右浮动 none （默认值）元素不浮动浮动的特性： 1、浮动元素会脱离标准流（脱标） 2、浮动的元素会一行内显示并且元素顶部对齐 3、浮动的元素会具有行内块元素的特性（如果行内元素有了浮动，则不需要转换块级元素就可以直接给高度...

2022-04-06 16:05:39 266

原创 CSS3的渐变、向文本添加阴影、超出部分显示省略号

线性渐变：Linear Gradients background:linear-gradients( to bottom,red,green)；（position 渐变方向 color1第一种颜色 color2第二种颜色不给方向默认是从上到下顺序从第一种颜色渐变到第二种颜色 to right 从左到右 to right bottom 从左上角到右下角以此类推）如图：径向渐变 radial-gradient： background: radial-gradient(...

2022-04-05 19:57:16 521

原创 CSS3的圆角边框、盒子的阴影以及背景图片的设置

圆角边框： border-radius: 20px；（一个值表示四个角的大小都为20px） border-radius: 20px 50px；（两个值表示：第一个值表示左上角和右下角的圆角大小，第二个值表示右上角和左下角的圆角大小，*是对角关系） border:20px 30px 50px；（三个值表示：第一个值表示左上角的圆角大小，第二个值表示右上角和左下角的圆角大小，第三个值表示右下角的圆角大小） border-radius:20px 10px 30px 50px; （四个值表示：

2022-04-03 11:41:21 796

原创 HTML5的新增元素

<input type="email" name="emailname"> 电子邮箱地址文本框，提交表单会自动验证email的值 <input type="url" name="urlname"> 网页的url，提交表单时会自动验证url的值要按照这种格式来书写，网址前面要加http：http://www.baidu.com <input type="color" name="colorname"> 主要用于选取颜色的 <input..

2022-04-01 14:10:37 235

原创了解CSS3的高级选择器

高级选择器： p:first-of-type选择属性其父元素首个<p>元素的每个<p>元素 p:last-of-type选择属性其父元素最后<p>元素的每个<p>元素 p:only-of-type 选择属于父元素唯一的<p>元素的每个<p>元素 p:first-chid选择属性其父元素的第一个元素的每个<p>元素 p:last-chid选择属性其父元素的最后一个元素的每个<p>元素 p:nth-chi

2022-03-31 15:06:52 181

原创了解HTML5的新增网页元素以及属性

什么是HTML5? HTML5是用于取代HTML和XHTML的标准版本新特性、新的语义化标签，比如 header、footer、nav等等新的表单控件，比如 email、url、search 用于绘画的：canvas 元素用于媒介回放的：video 和 audio 元素新增元素的书写方式如下：定义视频：<audio src="路径" controls loop muted></audio> controls (控制菜单) autoplay（自

2022-03-30 16:37:16 587

原创盒子的内边距以及display的属性

内边距padding：上内边距padding-top 右内边距padding-right 下内边距padding-bottom 左内边距padding-left padding:50px; （padding设置一个值表示上右下左内边距全部增加50px） padding:50px 100px;（上下内边距为50px ，左右内边距为100px） padding：50px 60px 80px；（上内边距50px，左右内边距80px，下边距80px） padding：50px 60px 80px

2022-03-29 15:19:41 375

原创盒子模型的学习

盒子边框的粗细和样式： border-width边框的粗细 border-color边框的颜色 border-style边框的类型简写：border：1px solid red；（顺序可以调换） border-width: 2px; 后面还可以跟以下属性：[thick(粗的边框)] [medium(中等粗细)] [thin(最细的)] 设置上边框的粗细：border-top-width:30px; 设置右边框的粗细：border-right-width: 30px; 简写：bor

2022-03-28 15:30:36 287

原创网页背景样式

插入背景图片： background-image:url(图片路径) background-repeat: no-repeat；图片不平铺，只会显示一次 background-repeat:repeat-x; 图片只沿水平方向平铺 background-repeat:repeat-y; 图片只沿垂直方向平铺 background-repeat:repeat; 图片沿水平和垂直方向平铺 background-position:100% 100%;使用百分比表示背景的位置 background

2022-03-28 15:06:27 123

原创 CSS文本修饰与超链接伪类

文本修饰以及垂直对齐方式文本修饰 text-decoration 有以下属性：没有下划线 text-decoration: none; 文本的下划线 text-decoration:underline; 文本的上划线 text-decoration:overline；文本删除线 text-decoration:line-through; 垂直对齐方式 vertical-align 有以下属性：图片后面的文字居中对齐 vertical-align: middle; 顶端...

2022-03-27 20:48:58 149

原创 css的字体属性和文本样式

CSS的字体属性有以下：字体 {font-family :宋体，楷书，"Times New Roman"} /**中文英文都可以，单词比较长的主要要用引号括起来。字体大小{font-size：12px；} 字体粗细{font-weight： }

2022-03-25 15:34:14 500

原创 CSS的高级选择器（层次选择器和属性选择器）

层次选择器如下：后代选择器的语法规范：子选择器的语法规范：相邻兄弟选择器的语法规范：通用兄弟选择器的语法规范：属性选择器如下： E[atter]属性选择器： <style> li[id]{ background: red;} </style> <body> <ol> <li id>111</li> &lt...

2022-03-24 15:06:53 168

原创 css的学习

css的样式和选择器行内样式：外部样式：导入外部样式：样式的优先级： css的选择器：标签选择器、类选择器、id选择器标签选择器：p h1 div em 所有标签都是标签选择器类选择器： id选择器： ...

2022-03-23 14:50:49 65

原创表单标签

表单的组成：表单域表单控件提示信息表单域是一个包含表单元素的区域。在HTML标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递，将它范围内的表单元素信息提交给服务器。常用属性有：action 、method、name <form action=" 地址" methon="提交方式" name="表单域名称"></form> 表单控件（表单元素） 1、<input>标签用于收集用户信息 <input type="属性值

2022-03-22 16:47:57 566

CjpYummy的博客