作者小头像 Lv.2
59 成长值

个人介绍

这个人很懒,什么都没有留下

感兴趣或擅长的领域

暂无数据
个人勋章
TA还没获得勋章~
成长雷达
20
39
0
0
0

个人资料

个人介绍

这个人很懒,什么都没有留下

感兴趣或擅长的领域

暂无数据

达成规则

发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32563 472 0
他的回复:
华为云ID:hw49725702 ### AJAX 第四章 JQ介绍 文档就绪函数: 为了防止文档在完全加载(就绪)之前运行jquery代码 ```js $(document).ready(function(){ }); // 简写 $(function(){ }) ``` ### `Get`和`Post` - `$get()` - `url`:请求的接口地址。 - `data`:请求的参数。 - `callback`:请求成功时的回调函数。 - `type`:请求的返回数据的格式。 > 除了`url`,其它三个参数如果没有可以省略。 **注意:** > - 请求参数的格式可以是json对象,也可以是字符串。 > - 返回的数据格式可以是:`JSON`、`HTML`、`Script`、`XML`、`Text`等。 `post`请求发送出去的时候请求参数是放在请求体中的。 ### ajax 方法 - `$.ajax(option)` - `option`是`JSON`格式的配置参数,用于设置ajax请求 ```htmlDocument通过Ajax改变文本改变内容 ``` 常用配置: `url`:发送请求的地址。 `type`:请求方式(get or post等) `data`:请求参数 `dataType`:返回的数据类型(`JSON`、`HTML`、`XML`等。) `success`:请求成功后的回调函数 `error`:`请求失败后的回调函数`。 `complete`:请求完成后的回调函数(不论成功与否都会执行) **布尔类型配置** - `async`:是否为异步请求。 - `cache`:是否进行缓存(主要针对get请求) - `timeout`:请求超时时间(毫秒) **get和post的区别** get是明文传输、post是放在请求体中,抓包可以看到 get 用来获取数据、post用来提交数据 get 请求数据会附加`?`、`&`、post请求的数据放在请求体中。 - `?`分割和传输数据 - `&`:多个参数用`&`
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32563 472 0
他的回复:
华为云ID:hw49725702 ### 了解Ajax ### 什么是Ajax? AJAX是异步的Javascript和XML。就是XMLHttpRequest对象与服务器通信,可以是JSON,XML,HTML和text文本格式发送和接收数据,Ajax是异步特性。 ajax两个特性: - 在不重新加载页面的情况下发送请求给服务器。 - 接受并使用从服务器发来的数据 同步和异步 同步:是按照顺序一次处理,当前的这件事没有做完,下一件事就执行不了。 异步:当前这件事没有做完,需要等待一段时间才能继续处理,此时不等待,继续执行下面的任务,后面的任务完成后,再去完成未完成的任务。 同源策略 - 浏览器的安全策略 - 协议名+主机名+端口号 当协议,主机名,端口号中任意一个不相同时,都算作不同源,不同源之间相互请求资源,就会跨源。 跨源解决方案(了解): - jsonp - CORS - postMessage - webcocket - Node中间件代理 同源的定义: 如果两个URL的协议名、端口号和host都相同的话则这两个URL是同源。 同源策略的目的是,是为了保证用户信息的安全,防止恶意的网站窃取数据 ### 发送Ajax请求的五个步骤 - 创建异步对象。即XMLHttpRequest对象。 - 使用open方法设置请求的参数open(method,url,async) - 发送请求 - 注册事件 - 获取返回的数据 ```js var obj = new XMLHttpRequest();//创建XMLHttpRequest异步对象 obj.open('get',' get.php');//设置请求的参数 obj.send();//发送请求 obj.onreadystatechange = function(){ //注册onreadystatechange事件,状态改变时就会调用 if(obj.readyState == 4 && obj.status == 200){ //返回数据 } } ``` onreadystatechange:存储函数,每当readyState属性改变时,就会调用该函数。 readyState:存有XMLHttpRequest的状态。从0到4 - 0:请求未初始化 - 1:服务器连接已建立 - 2:请求已接收 - 3:请求处理中 - 4:请求已完成,且响应已就绪 status:状态码 - 200 :服务器响应正常 - 304:该资源在上次请求之后没有任何修改 - 400:无法找到请求的资源 - 401:访问资源的权限不够 - 404:未找到页面 - 500:服务器内部错误
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32563 472 0
他的回复:
华为云ID:hw49725702 ### 第四章 数组与函数 创建数组的两种方式 ```js var arr = []; var arr = new Array(); ``` 数组从0开始编号 ```js var arr = ["A","B","C"]; alert(arr[0]);//A alert(arr[1]);//B alert(arr[2]);//C ``` 可以替换元素 ```js var arr[2]="D";//现在变成了 ["A","B","D"] ``` 获取数组的总个数:length ```js var arr = ["A","B","C"]; arr.length;//3 ``` 数组可以存放任意类型的元素 pop/push/shift/unshift方法 - push 在末端添加一个元素 - shift 取出第一个元素,整个队列往前移 - pop 取出并返回数组的最后一个元素 - push 在数组末端添加元素 Array.isArray 如果value是一个数组,则返回true;否则返回false ```js alert(Array.isArray({}));//false alert(Array.isArray([]));//true ``` 数组是基于对象的,不构成单独的语言类型 改变原数组的方法 a.splice()/ a.sort() / a.pop()/ a.shift()/ a.push()/ a.unshift()/ a.reverse() ### 不改变原数组的方法 slice、join、toLocateString、toStrigin、cancat、indexOf、lastIndexOf、 循环 - for 循环 ```js var arr = ["A","B","C"]; for(var i=0;i) } ``` - for...of循环 ```js var arr = ["A","B","C"]; for(var arrs of arr){ alert(arrs); } ``` - for...in循环 ```js var arr = ["A","B","C"]; for(var key in arr){ alert(arr[key]); } ``` 多维数组 ```js var maxs = [ [0,0,0,0], [0,0,1,0], [0,0,0,1], ]; alert(maxs[1][1]); ``` ### 函数的意义:高内聚,低耦合。复用与多态 函数可以封装任意多条语句,而且可以在任何地方,任何时候进行调用,非常灵活。 ```js function fn(a,b){ console.log(a-b); } fn(10,5);//输出5 fn(20,2);//输出18 ``` 函数可以通过他的函数名来调用,后面加(),就可以执行了。 ### 函数的定义 - 函数直接量定义 ```js var test = function fn(a,b){ console.log("函数直接量定义方法",a+b); } ``` - 构造函数定义 ```js var arr = new Function("arg1","arg2","arg3","console.log("构造函数的定义方法"),arg1+arg2+arg3"); ``` - function语句的定义方法 ```js function test1(arg1,arg2){ console.log("hehe"); } ``` - 对象定义方法 ```js var text = { init:function(){ console.log(111); } } ``` **return语句** - 函数的返回值只能通过`return`来返回,除了`return`以外,没有任何声明可以表示返回值 - 不要求函数是否返回一个值,但是每个函数都有`return`的权利。 - 无论`return`在哪里,只要执行了return同一条代码后,函数就会立即停止执行,并且立即退出,位于`return`之后的代码永远不会被执行。 - 一个函数可以有多条`return`。 - `return`语句可以不带任何返回值,这种情况,函数的返回值是`undefined`
发布时间 2020/07/13 10:25:31 最后回复 blateyang 2020/08/20 23:20:02 版块 社区活动
32563 472 0
他的回复:
华为云ID:hw49725702 ### 数据类型 数据类型: - 基本数据类型(值类型) - 1.`Number`:用于任何类型的数字:整数或浮点数 - 2.`String`:用于字符串:一个字符串可以包含一个或多个字符串 - 3.`Boolean`:用于true和false - 4.`null`:用于未知的值 - 5 `undefined`:未定义 - 6.`Symbol`:唯一的标识符 - 7.`BigInt`:用于任意长度的整数 - 引用类型 - `Object`:用于更复杂的数据结构 - 普通对象 - 数组对象 - 正则对象 - Date对象 > "JavaScript中有八种基本的数据类型(前七种为基本的数据类型也称原始类型)而Object为复杂数据类型" **type操作符** ```javascript console.log(typeof aaa);//undefined,这个变量没有定义但是不会报错,aaa此时是变量 console.log(typeof 1.1);//number数字型 console.log(typeof '1');//string 字符型 console.log(typeof true);// 布尔类型 boolean console.log(typeof {});//object 是一个对象 console.log(typeof function(){});// function 是一个方法,也是属于object类型的js里万物皆对象 console.log(typeof null);//object(1) null 是一个空指针 console.log(typeof Symbol("id"));//symbol ``` `typeof null 的结果是object`这其实是不对的,官方也承认了这是运算符的问题,现在只是为了兼容性留了下来。是javascript语言的一个错误 **Number `JavaScript` 中的变量可以保存任何数据。变量在前一刻可以是个字符串,下一刻就可以变成 `number`类型: ```js //没有错误 let message = 'hello'; message = 1234; ``` 允许这种操作的编程语言称为动态类型的编程语言。 `JavaScript`中有八种基本的数据类型。 ### Number类型 ```js let n = 123; n = 12.45; ``` `number`类型代表整数和浮点数。 八进制 0~7 程序里面数字前面加0 表示八进制 ```js let num = 011; console.log(num); //转为十进制就是9 ``` 十六进制 0-9 a-f 数字前面加0x表示十六进制 ```js let num1 = 0x9; console.log(num); ``` 数字型最大值: ```js console.log(Number.MAX_VALUE);//1.7976931348623157e+308 ``` 数字型最小值: ```js console.log(Number.MIN_VALUE);//5e-324 ``` 数字可以有很多操作,比如。+ - * / % 等等。 除了常规数字,还有特殊数值 也属于这种类型 :`Infinity`、`-Infinity` 和 `NaN`。 - `Infinity `无穷大 ∞。 大于任何值 我们可以通过除以 `0 `来得到它: ```js alert(1 / 0); //Infinity ``` isNaN()这个方法用来判断非数字 并且返回一个值,如果是数字返回的是false,如果不是数字返回的是true ```js console.log(isNaN(25));//false console.log(isNaN("呵呵"));//true ``` - isNaN - 检测当前值是否是有效数字,返回true代表不是有效数字,返回false是有效数字 - `isNaN(12)===false` - `isNaN('1')===false` - `isNaN(true)===false` - `isNaN(false)===false` - `isNaN(null)===false` - `isNaN(undefined)===true` - `isNaN({name:9})===true` - `isNaN([11,12])===true` - `isNaN([12])===false` isNaN检测的机制 - 首先验证当前要检测的值是否为number类型的,如果不是,浏览器会默认的把值转换为数字类型 - 把非数字类型转换为数字 - 其它基本类型转换为数字,直接使用Number这个方法转换的,如果当前字符串中出现任意一个非有效数字结果则为NaN - 当检测的值已经是数字类型,是有效数字返回false,不是返回true **NAN的比较** `NaN == NaN:false NaN`和谁都不相等 检测是否为有效数字 ```js if(isNaN(num)){ // 检测是否为有效数字 } ``` ### BigInt 类型 在JavaScript中 " number"类型无法代表大于 253 (或者小于-253)的整数。 通过n附加到整数字段的末尾来创建BigInt ```js const bigInt = 12312312312231231313131313n; ``` 兼容性问题 目前 `Firebox `和 `Chrome` 已经支持 `BigInt`了,但 `Safari`/`IE`/`Edge` 还没有。 ### String类型 JavaScript中的字符必须被括在引号里。 ```js let str = '哈哈'; let str1 = "你猜" let phease = `can embed ${str}`; ``` 转义符\开头 常用的转义符: - \n 换行 - \\ 斜杠\ - \' 单引号 - \" 双引号 - \t tab缩进 - \b 空格 案例: ```js alert('锄禾日当午\n"汗滴和下土"'); ``` 字符串长度通过字符length属性可以获取整个字符串长度 ```js let str = 'This is a cat'; console.log(str.length);//13 ``` 字符串拼接 多个字符串之间可以使用 + 进行拼接 可以加任何类型的。 ```js let name= 'vue'; console.log(name+'真棒!')//vue真棒! console.log('12'+24);//1224 console.log(12+24);//36 ``` 新增属性:反引号是 **功能扩展**引号。他们允许我们通过变量和表达式包装在${...}中,来将它们嵌入到字符串中。例如: ```js let name = "json"; //嵌入一个变量 alert(`helo,${name}!`);//helo,json! ``` ${...}内的表达式 会被计算,计算结果会成为字符串的一部分。可以再${...}内放置任何东西:名为name的变量,或者1 +1的算数表达式。 需要注意的是,这仅仅在反引号内有效,其它引号不允许这种嵌入。 ```js alert("the result is ${ 1 + 1 }");//使用双引号不会计算 ${...} ``` ### Boolean类型(逻辑类型) `boolean` 类型仅包含两个值:`true` 和 `false` 通常用于存储 `yes`或 `no`的值:`true `|`yes`,`false` | ` no` ```js let num = 5 > 6; console.log(num); // false ``` ### null 值 特殊的 `null`值不属于上述任何一种类型。 它构成一个独立的类型,只包含 `null` 值 ```js let age = null; ``` `null` 仅仅代表一个无、空或值未知的特殊值 ### undefined 特殊值 `undefined` 和 `null`一样自成类型。 `undefined `的含义是未被赋值。 如果一个变量已被声明,那么它的值就是 `undefined`: ```js let x; alert(x);// 弹出undefined ``` ### object 类型 和 symbol 类型 object 类型是一个特殊类型。 其它所有的数据类型都被称为原生类型,因为他们的值只包含一个单独的内容(字符串、数字或者其它)。 `symbol`类型用于创建对象的唯一标识符。 ### typeof运算符 typeof 运算符返回参数的类型。当我们想要分别处理不同类型值得时候,或者想快速进行数据类型检验时,非常有用。 它支持两种语法形式: 1.作为运算符:`typeof` `x` 2.函数形式:`typeof(x)` 对 `typeof x` 的调用会以字符串的形式返回数据类型: ```js typeof undefined // "undefined" typeof true // "boolean" typeof alert //"function" typeof "foo" //"string" typeof Symbol("id") // "symbol" typeof 0 // "number" typeof null //"object" ``` ### 总结 JavaScript 中有八种基本的数据类型 (前七种为基本数据类型,也称原始类型,而object为复杂数据类型)。 - `number` 用于任何类型的数字:整数或浮点数,在 ±253范围内的整数。 - `bigint` 用于任意长度的整数。 - `string` 用于字符串:一个字符串可以包含一个或多个字符。 - `Boolean`用于 `true`和 `false`。 - `null` 用于未知的值。 - `undefined` 用于未定义的值。 - `symbol `唯一的表示符。 - `object` 更复杂的数据类型。
发布时间 2020/06/05 11:45:07 最后回复 @Wu 2020/07/05 23:55:07 版块 社区活动
55655 487 2
他的回复:
ID:hw49725702 ### 盒模型 CSS盒模型本质就是一个盒子,封装周围的HTML元素。它包含 `border`、`padding`、`margin`、`content`。 ### 一、边框(border) `border:border-width|| border-style || border-color` 边框会影响盒子的实际大小。 ```css div{ width:200px; height:200px; border:10px solid #000; } ``` 此时 `div`是 `220`*`220px`、边框会额外增加盒子的实际大小。有两种解决方案: 1.测量盒子大小的时候不量边框。 2.如果测量的时候包含了边框则,需要width/hegiht减去边框宽度。 ### 二、内边距(padding) `padding`属性用于设置内边距,即边框与内容之间的距离。 | 属性 | 作用 | | -------------- | :------: | | padding-left | 左内边距 | | padding-right | 右内边距 | | padding-top | 上内边距 | | padding-bottom | 下内边距 | ```css div{ width: 200px; height: 200px; border:1px solid red; padding: 50px; } ``` - padding可以撑开盒子,如果没有指定 `width`或 `hegiht`、`padding`不会撑开盒子。 - 上面这个盒子 `width:200px;hegiht:200px;真实占有宽度是302*302还要加上 `padding `和 `border` ### 三、外边距(margin) `margin`属性用于设置外边距,既控制盒子和盒子之间的距离。 | 属性 | 作用 | | ------------- | -------- | | margin-left | 左外边距 | | margin-right | 右外边距 | | margin-top | 上外边距 | | margin-bottom | 下边距 | - `margin`水平居中,必须指定宽度,左右外边距设置为 `auto` ```css div{ width:1060px; margin:0 auto; } ``` 行内元素和行内块元素水平居中给其父亲添加 `text-align:center` **外边距合并** - 使用 `margin定义块元素的垂直边距时,可能会出现外边距合的并`。 相邻块元素垂直外边距的合并: - 当上下相邻的两个块级元素相遇时,如果上面的元素有下外边距 `margin-bottom`,下面的元素有上外边距 `margin-top`,则它们之间的垂直间距不是 `margin-bottom`与 `margin-top`之和取两个值中的较大者这种现象被称为相邻元素垂直外边距的合并。 **嵌套块元素垂直外边距的塌陷** - 对于两个嵌套关系(父子关系)的块元素,父级有上边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。 ```htmlDocument.father { width: 400px; height: 400px; background-color: #3498db; margin-top: 50px; } .son { width: 200px; height: 200px; background-color: #27ae60; margin-top: 100px; } ``` 解决方案: - 可以为父元素定义上边框(`border: 1px solid transpar399;`) - 可以为父元素添加( `overflow:hidden)` - 可以为父元素定义上内边距(` padding-top: 1px;`) **浏览器给body默认的 `margin`8个像素** - 行内元素为了兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了。 IE盒子模型: IE盒模型的范围也包括 `margin`、`border`、`padding`、`content`,和标准W3c盒子模型不同的是:IE盒模型的 `content` 部分包含了 `border和` `padding`. CSS盒模型和IE盒模型的区别: - 在标准盒子模型中,width和height指的是内容的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸、但是会曾加元素框的总尺寸 - IE盒子模型中,width和height指的是内容区域+border+padding的宽度和高度。 display属性 - none 不会被显示 - block 转换为块元素 - inline-block转换为行内块 ### 浮动 清除浮动 ```css .clearfix:after{ content:""; display:block; clear:both; } ```
发布时间 2020/06/05 11:45:07 最后回复 @Wu 2020/07/05 23:55:07 版块 社区活动
55655 487 2
他的回复:
ID:hw49725702 ### 第二周 表单是最重要的交互功能。 使用``定义表单,表单有两个重要的属性`action`和`method` - `action`属性定义了表单要提交的地址。 - `method`属性定义了表单提交的方式 表单提交的两种方式: - get - post **input** input是一个单标签,属性`type`代表了input的表单类型,input标签就是通过`type`属性的不同取值来定义不同的表单控件 type属性值: - `text`:单文本框 - `radio`:单选按钮 - `checkbox`:多选按钮 - `button`:按钮 - `reset`:重置 - `file`:文件上传 **select**下拉列表 `select`用来定义列表,``用来定义列表项 textarea文本域 - ``用来表示多行文本 ### CSS选择器 - 通配符选择器:`*{margin:0;padding:0;}`匹配所有的元素 - 标签选择器:`p{color:red;}`选择某个标签名 - id选择器:`#app{color:red;}`通常用JS操作ID - 类选择器:`.content{width:1180px;}`可以使用两个类名控制一个元素、 属性选择器:`[title]`用于选取指定属性的元素 - `[arrt = value]`:用于选取带有指定属性和值得元素 - `[arrt~=value]`:用于选取属性值中包含指定词汇的元素 伪类选择器: - `:link`:表示未访问的链接 - `:visited`:表示已被访问的链接 - `:hover`:鼠标经过链接上方时的状态 - `:active`:链接被激活时。 - 要同时使用这几个元素,顺序一定不要乱 派生选择器: - 子选择器:`p>span{color:red;}` - 相邻兄弟选择器:`div+p{color:red};` 选择器的权重: - 通配符`*` ----> `0` - 标签选择器 ----->`1` - `类、伪类、属性选择器的权重`------>`10` - `id`选择器---->100 - 内联样式----->1000 - 特殊处理`!important(强制使用)`:尽量不使用 **css常用属性** font字体属性 ```js p{ font-size:16px;/*字体大小*/ font-family:"宋体";/*字体类型*/ line-height:30px;/*行高*/ font-style:italic;/*斜体*/ font-weight:bold;/*粗体*/粗体 font-variant:small-caps;/*小写变大小*/ } ``` **文本** - 属性值可以是颜色名、十六进制颜色值、RGB颜色值 对其方式: - text-align:(left)(right)(center);属性来设置文本的对齐方式 - 缩进:`text-indent` 装饰线:`text-decoration` - `underline`(下划线) - `overline`(上划线) - `line-thrpugh`(中划线) - 默认值为none,表示没有线 清除列表的默认样式: `list-style:none` 背景:`background : background-color background-image background-repeat background-attachment background-position;`
发布时间 2020/06/05 11:45:07 最后回复 @Wu 2020/07/05 23:55:07 版块 社区活动
55655 487 2