HTML
HTML中的内容
1.HTML样图
| <!DOCTYPE html> 声明解析内容(以什么方式解析标签)告诉浏览器用标准版解析,避免兼容问题(标准h5规范解析) |
| |
| <html lang="en"> |
| 根标签(树形结构)head 和 body 字标签 |
| 只要不是在网页中显示的内容都要放到head中取(标题,解释器) |
| |
| <head> head 告诉浏览器 解释性内容 |
| |
| <meta charset="UTF-8"> 用的编码格式解析 |
| <title>Title</title> 网站标题内容 |
| css代码 |
| js代码 |
| jq代码 |
| </head> |
| |
| <body> |
| |
| 标签存放位置 |
| body 网站内呈现的内容放到body里面 |
| |
| </body> |
| </html> |
2.格式分类
| 功能: |
| 1.块级标签:独占一行 |
| 2.内联标签:可以和其他标签共享一行 |
3.标签格式
| <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名> |
| <标签名 属性1=“属性值1” 属性2=“属性值2”…… /> |
| |
| 标签内有不同的属性,不同的属性和不同的属性值,页面呈现效果不同 |
4.标签的嵌套
| 标签嵌套的格式 |
| 1.<a><b>123<b><a> 可以 |
| 2.<a><b>123<a><b> 不行 |
HTML标签-基础标签
1.标题标签
| 主要是做为网页标题使用 |
| 一共分为6个级别从大到小 |
| <h1>标题</h1> |
| <h2>标题</h2> |
| <h3>标题</h3> |
| <h4>标题</h4> |
| <h5>标题</h5> |
| <h6>标题</h6> |
2.段落标签
| 用于文章段落作用,可以起到间隔作用(中间会有一些空隙) |
| <p>这是段落1</p> |
| <p>这是段落2</p> |
3.换行标签
| 用于将一行的内容进行换行(用的很少) |
| |
| 这是换行<br> |
| 这是换行<br> |
4.字体加粗标签
| 使用后可以使字体变粗 |
| |
| <b>这是字体加粗</b> |
| <strong> 内容 </strong> |
5.字体倾斜标签
| 使字体倾斜 |
| <i>这是字体倾斜</i> |
| <em>字体会变为斜体</em> |
6.删除标签
| 在页面中呈现内容中间被一条横线贯穿的效果 |
| <del> 内容 </del> |
7.特殊符号(空格)
| 网址:http://www.fhdq.net/ts/177.html |
| |
| # 相当于一个空格呈现 |
| © # © |
8.水平分割线
| 作用:水平分割线 |
| <hr> |
| 内容1 |
| -------------- |
| 内容2 |
HTML标签-高级标签
1.div和span标签
| <div> 书写内容 </div> 块级标签 没有样式 主要定义文档中的分区 |
| <span> 书写内容 </span> 内联标签 没有样式 定义组合文档中的行内元素 |
| |
| 处了这两个标签没有样式,其他的别签都带有样式。 |
2.超链接标签 a标签
| 内联标签,主要负责网页内部跳转作用 |
| 格式: |
| <a href="网络地址">内容</a> |
| |
| 属性: |
| 1.href="网络地址" 必须存在 |
| 2.target = "_self" 默认在跳转网页时,覆盖原来的网页 target ="_blank" 保留原网页 |
| 3.title属性:主要作用:提示用户,当鼠标悬浮在标签上时,会出现提示内容:title="提示内容" |
| |
3.img图标标签
| 书写方式: |
| <img src="图片地址" title="当将鼠标放到图片上时提示内容" alt="当图片加载不出来时提示的内容"> |
| |
| height="" 设置显示的高 |
| width="" 设置显示宽 |
| |
| 用于显示图片使用,图片的大小主要还是,设置块级是应占的大小 |
4.列表标签
| 1.有序列表标签 |
| <ol> |
| <li> 内容</li> |
| <li> 内容</li> |
| <li> 内容</li> |
| </ol> |
| 存在默认样式 1.2.3的形式(存在排序的) |
| |
| 2.无序列表标签(使用较多) |
| <ul> |
| <li> 内容</li> |
| <li> 内容</li> |
| <li> 内容</li> |
| </ul> |
| |
| 存在默认样式 一个实心圆为样式(不存在排序) |
| |
| 3.自定义 |
| 作用: 定义列表,列表显示 |
| <dl> |
| <dt>帮助中心</dt> 定义的title dt |
| <dd>账户管理</dd> 定义的描述 dd |
| <dd>购物管理</dd> 定义的描述 dd |
| <dd>联系帮助</dd> 定义的描述标签 dd |
| </dl> |
| 默认显示效果: |
| 帮助中心 |
| 账户管理 |
| 购物管理 |
| 联系帮助 |
| |
5.表格标签
| 在页面中以表格形式呈现 |
| 作用:在网页中显示表格 订单操作 |
| 由表头和表内容组成 |
| tr : 行的意思 |
| th : 表头 |
| td : 表头下面对应的每一个内容 |
| caption : 是表格的标题,会在表格正上方进行居中显示 |
| border : 中文边界 给table 表格设置边框线 (表格带有间隙) |
| cellspacing : 设置单元格的表格间隙 |
| <table border='1' cellspacing="0"> |
| <caption>商品清单</caption> |
| <tr> |
| <th>名称</th> |
| <th>品牌</th> |
| <th>数量</th> |
| <th>入库时间</th> |
| </tr> |
| <tr> |
| <td>电视</td> |
| <td>ll</td> |
| <td>160</td> |
| <td>2022/10/10</td> |
| </tr> |
| </table> |
| |
| ****** table 表格的横向合并和纵向合并 **** |
| <th colspan="2">数量/入库时间</th> 跨横向列进行合并(合并的列) |
| <td rowspan="2">160</td> 跨纵向合并(合并单元格) |
| |
| |
| 属性:border="1",表格的外部框架的粗细 |
6.网页小标题标签
| <link rel="icon" href="图标的地址"> |
| |
| 也是一个外部链接标签,链接其他的内容 |
| href 参数:规定被链接文档的位置 |
HTML标签-表单标签
HTML 表单用于搜集不同类型的用户输入
| 格式: |
| <form action="提交地址" method="提交方式"> |
| . |
| form elements |
| <input type="text" placeholder="提示信息用户名"> |
| <input type="password" placeholder="提示信息密码"> |
| <input type="submit" value="立即提交"> |
| |
| </form> |
| |
| form代表一个表单域(内部都是表单标签) |
| |
| action: 提交数据的目标地址 |
| method: 设置请求参数格式 get post |
| get 是将用户的数据放到url的路径后面,不安全 |
| post 将数用户据放到了请求体 后面,非常安全 |
| |
| enctype: 决定服务端用什么方法去解开 默认为 urlencoded格式 |
| content-type:multipart/form-data 用于文件上传(文件数据使用) |
| 自闭合,内联标签标签 |
| 自带参数 type="text" |
| <input type="text"> 当参数是text是,可以显示输入的文本 |
| <input type="password"> 当参数是password ,输入的文本是不显示的 |
| <input type="submit"> 当参数时submit,就会显示一个提交按钮,当点击后触发事件,将参数的以有效键值对形式传入服务器 |
| |
| 例如: |
| <p>姓名:<input type="text" name="user"></p> |
| <p>密码:<input type="password" name="pwd"></p> |
| |
| 将用户输入的内容,和name的值进行打包传入服务器 |
| 当input标签内的type属性的值设置:type="checkbox" |
| |
| 格式: |
| <input type="checkbox" name="" value=""> |
| 必须要设置name和value,当勾中后提交,会将name和value打包发给服务器 |
| checked = "checked" 当添加后,就会默认勾选 |
| |
| 例如: |
| <p>爱好 |
| 篮球<input checked = "checked" type="checkbox" name="hobby" value="basketball"> |
| 足球<input type="checkbox" name="hobby" value="football"> |
| 双色球<input type="checkbox" name="hobby" value="shuangseqiu"> |
| </p> |
| |
| 当input标签内的type属性的值设置:type="radio" |
| 单选框,只能选中一个值。 |
| <input type="radio" name="" value=""> |
| 必须要设置name和value,当勾中后提交,会将name和value打包发给服务器 |
| |
| 无论多少个选项,name值必须是同一个,要不然就不属于单选框了 |
| |
| 例如: |
| <p>性别: |
| 男<input type="radio" name="gender" value="1"> |
| 女<input type="radio" name="gender" value="2"> |
| 其他<input type="radio" name="gender" value="3"> |
| </p> |
| 当input标签内的type属性的值设置:type="date" |
| <input type="date" name=""> |
| |
| name属性必须存在 |
| 当选好日期后,提交,name的值和选好的日期打包给服务器 |
| |
| 例如: |
| <p>日期 |
| <input type="date" name="birth"> |
| </p> |
| |
5.select下拉菜单
| 书写格式: |
| |
| <select> |
| <option value ="">内容</option> |
| <option value ="">内容</option> |
| <option value="">内容</option> |
| <option value="">内容</option> |
| </select> |
| |
| 属性: |
| multiple="multiple" 可以选着多个值提交 |
| size="设置显示数量" |
| |
| 当选择完毕后,会将value的内容 返回 |
6.textarea多行文本框
| 格式: |
| <textarea name="键值对的键" cols="宽值" rows="长值" placeholder="设置在文本框内让用户看到的内容"></textarea> |
| |
| rows :代表的是行数 |
| cols :代表的是列数 |
| 用来控制文本域的大小 |
| 主要用与写大型的文章使用 |
7.按钮标签
| 1.没有带标签事件,0事件标签 value是为了展示和提示大致功能 |
| <input type="button" value="文本"> |
| |
| 2.重置用户选中全部内容,用户重置标签 带事件 |
| <input type="reset"> |
| |
| 3.拥有事件,与submit效果相同,只不过要在form表单内容才有效果,只会上传表单内部的内容给服务器 |
| <button>本文</button> |
| |
| 4.提交数据标签,将用户输入的内容提交给服务端上 |
| <input type="submit"> |
8.label标签
| 提升用户的体验效果 |
| 当用户点击文本部分是,自动将光标跳到内容框内等待用户输入 |
| 格式: |
| <label for="坐标值">文本</label> |
| <input type="text" name="user" id="坐标"> |
| |
| label需要配合其他的标签使用 |
| 需要设置坐标,input,id坐标 == label ,for坐标 |
HTML标签-表格标签
| <table> # 设置一个表格 |
| <thead> # 定义的表头 |
| <tr> # 表格行 |
| <th>1行1列内容</th> # 表头(1个或者多个) |
| <th>1行2列内容</th> # 表头(1个或者多个) |
| <th>1行3列内容</th> # 表头(1个或者多个) |
| </tr> |
| </thead> |
| |
| <tbody> # 定义的表中的内容 |
| <tr> # 表格行 |
| <td>2行2列内容</td> # 表内容行 |
| <td>2行3列内容</td> |
| <td>2行3列内容</td> |
| </tr> |
| </tbody> |
| </table> |
CSS
| css是对网页进行的一种渲染 |
| |
| 1.内嵌式优先级最高 |
| <p style='color:red'>wkx</p> |
| |
| 2.嵌入式 |
| <style> |
| css的代码 |
| </style> |
| |
| 3.外部引用 |
| <link rel="stylesheet" href="css代码链接"> |
| |
| 内联式:少用 |
| 维护难,重复多 |
| 不会产生额外的请求 |
| |
| 嵌入式: |
| 代码复用不方便,适合单页面引用 |
| 不会产生额外的请求 |
| |
| 外部式: |
| 方便维护 |
| 可以重复使用 |
| 会产生额外的请求(技术的更新不影响) |
| |
| 优先级: |
| 与先后顺序有关 |
| 内联式 > 嵌入式 > 外部式 |
| |
| 嵌入式 > 外部式 link 是写在style 上面还是下面 |
| <link rel="stylesheet" href="index.css"> |
| <style type="text/css"> |
| p{ |
| color: red; |
| } |
| </style> |
| 那么 style 就会覆盖 link 标签的样式 |
| 如果 link 在下面,就会覆盖style的样式 |
| |
css的选择器
签基本选择器
| 根据标签名字进行的选择 |
| 可以控制全部的选中的标签 |
| 1.标签选择器 |
| div { |
| css代码 |
| } |
| |
| <div>内容</div> 标签名 |
| |
| 2.id选择器 |
| #i1 { |
| css代码 |
| } |
| |
| <div id="i1">内容</div> 标签内部的id值 |
| |
| 3.class选择器 |
| .c1{ |
| css代码 |
| } |
| |
| <div class="c1">内容</div> |
| |
| 4.通配符选择器 |
| *代表通配符,整个页面的全部标签 |
| *{ |
| css代码 |
| } |
| |
| <div>内容</div> |
| .... |
| .... |
类选择器与id选择器
| <span id='span'></span> |
| <div class='active'></div> |
| |
| #span{ # id选择器 |
| color: blue; |
| } |
| |
| 选择网站中独有的特性的标签 id 就像身份证号一样,全网页只能出现一个独特的存在 |
| |
| .active{ # 类选择器 |
| color: gray; |
| } |
组合选择器
后代和子代选择器
| 针对多层嵌套标签进行选择 |
| |
| 1.后代选择器 |
| <span id='span'></span> |
| <div class='active'> |
| <div> |
| 111 |
| </div> |
| </div> |
| |
| .active div{ |
| // 当前active 标签下的div全部都会赋予当前样式 |
| } |
| |
| |
| 2.子代选择器(会更加准确) |
| <div class="c1"> |
| <div class="c2"> |
| </div> |
| |
| .c1 > .c2{ // 找到c1父级的c2子级进行选择 |
| css代码 |
| } |
| |
与或选择器
| 1.与选择器 |
| div.c1{ 当两个class都是c1,使用与选择器指定c1是什么 |
| css代码 |
| } |
| <div class="c1"> item1</div> |
| <p class="c1">item2</p> |
| <div> item3</div> |
| |
| |
| 2.或选择器 |
| div.c1,#i1{ 根据条件可以选择class 和id 选中标签 |
| css代码 |
| } |
| <div class="c1" > item1</div> |
| <p class="c1" id="i1">item2</p> |
| <div> item3</div> |
兄弟选择器
| 1.毗邻兄弟选择器 |
| .c2+.c3{ 根据条件找到标签的下一个兄弟发生变化 c3变化 |
| css代码 |
| } |
| |
| <div class="c1"> item1 </div> |
| <div class="c2"> item2 </div> |
| <div class="c3"> item3 </div> |
| <div class="c4"> item4 </div> |
| <div class="c5"> item5 </div> |
| |
| 2.普通兄弟选择器 |
| 根据条件,除了选中的标签的下面兄弟发生变化 c2不发生变化 一下的发生变化 |
| .c2 ~ .c5{ |
| css代码 |
| } |
| |
| <div class="c1"> item1 </div> |
| <div class="c2"> item2 </div> |
| <div class="c3"> item3 </div> |
| <div class="c4"> item4 </div> |
| <div class="c5"> item5 </div> |
组合选择器交际选择器
| 1.组合选择器 |
| <span>测试</span> |
| <span>测试吧</span> |
| <h3>6666</h3> |
| |
| span,h3{ // 标签名称使用逗号隔开,是标签使用同一个样式 |
| color: blue; |
| } |
| |
| 2.交集选择器 |
| 就是将两个样式重合的部分 |
| a{ |
| color: blue; |
| } |
| p{ |
| color: blue; |
| } |
| 可以写成 |
| ap{ |
| color: blue; |
| } |
| |
| |
属性选择器
根据标签的属性进行选择
| 1.属性选择器 |
| [type]{ 根据标签的所带属性进行选择 |
| css代码 |
| } |
| |
| <input type="text"> |
| <input type="password"> |
| |
| 2.带名属性选择器 |
| input[type="text"]{ 根据标签的所带属性和标签的名字进行选择(更准确) |
| css代码 |
| } |
| |
| <input type="text"> |
| <input type="password"> |
| |
| 3.模糊匹配选择器(和正则re差不多) |
| ^= 以什么开头查询 |
| $= 以什么形式结尾 |
| *= 包含全部的值 |
| |
| [href$=".png"]{ 以.png结尾全部选中 |
| css代码 |
| } |
| |
| <a href="1.png">click1</a> |
| <a href="2.png">click2</a> |
伪类选择器
| 设置鼠标在点击,悬浮,进入的标签颜色状态 |
| 1.设置标签本身的颜色 |
| a:link{ |
| color: red; |
| } |
| |
| 2.设置访问标签后的颜色 |
| a:visited{ |
| color: red; |
| } |
| |
| 3.设置鼠标悬浮时标签的颜色 |
| a:hover{ |
| color: red; |
| } |
| |
| 4.设置鼠标点击时标签的颜色 |
| a:active{ |
| color: red; |
| } |
| |
| <a href="">文本</a> |
添加标签块级标签和内联标签
| 1.添加一个块级标签 |
| #i1:after{ |
| content: "这是一个伪类构造的块级标签"; |
| display: block; |
| } |
| display设置block时就是块级标签 |
| content: 设置标签的文本 |
| |
| 2.添加一个内联标签 |
| #i1:before{ |
| content: "这是一个伪类构造的内联标签"; |
| display: inline; |
| } |
| display设置inline时就是内联标签 |
| content: 设置标签的文本 |
| |
| <div id="i1">aiv标签</div> |
样式继承与选择器优先级
| 指当父标签下面的子标签没有设置颜色时,父标签设置颜色,子标签也会继承父标签设置的颜色。 |
| 不是全部的都会继承,只有一部分继承。 |
| 选择器的优先级 |
| !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 |
| |
| 1 内联样式表的权值最高 style="" 1000; |
| |
| 2 统计选择符中的ID属性个数。 #id 100 |
| |
| 3 统计选择符中的CLASS属性个数。 .class 10 |
| |
| 4 统计选择符中的HTML标签名个数。 标签名 |
| 注意事项: |
| 1、有!important声明的规则高于一切。 |
| 2、如果!important声明冲突,则比较优先权。 |
| 3、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。 |
| 4、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。 |
| 5、用数字表示只是说明思想,一万个class也不如一个id权值高 |
文本操作
| 1.设置字体倾斜 |
| font-style:italic; |
| font-style:oblique; |
| |
| 2.设置文字的粗细 |
| font-weight: bolder; 100-900 设置数值 |
| |
| 3.设置字体大小em为单位1em=16像素px |
| px 是页面的绝对单位 |
| em 是页面的相对单位 如果字体为10px 那么 1em=10px默认字体大小16px |
| font-size: 1em; |
| |
| 4.设置字体族(字体样式)确认电脑中是否安装了这个字体 |
| font-family:sans-serif ; |
| |
| 5.设置字体的颜色 |
| color:颜色; |
| color:rgb(255,255,255) # rgb设置 |
| rgba(255,255,255,0.4) # 将透明程度调整0.4 可以调整透明程度 |
| color:#fff; # 16进制设置 |
| |
| |
| 6.文本在区域内居中 |
| text-align: center 居中对齐 |
| text-align: right; 右对齐 |
| text-align: justify; 两端对齐 |
| text-align: left; 左对齐 |
| |
| 7.文本属性上下线 |
| 文本默认 text-decoration: none; |
| text-decoration: line-through; 对字体设置中间线 |
| text-decoration: overline; 对字体设置上划线 |
| text-decoration: underline; 对字体设置下划线 |
| |
| a标签一般会将下划线进行设置取消 |
| text-decoration: none; 使用这个属性可以实现取消 |
| |
| 8.文本的缩进 |
| 假如 文本为16px 那么1em = 16px |
| text-indent: 2em; |
| |
| 9.文本的行高(文本自动垂直居中) |
| 无论设置多少的行高,文本永远在垂直居中的位置 |
| 字体的大小一定要小于行高,不然就会溢出 |
| line-height: 60px; 设置行高60px、 |
| |
| 10.文本字间距 |
| letter-spacing: 5px; 只对字符和中文有效果 h间距e间距l间距l间距o |
| word-spacing: 100px; 设置文字距离,对英文单字的距离 hello 间距 word |
| |
| |
清除某些html元素的默认样式
| 1.body 标签默认是存在一个外边距样式 |
| 默认margin:8px; 的样式 |
| margin: 0; 将8px清楚为0 |
| |
| 2.p 标签默认存在外边距样式 |
| margin:16px; |
| margin: 0; 将16px清楚为0 |
| |
| 3.ul ol dl 都是存在默认样式 |
| margin:0; |
| padding:0; |
| list-style:none; # 清楚默认样式的. |
| |
| 4.input默认样式 自带边框样式与外线样式 |
| border:none; |
| outline:none; |
| 5.a标签去除下划线样式 |
| text-decoration:none; |
标签背景设置
| .c1{ |
| background-image: url(图片路径); |
| background-repeat:图片背景参数; |
| background-position:图片背景的起始位置 |
| } |
| |
| <div class="c1">文本</div> |
| |
| background-repeat属性参数 |
| repeat-x 背景图像将在水平方向重复。 |
| repeat-y 背景图像将在垂直方向重复。 |
| no-repeat 背景图像将仅显示一次。取消默认填充 |
| |
| background-position属性设置 |
| x% |
| y% |
| 默认参数0,0 |
| center center 居中设置 |
| |
| background-size 属性 |
| length |
| 如果只设置一个值,则第二个值会被设置为 "auto"。 |
| 20px 30px 第一个值设置宽度,第二个值设置高度 |
| |
| percentage |
| 以父元素的百分比来设置背景图像的宽度和高度。 |
| 第一个值设置宽度,第二个值设置高度。 |
| 如果只设置一个值,则第二个值会被设置为 "auto"。 |
| |
| contain |
| 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 |
| 背景图像的某些部分也许无法显示在背景定位区域中。 |
| cover |
| 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
| |
| body{ |
| height: 100%; |
| width: 100%; |
| background-image:url('./R\ -\ 副本.jfif') ; |
| background-repeat:no-repeat; |
| background-size:cover; |
| } |
补充属性
列表(默认格式取消)
| ul { |
| list-style-type: none; 设置将列表的默认格式取消 |
| } |
| |
| <ul> |
| <li>内容</li> |
| </ul> |
设置属性设置一个元素的垂直对齐方式
| img{ |
| vertical-align: 修改进行对齐底部; |
| } |
| <img src="" alt="" class="c1"> |
标签悬浮小手
| cursor: pointer; 文本标签在鼠标悬浮时是一条杠 使用这个属性可以变为小手与a标签相似 |
display属性
| 修改标签的属性 |
| |
| 文本标签 |
| h1-h6 |
| p |
| strong |
| em |
| a |
| span |
| img |
| |
| 排版标签 |
| br/hr |
| ul/ol/dl |
| li |
| div |
| input |
| table |
| select |
| form |
| option |
| |
| |
| 块级元素 |
| div ul ol p h table form |
| 特点 |
| 1.独占一行 |
| 2.可以设置宽高,如果不设置宽度那么就是父级元素的100% |
| 行内元素 |
| a span em strong label |
| 特点 |
| 1.在一行内显示 |
| 2.不能设置宽高,默认的宽高为文本内容占据的宽高(文本就是撑起标签的宽高) |
| |
| 行内块 |
| input img |
| 特点 既有行内元素也有块级元素的特性 |
| 1.在一行内显示 |
| 2.可以设置宽高 |
| |
| 可以进行标签的属性转换 |
| display中对块/行/行内块的对应竖向 |
| 控制元素的显示特性 |
| display:block; # 显示块级元素 |
| display:inline; # 显示行内元素 |
| display:inline-block; # 显示行内块元素 |
| display: none; # 隐藏当前标签(设置元素的隐藏) |
| |
| 使用的最多的 是行内转为行内块 |
盒模型
| 盒子模型是什么: |
| css model 属于用来设计和布局时使用的 |
| 所有的html元素可以看做一个盒子 |
| 他包括 外边距 边框 内填充 和实际内容 |
| |
| 实际内容: 文本 图片 或者其他标签 |
| 例如: |
| 将月饼盒 与 月饼的距离 : 内填充 padding |
| 月饼盒1 与 月饼盒2的距离 : 外边距 margin |
| 月饼盒外面的一圈 : 边框 border |
| |
| 块级元素都具备盒子模型的特征 |
属性
| 1.padding : 内边距 盒子边框到内容的的距离 |
| 作用:设置盒子与内容之间的距离 |
| padding: 上下左右 4个方向 |
| padding-bottom:下; |
| padding-top:上; |
| padding-left:左; |
| padding-right:右; |
| 例如: |
| 内边距的 50px 上下左右 实际300px * 300px |
| height:200px |
| width:200px |
| padding: 50px; |
| 如果还是想要200*200的盒子那么就需要进行计算,真正的内容设置为100*100 |
| height:100px |
| width:100px |
| padding: 50px; |
| |
| 2.border: 盒子的边框 |
| border: none; |
| outline: none; |
| 边框3要素:粗细(width) 样式(style) 颜色(color) |
| border-width:10px ; |
| border-style: solid ; solid实线 dotted点线 double双线 deshed虚线 |
| border-color: red; |
| 例如: |
| 边框宽度3px 实线 颜色为green |
| border: 3px solid green; |
| |
| |
| 3.margin: 盒子与盒子之间的外边距 |
| margin-right: 10px; # 盒子外边距左 水平方向 |
| margin-left: 10px; # 盒子外边距右 水平方向 |
| margin-top: 10px; # 盒子上方10px 垂直方向 |
| margin-bottom: 10px; # 盒子外边距下方10px 垂直方向 |
| 在垂直方向上 会出现外边距合并的现象,小的会被大的合并 外边距塌陷 |
| 尽量只设置一个方向的距离,防止外边距塌陷 |
| |
| 注意:设置height 与 width 宽高是内容的宽高,而不是盒子模型的宽高 |
| |
| |
| 可以使用padding 来填充行内元素 只要填充的高度 = 设置的行高就可以 |
盒子剧中
| *{ |
| padding: 0; |
| margin: 0; |
| } |
| .class{ |
| width: 100%; |
| height: 40px; |
| background-color: black; |
| } |
| .content{ |
| width: 1200px; |
| height: 100%; |
| background-color: antiquewhite; |
| /* 只显示左右居中,上下不显示 */ |
| margin: 0 auto; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="class"> |
| <div class="content"></div> |
| </div> |
| </body> |
| </html> |
浮动属性
介绍
| 1.正常文档流 从上到下,用左到右逐一加载 |
| 块级元素,随着浏览器读取文档的顺序,自上而下垂直分布,一行一个形式 |
| 行内元素,晦涩者浏览器文档的顺序,从左往右水平分布,一行多个形式占据页面的位置,行内元素满一行才会 |
| 接着排列 |
| 2.浮动文档流 |
| 浮动元素的特性 |
| 1. 任何申明为float 的元素都会自动被设置为一个行内块状元素,具有行内块状元素的特性。 |
| 2. 假如某个元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。 |
| 3. 在标准浏览器中如果浮动元素a脱离了文档流,那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置,使页面布局产生变化。 |
| 4. 如果水平方向上没有足够的空间容纳浮动元素,则转向下一行。 |
| 5. 字围效果:文字内容会围绕在浮动元素周围。 |
| 6. 浮动元素只能浮动至左侧或者右侧。 |
| 7. 浮动元素只能影响排在其后面元素的布局,却无法影响出现在浮动元素之前的元素。 |
| |
| |
| |
| css提供的浮动特性float属性 |
| 浮动就是漂浮的意思,当设置浮动是就漂浮在上空。 |
| 假设有三个元素ABC |
| 1.当A未设置浮动,B设置浮动,C未设置浮动。 |
| 呈现的效果就是A第一行,C在第二行,B在C上面漂浮进行覆盖 |
| 2.当A设置浮动,B未设置浮动,C设置浮动。 |
| A在第一行浮动,B在第一行,A覆盖B,B占据了第一行。C在第二行浮动 |
格式
| 浮动的属性: |
| float:none; 不浮动 默认情况下 |
| left 左浮动 |
| right 右浮动 |
| inherit 继承父元素的浮动效果 |
| |
| 实现多列的排版布局 |
字围
| float浮动的字围效果 |
| 在设置浮动是,不会对文本进行覆盖(图片浮动,文字不会被覆盖,会被围到,) |
| |
| |
| 环绕图片显示 |
| |
| 只需要对图片进行设置浮动,那么文字就会围绕着图片 |
| 因为当浮动时,会出现盒子收缩的现象 |
| img{ |
| float:left; |
| } |
| .div{ |
| height: 500px; |
| width: 500px; |
| } |
| <div class="div"> |
| <img> 图片 |
| <p>文字p> |
| </div> |
浮动元素现象
| 正常网页属于流式网页,从左往右,从上往下 被称为标准文档流 |
| 当盒子设置了float 浮动时,那么这个盒子就脱离了标准的文档流。 |
| |
| 浮动的现象: |
| 1.脱离标准的文档流 |
| 2.浮动元素的互相贴靠 |
| 3.浮动的盒子有收缩现象 |
| 要浮动就一起浮动,要是不浮动那么就浮动 |
| |
| 浮动具有破坏性:父级塌陷的情况 |
| 父级元素内的子元素浮动,子元素无法撑起父级元素 |
| 浮动脱离了标准文档流,浮动的元素会飘在文档流之上 |
| |
父级塌陷
| float浮动的父级塌陷 |
| 1.在设置父级是没有设置宽和高, |
| 2.使用子级的宽和高撑起来了父级的高度 |
| 3.当子级使用float浮动特性是,子级浮在空中,父恢复原先的状态,没有高度和长度 |
| 4.当其他父设定内容是,就会和上一层父贴合,浮空的子级覆盖其他父的高宽 |
塌陷的解决方式
| 1.给父盒子设置固定高度 |
| 缺点:不灵活,后期不好维护 |
| 应用:网页中的固定高度区域,比如固定的导航栏 |
| |
| 2.内墙法 |
| 在浮动的div下设置一个div 设置属性 |
| clear:both |
| <div style='float:left'></div> |
| <div style="clear:both"></div> |
| 规则就是在最后一个浮动元素后面加上一个空的块级元素,并且设置该属性clear:both |
| 缺点:结构冗余 |
| |
| 3.伪元素(选择器)清除法 |
| 标签/类/id::after 是一个伪元素:主要作用创建一个伪元素,作为选中的元素内的最后一个子元素 |
| 主要内部的属性就是一个content:'对应创建的文本内容' |
| 父类标签::after{ |
| 结合内墙法 |
| content: ''; # 设置一个元素空的 |
| display: block; # 块级标签 |
| clear: both; # 设置clear 属性清除浮动,将设置浮动的元素当做没有设置浮动元素来看待 |
| } |
| .div::after{ |
| content: ''; |
| display: block; |
| clear: both; |
| } |
| <div class='div'> |
| <div style='float:left'></div> |
| </div> |
| |
| 4.overflow: |
| overflow: visible; 默认属性 超出的部分进行可见 |
| overflow: hidden; 超出部分隐藏 |
| overflow: scroll; 超出的部分 用滚动条进行显示 |
| overflow: auto; 超出部分由浏览器进行决定 |
| overflow: inherit; 继承父级的overflow |
| |
| 在存在浮动的的父标签属性中 设置overflow: hidden;形成bfc |
| <div class="div" style="overflow: hidden"> |
| <div class="div1" style='float: left;'></div> |
| </div> |
| |
| 清除塌陷的最好方式:给浮动元素的父标签设置高度 |
| |
解决父级塌陷的代码实例
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <style> |
| .top_bar{ |
| border: 1px solid red; |
| |
| |
| |
| |
| |
| |
| overflow: hidden; |
| } |
| |
| .child1 { |
| background-color: #747070; |
| float:left; |
| height: 200px; |
| width: 200px; |
| } |
| |
| .child2 { |
| |
| background-color: red; |
| float:right; |
| height: 200px; |
| width: 200px; |
| |
| } |
| .her{ |
| height: 40px; |
| width: 1800px; |
| background-color: #111515; |
| } |
| .clear{ |
| |
| |
| } |
| |
| |
| |
| |
| |
| |
| |
| |
| </style> |
| <body> |
| <div class="top_bar"> |
| <div class="child1">左盒子</div> |
| <div class="child2">右盒子</div> |
| <!--方式2 内墙法--> |
| <!-- <div class="clear"></div>--> |
| </div> |
| <div class="her"> |
| |
| </div> |
| </body> |
| </html> |
清除浮动
| 清除悬浮属性 |
| 设置的float的属性,只会影响自己块状元素,不会影响其他块状元素 |
| clear: left;左边不能有浮动元素 |
| clear: right;右边不能有浮动元素 |
| clear: both; 两边都不能有浮动元素 |
position定位
| position属性(重要) |
| |
| 1. 相对定位 |
| |
| 参数 relative,position: relative; |
| 相对定位,在正常的的文档流中,可以使用正常的left、right、top、bottom 进行调整 |
| |
| 相对定位: |
| 按照自己的位置进行偏移,下面的元素不会进行补位(只会空出来) |
| |
| 2.绝对定位 |
| 参数 absolute,position: absolute; |
| |
| 绝对定位,脱离正常文档流,可以使用正常的left、right、top、bottom 进行调整,只能根据最近的父级模块 进行绝对的定位调整 |
| 父级相对定位,子级绝对定位,两个模块进行覆盖 |
| |
| 绝对定位: |
| 它会按照自己的父级定位进行移动,如果父级没有定位,那么他就会按照body进行移动,并且,下面的元素块会进行补(占据原先它的位置) |
| |
| 3.固定定位 |
| 参数 fixed,position: fixed; |
| 完全脱离文档流,参照物窗口 |
| |
| 固定定位与绝对定位有点相似,但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位,而不再相对于某个HTML页面元素了,所以当元素使用了固定定位以后,就算页面的滚动条滚动了,固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位,不受文档流的影响了。 |
| |
| 固定定位: |
| 按照窗口进行定位,根据上下左右设置与窗口的距离.(固定不动) |
相对定位
| 设置了position:relative |
| 可以使用top left right bottom 对盒子进行移动 |
| 简单微调元素的位置 |
| 1.不脱离标准文档流,可以调整元素 |
| 2.移动的参考点,是当前盒子原来的位置进行参考进行移动(自己原来的位置) |
| 重点:移动的位置按照原位置最为参照 进行top left... |
| 案例: |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <style> |
| div { |
| width: 200px; |
| height: 200px; |
| } |
| .x1{ |
| background-color: #747070; |
| position: relative; |
| left: 100px; |
| bottom:100px; |
| } |
| .x2{ |
| background-color: red; |
| } |
| .x3{ |
| background-color: blue; |
| } |
| </style> |
| <body> |
| <div class="x1">1</div> |
| <div class="x2">2</div> |
| <div class="x3">3</div> |
| </body> |
| </html> |
绝对定位
| position:absolute |
| 可以使用top left right bottom 对盒子进行移动 |
| 特定: |
| 1.脱离了标准的文档流,不在页面上占位置,与float类似,没有文本环绕的效果 |
| 2.存在压盖现象,层级提高,覆盖其他盒子 |
| 参考点: |
| 单独给盒子设置绝对定位,会根据跟body元素为参考点 |
| 以父盒子位置为参考点 |
| 相对定位于最近的static祖先元素定位,如果没有非static祖先元素,那么以跟页面元素左上角进行定位 |
| |
| 按照子绝对定位,父相对定位(不脱离文档流),让子元素根据父元素进行调整 |
| |
| |
| |
| 重点: |
| 1.脱离标准文档流 与浮动相似 |
| 2.使用top left的标准按照 当前绝对定位的父盒子作为标准(如果没有父盒子就会以body作为top0移动) |
| |
| 子绝对 父相对 可以实现盒子的剧中垂直显示 |
| |
| |
| 子绝对 父相对 案例 |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <style> |
| form { |
| width: 500px; |
| height: 50px; |
| |
| position: relative; |
| background-color: #111515; |
| } |
| input{ |
| height: 100%; |
| width: 100%; |
| } |
| div .wb{ |
| |
| position: absolute; |
| top: 16px; |
| right: 45px; |
| } |
| div .wb .span1{ |
| background-color: blue; |
| } |
| div .wb .span2{ |
| background-color: red; |
| } |
| div .wb span:hover{ |
| cursor: pointer; |
| background-color: #111515; |
| } |
| |
| </style> |
| <body> |
| <div> |
| <form action=""> |
| <input type="text"> |
| <div class="wb"> |
| <span class="span1">小米9</span> |
| <span class="span2">小米10</span> |
| </div> |
| </form> |
| </div> |
| </body> |
| </html> |
固定定位
| position:fixed |
| 可以使用top left right bottom 对盒子进行移动 |
| 特点: |
| 1.脱离固定文档流 |
| 2.一旦设置固定定位,在页面中进行滚动,位置永远不会变化 |
| 参考点: |
| 按照浏览器的左上角范围为参考点,也可以理解为按照html(跟参考点 |
| |
| 例如: 这个盒子就永远不会变化 |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <style> |
| div{ |
| background-color: red; |
| width: 100px; |
| height: 100px; |
| position: fixed; |
| top: 0; |
| right: 0; |
| } |
| </style> |
| <body> |
| <div>我就固定在这里不动了</div> |
| |
| </body> |
| </html> |
侧边栏固定案例
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>固定导航栏</title> |
| <style> |
| *{ |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| } |
| .site-ber ul li{ |
| height: 50px; |
| width: 50px; |
| padding-bottom: 5px; |
| } |
| img{ |
| height: 100%; |
| width: 100%; |
| } |
| .site-ber{ |
| position: fixed; |
| width: 50px; |
| border: 1px solid red; |
| bottom: 150px; |
| right: 0; |
| margin-right: 10px; |
| |
| } |
| </style> |
| </head> |
| <body style="height: 2000px"> |
| <div class="site-ber"> |
| <ul> |
| <li> |
| <a href=""> |
| <img src="" alt=""> |
| </a> |
| </li> |
| <li> |
| <a href=""> |
| <img src="" alt=""> |
| </a> |
| </li> |
| <li> |
| <a href=""> |
| <img src="" alt=""> |
| </a> |
| </li> |
| <li> |
| <a href=""> |
| <img src="" alt=""> |
| </a> |
| </li> |
| <li> |
| <a href=""> |
| <img src="" alt=""> |
| </a> |
| </li> |
| </ul> |
| </div> |
| </body> |
| </html> |
| |
浮动和定位对行内元素的影响
| 对行内元素设置了浮动,是可以设置宽高的,当前行内元素就脱离的标准文档流 |
| 与 display: block; 还是有区别的 这个是设置变为块级元素 |
| |
| 设置定位 |
| position:absolute; 绝对定位 |
| position:fixed; 固定定位 |
| 脱离了标准文档流,可以设置宽高 |
z-index层级 属性
| 默认出现压盖现象时 |
| z-index:auto; 只能用于定位元素上,可以进行设置值越大就会压盖越小的 |
| z-index:正整数 越大就会压盖越小的 |
| |
| z-idnex 比较的是父级,父级牛逼 儿子就牛逼,不管儿子大小 |
| |
| 注意: |
| 1.z-index只能使用在定位上面 |
| 2.如果父级存在z-index 就会按照父级的进行对比,不管内部子级是否存在这个属性 |
| 以父级的为基准 |
| |
| 实例代码 |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| </head> |
| <style> |
| .a { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background-color: #747070; |
| border: 1px solid aliceblue; |
| z-index: 1; |
| } |
| |
| .b { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background-color: red; |
| border: 1px solid aliceblue; |
| top: -30px; |
| left: 50px; |
| z-index: 10; |
| |
| } |
| |
| .c { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background-color: peru; |
| border: 1px solid aliceblue; |
| top: -50px; |
| left: 100px; |
| z-index: 20; |
| } |
| </style> |
| <body> |
| <div style="position:relative;z-index: 30"> |
| <div class="a">1</div> |
| </div> |
| <div style="position:relative;z-index: 10"> |
| <div class="b">2</div> |
| </div> |
| <div style="position:relative;z-index: 5;"> |
| <div class="c">3</div> |
| </div> |
| |
| </body> |
| </html> |
css背景属性
| 最常用的背景属性 |
| background-color |
| 可以按照直接设置颜色 yellow |
| 可以按照RGB模式 rgb(255,0,0) |
| 可以按照16进制设置 #00ff00 |
| 可以按照RGBA模式 rgba(255,255,255,0.5) # 最后一个参数为颜色的透明程度0.1(100%透明)-1(不透明) |
| |
| 设置背景图片 默认使用平铺状态 |
| background-image: url("图片路径") |
| background-repeat: repeat; 默认情况下 平铺方式 |
| background-repeat: no-repeat; # 设置不平铺 |
| background-repeat: repeat-x; 横向平铺 左右 |
| background-repeat: repeat-y; 纵向平铺 上下 |
| |
| 背景图片定位 |
| background-position: 500px 0; |
| 对应的关键字 |
| center 中间 top 上 left 左 right 右 bottom 下 |
| 将背景图片至于中间的位置 |
| background-position: center center |
| |
| 百分比 |
| 0% 50% 100% |
| background-position:50% 50% |
| |
| 还可以使用px |
| |
| 水平百分比计算: |
| 容器的百分比-背景图片的百分比 |
| |
| 控制背景图的缩放比例 |
| 1.宽度 |
| 2.高度 |
| background-size: 24px 597px; |
background-image背景图案例
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| <STYLE> |
| .bg{ |
| background-image: url("788899989..webp"); |
| height: 1125px; |
| width:100%; |
| background-repeat: no-repeat; |
| background-position: center top; |
| } |
| </STYLE> |
| </head> |
| <body> |
| <div class="bg">1</div> |
| </body> |
| </html> |
css sprite 雪碧图技术
| 是什么: |
| 他是一种图像的拼接合并技术 |
| 将多个小图标和背景图片合并在一张图片上 |
| 利用css的背景定位来显示需要显示的图片部分 |
| |
| 1.静态图片,不随用户信息变化而变化 |
| 2.小图片, 图片比较小(2-3kb) |
| 3.加载比较大 |
| |
| 优点: |
| 1.有效减少http请求数量 |
| 因为之请求了一张大的图片,从大的图片中切割小的图片 |
| 2.加速内容的显示 |
| |
| 通过css 背景图属性的background-position 来控制雪碧图的显示 |
| |
| 好多小图片整合到一张大图中,从大图中进行裁剪下来需要的小图 |
| |
| 案例: |
| 根据一整张大图进行 x y 进行切割 |
| x 就是 当前图片的顶部位置 |
| y 就是 当前图片的下面的位置 |
| 也就是使用 background-position 将位置裁剪出来,而显示的内容就是当前选选中图片的大小 |
| 在一张大图中,切割小图进行显示 |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| <STYLE> |
| .bg1{ |
| background-image: url("雪碧图.png"); |
| height: 40px; |
| width: 24px; |
| background-repeat: no-repeat; |
| background-position: 0 0; 就是第一张图 |
| } |
| .bg2{ |
| background-image: url("雪碧图.png"); |
| height: 40px; |
| width: 24px; |
| background-repeat: no-repeat; |
| background-position: 0 -40px; 就是第二张图片 |
| } |
| .bg3{ |
| background-image: url("雪碧图.png"); |
| height: 40px; |
| width: 24px; |
| background-repeat: no-repeat; |
| background-position: 0 -80px; |
| } |
| .bg4{ |
| background-image: url("雪碧图.png"); |
| height: 40px; |
| width: 24px; |
| background-repeat: no-repeat; |
| background-position: 0 -120px; |
| } |
| </STYLE> |
| </head> |
| <body> |
| <div class="bg1"></div> |
| <div class="bg2"></div> |
| <div class="bg3"></div> |
| <div class="bg4"></div> |
| </body> |
| </html> |
淘包列表导航案例
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| <style> |
| * { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| text-decoration: none; |
| } |
| |
| .tobao_list { |
| float: left; |
| border-top: 1px solid #f4f4f4; |
| } |
| |
| .tobao_list ul { |
| width: 292px; |
| overflow: hidden; |
| } |
| |
| .tobao_list ul li { |
| float: left; |
| width: 71px; |
| height: 75px; |
| border: 1px solid #f4f4f4; |
| |
| border-top-color: transparent; |
| border-left-color: transparent; |
| } |
| |
| .tobao_list ul li a { |
| text-align: center; |
| display: block; |
| |
| font-weight: 75; |
| |
| font-size: 12px; |
| |
| color: #888; |
| } |
| |
| .tobao_list ul li span { |
| width: 24px; |
| height: 24px; |
| background-image: url("雪碧图1.png"); |
| background-position: 0 0; |
| background-repeat: no-repeat; |
| display: inline-block; |
| margin-top: 12px; |
| } |
| |
| .tobao_list ul li .span1 { |
| background-position: 0 0; |
| } |
| |
| .tobao_list ul li .span2 { |
| background-position: 0 -44px; |
| } |
| |
| .tobao_list ul li .span3 { |
| background-position: 0 -88px; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div class="tobao_list"> |
| <ul> |
| <li style="border-left:none"> |
| <a href=""> |
| <span class="span1"></span> |
| <p>充话费</p> |
| </a> |
| </li> |
| <li> |
| <a href=""> |
| <span class="span2"></span> |
| <p>充话费</p> |
| </a> |
| </li> |
| <li> |
| <a href=""> |
| <span class="span3"></span> |
| <p>充话费</p> |
| </a> |
| </li> |
| <li style="border-right:none"> |
| <a href=""> |
| <span class="span4"></span> |
| <p>充话费</p> |
| </a> |
| </li> |
| <li style="border-left:none"> |
| <a href=""> |
| <span class="span5"></span> |
| <p>充话费</p> |
| </a> |
| </li> |
| <li> |
| <a href=""> |
| <span class="span6"></span> |
| <p>充话费</p> |
| </a> |
| </li> |
| <li> |
| <a href=""> |
| <span class="span7"></span> |
| <p>充话费</p> |
| </a> |
| </li> |
| <li style="border-right:none"> |
| <a href=""> |
| <span class="span8"></span> |
| <p>充话费</p> |
| </a> |
| </li> |
| <li style="border-left:none"> |
| <a href=""> |
| <span class="span9"></span> |
| <p>充话费</p> |
| </a> |
| </li> |
| <li> |
| <a href=""> |
| <span class="span10"></span> |
| <p>充话费</p> |
| </a> |
| </li> |
| <li> |
| <a href=""> |
| <span class="span11"></span> |
| <p>充话费</p> |
| </a> |
| </li> |
| <li style="border-right:none"> |
| <a href=""> |
| <span class="span12"></span> |
| <p>充话费</p> |
| </a> |
| </li> |
| </ul> |
| </div> |
| </body> |
| </html> |
| |
页面上制作圆的效果盒子角弧度效果
| 使用属性 |
| radius : 中文弧形 |
| border-radius:20px; 将盒子的4个脚全部设置为20px的弧度 |
| |
| border-radius:10px 50px ; 对角设置弧度 10px负责第一个脚 50px 第二个脚 |
| |
| border-radius:10px 50px 80px 100px; 分别设置4个脚不一样的弧度 |
网页中阴影效果
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| box-shadow: 10px 10px 5px #5f5a5a; |
| |
| |
| 可以实现一个效果,当鼠标悬浮时,会出现一个向上移动并且出现阴影的悬浮效果 |
| 案例:鼠标悬浮 盒子移动出现阴影效果 和小米商城的相似 |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| <STYLE> |
| .y{ |
| |
| position: relative; |
| height: 200px; |
| width: 200px; |
| background-color: #888888; |
| |
| |
| } |
| .y:hover{ |
| top: -3px; |
| z-index: 2; |
| box-shadow: 0 10px 5px #e0e0e0; |
| -webkit-transition: all .3s linear; |
| transition: all .3s linear; |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| } |
| </STYLE> |
| </head> |
| <body> |
| <div class="y"></div> |
| </body> |
| </html> |
布局
单列
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| <style> |
| html,body{ |
| margin: 0; |
| height: 100%; |
| } |
| |
| .container{ |
| width: 1200px; |
| margin: 0 auto; |
| } |
| .header{ |
| width: 100%; |
| height: 60px; |
| line-height: 60px; |
| text-align: center; |
| background-color: #000; |
| } |
| .header .container{ |
| height: 60px; |
| background-color: orange; |
| } |
| .wrap{ |
| width: 100%; |
| height: 100%; |
| } |
| .wrap .container{ |
| height: 100%; |
| background-color: red; |
| } |
| .footer{ |
| width: 100%; |
| } |
| .footer .container{ |
| height: 100px; |
| background-color: #888888; |
| } |
| </style> |
| </head> |
| <body> |
| <!--头部--> |
| <div class="header"> |
| <div class="container">头部主要显示内容</div> |
| </div> |
| <!--主体内容--> |
| <div class="wrap"> |
| <div class="container">主体主要显示内容</div> |
| </div> |
| <!--脚部内容--> |
| <div class="footer"> |
| <div class="container">脚注主要显示内容</div> |
| </div> |
| </body> |
| </html> |
多列
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| <style> |
| html,body{ |
| margin: 0; |
| height: 100%; |
| } |
| |
| .container{ |
| width: 1200px; |
| margin: 0 auto; |
| } |
| .header{ |
| width: 100%; |
| height: 60px; |
| line-height: 60px; |
| text-align: center; |
| background-color: #000; |
| } |
| .header .container{ |
| height: 60px; |
| background-color: orange; |
| } |
| .wrap{ |
| width: 100%; |
| height: 100%; |
| } |
| .wrap .container{ |
| height: 100%; |
| background-color: red; |
| } |
| .footer{ |
| width: 100%; |
| } |
| .footer .container{ |
| height: 100px; |
| background-color: #888888; |
| } |
| |
| |
| |
| .wrap .container .left{ |
| width: 15%; |
| height: 100%; |
| float: left; |
| background-color: blue; |
| } |
| .wrap .container .right{ |
| width: 15%; |
| height: 100%; |
| float: right; |
| background-color: rebeccapurple; |
| } |
| .wrap .container .center{ |
| height: 100%; |
| background-color: lavender; |
| |
| margin: 0 190px; |
| } |
| </style> |
| </head> |
| <body> |
| <!--头部--> |
| <div class="header"> |
| <div class="container">头部主要显示内容</div> |
| </div> |
| <!--主体内容--> |
| <div class="wrap"> |
| <div class="container"> |
| <div class="left">左</div> |
| <div class="right">右</div> |
| <div class="center">中</div> |
| </div> |
| </div> |
| <!--脚部内容--> |
| <div class="footer"> |
| <div class="container">脚注主要显示内容</div> |
| </div> |
| </body> |
| </html> |
网站注意事项
| 1.命名规范 |
| http://www.divcss5.com/jiqiao/j4.shtml |
| |
| 2.目录规范 |
| 项目名 |
| css 样式文件 |
| fonts 第三方图标 |
| images 图片 |
| js js脚本文件 |
| index.html 出口文件 |
| |
| 3.确定错误的位置 |
网页元素中的居中问题
行内元素居中
| 方式1 |
| 设置 text-align: center; 使文本进行水平居中 |
| 设置 行高 line-height = 盒子的高度 使用文本垂直居中 |
| 两个组合就是水平垂直居中 |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| <style> |
| .box{ |
| width: 200px; |
| height: 200px; |
| background-color: red; |
| color: #e0e0e0; |
| text-align: center; |
| line-height: 200px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="box"> |
| <span>123</span> |
| </div> |
| </body> |
| </html> |
| |
| |
| 方式2 |
| 将元素设置为 display: table-cell; 表格 |
| 在使用 属性vertical-align: middle; 设置垂直居中 |
| 这是一个表格元素属性 默认table 的vertical-align: middle |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| <style> |
| .box{ |
| width: 200px; |
| height: 200px; |
| background-color: red; |
| color: #e0e0e0; |
| |
| display: table-cell; |
| vertical-align: middle; |
| text-align: center; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="box"> |
| <span>123</span> |
| </div> |
| </body> |
| </html> |
块级元素水平居中显示
| 水平居中 margin: auto; |
| |
| |
| 1.使用子绝对 父相对 + margin 进行水平垂直居中显示 |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| <style> |
| .box{ |
| background-color: black; |
| height: 200px; |
| width: 200px; |
| position: relative; |
| } |
| .child{ |
| position: absolute; |
| background-color: #888888; |
| height: 100px; |
| width: 100px; |
| margin: auto; |
| 将上下左右 4个属性设置为0 系统自动计算 |
| top: 0; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="box"> |
| <div class="child"></div> |
| </div> |
| </body> |
| </html> |
| |
| |
| 方式2 |
| 将父的属性设置为 table-cell table单元格标签类型 |
| 在设置独有的属性 vertical-align: middle; 达到垂直居中 |
| |
| 将子元素设置为 行内块元素 可以使用text-align: center; 就可以达到水平居中 |
| |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| <style> |
| .box{ |
| background-color: black; |
| height: 200px; |
| width: 200px; |
| |
| display: table-cell; |
| vertical-align: middle; |
| |
| text-align: center; |
| } |
| .child{ |
| |
| display: inline-block; |
| height: 100px; |
| width: 100px; |
| background-color: #888888; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div class="box"> |
| <div class="child"></div> |
| </div> |
| </body> |
| </html> |
| |
| |
| 3.使用子绝父相 纯计算 |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| <style> |
| .box{ |
| background-color: black; |
| height: 200px; |
| width: 200px; |
| position: relative; |
| |
| } |
| .child{ |
| position: absolute; |
| height: 100px; |
| width: 100px; |
| background-color: #888888; |
| top: 50%; |
| left: 50%; |
| margin-left: -50px; |
| margin-top: -50px; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div class="box"> |
| <div class="child"></div> |
| </div> |
| </body> |
| </html> |
补充
| overflow: hidden; |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| |
| |
| .clearfix::after { |
| content: ''; |
| clear: both; |
| display: block; |
| } |
| |
| |
| *{ |
| padding: 0; |
| margin: 0; |
| text-decoration:none; |
| list-style: none; |
| } |
| input{ |
| border: none; |
| outline: none; |
| } |
图标库
| https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 |
| |
| 清除塌陷和间距调整没效果的最好方式就是 给设置高度,哪里存在浮动,那么就对那个位置的父设置高度 |
JavaScript
JavaScript引入方式
| 1 直接编写 |
| <script> |
| console.log('hello yuan') |
| </script> |
| 2 导入文件 |
| <script src="文件路径"></script> |
JavaScript声明变量
| 全局变量声明 |
| var 变量名=变量参数 |
| |
| 局部变量声明 |
| let 变量名=变量参数 |
| |
| var x = 30; |
| var y; |
| y = 50 |
JavaScript的数据类型
| 变量类型 |
| 基本数据类型 |
| Number String Boolean undefined null |
| var a = 1 数值类型 |
| var b = '1' or "1" 字符串类型 |
| var c = ture 布尔类型 0 1 true false |
| var d = undefined; 没有被定义的变量就是undefined 只声明 |
| var e = null ; 空的值 |
| 复杂数据类型 |
| object array function |
| |
| typeof 查看变量的类型 |
字符串string
| 字符串定义 |
| |
| var 变量名="变量值" |
| |
| 字符串的内置函数 |
| 1.获取长度 |
| 变量.length |
| |
| 2.字符串的大小写 |
| 变量.toLowerCase() 小写 |
| 变量.toUpperCase() 大写 |
| |
| 3.根据索引值获取 索引 |
| 变量.indexOf("字符串") |
| |
| 4.根据索引获取值 |
| 变量2=变量1["索引"] |
| |
| 5.字符串分割 |
| 变量 = 变量.split("分割符号") |
| |
| 6.字符串切片(取头不去尾) |
| 1.起始位置 2.结束位置 |
| str.slice(int,int) |
| str.substring(int,int) |
| |
| 7.字符串截断方法(取范围内的全部数值) |
| 1.起始位置 2.从起始位置返回字符个数 |
| str.substr(int,int) |
| |
| 8.清除字符串前后空格 |
| str.tirm() |
| |
| 9.查找字符串的索引位置 |
| 从 0索引找 |
| str.indexOf('字符串中的字符','从那个字符位置到int') |
| 从末索引找 |
| str.lastIndexOf('字符串中的字符','从那个字符位置到int') |
| |
| 10.获取指定的字符串的位置的字符 |
| str.charAt(index) |
| str.charCodeAt(index) |
| |
| 注意: |
| |
| a = " i 'm \"666\"" |
| |
| |
| a = '666' |
| b = '8888' |
| a + b = '666 8888' |
| |
| |
| a = 'wkx' + 555 |
| |
| b = '18' + '40' |
| |
| 字符串转数值(必须是整数类型的数值) |
| var b = '18' |
| console.log(typeof Number(b)) |
| |
| 整数转字符串 |
| var a = 18 |
| console.log(typeof String(a)) |
| console.log(typeof a.toString()) |
| |
| 在字符串转换为整数时 |
| var a = '66ssswx' |
| console.log(Number(a)) |
| |
| |
| var num = '102255.2122' |
| console.log(parseFloat(num)) |
| console.log(parseInt(num)) |
| console.log(Number(num)) |
| console.log(isNaN(num)) |
| |
| |
| var num = 1235.22 |
| |
| console.log(num.toString()) |
| console.log(String(num)) |
| |
| console.log(''+num) |
| console.log(''.concat(num)) |
| |
| console.log(num.toFixed(2)) |
数组arr
| 数组是从0开始的 |
| 数组是[] |
| 数组:['1','1','2'] 1维数组 , [1,2,3,[1,2]] 2维数组 |
| |
| 获取数组的元素 |
| a = ['1','1','2'] |
| a[0] |
| |
| |
| |
| |
| var arr = [1,2,3,4] |
| |
| |
| var arr = new Array() |
| |
| |
| arr[0] = 10 |
| |
| |
| arr.length |
| |
| |
| Array.isArray(arr) |
| |
| |
| arr.toString() |
| arr.toLocaleString() |
| |
| |
| arr.join('分割符号') |
| |
| |
| |
| len = arr.push('添加的元素') |
| last = arr.pop() |
| |
| |
| |
| len = arr.unshift('添加元素') |
| last = arr.shift() |
| |
| |
| arr.reverse() |
| arr.sort() |
| |
| function compare(a, b) { |
| if (a < b) { |
| return -1 |
| } else if (a > b) { |
| return 1 |
| } else { |
| return 0 |
| } |
| } |
| arr.sort(compare) |
| |
| |
| 1.concat('可以传入多个值或者参数') 数组的合并,返回一个新的值 |
| arr1 = [1,2,3] |
| arr2 = arr1.concat('4') |
| 结果:[1,2,3,4] |
| 如果添加的是一个数组,那么会将被添加的数组中的元素追加到添加的数组中,生成一个新数组 |
| arr2 = arr1.concat([10,12]) |
| 结果:[1,2,3,10,12] |
| |
| 2.slice(start,stop) 返回一个新的数组接收两个值启开始到结束的内容 |
| 顾头不顾尾,返回一个新数组 |
| arr = [1,2,3] |
| arr1 = arr.slice(1,2) |
| |
| 3.splice() |
| splice() 需要传入3个参数 开始 结束 插入的值(可以添加多个) |
| 删除功能 |
| arr = [1,2,3] |
| arr.splice(0,1) |
| |
| 插入功能,使用插入功能,需要将 结束参数为0代表不删除元素 |
| arr = [1,2,3] |
| 在数组的第0个元素插入一个666 |
| arr.splice(0,0,'666') |
| |
| 删除元素 |
| 先删除,后添加 |
| arr = [1,2,3] |
| 删除第0个元素添加一个666 |
| arr.splice(0,1,'666') |
| |
| |
| |
| indexOf('查询元素','从哪里开始查询的位置') 和 lastIndexOf('查询元素','从哪里开始查询的位置') |
| arr = ['wkx','66','heihi'] |
| idnex = arr.indexOf('wkx') |
| index = arr.lastIndexOf('wkx') |
| |
| 如果查询不到返回-1 |
| |
| |
| 1.filter() |
| filter('内部传入函数') 过滤方法,对数组的每一项进行遍历过滤 |
| arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] |
| 案例: |
| filterres = arr.filter((item, index, array) => { |
| |
| |
| |
| return item > 5 |
| }) |
| console.log(filterres) 结果[6, 7, 8, 9] |
| |
| 2.map() |
| map('内部传入函数') 对数组进行每个值的操作,对数组的每一项进行遍历操作 |
| arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] |
| 案例: |
| mapres = arr.filter((item, index, array) => { |
| |
| |
| |
| return item * 2 |
| }) |
| console.log(mapres) 结果[2, 4, 6, 8, 10, 12, 14, 16, 18] |
| |
| 3.forEach('传入一个函数') |
| arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] |
| arr.forEach((item, index, array) => { |
| |
| |
| |
| console.log(item) |
| }) |
| |
对象object
| var person = { |
| name:'wkx', |
| age: 18, |
| fav:function(){ |
| console.log('1') |
| } |
| } |
| |
| 获取值 |
| person.name |
| 修改值 |
| person.name = 新值 |
布尔值
| var 变量=false 假 |
| var 变量=true 真 |
空值
| var 变量=unescape |
| var 变量=null |
类型转换
| 转换为数值型 |
| a = “100件” |
| a = “100” |
| parseInt(a) 可以转换 |
| |
| 转换浮点型 |
| a = 3.14 可以转换 |
| a = 3.1.4 不可以转换 |
| parseFloat(a) 转换后小数点 后一位 |
| |
| 字符串转换 |
| a = 100 |
| toString(a) |
| |
| 布尔值转换 |
| Boolean(4>5) false |
| Boolean(5>4) true |
| |
| 一切皆对象 ,只有空的数据和数值0位false |
| |
| 暗转换 |
| |
| 相加时 优先字符串拼接,在做加减 |
| 相减时 优先对数值相减,在对字符串操作 |
引用值和原始值(概念)
| 根据数据类型不同,有的变量储存在栈中,有的储存在堆中。 |
| |
| |
| 原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始变量互不影响。 |
| |
| |
| 引用值是把 引用变量的名称储存在栈中,但是把其实际对象储存在堆中,且存在一个指针由变量名指向储存在堆中的实际对象,当把引用对象传递给另一个变量时,复制的其实是指向实际对象的指针, 此时 两者指向的 是同一个数据,若通过方法改变其中一个变量的值,则访问另一个变量时,其值也会随之加以改变;但若不是通过方法 而是通过 重新赋值 此时 相当于 重新开了一个房间 该值的原指针改变 ,则另外一个 值不会随他的改变而改变。 |
| |
JavaScript的运算符
| 算术运算符 |
| + 数值相加 |
| - 数值相减 |
| * 数值相乘 |
| / 数值相除 |
| % 数值求余 |
| ** 数值求幂 |
| a++ 数值后自增1 a=a+1 |
| ++a 数值前自增1 a=a+1 |
| b-- 数值后自减1 b=b-1 |
| --b 数值前自减1 b=b-1 |
| |
| |
| 赋值运算符 |
| = |
| += |
| -= |
| *= |
| /= |
| %= |
| **= |
| |
| |
| 比较运算符,比较的结果要么是true, 要么是false |
| > 大于 |
| < 小于 |
| >= 大于或者等于 |
| <= 小于或者等于 |
| != 不等于[计算数值] |
| == 等于[计算] |
| !== 不全等[不仅判断数值,还会判断类型是否一致] |
| === 全等[不仅判断数值,还会判断类型是否一致] |
| |
| |
| 逻辑运算符 |
| && 并且 and 两边的运算结果为true,最终结果才是true |
| || 或者 or 两边的运算结果为false,最终结果才是false |
| ! 非 not 运算符的结果如果是true,则最终结果false ,反之亦然 |
| |
| |
| 逻辑运算符进阶用法: |
| 1. 实现短路 |
| var a = false || 2 >>> a = 2 |
| var a = true && "hehe" >>> a = "hehe" |
| |
| 2. 快速布尔化[把数据快速转换成布尔类型] |
| var a = 100 |
| !!a >>> true |
| |
| |
| 条件运算符[三目运算符] |
| 格式: |
| 变量 = 条件?"条件成功返回给变量":"条件失败返回给变量" |
| |
| 条件?true:false |
| 例如: |
| var age = 12; |
| var ret = age>=18?"成年":"未成年"; |
| |
| 相当于 python中的"成年" if age >= 18 else "未成年" |
JavaScript三元运算
| 条件比较 ? '条件为真' : '条件为假'; |
| |
| 案例 |
| var res = 1 === 2 ? '这个是真的' : '这个是个假的' |
JavaScript的条件控制语句
| ******* if else 语句 ****** |
| if(条件1){ |
| |
| } else if(条件2){ |
| |
| }else{ |
| |
| } |
| 案例: |
| var distance = 10; |
| var nowDistance = 15; |
| if (distance < nowDistance) { |
| console.log('自动驾驶') |
| } else { |
| console.log('人为行驶') |
| } |
| |
| 多条件案例 |
| var a = 10; |
| if (a === 10){ |
| console.log('1') |
| }else if (a < 10){ |
| console.log('2') |
| }else { |
| console.log('3') |
| } |
| |
| |
| ****** switch(开关) ******* |
| |
| |
| switch(num){ |
| case A值: |
| |
| break |
| case B值: |
| |
| break |
| default: |
| |
| break |
| ..... |
| } |
| |
| 案例 |
| var a = 10 |
| switch (a) { |
| case 10: |
| console.log(1) |
| break |
| case 11: |
| console.log(2) |
| break |
| } |
JavaScript的循环语句
| ******** for 循环 ********* |
| |
| for(初始条件;结束条件;递增条件){ |
| 执行内容 |
| } |
| 案例: |
| var i = 1; |
| var sum = 0; |
| for (i = 1;i <=10;i++){ |
| sum += i |
| } |
| console.log(sum) |
| 循环数组 |
| |
| for(;;){ |
| |
| } |
| break |
| continue |
| |
| |
| |
| |
| ***** while 循环 ****** |
| 先判断,在执行 |
| 初始条件 |
| while(判读循环的结束条件){ |
| |
| 递增条件 |
| } |
| |
| 案例 计算基数的和 |
| var i = 0; |
| var sum = 0; |
| while (i < 100) { |
| if (i % 2) { |
| sum += i |
| } |
| i++ |
| } |
| console.log(sum) |
| |
| |
| ****** do - while 循环 ****** |
| 先执行,在判断 |
| 语法 |
| do{ |
| 先执行逻辑 |
| }while(判读条件) |
| |
| 案例 |
| var sum=0 |
| var i=1 |
| do { |
| sum +=i |
| i++ |
| }while (i < =100) |
| console.log(sum) |
JavaScript的序列化
| json字符串解析成为js能识别的数据类型:反序列化。解析其他语言传入得数据结构:反序列化 |
| var 接受变量 = JSON.parse("其他语言传入的json数据") |
| |
| |
| js数据类型转换为json字符串:序列化。将数据打包成为 json格式文件,传入其他语言中处理 |
| var 接受变量 = JSON.stringify("需要转换json格式的数据") |
| |
JavaScript的时间对象
| date 日期对象 utc时间 |
| 无参数,就是当前的时间 |
| var now= new Date() |
| console.log(now) |
| 带参数 传入符合的字符串 |
| var now= new Date('1995 13:30:00') |
| console.log(now) |
| 传入数值 |
| var now = new Date(1995,11,25) |
| console.log(now) |
| |
| |
| *** 日期对象常用方法 *** |
| var now= new Date() |
| console.log(now.getDate()) |
| console.log(now.getMonth()) |
| console.log(now.getFullYear()) |
| console.log(now.getDay()) |
| console.log(now.getHours()) |
| console.log(now.getMinutes()) |
| console.log(now.getSeconds()) |
| |
| *** 日期格式化 **** |
| |
| console.log(now.toDateString()) |
| |
| console.log(now.toTimeString()) |
| |
| |
| console.log(now.toLocaleDateString()) |
| |
| console.log(now.toLocaleTimeString()) |
| |
| console.log(now.toLocaleString()) |
| |
| |
| |
| console.log(now.toUTCString()) |
JavaScript的math 数字对象
| 1.取正数,负数转正数,正数不能转负数 |
| Math.abs(-10000) |
| |
| 2.取小数的后几位 参数是几就去小数点几位,带有四舍五入 |
| var num = 3.1415926 |
| num.toFixed(5) |
| |
| 5.四舍五入 |
| var num = 24.3 |
| Math.ceil(num) |
| Math.floor(num) |
| Math.round(num) |
| |
| 6.取幂次方 参数1,参数2 |
| Math.pow() |
| |
| 7.0-1随机取值 (取小数) |
| Math.random() |
| |
| 8.获取0-100的随机数 |
| Math.random()*100 |
| |
| 9.最大值最小值 |
| console.log(Math.max(1,2,3,5,8)) |
| console.log(Math.min(1,6,5,8,9,5)) |
| |
| 10.循环取值 |
| var arr = [6,2,5,87,69] |
| max = Math.max.apply(null,arr) |
| min = Math.min.apply(null,arr) |
| |
| |
| |
| console.log(Math.E) |
| console.log(Math.LN2) |
| console.log(Math.LN10) |
| console.log(Math.LOG2E) |
| console.log(Math.PI) |
| console.log(Math.SQRT2) |
| console.log(Math.SQRT1_2) |
JavaScript的函数
| 1.声明函数 |
| function 函数名(形参1,行参2){ |
| 函数体....(语句体) |
| return 返回值 |
| } |
| |
| 函数名(形参) 函数的调用 |
| |
| 2.匿名函数 |
| var 变量=function () { |
| 函数体 |
| } |
| 变量() 函数调用 |
| |
| 匿名函数自执行 |
| (function (x,y) { |
| console.log(x+y); |
| })(2,3) |
| |
| |
| 3.匿名函数的闭包 |
| function bar() { |
| return function(){ |
| console.log("匿名函数")}} |
| bar()() |
| |
| |
| 4.关于返回值 |
| return 没有书写返回值 默认返回 undefined |
| undefined 作用:1.变量未赋值,2.函数没有返回值 |
| |
| 5.函数的参数 |
| 1.默认参数 |
| 例如: |
| function stu_info(name,gender="male"){ |
| console.log("姓名:"+name+" 性别:"+gender) |
| } |
| |
| stu_info("yuan") |
| |
| 2.位置参数 |
| 例如 |
| function add(a,b){ |
| console.log(a); |
| console.log(b); |
| } |
| add(1,2) |
| |
| 3. 动态参数 arguments |
| 例如: |
| function add(a,b){ |
| console.log(a+b); |
| console.log(arguments.length); |
| console.log(arguments); |
| } |
| add(1,2) |
| |
| |
| 6.函数的作用域 |
| var a = 1; |
| function func() { |
| var b = 12; |
| console.log(a) |
| } |
| func() |
| |
| 全局作用域污染 |
| 变量被覆盖 或者 函数被覆盖 |
window方法
global对象全局对象
| var url= 'http://baidu .com' |
| |
| console.log(encodeURI(url)) |
| console.log(encodeURIComponent(url)) |
| |
| console.log(decodeURI(encodeURI(url))) |
| console.log(decodeURIComponent(encodeURIComponent(url))) |
| |
| global = win对象(浏览器的顶层对象) |
JavaScript的弹窗方法
| window弹窗方法 |
| |
| 1.警告弹窗 |
| window.alert(文本) |
| |
| 2.提示弹窗返回布尔值 |
| window.confirm("提示内容") 返回true/false根据布尔值进行下一步操作 |
| |
| 3.用户输入弹窗 |
| window.prompt("提示内容") 会跳出弹框,让用户输入,输入什么返回什么。没有输就返回null |
| |
| 4.跳转弹窗 |
| window.open("访问地址") |
| |
| 5.弹窗关闭 |
| window.close() |
JavaScript的定时器方法window
| |
| window.setTimeout(回调函数,毫秒) |
| window.setTimeout(()=>{ |
| console.log(1) |
| },2000) |
| |
| |
| |
| var a = window.setInterval(回调函数,毫秒) |
| window.setInterval(()=>{ |
| console.log(1) |
| },1000) |
| clearInterval(a) |
JavaScript的地址栏对象
| **** location对象 ***** |
| |
| console.log(window.location.host) |
| console.log(window.location.hostname) |
| console.log(window.location.href) |
| console.log(window.location.pathname) |
| console.log(window.location.port) |
| console.log(window.location.protocol) |
| console.log(window.location.search) |
| |
| **** 浏览器的位置操作 ***** |
| location.href = 'https://www.baidu.com' |
| location.replace('https://www.baidu.com') |
| location.reload() |
| |
| ***** 检查浏览器插件navigator对象 ****** |
| console.log(window.navigator.plugins) |
| var arr = window.navigator.plugins |
| for(let i=0 ;i<arr.length;i++){ |
| console.log(arr[i].name) |
| } |
| |
| ****** 历史对象history ****** |
| |
| console.log(window.history) |
| window.history.go(0) go = 0 刷新 |
| window.history.go(1) go = 1 表示前进1次 |
| window.history.go(-1) go = -1 表示后退1次 |
JavaScript的本地储存
| 1.本地永久存储,可以在相同域名下进行共享(键值对的临时存储) |
| localStorage |
| |
| localStorage.setItem("变量名","变量值") |
| localStorage.变量名= 变量值 |
| |
| |
| localStorage.setItem("变量名") |
| localStorage.变量名 |
| |
| |
| localStorage.removeItem("变量名") |
| |
| localStorage.clear() |
| |
| |
| 2.本地暂时存储 |
| sessionStorage |
| |
| sessionStorage.setItem("变量名","变量值") |
| sessionStorage.变量名=变量值 |
| |
| |
| sessionStorage.setItem("变量名") |
| sessionStorage.变量名 |
| |
| |
| sessionStorage.removeItem("变量名") |
| |
| sessionStorage.clear() |
JavaScript的DOM
| dom:文档对象模型 document object model |
| js 对象3类: |
| 1.自定制 var |
| 2.内建 data对象.. |
| 3.宿主对象 win对象 |
| |
| model:事物的表示模型 |
| |
| ****** 节点的3个属性 ****** |
| nodeName: 节点的名字 |
| nodeType: 节点的类型 |
| nodeValue: 节点值 |
| |
| nodeName: |
| 元素: 标签名想相同 |
| 属性: 与属性名相同 |
| 文本节点: #text |
| 文档节点: #document |
| |
| nodeValue: |
| 元素: undefined or null |
| 文本: 当前自己本身 |
| 属性: 属性值 |
| |
| nodeType: |
| 元素 : 1 |
| 属性 : 2 |
| 文本 : 3 |
| 注释 : 8 |
| 文档 : 9 |
| |
| 例如:文本 |
| 标签与标签的空格 或者没有标签的文本(都属于文本,兼容问题) |
| nodeName: "#text" |
| nodeType: 3 |
| nodeValue: "\n" 当前是一个空格(也就是标签和标签之间的空格是一个文本标签) |
| |
| 例如注释 |
| nodeName: "#comment" |
| nodeType: 8 |
| nodeValue: "注释中的内容" 当前是一个空格(也就是标签和标签之间的空格是一个文本标签) |
| |
| |
DOM节点查找
| 1.id查找 |
| document.getElementById("id值") |
| 获取标签id的dom对象 |
| |
| 2.class查找 |
| document.getElementsByClassName("类名") |
| 通过class对应的值查找(可能是一个,可能是多个) |
| 多个是数组,数组的元素是dom对象 |
| |
| 3.按照标签名查找 |
| document.getElementsByTagName('标签') |
| |
| 3.通过父级找子级标签 |
| 1.根据索引查找子级标签 |
| document.getElementsByClassName("类名")[0] |
| 父级标签的 数组对象 的第一个元素 |
| |
| 2.根据索引查找子级标签 |
| 变量 = document.getElementsByClassName("类名") 父级 |
| 变量.getElementsByClassName("类型") 某个子级 |
DOM节点对象属性
| 1.找到父级标签 |
| 节点.parentElement |
| |
| 2.找父级下面的全部子级标签 |
| 节点.parentElement.children |
| |
| 3.找到父级的第一个标签 |
| 节点.parentElement.firstElementChild |
| |
| 4.父级的最后一个子标签 |
| 节点.parentElement.lastElementChild |
| |
| 5.父级的第一个子级标签的下一个标签 |
| 节点.parentElement.nextElementSibling |
| |
| 6.找到父级标签的子标签的上一个标签 |
| 节点. parentElement.previousElementSibling |
| |
| |
| 7.节点对象属性 |
| <div>我是上一个兄弟</div> |
| <div id="father"> |
| <p>1</p> |
| <p>2</p> |
| <p>1</p> |
| </div> |
| <div>我是下一个兄弟</div> |
| |
| var father = document.getElementById('father') |
| console.log(father.childNodes) |
| console.log(father.firstChild) |
| console.log(father.lastChild) |
| console.log(father.parentNode) |
| console.log(father.nextSibling) |
| console.log(father.previousSibling) |
| |
| 会出现兼容问题:谷歌浏览器会出现将标签空格当做节点获取 |
| |
| 封装方法 获取当前标签下面的全部字标签(剔除标签中的#text(空格兼容性问题)) |
| function get_childNodes(father) { |
| var nodes = father.childNodes |
| var arr = [] |
| nodes.forEach((value, key, parent) => { |
| if (value.nodeType === 1) { |
| arr.push(value) |
| } |
| }) |
| return arr |
| } |
| console.log(get_childNodes(father)) |
| |
| |
| 封装方法 获取兄弟标签 下一个标签可以是空格 或者 注释需要过滤掉 |
| function get_nextSibling(n) { |
| var x = n.nextSibling |
| while (x && x.nodeType != 1) { |
| x = x.nextSibling |
| } |
| return x |
| } |
| |
| console.log(get_nextSibling(father)) |
| |
DOM的class找标签
| 1.找一个符合条件的 .c1 .c2 .c3 和css的class一样 |
| 变量 = document.querySelector(".class属性的值 ") |
| 变量 是一个dom对象 |
| |
| 2.根据标签找到 找全部符合条件的 ul li |
| 变量 = document.querySelectorAll("父标签 子标签") |
| 变量 是一个符合条件的数组对象,内部的元素都是dom |
| |
| |
| <div class="c1"> </div> 找到一个标签 |
| |
| <ul> |
| <li></li> |
| <li></li> |
| <li></li> |
| </ul> 找到3li 标签[li,li,li] |
DOM的文本操作
| var ele = document.querySelector(".c1") 获取dom 对象 |
| |
| 1.获取信息 |
| ele.innerHTML 获取文本信息 赋值一些特殊标签 |
| ele.innerText 获取文本信息 |
| |
| 2.文本赋值 |
| ele.innerHTML = “新文本” |
| ele.innerText="新文本" |
| |
| |
| <div class="c1">1231</div> |
DOM的value的操作
| 像input标签,select标签以及textarea标签是没有文本的,但是 |
| 1.input取值 |
| |
| 显示内容由value属性决定 |
| |
| var ele = document.querySelector(".c1") 获取标签 |
| |
| res.value 取标签的value值 |
| res.value="新内容" 重新赋值value |
| <input type="text" class="c1" value="holle,js"> |
| |
| |
| 2.select 下拉菜单取值 |
| |
| 获取标签select |
| var ele = document.querySelector("#il") |
| res.value 获取第一个value值 |
| res.value="hebei" 赋值 |
| |
| 获取button标签,绑定事件,当点击标签是将地址个value的值变换 |
| document.querySelector(".but").onclick=function(){ |
| res.value="hebei" |
| } |
| <select name="" id="il"> |
| <option value="henan">河南</option> |
| <option value="hebei">河北</option> |
| <option value="hunan">湖南</option> |
| </select> |
| <button class="but">点击</button> |
| |
| |
| 3.textarea大文本取值 |
| 获取标签 |
| ele = document.querySelector("#i2") |
| ele.value 读取文本值 |
| ele.value = "新文本" 赋值文本值 |
| |
| |
| |
| <textarea name="" id="i2" cols="30" rows="10" >12313</textarea> |
DOM的css样式的操作
| var div = document.getElementById('box') |
| console.log(div.style) |
| 1.使用对象.style.进行设置 |
| div.style.color = 'red' |
| |
| 2.使用setAttribute |
| div.setAttribute('class','样式标签') |
DOM的标签内属性值操作
| 变量.setAttribute("属性名","属性值") 自定义属性 键值对 |
| 变量.getAttribute("属性名") 获取自定义属性 |
| 变量.removeAttribute("属性名"); 删除自定义属性 |
| |
| <div class="id" id="id">123</div> |
| var div = document.getElementById('id') |
| |
| |
| |
| className = div.getAttribute('class') |
| |
| |
| div.setAttribute('自定义','自定义') |
| |
| |
| div.removeAttribute("自定义名") |
| |
DOM的 class的操作增删改查
| .c2{ |
| color:red; |
| } |
| |
| 1.获取标签 |
| ele = document.querySelector(".c1") |
| |
| 2.给div添加一个样式 |
| ele.classList.add("c2") 字体变为红 |
| |
| 3.删除一个样式 |
| ele.classList.remove("c2") 字体恢复 |
| |
| 4.取当前的class的值 |
| ele.className 查看 class的值都有什么 |
| |
| <div class="c1" > adsa1d32131</div> |
DOM的节点操作
| <div id="box"> |
| <div id="box2">666</div> |
| </div> |
| var div = document.getElementById('box') |
| var div2 = document.getElementById('box2') |
| |
| |
| |
| div.innerText = '我是文本' |
| div.innerHTML = '<p>66</p>' |
| |
| |
| |
| var p = document.createElement('p') |
| var a = document.createElement('a') |
| var h2 = document.createElement('h2') |
| |
| |
| |
| div.appendChild(p) |
| |
| div.insertBefore(a, div2) |
| |
| |
| var text = document.createTextNode('666') |
| |
| |
| |
| div.removeChild(div2) |
| |
| |
| |
| div.replaceChild(h2,div2) |
| |
| |
| |
| p = null |
| |
DOM的事件
| 1.onclick 点击事件 |
| 例如: |
| <div id="box" onclick="func(this)">点击</div> |
| function func(thiss) { |
| |
| console.log(thiss) |
| } |
| |
| 2.onmouseover 和onmouseout 这两个事件一起用 |
| onmouseover 鼠标经过事件 |
| onmouseout 鼠标离开事件 |
| 例如: |
| var div = document.getElementById('box') |
| div.onmouseover =()=>{ |
| div.style.color = 'green' |
| } |
| div.onmouseout = ()=>{ |
| div.style.color = 'red' |
| } |
| |
| 3.onchange onselect |
| onchange 文本框内容改变事件(原内容改变,回车确认才会被触发) |
| onselect 文本框内容被选中事件(只有内容被选中的了才会触发,点击不会) |
| oninput 当原内容被改变,就会触发(实时触发,只要改变的内容与原内容不同就会触发) |
| 例如: |
| <input type="text" id="users" value="111"> |
| <textarea cols="30" rows="10" id="user"> |
| 请输入个人简介,字数不少于200字 |
| </textarea> |
| var input = document.getElementById('user') |
| var inputs = document.getElementById('users') |
| input.onselect = ()=>{ |
| console.log('内容被选中') |
| } |
| inputs.onchange = ()=>{ |
| console.log('内容改变') |
| } |
| inputs.oninput = ()=>{ |
| console.log(inputs.value) |
| console.log('实时改变') |
| } |
| |
| 4.onfocus onblur |
| onfocus 光标聚集事件 |
| onblur 光标失去焦点事件 |
| 例如: |
| <input type="text" id="user"> |
| var input = document.getElementById('user') |
| input.onfocus = ()=>{ |
| console.log('你的鼠标已经获取焦点') |
| } |
| input.onblur = ()=>{ |
| console.log('你的鼠标已经离开') |
| } |
| |
| 5.obload |
| 网页加载事件 等待文档元素加载完成后才会调用(当整个文档加载完毕后,就会指定onload中的代码) |
| obload事件只能写一个,多个会出现覆盖的问题 |
| 例如: |
| window.onload = ()=>{ |
| console.log('等待页面加载完毕后,才会执行内部的内容') |
| } |
其他事件
| 1.onkey键盘事件 |
| 获取标签 |
| var c1=document.querySelector(".c1") |
| onkeydown 每次点击键盘触发 事件 |
| onkeyup 每一次点击键盘,按下去,抬起来 才会触发 |
| |
| c1.onkeydown=function (e) { e参数用来捕捉全部的信息 |
| console.log(e.keyCode) e.keyCode主要用于捕获全部的信息 keyCode表示键盘编码 |
| console.log(e.key) e.key 获取点击键盘的对应的内容 |
| } |
| |
| <input type="text" class="c1"> |
| |
| |
| 2.onsubmit提交事件 |
| 用于阻止用户提交信息的格式是否正确,正确传输,不正确拦截(用于拦截格式错误) |
| 1.获取标签信息 |
| var i1=document.querySelector("#i1") |
| var user=document.querySelector(".c1") |
| |
| 2.绑定事件 |
| i1.onsubmit=function (e) { e捕捉全部信息 |
| if (user.value.length<5){ 判断输入的长度是不是大于5 |
| alert("用户名的长度应该大于5") 输入错误提示 |
| user.value="" 输入错误 情况内容 |
| 阻止提交默认事件 |
| return false; 方法1 |
| e.preventDefault() 方法2 利用e 阻止默认事件 |
| |
| } |
| |
| <form action="" id="i1"> |
| <input type="text" name="user" class="c1"> |
| <input type="submit"> 默认提交按钮 |
| </form> |
| |
| |
| 3.冒泡事件 |
| 当子级区域延伸到父级区域 被称为冒泡事件 |
| .c1{ |
| height: 300px; |
| width: 300px; |
| background-color: #e4393c;} |
| .c2{ |
| height: 100px; |
| width: 100px; |
| background-color: blue;} |
| |
| 绑定事件 |
| c1.onclick=function () { |
| alert("c1区域") |
| } |
| c2.onclick=function (e) { c2为c1的子级会触发冒跑事件 |
| alert("c2区域") |
| e.stopPropagation() 消向外延伸,阻止事件冒泡 |
| } |
| |
| <div class="c1"> |
| <div class="c2"></div> |
| </div> |
| |
补充文本插入
| 以文本形式插入标签 |
| insertAdjacentHTML(position, text) |
| |
| "position":一个字符串,表示相对于元素的位置,必须是以下字符串之一 |
| "beforebegin" |
| 在 元素之前。仅当元素位于 DOM 树中并且具有父元素时才有效。 |
| |
| "afterbegin" |
| 第一个子元素之前。 |
| |
| "beforeend" |
| 最后一个子元素之后。 |
| |
| "afterend" |
| 在 元素之后。仅当元素位于 DOM 树中并且具有父元素时才有效。 |
| |
| "text" : 要解析为 HTML 或 XML 并插入到树中的字符串 |
| |
| div = `<div> |
| ${变量} |
| </div>` |
| |
| insertAdjacentHTML(beforeend,div) |
jQuery
jQuery导入
| 远程导入 |
| <script src="网络地址"> |
| 本地导入 |
| <script src="文件地址"> |
jQuery与dom的关系
| jQuery的语法 |
| 1.$(id class).方法() |
| $(id class) 查找标签 相当于实例化一个对象 |
| |
| 2.jQuery("id class 标签名").方法 |
| |
| 例如: |
| 将标签的文本变换颜色 |
| jQuery(".c1 ").css("color","red") |
| $(".c1 ").css("color","red") |
| |
| <div>123</div> |
| |
| dom与jq对象的转换 |
| dom对象: |
| 找到标签ele就是一个dom对象 |
| ele = document.querySelector(".c1") |
| |
| jq对象: |
| $(".c1") 这就是一个jq对象 |
| jq对象 是一个集合数组对象内部放着dom的元素[dom1,dom2....] |
| |
| jq对象转换为dom对象 |
| $(".c1")[0] 因为是一个集合数组 取元素,每一个元素就是一个dom 结果:dom1 |
| |
| dom转换为js |
| $(ele) 转换为dom对象 结果 [dom1] |
| 不论内部有多少个元素,1...100只要在转换后都是dom对象 |
jQuery的选择器
| 1.类选择器 |
| $(".c1") |
| |
| 2.id选择器 |
| $("#i1") |
| |
| 3.标签名选择器 |
| /$("div") |
| |
| 4.通配选择器 全部 |
| $("*") |
| |
| 5.组合标签,可以选择多个,只要符合条件就可以,里面可以有id,class,标签名() |
| $("#li,p") |
| |
| 6.后代选择器 定位到 标签的孙子 |
| $(".c1 .c2 ul li") |
| |
| 7.子代选择器 只确定父级标签下面的子级标签 |
| $(".c2 > ul") |
| |
| 8.属性选择器 选择标签内的特有属性 |
| $(".z1z [href]") |
| |
| 9.属性选择器 中的正则内容 后面的选择内容必须要用单引号 |
| $(".z1z [href$='peg']") |
| |
| 10表单选择器 选择属性,和属性值 |
| $("[type ='text']") |
| $(":text") 简写 |
| |
| |
| |
| div class="c1"> |
| <div class="c2"> |
| <ul> |
| <li>1</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <input type="text"> |
| <input type="password"> |
| </body> |
| |
| <div class="z1z" > |
| <a href="1.peg">1</a> |
| <a href="">2</a> |
| <a href="">3</a> |
| </div> |
| |
jQuery的筛选器
| 准却的找到多个标签的其中一个 |
| 在一堆dom对象向中,选中想要变化的dom对象,使用筛选器进行筛选。 |
| 这种在内部属于字符串 |
| |
| 1.找到标签的第一个 |
| $(".c1 li:first") |
| |
| 2.找到标签的最后一个 |
| $(".c1 li:last") |
| |
| 3.按照索引找到标签 |
| $(".c1 li:eq(2)") |
| |
| 4.找到索引大于相应 |
| $(".c1 li:gt(2)") |
| |
| 5.找到索引小于相应 |
| $(".c1 li:lt(2)") |
| |
| 6.根据索引偶数 |
| $(".c1 li:even") |
| |
| 7.根据索引奇数 |
| $(".c1 li:odd") |
| |
| |
| 8.写法不同,根据变量(推荐) |
| var index=2 定义变量 在外部就是数字2 |
| $(".c1 li").eq(index) 在找到定义变量相对应的标签 |
| |
| <ul class="c1"> |
| <li class="c2">11</li> |
| <li>122</li> |
| <li>33</li> |
| <li>44</li> |
| <li>551</li> |
| <li>66</li> |
| </ul> |
| |
jQuery的的导航查找
| 1.查看子代标签 |
| children()不加条件就是将全部的子代标签找出来,加上条件就是指定那个标签 |
| $(".c1").children("p") |
| $(".c1").children() |
| |
| 2.找下一个兄弟标签 |
| $(".c5").next() |
| |
| 3.找下一个所有的兄弟 |
| $(".c5").nextAll() |
| |
| 4.找上一个兄弟 |
| $(".c5").prev() |
| |
| 5.找上一个所有的兄弟 |
| $(".c5").prevAll() |
| |
| 6.找范围内的兄弟 |
| $(".c5").prevUntil() |
| |
| 7.找除了自己以外的全部兄弟 |
| $(".c5").siblings() |
| |
| 8.找标签的父级 |
| $(".c3").parent() |
| |
| 9.父级的父级 |
| $(".c3").parent().parent() |
| |
| <div class="c1"> |
| <div class="c2"> |
| <div class="c3"></div> |
| <p>p1</p> |
| </div> |
| <p>p2</p> |
| </div> |
| <ul class="c4"> |
| <li>1</li> |
| <li class="c5">2</li> |
| <li>3</li> |
| <li>4</li> |
| <li id="i1">5</li> |
| </ul> |
jQuery的绑定事件普通
| 三中用法 |
| |
| |
| 1.on绑定事件 (动态绑定参数) |
| on 和off |
| $(“写入标签的父级”).on("事件名 click",匿名函数(){ |
| 事件代码 |
| |
| }) |
| |
| 取消事件 |
| $().off("事件名") |
| |
| |
| 2.bind绑定事件 |
| $(“锁定的标签”).bind("事件名:click" ,function () { |
| 事件代码 |
| } |
| |
| 取消事件 |
| $().off("事件名") |
| |
| |
| |
| 3.$(“锁定的标签”).click(function(){ |
| 事件函数 |
| this代表当前绑定事件的标签 |
| $(this)就是当前标签的 转换为jquery对象 |
| }) |
| |
| 取消事件 |
| $().off("事件名") |
| |
| |
jQuery的绑定事件其他
| 1.ready和hover事件 |
| 鼠标悬浮和离开的事件,在悬浮时发生,在离开时发生 |
| hover鼠标绑定事件,离开和悬浮的发生的事件 |
| $(".c1").hover(over,out) |
| 两个函数 |
| function over() {console.log("over")} |
| function out() {console.log("out")} |
| |
| |
| 2.ready 加载事件 |
| 可以在标签上面先加载执行 |
| $(document).ready(function () {事件}) |
| |
| |
| <div class="c1" > </div> |
jQuery的操作标签
| 1.标签操作 |
| 获取文本信息 |
| |
| $(this).html() 纯文本和处理其他标签 |
| $(this).text() 纯文本 |
| |
| 修改文本信息 |
| |
| $(this).html("修改的文本信息") |
| $(this).text("修改的文本信息") |
| |
| |
| 2.value取值 |
| 只限于select option,input,textarea标签使用,只能用value |
| |
| 获取文本信息 |
| $(this).val() |
| |
| 修改文本 |
| $(this).val("新内容") |
| |
| |
| 3.属性操作 |
| |
| 获取属性值 |
| $("标签id,class..").attr("属性名") |
| |
| 设置属性值 |
| $("标签id,class..").attr("属性名","属性值") |
| |
| 获得属性值返回真假 |
| $("标签id,class...").prop("属性名") |
| |
jQuery的循环
| var arr=[11,22,33] |
| |
| $.each(arr,function(i,j){ |
| i 是数组索引 |
| j 是数组的值 |
| }) |
| |
| |
| 案例: |
| $("ul li").each(function () { |
| |
| |
| |
| if(parseInt($(this).html())>30){ |
| $(this).css("color","red") |
| } |
| }) |
| |
| |
| <ul> |
| <li>30</li> |
| <li>20</li> |
| <li>50</li> |
| <li>100</li> |
| </ul> |
| |
jQuery的css用法
| 单样式 |
| $("c1").css("color","red") |
| |
| 多样式 |
| $(".c1").css({"color":"red","backgroundColor":"#369"}) |
| |
| <div class="c1">adads</div> |
| |
| 获取内容边框尺寸 |
| |
| 1.获取内容的宽高尺寸 |
| $("this").width() |
| $("this").height() |
| |
| 2.获取内边距padding+内容的宽高尺寸 |
| $("this").innerHeight() |
| $("this").innerWidth() |
| |
| 3.不加参数 边框+内边距+内容的宽高属性 |
| $("this").outerHeight() |
| $("this").outerWidth() |
| |
| 加参数是内容+内边距+边框+外边距的全部宽高 |
| $("this").outerHeight(true) |
| $("this").outerWidth(true) |
| |
jQuery的属性操作
| 添加属性 |
| $(this).addClass("属性名") |
| |
| 删除属性 |
| $(this).removeClass("属性名") |
| |
| 悬浮事件 |
| $("标签名,class,id").mousemove(function () { |
| |
| $(this).addClass("属性名") |
| }) |
jQuery的节点操作
| 1.创建节点 |
| var $变量 = $("标签名字") |
| |
| 2.节点赋值 |
| $变量.attr("属性名",'属性值') |
| |
| 3.添加属性 |
| 按照父级添加 |
| append 追加给父级追加一个子标签 放到最后一个 |
| appendTo 将子级标签添加到父级标签下 放到第一个 |
| perpend 追加给父级追加一个子标签 放到第一个 |
| perpendTo 将子级标签添加到父级标签下 放到第一个 |
| |
| $("父级标签").append($变量) |
| $("父级标签").appendTo($变量) |
| |
| 按照兄弟添加 |
| |
| 添加到兄弟上面 |
| $("兄弟").before($变量) |
| |
| 添加到兄弟下面 |
| $("兄弟").after($变量) |
| |
| 3.删除节点 |
| |
| 删除整个标签 |
| $("选中删除的标签id class ..").remove() |
| |
| 删除标签内的文本 |
| $("选中删除的标签id class ..").empty() |
| |
| 4.替换标签 |
| $("需要替换的标签 id class").replaceWith(新建的新标签) |
| |
| |
| 5.字符串形式添加标签 |
| $("按照兄弟标签").after("添加的标签") |
| |
| 例如 |
| $("需要添加标签的父级标签").after("<div>123</div>") |
| |
| |
| 6.复制标签 |
| $(this).clone() |
jQuery的事件委派
| $(" ul").on("click"," li",function () { |
| |
| console.log($(this).html()) |
| }) |
| 将事件委派给父级,触发事件的标签还是li |
| 事件委派 ,将事件给父级,只要添加标签,就会有事件效果,因为事件委派给了父级,下面所有的子标签都会有效果 |
| |
| <ul> |
| <li>123</li> |
| <li>234</li> |
| <li>345</li> |
| </ul> |
jQuery的css位置
| $("").offset([coordinates]) |
| $("").position() |
| $("").scrollTop([val]) |
| 位置偏移案例 |
| .c1{ |
| width: 800px; |
| height: 500px; |
| margin: 100px auto; |
| background-color: #e4393c; |
| position: relative; |
| } |
| |
| .c2{ |
| width: 200px; |
| height: 200px; |
| background-color: #333333; |
| } |
| |
| <div class="c1"> |
| <div class="c2"></div> |
| </div> |
| |
| |
| |
| var off=$(".c2").offset() |
| var pos = $(".c2").position() |
| console.log("off.top:",off.top) |
| console.log("off.left:",off.left) |
| |
| |
| console.log( "pos.left:",pos.left) |
| console.log("pos.top:",pos.top) |
| |
| |
| $(".c2").click(function () { |
| |
| $(this).offset({top:100,left:100}) |
| }) |
| 返回顶部案例 |
| |
| *{ |
| margin: 0; |
| } |
| .c1{ |
| height: 2000px; |
| background-color: #b0b0b0; |
| } |
| .c2{ |
| width: 120px; |
| height: 50px; |
| background-color: #333333; |
| color: #e4393c; |
| text-align: center; |
| line-height: 50px; |
| |
| position: fixed; |
| bottom: 50px; |
| right: 20px; |
| } |
| |
| .hode{ |
| display: none; |
| } |
| |
| <div class="c1"> |
| <h3>文章...</h3> |
| </div> |
| <div class="c2">返回顶部</div> |
| |
| |
| |
| console.log($(window).scrollTop()) |
| $(".c2").click(function () { |
| $(window).scrollTop(0) |
| }) |
| |
| |
| |
| $(window).scroll(function () { |
| console.log($(this).scrollTop()) |
| var v = $(this).scrollTop() |
| if (v>100){ |
| $(".c2").removeClass(".hode") |
| }else { |
| $(".c2").addClass(".hode") |
| } |
| }) |
| |
jQuery的动画
| .c1{ |
| width: 250px; |
| height: 250px; |
| background-color: #333333; |
| position: absolute; |
| top: 240px; |
| left: 200px; |
| } |
| .hide{ |
| display: none; |
| } |
| <p><button class="c2"> animate</button></p> |
| <div class="c1"></div> |
| |
| <p> |
| <button class="s1">显示</button> |
| <button class="s2">隐藏</button> |
| </p> |
| <p> |
| <button class="s11">显示</button> |
| <button class="s22">隐藏</button> |
| </p> |
| <p> |
| <button class="s111">显示</button> |
| <button class="s222">隐藏</button> |
| </p> |
| <p> |
| <button class="s1111">显示</button> |
| <button class="s2222">隐藏</button> |
| </p> |
| |
| |
| 1.显示与隐藏 |
| |
| |
| $(".s1").click(function () { |
| $(".c1").removeClass("hide") |
| }) |
| |
| $(".s2").click(function () { |
| $(".c1").addClass("hide") |
| }) |
| |
| 2.show hide效果显示与隐藏 |
| |
| 回调函数,只有当前执行完毕后,回调函数才能触发效果 |
| |
| $(".s11").click(function () { |
| $(".c1").show(1000,function () { |
| alert(132132) |
| }) |
| }) |
| |
| $(".s22").click(function () { |
| $(".c1").hide(1000,function () { |
| alert(123613) |
| }) |
| }) |
| |
| 3.滑动动画隐藏效果. |
| |
| (1000,function ()回调函数 |
| |
| $(".s111").click(function () { |
| $(".c1").slideDown(1000,function () { |
| alert(132132) |
| }) |
| }) |
| |
| |
| $(".s222").click(function () { |
| $(".c1").slideUp(1000,function () { |
| alert(123613) |
| }) |
| }) |
| |
| 4.fadeIn与fadeOut 淡入淡出的动画效果 |
| |
| |
| |
| $(".s1111").click(function () { |
| $(".c1").fadeIn(1000,function () { |
| alert(132132) |
| }) |
| }) |
| |
| $(".s2222").click(function () { |
| $(".c1").fadeOut(1000,function () { |
| alert(123613) |
| }) |
| }) |
| |
| 5.自定义动画 |
| |
| $("").animate(动画效果,动画完成时间,动画完成事件后的回调函数) |
| |
| $(".c2").click(function () { |
| $(".c1").animate({ |
| "border-radius":"50%", |
| "top":340, |
| "left":200 |
| } |
| ,1000,function () { |
| $(".c1").animate({ |
| "border-radius":"0", |
| "top":240, |
| "left":240} |
| ,1000,function () { |
| $(".c2").trigger("click") |
| |
| }) |
| }) |
| }) |
| |
扩展方法 (插件机制)
| 和python的类方法一样 |
| |
| |
| jQuery.extend({ |
| |
| 方法名:function (参数) { |
| |
| } |
| |
| |
| }) |
| |
| $.方法1 |
| $.方法2 |
| |
| jQuery.fn.extend({ |
| 方法名:function() { |
| |
| } |
| }) |
| |
| $("父类值:子类值").方法名 |
占位符
| 例如: |
| var name="1223"; |
| var age = 18; |
| |
| |
| |
| var s= |
| ` |
| 姓名:${name}, |
| 年龄:${age} |
| ` |
| console.log(s) |
ES6语法
let和const声明变量
| 1.let变量声明 不存在变量提升问题 |
| 特点: |
| 1.是一个块级的作用域 类似在类中的实例变量一样,只能在声明内部使用,外部不能使用 |
| 2.不允许在相同作用域内,重复声明同一个变量 |
| 1-1.变量提升测试 |
| console.log(b); |
| let b = 100 |
| console.log(b) |
| |
| 1-2.变量名重复 |
| let a = 40 |
| var a = 5000 |
| console.log(a) |
| |
| 1-3. 变量可以被覆盖 |
| let a = 10 ; |
| a = 100 |
| a = 1000 |
| console.log(a); |
| |
| |
| 2.const变量声明 |
| 声明一个只读的常量。一旦声明,常量的值就不能改变 |
| const一旦声明变量,就必须立即初始化,不能留到以后赋值 |
| const foo; |
| 特点: |
| 1.声明后不能修改,块级的作用域 |
| 2.变量不能重复,不能被覆盖 |
| |
| console.log(a); |
| const a = 100 |
| |
| 2-1.变量声明后就无法在重新赋值 |
| const a = 100 |
| a = 1000 |
| 虽然无法直接修改a变量,但是如果a变量是个对象的情况下是可以对内部的值进行修改的 |
| const p = { |
| name : '123', |
| age : 456, |
| } |
| p.name = '1xx222' |
| |
| 3.var变量声明 |
| 特点: |
| 1.在启动时,将全部的var声明的变量提升到全局作用域中 |
| 2.声明变量是可以被覆盖,可以重复的 |
| |
| var a; |
| console.log(a); |
| var a = 1000 |
变量提升
| 使用var |
| arr = []; |
| for (var i = 0; i < 10; i++) { |
| arr[i] = function () { |
| return i |
| } |
| } |
| console.log(arr); |
| console.log(arr[5]()); |
| |
| |
| 使用let 因为let不会存在变量提升的问题,不会污染全局 |
| |
| arr = []; |
| for (let i = 0; i < 10; i++) { |
| arr[i] = function () { |
| return i |
| } |
| } |
| console.log(arr); |
| console.log(arr[5]()); |
| |
模板字符串
| <div class="box"> |
| |
| </div> |
| |
| |
| <script> |
| |
| const obox = document.querySelector('.box') |
| |
| let id = 1, name = 'xxx'; |
| |
| |
| |
| let htmlstr = ` |
| <ul> |
| <li> |
| <p id="${id}">${name}</p> |
| </li> |
| </ul> |
| ` |
| obox.innerHTML = htmlstr |
| </script> |
剩余运算符与扩展运算符
| 1.函数的默认参数 |
| function bba(a = 10, b = 20) { |
| return a + b |
| } |
| console.log(bba(100, 300)); |
| |
| |
| function add(a,b=date(5)){ |
| return a+b |
| } |
| function date(val){ |
| return 5 + val |
| } |
| |
| 2.剩余运算符 |
| |
| |
| |
| function pick(object, ...key) { |
| console.log(key) |
| |
| let res = Object.create(null) |
| for (let i = 0; i < key.length; i++) { |
| res[key[i]] = object[key[i]] |
| } |
| return res |
| } |
| |
| let book = { |
| title: '1231', |
| author: "65465", |
| year: 2019, |
| } |
| |
| let bookdata = pick(book, 'title', 'author', "year") |
| console.log(bookdata) |
| |
| |
| 3.扩展运算符 |
| 扩展运算符:将数组进行分割,将改革想作为分离的参数进行传入函数中 |
| const arr = [11,22,33,44,566,778979,9879] |
| console.log(Math.max(...arr)) |
| |
箭头函数
| es6的箭头函数 => 来定义 取代function(){} 等价于 ()=>{} 匿名函数 |
| |
| add = function(a,b){ |
| return a + b |
| } |
| |
| add = (a,b)=>{ |
| return a + b |
| } |
| |
| add = (a,b) => a+b |
| |
| 1.无参数 必须有()存在 |
| ()=>{ |
| return '123456' |
| } |
| |
| 2.单个参数 |
| val => { return val+5 |
| } |
| |
| 3.单个参数返回 |
| val => val |
| |
| 4.返回对象参数 |
| let getobj = obj => ( |
| {name:'666',age:18} |
| ) |
| |
| 闭包: |
| |
| let fn = (function(){ |
| return function(){ |
| return 123 |
| } |
| })() |
| fn(); |
| |
| 箭头函数闭包 |
| let fns = (() => { |
| return () => { |
| return 123 |
| } |
| }) (); |
| fn(); |
箭头函数指向this问题
| es6 解决this指向问题 使用=> 就会找上层的作用域 |
| 箭头函数之后没有this指向,通过查找作用域进行找 |
| 一但使用箭头函数,当前有没有作用域,就找上层的作用域 |
| 3层作用域 this |
| |
| let pa = { |
| id : 10, |
| |
| init:function(){ |
| |
| document.addEventListener('click',(event)=>{ |
| console.log(this); |
| this.doSomeThings(event.type) |
| |
| },false) |
| }, |
| doSomeThings:function(type){ |
| console.log(`事件类型${type},事件id${this.id}`) |
| } |
| |
| } |
| pa.init() |
| console.log(pa.doSomeThings()); |
| |
| 怎么查找作用域 |
| 在 document.addEventListener方法定义的内部是一个作用域 |
| 这个作用域上层指向了 init:function init变量 |
| init 变量的上层作用域 指向了对象pa 所以 this指向pa对象 |
| |
| 假设 int:function 定义为箭头函数 => 那么相当于 init没有作用域,就会找到pa对象的作用域 |
| 在找到window 作用域练 最外层. |
| |
| 箭头函数注意: |
| 1.使用箭头函数就会内部就没有 arguments 方法,因为使用箭头函数就没有作用域链,就会指向weindow |
| |
| let pa = ()=>{ |
| console.log(arguments) |
| return 10+20 |
| } |
| console.log(pa()) |
| |
| 2 箭头函数不能使用new关键字实例化对象 |
| let pa = ()=>{} |
| console.log(pa) |
| let p = function(){} |
| console.log(p()) |
| let p = new pa |
解构赋值
| let info = { |
| type: 'id', |
| name: ' askjh' |
| } |
| es6 完全结构 |
| let { type, name } = info |
| console.log(type, name) |
| |
| |
| let obj = { |
| a: { |
| name: '张三' |
| }, |
| b: [], |
| c: 'hello world' |
| |
| } |
| let {a} = obj |
| console.log(a) |
| |
| 还可以使用 剩余运算符进行获取 |
| let {a,...bs} = obj |
| console.log(bs) |
| |
| |
| |
| let {a,b=30} = {a:40} |
| console.log(a,b) |
| |
| |
| |
| |
| let arr = [1,2,3] |
| let [a,b,c] = arr |
| console.log(a,b,c) |
| |
| |
| let [n,[d],e] = [1,[2],3] |
| console.log(n,d,e) |
对象的扩展
| 1. es6 直接写入变量的函数 作为对象的属性 |
| const name = '消息下', age = 12 |
| const pe = { |
| name, |
| age, |
| sayName(){ |
| console.log(name) |
| } |
| } |
| pe.sayName() |
| |
| |
| 2. set 方 与 get 方法的使用 |
| |
| |
| let caet = { |
| wheel:4 , |
| set(val){ |
| if (val < this.wheel){ |
| throw new Error('数量太少') |
| } |
| }, |
| get(){ |
| return this.wheel |
| } |
| } |
| caet.set(3) |
| console.log(caet.get()) |
| |
| 3. 属性表达式 |
| const obj = {} |
| obj.isshow = true |
| console.log(obj); |
| const name = 'a' |
| obj[name+'bc'] = 123 |
| console.log(obj) |
| obj['f'+ 'cc'] = function(){ |
| console.log(this); |
| } |
| console.log(obj) |
| |
| |
| |
| 4.对象方法 |
| |
| console.log(NaN === NaN); |
| console.log(Object.is(NaN,NaN)); |
| |
| 5.assign() 对象的合并 |
| let t = { |
| |
| } |
| let b = { |
| a:10 |
| } |
| Object.assign(t,b) |
| console.log(t) |
symbol类型
| 原始数据 symbol ,表示他他是一个独一无二的值 |
| const name = Symbol('name') |
| const name2 = Symbol('name') |
| const name3 = "name" |
| |
| console.log(name3 ===name) |
| console.log(name === name2); |
| console.log(typeof name ) |
| # 用来定义对象的私有变量,可以设置对象的私有的属性 |
| # 不能使用new命令 因为生成的 Symbol 是一个原始类型的值,不是对象,所以不能使用new命令来调用 |
| # 也不能作为对象进行使用, 可以认为他是一个字符串 |
| let obj = { |
| 'name' : '123' |
| } |
| let s2 = Symbol(obj) |
| console.log(s2); |
| |
| # Symbol 值不能与其他类型的值进行运算,会报错 |
| let a = Symbol('a') |
| console.log('bcd' + a); |
| |
| # Symbol 可以作为if中的参数可以作为bool,但是不能转为数值 |
| let a = Symbol() |
| console.log(Boolean(a)); |
| if(a){ |
| console.log('123'); |
| } |
| console.log(Number(sym)); |
| |
| |
| 内部方法 |
| const sym = Symbol('foo'); |
| 1.返回symbol('描述') 描述 |
| console.log(sym.description ); |
| |
| 2.可以作为对象的属性名 |
| let obj = {} |
| obj[sym] = 123456 |
| 或者 |
| let a = {}; |
| Object.defineProperty(a, mySymbol, { value: 'Hello!' }); |
| |
| 3.可以作为消除魔术字符串 |
| 魔术字符串:在程序中多次出现的 |
| const a = { |
| 'b':'name' |
| } |
| const a = { |
| 'b': Symbol() |
| } |
| |
| |
| 4.Symbol.for(),Symbol.keyFor() |
| s1 = Symbol.for('123') # 如果希望使用同一个Symbol对象就是for方法,他会全局环境中进行搜索,而Symbol不会,如果Symbol.for已经存在就会调用存在的Symbol.for不会重新创建 |
| Symbol.keyFor('s1') # 为了找到Symbol.for登记的值 |
set集合类型
| 无序不可以重复的类型 |
| let set = new Set() |
| console.log(set); |
| |
| 常用方法: |
| set.add('name') |
| set.delete('name') |
| set.has('name') |
| set.size |
| set.forEach((key,val)=>{ |
| console.log(key,val); |
| }) |
| |
| |
| let set2 = new Set([1,2,3,4,4,5,66,44]) |
| let arr = [...set2] |
| console.log(arr); |
| |
| |
| |
| |
| let arr1 = [ 1,2,3,4] |
| arr1 = null |
| |
| WeakSet() |
map类型
| map类型是键值对的有序列表,键和值的任意类型 |
| 无法被释放 |
| |
| |
| let map = new Map(); |
| |
| map.set("name", '张三') |
| |
| console.log(map) |
| |
| |
| console.log(map.get('name')); |
| |
| |
| console.log(map.has('name')) |
| |
| |
| console.log(map.delete('name')) |
| |
| |
| map.clear() |
| |
| |
| map.set([11, 2, 3, 44, 5, 6,], 'hello') |
| console.log(map); |
| |
| let m = new Map([["a", 1], ["b", 2]]) |
| console.log(m) |
数组补充
| 数组的方法 from of |
| function add(){ |
| arguments |
| console.log(arguments); |
| let arr = Array.from(arguments); |
| } |
| |
| add(1,2,3,4) |
| |
| |
| 2.使用扩展用算符进行快送转换运算符 |
| <li>1</li> |
| <li>1</li> |
| <li>1</li> |
| <li>1</li> |
| let lis = document.querySelectorAll('li') |
| |
| console.log([...lis]); |
| |
| 3.使用form对元素进行处理 |
| let lis = document.querySelectorAll('li') |
| let list = Array.from(lis, (ele) => { return ele.textContent }) |
| |
| let list2 = Array.from(lis, ele => ele.textContent ) |
| |
| 4.of方法 将一组的值转换为数组 任意的数据类型转换为数组 |
| console.log(Array.of(3,1,2,4,5,6,7,88,9)); |
| |
| |
| 5.数据的其他的方法 |
| 5-1.copywithin() 方法 了解 |
| |
| let a = [1, 2, 3, 4, 5, 6].copyWithin(0, 3) |
| console.log(a); |
| |
| |
| |
| 5-2.find查找数值 findindex查找数值的元素 |
| |
| [1, 2, -103, 4, 5, -10, 7].find((n) => { |
| return n < 0 |
| }) |
| |
| |
| [1, 2, -103, 4, 5, -10, 7].findindex((n) => { |
| return n < 0 |
| }) |
| |
| 5-3.includes 返回一个bool值 表示一个数组是否包含这个值 |
| |
| console.log([1,2,3,4].includes(2)); |
| console.log([1,2,3,4].includes(10)); |
| |
| 6.entries方法 |
| keys(对键的遍历) values(对值的遍历) 返回一个遍历起 可以使用for ... of 进行遍历 通过这些方法生成遍历器 |
| |
| 6-1.keys 获取索引 |
| let a = [1, 2, 3, 4, "a", 6].keys() |
| console.log(a); |
| |
| for (let index of a) { |
| console.log(index) |
| } |
| |
| 6-2.values 获取元素 |
| let b = [1, 2, 3, 4, "a", 6].values() |
| for (let index of b) { |
| console.log(index) |
| } |
| |
| 6-3.entries 获取val 和key |
| let c = [1, 2, 3, 4, "a", 6].entries() |
| for (let [key, val] of c) { |
| console.log('这是键', key) |
| console.log('这是值', val) |
| } |
迭代器interator
| |
| |
| const item = ['1',2,55,'asd'] |
| |
| |
| |
| |
| let func = item[Symbol.iterator]() |
| |
| console.log(func); |
| |
| |
| console.log(func.next()) |
| console.log(func.next()) |
| console.log(func.next()) |
| console.log(func.next()) |
| console.log(func.next()) |
| |
| |
| |
| |
| |
| |
生成器
| 生成器的应用,异步编程,让异步编程同步执行 |
| 1. |
| function* func(){ |
| |
| let res = yield request('传入的网络地址') |
| |
| |
| } |
| const ite = func() |
| ite.next() |
| function request(url){ |
| $.ajax({ |
| url:url, |
| method:'get', |
| success(res){ |
| ite.next(res) |
| } |
| }) |
| } |
| |
| 2.加载效果 |
| function* en(){ |
| add() |
| yield del() |
| func() |
| } |
| const ite = en() |
| console.log(ite); |
| ite.next() |
| function add(){ |
| console.log('开始加载... 图片'); |
| } |
| |
| |
| function func(){ |
| console.log('隐藏加载提示...显示图片') |
| } |
| |
| function del(){ |
| |
| setTimeout(() =>{ |
| console.log('加载完成,隐藏加载效果') |
| |
| |
| ite.next() |
| },5000) |
| |
| } |
| |
生成器generator
| 作用: |
| 1.generator 函数 可以通过yield关键字 将函数挂起,为了改变执行流程提供了可读性 |
| 2.为异步编程(解决异步代码) |
| 区别: |
| 1.function后 函数名前 * |
| 2 只能在函数内部使用yield表达式 让函数挂起 |
| |
| 1.例如:生成器函数 |
| function* func(){ |
| yield 1; |
| } |
| |
| let fn = func() |
| |
| |
| console.log(fn.next().done); |
| |
| |
| |
| 案例 |
| |
| function* add(){ |
| console.log('hehehe'); |
| |
| let x = yield "a" |
| console.log('hahah',x); |
| let y = yield '123' |
| console.log('hahahz',y); |
| return x+y |
| } |
| let fn = add() |
| |
| |
| console.log(fn.next(10)); |
| |
| |
| |
| console.log(fn.next(20)); |
| |
| |
| |
| |
| console.log(fn.next(20)); |
| |
| |
| |
| 主要作用就是 不具备 interator 接口的对象提供的遍历操作 |
| 将不具备 interrator循环的对象 变为可遍历操作 |
| function* func(obj) { |
| const propkey = Object.keys(obj) |
| console.log(propkey); |
| for (let p of propkey) { |
| yield [p, obj[p]] |
| } |
| } |
| |
| |
| const obj = { |
| name: 133, |
| age: 456 |
| } |
| |
| |
| |
| console.log(obj); |
| |
| for (let [key, val] of func(obj)) { |
| console.log(key, val); |
| console.log(`${key}:${val}`) |
| } |
| |
| |
promise
| 异步编程的解决方案 承诺 因为是一个对象 所以需要new 创建对象 |
| promise 相当于一个容器,放置这未来要执行的事件(异步)的一个结果 |
| 各种异步操作都可以使用同样的方式进行处理 axios库就是基于promise |
| |
| |
| 特点: |
| 1. 对象的状态不收外接影响 异步处理的状态: peendig(进行中) resolved(成功) rejected(失败了) |
| 这三个状态 保存在peomise |
| 2.一旦改变,就会在变,任何时候都可以 得到结果 进行中- 成功 进行中-失败 都存储在peomise |
| |
| 案例: |
| |
| |
| |
| let pro = new Promise(function (rejected, resolved) { |
| |
| |
| let res = { |
| code: 200, |
| data: { |
| name: '成功了' |
| }, |
| error: '失败 了' |
| } |
| |
| setTimeout(() => { |
| if (res.code === 200) { |
| resolved(res.datas) |
| } else { |
| rejected(res.error) |
| } |
| }, 1000) |
| }) |
| console.log(pro); |
| |
| 创建的promise对象的回调方法 |
| |
| |
| pro.then((val) => { |
| |
| console.log(val); |
| }, (err) => { |
| console.log(err) |
| }) |
| |
| |
| 封装异步操作 |
| ex 接受时间 |
| 封装了promise 方法,变得更为灵活 |
| function time(ex) { |
| return new Promise((rejected, resolved) => { |
| setTimeout(() => { |
| resolved('成功的信息') |
| }, ex); |
| }) |
| } |
| time(1000).then((val) => { |
| console.log(val) |
| }) |
promise封装异步函数
| pormise 封装一个ajax 异步请求 |
| const getJSON = function(url){ |
| |
| new Promise((reject,resolve)=>{ |
| |
| const xhr = new XMLHttpRequest() |
| |
| xhr.open('GET',url) |
| |
| xhr.onreadystatechange = handler |
| |
| xhr.responseText = 'json' |
| |
| xhr.setRequestHeader('Accept','application/json') |
| |
| xhr.send() |
| |
| function handler(){ |
| |
| console.log(this.readyState) |
| if(this.readyState === 4){ |
| if(this.status === 200){ |
| resolve(this.response) |
| }else{ |
| reject(new Error(this.statusText)) |
| } |
| } |
| } |
| }) |
| } |
| |
| getJSON('url') |
| .then((val)=>{ |
| console.log(val) |
| },(error)=>{ |
| console.log(error); |
| }) |
| |
| |
| |
| |
| |
| |
| getJSON('url').then(val=>{ |
| |
| }).catch(err=>{ |
| |
| }) |
补充
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| function img(imgs) { |
| return new Promise((resolve, reject) => { |
| new imgg = new Image() |
| img.onload = function () { |
| resolve(img) |
| } |
| img.src = imgsrc |
| }) |
| } |
| |
| function timeout() { |
| let p = new Promise((resolve, reject) => { |
| setTimeout(() => { |
| reject('请求超时') |
| }, 3000) |
| }) |
| } |
| |
| Promise.rece([img('images/2.peg'), timeout()]).then(res => { |
| console.log(res); |
| }).catch(err=>[ |
| console.log(err) |
| ]) |
| |
| race() finally(()=>{也是一个回调函数}) 不论是promise对象请求数据成功失败 都会执行race() finally()这两个方法 |
async异步
| async 解决异步操作更加方便 |
| 使用async 进行异步操作 返回一个promise对象 可以统括then 和catch |
| async 时gemerator 的一个语法糖 |
| |
| 1.案例使用async |
| async function f(){ |
| |
| |
| |
| return await 'await等待命令' async方法必须要与await配合使用 |
| } |
| f() |
| f().then(res=>{ |
| console.log(res) |
| }).catch(error=>{ |
| console.log(error) |
| }) |
| |
| |
| 方便理解 |
| async function f(){ |
| let s = await '你好 你好 async' |
| let data = await s.split('') |
| return data |
| |
| } |
| |
| |
| async函数中有多个await 那么then函数等待 所有的await指令 运行完毕的结果 才会执行then |
| |
| |
| await '后面必须是一个promise对象,不管是什么类型都会转换为promise对象' |
| await 特点就是 如果一个出错执行了错误信息,下面的await不会执行 |
| |
| 2.捕获异常 |
| async function f2(){ |
| await Promise.reject('出错了') |
| await Promise.resolve('正确的') |
| |
| } |
| f2().then( |
| (val)=>{ |
| console.log(val); |
| } |
| ).catch( |
| (err)=>{ |
| console.log(err); |
| }) |
| |
| |
| 3.解决await 出现错误不执行的弊端 |
| async function f2(){ |
| try { |
| await Promise.reject('出错了') |
| }catch(err){ |
| } |
| return await Promise.resolve('正确的') |
| } |
| |
| f2().then( |
| (val)=>{ |
| console.log(val); |
| } |
| ).catch( |
| (err)=>{ |
| console.log(err); |
| }) |
| |
| |
| 4.模拟异步请求 |
| function getJSON(url){ |
| |
| console.log(url) |
| return HeWeather6 |
| } |
| |
| |
| HeWeather6 = { |
| now :{ |
| 'xx':123 |
| } |
| } |
| |
| |
| async function func(url) { |
| |
| |
| let res = await getJSON(url) |
| |
| let arr = await res.now |
| return arr |
| } |
| |
| |
| |
| func('这是url').then((val) => { console.log(val); }) |
| |
| 总结:generator promise async 解决回掉地狱的问题(回掉循环 嵌套太多) 异步操作更加方便 |
class构造
| class 关键字时es6的语法糖 |
| |
| class Person{ |
| constructor(name,age){ |
| this.name = name |
| this.age = age |
| } |
| |
| sayname(){ |
| return this.name |
| } |
| sayage(){ |
| return this.age |
| } |
| |
| } |
| |
| let p1 = new Person('aa',123) |
| console.log(p1); |
| |
| console.log(p1.sayage()); |
| console.log(p1.sayname()); |
| |
| |
| |
| Object.assign(Person.prototype,{ |
| sayxx(){ |
| return xx |
| }, |
| sayzz(){ |
| return yy |
| } |
| }) |
class类的继承
| |
| |
| |
| class animal { |
| |
| constructor(name, age) { |
| this.name = name |
| this.age = age |
| } |
| |
| show() { |
| return this.name |
| } |
| func() { |
| return this.age |
| } |
| } |
| 继承语法: |
| class 子类名 extends 父类名 |
| class dog extends animal{ |
| |
| } |
| |
| |
| class dog extends animal{ |
| |
| constructor(name,age,color){ |
| super(name,age) |
| this.color = color |
| } |
| |
| saycole(){ |
| return `${this.name}${this.age}` |
| } |
| |
| func() { |
| return `${this.name}${this.age}` |
| } |
| } |
| |
| let p1 = new dog('aa',18,'red') |
| console.log(p1); |
| |
| |
| console.log(p1.show()); |
| |
| console.log(p1.color()); |
模块化
| 在modules/index.js文件将函数或者变量进行抛出 |
| |
| |
| |
| |
| |
| export const name = '张珊' |
| export const age = 18 |
| |
| export function func(){ |
| return '你好我是xx' |
| } |
| |
| export {func} |
| |
| |
| |
| |
| 在需要的文件导入index.js文件中的变量和函数 |
| <script type="module"> |
| |
| |
| import {name,age,func} from './modules/index.js' |
| |
| console.log(name) |
| console.log(age) |
| console.log(func()); |
| |
| </script> |
补充
1.清空默认样式
| |
| |
| |
| body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, |
| dl, dt, dd, ul, ol, li, |
| pre, |
| fieldset, lengend, button, input, textarea, |
| th, td { |
| margin: 0; |
| padding: 0; |
| } |
| input { |
| border: 0; |
| outline: none; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| img { |
| vertical-align: middle; |
| } |
| |
| |
| body, |
| button, input, select, textarea { |
| |
| font: 12px/1.3 "Microsoft YaHei",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; |
| color: #333; |
| } |
| |
| |
| h1 { font-size: 18px; } |
| h2 { font-size: 16px; } |
| h3 { font-size: 14px; } |
| h4, h5, h6 { font-size: 100%; } |
| |
| address, cite, dfn, em, var, i{ font-style: normal; } |
| b, strong{ font-weight: normal; } |
| code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } |
| small { font-size: 12px; } |
| |
| |
| ul, ol { list-style: none; } |
| |
| |
| a { text-decoration: none; color: #666;} |
| |
| |
| |
| legend { color: #000; } |
| fieldset, img { border: none; } |
| button, input, select, textarea { |
| font-size: 100%; |
| } |
| |
| |
| table { |
| border-collapse: collapse; |
| border-spacing: 0; |
| } |
| |
| |
| hr { |
| border: none; |
| height: 1px; |
| } |
| .clearFix::after{ |
| content:""; |
| display: block; |
| clear:both; |
| } |
| |
| html { overflow-y: scroll; } |
| |
| a:link:hover{ |
| color : rgb(79, 76, 212) !important; |
| text-decoration: underline; |
| } |
| |
| |
| .clearfix::after { |
| display: block; |
| height: 0; |
| content: ""; |
| clear: both; |
| visibility: hidden; |
| } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效