迟到_啦

Web前端知识系统学习(简化版)

思维导图预览
一、HTML
- 1、HTML介绍和规范
- 2、HTML使用
- - 2.1 body三个属性
  - 2.2 换行标签
  - 2.3 段落标签
  - 2.4 水平线标签
  - 2.5 分区标签-作为容器标签
  - 2.6 字体标签3个属性
  - 2.7 格式化标签
  - 2.8 列表标签
  - 2.9 图像标签
  - 2.10 超链接标签
  - 2.11 表格标签
  - 2.12 表单标签
  - 2.13 框架标签
  - 2.14 meta标签
  - 2.15 link标签
  - 2.16 特殊字符
- 3、HTML5新特性
- - 3.1 HTML4与HTML5的区别
  - 3.2 新增语义化标签
  - 3.3 媒体标签
  - 3.4 新增表单控件
二、CSS
- 1、CSS使用
- - 1.1 CSS3种使用方式
  - 1.2 选择器组
  - 1.3 派生选择器
  - 1.4 CSS伪类
- 2、CSS基本属性
- - 2.1 文本属性
  - 2.2 背景属性
  - 2.3 列表属性
  - 2.4 边框属性
  - 2.5 默认定位
  - 2.6 浮动定位
  - 2.7 相对定位
  - 2.8 绝对定位
  - 2.9 固定定位
  - 2.10 z轴属性
  - 2.11 圆角
  - 2.12 盒子阴影
  - 2.13 渐变
  - 2.14 背景
  - 2.15 过渡动画
三、JavaScript
- 1、 js的组成
- 2、 HTML与javaScript结合方式
- - 2.1 行内
  - 2.2 内部
  - 2.3 外部
- 3、JS的使用
- - 3.1 变量
  - 3.2 常用字符串API
  - 3.3 数组
  - 3.4 Math对象
  - 3.5 Number对象
  - 3.6 正则表达式
  - 3.7 日期对象
  - 3.8 函数
  - 3.9 弹框输出
- 4、DOM操作
- - 4.1 DOM访问
  - 4.2 DOM修改
  - 4.3 事件
  - 4.4 面向对象OOP
  - 4.5 JSON（常用）
- 5、BOM操作
- - 5.1 Windows对象
  - 5.2 计时操作
四、jQuery + Ajax +Vue
五、HighCharts + ECharts数据可视化

思维导图预览

一、HTML

1、HTML介绍和规范

2、HTML使用

2.1 body三个属性

text：字体颜色
bgcolor：背景颜色
background：背景图片

2.2 换行标签

/ 可有可无

2.3 段落标签

常用属性align，表示对齐方式，取值为：left、right、center

2.4 水平线标签

常用属性：
1. align：水平线位置，取值为left、right、center
2. size：水平线粗细
3. width：水平线宽度
4. color：水平线颜色

2.5 分区标签-作为容器标签

：不会自动换行，也叫块级元素，用于整体划分区块
：会自动换行，也叫行内元素，用于局部划分区块

2.6 字体标签3个属性

face：设置字体，例如宋体、隶书、楷体
size：设置字体大小（大小默认是1-7，7为最大）

color：字体颜色

 百度搜索：字魂网，下载一个免费字体，安装到计算机

2.7 格式化标签

：字体加粗

：字体倾斜

~~：删除线~~

：下划线

2.8 列表标签

ol

type = ‘A’ : 字母排序

type = ‘1’ ：数字排序

type = ‘I’　：罗马数字排序

start = ‘3’ : 顺序从几开始

ul

默认：实心圆

type = ‘circle’ : 空心圆

type = ‘square’ : 方块

2.9 图像标签

可以让我们在网页引入一张图片，常用属性：

src 代表的图片的路径

width 图片的宽度

height 图片的高度

border 用于设置图片的边框

alt 如果图片不可以显示时，默认显示的文本信息

title鼠标悬停图片上，默认显示的文本信息

align 图片附件文字的对齐方式，可取值有
left：把图像对齐到左边
right：把图像对齐到右边
middle：把图像与中央对齐
top：把图像与顶部对齐
bottom：把图像与底部对齐（默认）

2.10 超链接标签

功能性超链接（了解，几乎不用）

发送邮件

联系站长\

QQ聊天窗口

2.11 表格标签

<table>：定义一个表格 border：边框，取值是像素为单位 width 代表的表格的宽度 align 代表表格的对齐方式；取值 left 左对齐表格 right 右对齐表格 center 居中对齐表格 cellspacing：单元格间距（通常设置0表示单线表格） <tr>：表格中的行（Table Row） align 代表表格的对齐方式；取值 left 左对齐内容（默认值） right 右对齐内容 center 居中对齐内容（th 元素的默认值） <td>：表格中的数据单元格（Table DataCell） colspan 指示列的合并 <a href="mailto:[email protected]">联系站长a> <a href="tencent://message/?uin=19998539&Menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/> a> rowspan 指示行的合并

2.12 表单标签

form属性

action：整个表单提交的目的地

method：表单提交的方式

get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）

post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）

表单中的元素

元素的type属性

text：默认值，普通的文本输入框

placeholder属性：提示文本

maxlength属性：最多能输入字符数量

password：密码输入框

checkbox：多选框/复选框

checked：被选中

radio：单选按钮

file：上传文件

reset：重置按钮

submit：提交按钮

button：普通按钮

：文本域（多行文本框） <ul> <li>可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height 和 width 属性。</li> </ul> </li> <li><button>：按钮 <ul> <li>在form表单中，作用和submit一样</li> <li>不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）</li> </ul> </li> </ul> </li> </ul> <blockquote> 注意事项： </blockquote> <ol> <li>所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法识别多个元素之间的不 同）</li> <li>单选框要想可以一次只选择一个，要具有相同的name值</li> <li>所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值</li> </ol> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="baidu" method="GET"> <p>帐号：<input name="a" type="text" placeholder="请输入帐号..." maxlength="5"></p> <p>密码：<input name="b" type="password"></p> <p>爱好： <input name="hobby" type="checkbox"> 抽烟 <input name="hobby" type="checkbox" checked="checked"> 喝酒 <input name="hobby" type="checkbox"> 烫头 <input name="hobby" type="checkbox"> 泡澡 </p> <p>性别： <input type="radio" name="sex"> 男 <input type="radio" name="sex" checked="checked"> 女 </p> <p>身份： <input type="radio" name="role"> ceo <input type="radio" name="role"> cto <input type="radio" name="role"> coo <input type="radio" name="role" checked="checked"> ufo </p> <p>头像： <input type="file"> </p> <p>血型： <select> <option>A型</option> <option>B型</option> <option>C型</option> <option selected="selected">O型</option> </select> </p> <p>个人简介： <textarea cols="10" rows="5"></textarea> </p> <p> <input type="reset" value="清空"> <input type="submit" value="提交"> <input type="button" value="取消"> <button>保存</button> </p> </form> <button>测试</button> </body> </html> </code></pre> <h3>2.13 框架标签</h3> <ul> <li>通过<frameset>和<frame>框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面。 注意，框架标签和body标签不共存。“有你没我，有我没你” <a href="http://img.e-com-net.com/image/info8/776dc6bdc16d4da48906a3a7aeaf0060.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/776dc6bdc16d4da48906a3a7aeaf0060.jpg" alt="Web前端知识系统学习(简化版)_第1张图片" width="650" height="422" style="border:1px solid black;"></a></li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <frameset rows="10%,*,13%"> <frame src="top.html"></frame> <frameset cols="15%,*"> <frame src="left.html"></frame> <frame src="right.html"></frame> </frameset> <frame src="foot.html"></frame> </frameset> </html> </code></pre> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <h1>顶部导航区域</h1> </body> </html> </code></pre> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <h1>底部区域</h1> </body> </html> </code></pre> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <h1>左侧导航区域</h1> </body> </html> </code></pre> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <h1>右侧内容区域</h1> </body> </html> </code></pre> <h3>2.14 meta标签</h3> <meta>标签必须写在<head>标签之间. <pre><code> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </code></pre> <ol> <li>当前页面的字符编码 gbk：中文简体</li> <li>这里的名字是 viewport （显示窗口） 数据是文本内容 content=“width=device-width, initial-scale=1.0” 也就是显示窗口宽度是客户端的屏幕宽度（就是满屏！），显示的文字和图形的初始比例是1.0</li> <li>每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染</li> </ol> <ul> <li> 通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面 <pre><code> <meta http-equiv="refresh" content="5; url=http://www.lagou.com"> </code></pre> </li> </ul> 注意：在html中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径。 <h3>2.15 link标签</h3> 后面我们会使用link标签来导入css 注意:link标签也必须写在<head>标签中 <h3>2.16 特殊字符</h3> 特殊字符参照表 <h2>3、HTML5新特性</h2> <h3>3.1 HTML4与HTML5的区别</h3> H5包含h4 <a href="http://img.e-com-net.com/image/info8/5be70988916b4d12b418482d4796b109.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5be70988916b4d12b418482d4796b109.jpg" alt="Web前端知识系统学习(简化版)_第2张图片" width="504" height="307" style="border:1px solid black;"></a> <ul> <li> 大小写不敏感 <ul> <li> 标签 </li> <li> 属性 </li> <li> 属性值 <pre><code> <inPUT tYPe="pasSWord"/> </code></pre> </li> </ul> </li> <li> 引号可省略 <pre><code> <input type="password"> <input type=password> </code></pre> </li> <li> 结尾标签可以省略 <pre><code> 哈哈哈哈哈哈哈 </code></pre> </li> </ul> <h3>3.2 新增语义化标签</h3> html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此 新增许多语义化标签，让div“见名知意” <ul> <li>section标签：表示页面中的内容区域，部分，页面的主体部分</li> <li>article标签：文章</li> <li>aside标签：文章内容之外的（标题）</li> <li>header标签：头部，页眉，页面的顶部</li> <li>hgroup标签：内容与标题的组合</li> <li>nav标签：导航</li> <li>figure标签：图文并茂</li> <li>foot：页脚，页面的底部</li> </ul> <h3>3.3 媒体标签</h3> 想在网页上播放视频，就要使用，属性有： <ul> <li> src：媒体资源文件的位置 </li> <li> controls：控制面板 </li> <li> autoplay：自动播放（谷歌失效，360浏览器可以） </li> <li> loop：循环播放 <pre><code> <video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video> </code></pre> </li> </ul> <h3>3.4 新增表单控件</h3> 表单的控件更加丰富了 <ul> <li><input>，修改type属性： <ul> <li>color：调色板</li> <li>date：日历</li> <li>month：月历</li> <li>week：周历</li> <li>number：数值域 <ul> <li>min：最小值（默认值是1）</li> <li>max：最大值（默认值无上限）</li> <li>step：递增量</li> </ul> </li> <li>range：滑块</li> <li>search：搜索框（带×号，可一键删除框中内容）</li> </ul> </li> <li>进度条</li> <li>高亮</li> <li>联想输入框（模糊查询） <ul> <li>选项</li> </ul> </li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>我喜欢<mark>你</mark></h1> <input list="cities"> <datalist id='cities'> <option value="北京"></option> <option value="广东"></option> <option value="深圳"></option> <option value="上海"></option> </datalist> <input type="color"><br> <input type="date"><br> <input type="month"><br> <input type="week"><br> <input type="number" max="30" min="8" step="2"><br> <input type="range"><br> <input type="search"><br> <hr> <progress></progress> </body> </html> </code></pre> <h1>二、CSS</h1> <h2>1、CSS使用</h2> <h3>1.1 CSS3种使用方式</h3> <ol> <li> 内联 / 行内样式 </li> <li> 内部样式 </li> <li> 外部 / 外联样式 <pre><code> <style> @import 'css/css01.css' </style> </code></pre> </li> </ol> <ul> <li> 关于外部导入css使用<link>与@import的区别? <ol> <li>加载顺序不同 @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。 如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；</li> <li>@import方式导入css样式，它是不支持javascript的动态修改的。而link支持。</li> </ol> </li> <li> 三种样式表的优先级：满足就近原则 内联 > 内部 > 外部 </li> </ul> <h3>1.2 选择器组</h3> <pre><code class="prism language-css">/*,分割*/ .div1,#div2,.div3{ ... } </code></pre> <h3>1.3 派生选择器</h3> <ul> <li>子代选择器：父子关系（隔代不管） <ul> <li>> 间隔</li> </ul> </li> <li>后代选择器：父子孙，曾孙，从孙…均包括 <ul> <li>空格间隔</li> </ul> </li> </ul> <pre><code class="prism language-css">/*父子关系*/ div>p{ ... } /*后代关系*/ div p{ ... } </code></pre> <h3>1.4 CSS伪类</h3> <ul> <li>CSS伪类可对css的选择器添加一些特殊效果</li> <li>伪类属性列表： <ul> <li>:active 向被激活的元素添加样式。</li> <li>:hover 当鼠标悬浮在元素上方时，向元素添加样式。</li> <li>:link 向未被访问的链接添加样式。</li> <li>:visited 向已被访问的链接添加样式。</li> <li>:first-child 向元素的第一个子元素添加样式</li> </ul> </li> </ul> 超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha <pre><code class="prism language-css">a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ </code></pre> <h2>2、CSS基本属性</h2> <h3>2.1 文本属性</h3> <ul> <li>指定字体：font-family : value;</li> <li>字体大小：font-size : value;</li> <li>px：像素</li> <li>em：倍数</li> <li>字体加粗：font-weight : normal/bold;</li> <li>文本颜色：color : value;</li> <li>文本排列：text-align : left/right/center;</li> <li>文字修饰：text-decoration : none/underline;</li> <li>行高：line-height : value;</li> <li>首行文本缩进：text-indent : value （2em）;</li> </ul> <h3>2.2 背景属性</h3> <ul> <li>background-color 设置元素的背景颜色。</li> <li>background-image 把图像设置为背景。</li> </ul> <pre><code class="prism language-css">background-image: url('img/1.jpg'); </code></pre> <ul> <li>background-repeat 设置背景图像的墙纸效果，是否及如何重复 <ul> <li>repeat：在垂直方向和水平方向重复，为重复值</li> <li>repeat-x：仅在水平方向重复</li> <li>repeat-y：仅在垂直方向重复</li> <li>no-repeat：仅显示一次</li> </ul> </li> <li>background-position 设置背景图像的起始位置 <ul> <li>1：控制水平方向 x轴：正值，向右移动；负值，向左移动</li> <li>2：控制垂直方向 y轴：正值，向下移动；负值，向上移动</li> </ul> </li> </ul> <pre><code class="prism language-css">/* 图片向左移动50px，向下移动100px （可以为负值） */ background-position:50px 100px; </code></pre> <ul> <li>background-attachment 背景图像是否固定或者随着页面的其余部分滚动 <ul> <li>默认值是 scroll：默认情况下，背景会随文档滚动</li> <li>可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图 像</li> </ul> </li> </ul> <pre><code class="prism language-css">background-attachment: fixed; </code></pre> <h3>2.3 列表属性</h3> <ul> <li>CSS列表属性作用如下： <ul> <li>设置不同的列表项标记为有序列表</li> <li>设置不同的列表项标记为无序列表</li> <li>设置列表项标记为图像</li> </ul> </li> <li>列表项标记样式 <ul> <li>none：无标记。（去除标记）</li> <li>disc：默认。标记是实心圆。</li> <li>circle：标记是空心圆。</li> <li>square：标记是实心方块。</li> <li>decimal：标记是数字。</li> <li>decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)</li> <li>lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)</li> <li>upper-roman：大写罗马数字(I, II, III, IV, V, 等。)</li> <li>lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)</li> <li>upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)</li> <li>url(‘img/1.gif’)</li> </ul> </li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .blogs>li{ list-style-type: none; /* 不展示选项标记 */ width: 300px; /* 宽度 */ line-height: 40px; /* 内容行高 */ text-align: center; /* 文字水平居中 */ border:1px solid white; /* 边框宽度，线类型，颜色 */ background-color: black; /* 背景色 */ color:white; /* 字体颜色 */ font-weight: bold; /* 字体粗细 */ font-size: 1.1em; /* 字体大小为1.1倍 */ float: left; /* 纵向变水平 */ } .blogs>li:hover{ /* 鼠标悬停伪类 */ background-color:yellow; /* 背景色变为黄色 */ line-height: 50px; /* 行高变为50px */ color:black; /* 字体颜色变为黑色 */ } </style> </head> <body> <ol class='blogs'> <li>CSDN博客</li> <li>ITPUB</li> <li>博客园</li> </ol> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/614a3bb749d84e4698c9d031d4535376.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/614a3bb749d84e4698c9d031d4535376.jpg" alt="在这里插入图片描述" width="650" height="67"></a> <h3>2.4 边框属性</h3> <ul> <li>border-width: 20px;</li> <li>border-color: green;</li> <li>border-style取值： <ul> <li>none：默认无边框</li> <li>dotted：点线边框</li> <li>dashed：虚线边框</li> <li>solid：实线边框</li> <li>double：俩个边框，俩个边框宽度与border-width相同</li> <li>groove：3D沟槽边框</li> <li>ridge：3D脊边框</li> <li>inset：3D嵌入边框</li> <li>outset：3D突出边框 <a href="http://img.e-com-net.com/image/info8/94803fe91f134f3d8adb5c5160f584dc.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/94803fe91f134f3d8adb5c5160f584dc.png" alt="Web前端知识系统学习(简化版)_第3张图片" width="764" height="794" style="border:1px solid black;"></a></li> </ul> </li> </ul> <h3>2.5 默认定位</h3> <ul> <li>块级元素：h1~h6，p, div,display:block 等，自上而下，垂直排列（自动换行）；可以改变宽高</li> <li>行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高</li> <li>行内块元素：input,img,display:inline-block等，从左向右，水平排列（自动换行）；可以改变宽高</li> </ul> <h3>2.6 浮动定位</h3> <ul> <li>让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。</li> <li>float取值： <ul> <li>none ：不浮动</li> <li>left：贴着左边浮动</li> <li>right：贴着右边浮动</li> </ul> </li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width:300px; height: 300px; border:2px solid red; } .a,.b{ width:100px; height:100px; } .a{ background: blue; float: left; } .b{ background-color: green; float:right; } </style> </head> <body> <div class="box"> <div class="a"></div> <div class="b"></div> </div> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/b09dc9b0c777417eab7d9b2e750d8df5.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/b09dc9b0c777417eab7d9b2e750d8df5.png" alt="Web前端知识系统学习(简化版)_第4张图片" width="477" height="463" style="border:1px solid black;"></a> <h3>2.7 相对定位</h3> <ul> <li>相对自己原来的位置比较，进行偏移</li> <li>position:relative</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width:300px; height:150px; border:1px solid red; } .a,.b,.c{ width:300px; height:50px; } .a{ background: green; } .b{ background: orange; position: relative; /* 相对于自己原来的位置进行偏移 */ left:30px; /* 向右偏移30像素 */ top:10px; /* 向下偏移10像素 */ } .c{ background: pink; } </style> </head> <body> <div class="box"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> </body> </html> </code></pre> <h3>2.8 绝对定位</h3> <ul> <li>本元素与已定位的最近的祖先元素的距离 <ul> <li>如果父级元素定位了，就以父级为参照物；</li> <li>如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。</li> <li>如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。</li> </ul> </li> </ul> <h3>2.9 固定定位</h3> <ul> <li>将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动</li> </ul> <h3>2.10 z轴属性</h3> <ul> <li>如果有重叠元素，使用z轴属性，定义上下层次。</li> <li>z轴属性，要配合相对定位 / 绝对定位来使用。</li> <li>z值没有额定数值，整型就可以，数值大的在上层显示</li> </ul> <h3>2.11 圆角</h3> <ul> <li>order-radius：左上右上右下左下;</li> <li>border-radius：四个角;</li> <li>border-radius：50%; 圆形</li> </ul> <h3>2.12 盒子阴影</h3> <ul> <li>box-shadow：1 2 3 4 5; 1：水平偏移 2：垂直偏移 3：模糊半径 4：扩张半径 5：颜色</li> </ul> <h3>2.13 渐变</h3> <ul> <li>线性渐变 <ul> <li>background:linear-gradient([方向/角度]，颜色列表)；</li> </ul> </li> <li>径向渐变(以圆心向外发散) <ul> <li>background: radial-gradient(颜色列表);</li> </ul> </li> </ul> <h3>2.14 背景</h3> <ul> <li>背景位置 <ul> <li>background-origin：指定了背景图像的位置区域 <ul> <li>border-box : 背景贴边框的边</li> <li>padding-box : 背景贴内边框的边</li> <li>content-box : 背景贴内容的边</li> </ul> </li> </ul> </li> <li>背景裁切 <ul> <li>background-clip: <ul> <li>border-box 边框开切</li> <li>padding-box 内边距开切</li> <li>content-box 内容开切</li> </ul> </li> </ul> </li> <li>背景大小 <ul> <li>background-size: <ul> <li>cover 缩放成完全覆盖背景区域最小大小</li> <li>contain 缩放成完全适应背景区域最大大小(等比例缩放)</li> </ul> </li> </ul> </li> </ul> <h3>2.15 过渡动画</h3> <ul> <li>过渡 <ul> <li>从一个状态到另一个状态，中间的“缓慢”过程；</li> <li>缺点是，控制不了中间某个时间点。</li> <li>transition｛1 2 3 4｝ 1：过渡或动画模拟的css属性 2：完成过渡所使用的时间（2s内完成） 3：过渡函数 4：过渡开始出现前的延迟时间 <ul> <li>linear：匀速</li> <li>ease：逐渐慢下来</li> <li>ease-in：减速</li> <li>ease-out：加速</li> <li>ease-in-out：先加速后减速</li> </ul> </li> <li>目前，css3只开发出部分的过渡属性，下图所示： <a href="http://img.e-com-net.com/image/info8/d27cb63148f840d88d6f399983fb3046.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d27cb63148f840d88d6f399983fb3046.jpg" alt="Web前端知识系统学习(简化版)_第5张图片" width="612" height="460" style="border:1px solid black;"></a></li> </ul> </li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width:300px; height:300px; background-color: antiquewhite; transition: background 2s linear 1s; /*延迟1s后，背景色在2s内匀速变化为红色*/ } div:hover{ /*触发div变色*/ background-color: red; } </style> </head> <body> <div></div> </body> </html> </code></pre> <ul> <li>动画 <ul> <li>从一个状态到另一个状态，过程中每个时间点都可以控制。 <ul> <li>关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }</li> <li>动画属性：animation{ 1 2 3 4 5 } 1：动画帧 2：执行时间 3：过渡函数 4：动画执行的延迟（可省略） 5：动画执行的次数</li> </ul> </li> </ul> </li> </ul> 示例1： 一个元素从左向右移动，3秒内执行2次 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>一个元素从左向右移动，3秒内执行2次</title> <style> .wai{ width:600px; height:100px; border:1px solid blue; } .nei{ width:100px; height:100px; background-color: red; animation: test 2s linear 3; } @keyframes test{ from{ margin-left: 0px; } to{ margin-left: 500pxs; background-color: gold; } } </style> </head> <body> <div class="wai"> <div class="nei"></div> </div> </body> </html> </code></pre> 示例2： 一个元素从左向右移动，3秒内执行完成。无限次交替执行 <ul> <li>infinite：无限次</li> <li>alternate：来回执行（交替，一去一回）</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>一个元素从左向右移动，3秒内执行完成。无限次交替执行</title> <style> .wai{ width:100%; height:100px; border:2px solid palevioletred; } .nei{ width:100px; height:100px; background-color: red; animation: test 3s linear infinite alternate; /*无限 + 交替循环*/ } @keyframes test{ 0%{ margin-left:25%; background-color: yellow; } 25%{ margin-left:50%; background-color: blue; } 50%{ margin-left:75%; background-color: greenyellow; } 100%{ margin-left:100%; background-color: black; } } </style> </head> <body> <div class="wai"> <div class="nei"></div> </div> </body> </html> </code></pre> <h1>三、JavaScript</h1> <h2>1、 js的组成</h2> <ul> <li>ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准</li> <li>DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每 一个节点。</li> <li>BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。 <ul> <li>弹出新的浏览器窗口</li> <li>移动、关闭浏览器窗口以及调整窗口大小</li> <li>提供 Web 浏览器详细信息的定位对象</li> <li>提供用户屏幕分辨率详细信息的屏幕对象</li> <li>对 cookie 的支持</li> <li>IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而 实现ajax局部刷新技术</li> </ul> </li> </ul> <h2>2、 HTML与javaScript结合方式</h2> <h3>2.1 行内</h3> <pre><code class="prism language-html"><button onclick="alert('弹框测试')">点我一下</button> </code></pre> <h3>2.2 内部</h3> <ul> <li>标准是写在head和body之间（head后，body前），但其实只要写在html文件内部就可以</li> </ul> <pre><code class="prism language-html"><body> <script> alert("弹框"); </script> </body> </code></pre> <h3>2.3 外部</h3> <pre><code class="prism language-html"><script src="js/xx.js"></script> </code></pre> <h2>3、JS的使用</h2> <h3>3.1 变量</h3> <blockquote> 自动类型转换 </blockquote> 数字 + 字符串：数字转换为字符串 10+’a’ -> 10a 数字 + 布尔值：true转换为1，false转换为0 true+5->6 字符串 + 布尔值：布尔值转换为字符串true或false true+’a’->truea 布尔值 + 布尔值：布尔值转换为数值1或0 true+true->2 <blockquote> 数据类型转换函数 </blockquote> <ul> <li>parseInt：强制转换成整数 如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性表示非数字） 例如：parseInt(“6.32”)=6</li> <li>parseFloat：强制转换成浮点数 如果不能转换，则返回 NaN 例如：parseFloat(“6.32”)=6.32</li> <li>typeof：查询数值当前类型，返回 string / number / boolean / object 例如：typeof(“test”+3)==“string”</li> </ul> <blockquote> null 与 undefined </blockquote> <ul> <li>null 在程序中代表“无值”或者“无对象” 可以通过给一个变量赋值 null 来清除变量的内容</li> <li>undefined 声明了变量但从未赋值或者对象属性不存在</li> </ul> <blockquote> 关系运算 </blockquote> <ul> <li>严格相等 === 数值和类型都相等为true</li> <li>非严格相等 == 数值相等为true</li> </ul> <blockquote> 逻辑运算 </blockquote> 逻辑非（!）、逻辑与（&&）、逻辑或（||） <blockquote> 控制语句 </blockquote> <ul> <li>if else</li> </ul> <pre><code class="prism language-javascript">if（关系表达式） { // 语句块 1 }else { // 语句块 2 } </code></pre> <ul> <li>if else if else</li> </ul> <pre><code class="prism language-javascript">if (表达式1) { // 语句1; }else if (表达式2){ // 语句2; }else if (表达式3){ // 语句3; } else{ // 语句4; } </code></pre> <ul> <li>switch case</li> </ul> <pre><code class="prism language-javascript">switch (表达式) { case 值1: // 语句1; break; case 值2: // 语句2; break; default: // 语句4; } </code></pre> <ul> <li>for</li> </ul> <pre><code class="prism language-javascript">for (var i=1 ; i<=5 ; i++){ alert(i); } </code></pre> <ul> <li>while</li> </ul> <pre><code class="prism language-javascript">while (条件){ // 语句1; ... } </code></pre> <h3>3.2 常用字符串API</h3> <ul> <li>length:获取字符串的长度（字符串中字符的个数）属性，没有小括号</li> </ul> <pre><code class="prism language-javascript">var str = "hello"; console.log( str.length ); </code></pre> <ul> <li>toUpperCase/toLowerCase :转大小写</li> </ul> <pre><code class="prism language-javascript">var name = "AngierSun"; console.log( "大写："+name.toUpperCase() ); console.log( "小写："+name.toLowerCase() ); </code></pre> <ul> <li>charAt(下标) ：返回某个下标的字符</li> </ul> <pre><code class="prism language-javascript">var str1 = "javascript网页教程"; var str2 = str1.charAt(12); // 下标12上的字符 console.log(str2); //教 var str3 = str1.charCodeAt(12); console.log(str3); //25945:（汉字“教”在unicode编码中的编号） </code></pre> <ul> <li> indexof(字符)：查找字符串中字符出现的首次下标 </li> <li> lastIndexof(字符)：查找字符串中字符最后一次出现的下标 </li> </ul> <pre><code class="prism language-javascript">var str1 = "javascript网页教程"; var str2 = str1.indexOf("a"); console.log(str2); // 1 , a字符在str1中第一次出现的下标 var str3 = str1.lastIndexOf("a"); //3,a字符在str1中最后一次出现的下标 console.log(str3); </code></pre> <ul> <li>substring(开始,结束)：截取字符串中一部分（结束是不包含的）</li> </ul> <pre><code class="prism language-javascript">var str1 = "abcdefgh"; var str2 = str1.substring(2,4); console.log(str2); //cd，从2开始（包含），4结束（不包含） </code></pre> <ul> <li>replace(旧的,新的)：将字符串中的旧字符替换成新字符</li> </ul> <pre><code class="prism language-javascript">var str1 = "abcde"; var str2 = str1.replace("cd","XXX"); console.log(str2); // abXXXe，将str1中的cd替换成XXX </code></pre> <ul> <li>split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型</li> </ul> <pre><code class="prism language-javascript">var str1 = "一,二,三,四,五"; var arr = str1.split(","); // 将str1 以逗号进行分割，分割成N份，所以返回的结果一定 是数组结构 console.log( "共分割成："+arr.length+"份" ); console.log( "第三份是：" + arr[2] ); // 三 </code></pre> <h3>3.3 数组</h3> <blockquote> 创建数组 </blockquote> <pre><code class="prism language-javascript">var arr1 = new Array(); </code></pre> <blockquote> 初始化数组的三种方式 </blockquote> <pre><code class="prism language-javascript">// 第一种 var arr1 = new Array(); arr1[0] = 110; arr1[1] = 119; arr1[2] = 120; // 第二种 var arr1 = new Array(10,"a",true); // 第三种 var arr1 = [10,"a",true]; </code></pre> <blockquote> 数组的常用方法 </blockquote> <ul> <li> tostring()：将数组转换成字符串 </li> <li> join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。 </li> </ul> <pre><code class="prism language-javascript">var arr = [1,2,3,4]; var str = arr.join("-"); // 将数组中每个元素用-进行连接，并形成一个全新的字符串 console.log( str +",类型为：" + typeof( str ) ); </code></pre> <ul> <li>concat(新元素)：将原来的数组连接新元素，原数组不变</li> </ul> <pre><code class="prism language-javascript">var arr = [1,2,3,4]; var arrnew = arr.concat(5,6); // 在arr数组的后面添加新的元素，形成一个新数组，但是 原数组是不变的 console.log( arrnew +",类型为：" + typeof( arrnew ) ); console.log("原数组：" + arr); </code></pre> <ul> <li>slice(开始，结束)：在数组中提取一部分，形成新的数组。</li> </ul> <pre><code class="prism language-javascript">var arr = ['a','b','c','d','e','f','g','h']; var arrnew = arr.slice( 2,4 ); // 在arr数组中截取，从2开始（包含），4结束（不包 含） console.log( arrnew ); // cd </code></pre> <ul> <li>reverse()：数组的反转（倒序）</li> </ul> <pre><code class="prism language-javascript">var arr = [31,12,111,444]; console.log( arr.toString() ); arr.reverse(); // 将数组中的元素倒置 console.log( arr.toString() ); </code></pre> <ul> <li>sort()：数组排序 <ul> <li>arr.sort() 字符排序</li> </ul> </li> </ul> <pre><code class="prism language-javascript">var arr = [31,12,111,444]; arr.sort(); // 字符排序（不会按照字面量的大小） console.log( arr ); </code></pre> <ul> <li>sort()：数组排序 <ul> <li>arr.sort(func) 数值排序</li> </ul> </li> </ul> <pre><code class="prism language-javascript">var arr = [31,12,111,444]; arr.sort( laosun ); // 数字排序（会按照字面量的大小） console.log( arr ); // 定义排序函数 function laosun(a,b){ return a-b; } </code></pre> <h3>3.4 Math对象</h3> <ul> <li>Math 对象用于执行数学任务</li> <li>没有构造函数 Math()</li> <li>无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法 <a href="http://img.e-com-net.com/image/info8/42ae843b83524bf9be564e3baed0877a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/42ae843b83524bf9be564e3baed0877a.jpg" alt="Web前端知识系统学习(简化版)_第6张图片" width="650" height="643" style="border:1px solid black;"></a></li> </ul> <pre><code class="prism language-javascript">// 返回0-9之间任意一个随机数字 var i = Math.random() * 10; var j = Math.floor(i); console.log(j); </code></pre> <h3>3.5 Number对象</h3> Number.toFixed(2); 自带四舍五入技能 <pre><code class="prism language-javascript">var n = new Number( 12.345 ); var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入 console.log( n1 ); var x = new Number( 12.3 ); var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐 console.log( n2 ); </code></pre> <h3>3.6 正则表达式</h3> 对字符串执行模式匹配的强大工具 <pre><code class="prism language-javascript">// 方式1 var age = "18"; // 判断：1-3位纯数字 var reg = /^\d{1,3}$/; // 以/^开始，中间写正则内容，以$/结束 var b = reg.test(age); // 验证age变量的是否符合reg的匹配 if (b == true) { console.log("验证通过！"); } else { console.log("格式错误"); } // 方式2 var name = "abc123"; // 大小写字母和数字的组合（特殊字符不能出现）, 5~8位 var reg = new RegExp("^[a-zA-Z0-9]{5,8}$"); // 以^开始，中间写正则内容，以$结束 if (reg.test(name)) { console.log("验证通过！"); } else { console.log("格式错误"); } </code></pre> <a href="http://img.e-com-net.com/image/info8/01582766a69c460f9260766309f2d70e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/01582766a69c460f9260766309f2d70e.jpg" alt="Web前端知识系统学习(简化版)_第7张图片" width="650" height="149" style="border:1px solid black;"></a> <h3>3.7 日期对象</h3> <pre><code class="prism language-javascript">var time = new Date(); console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间) var year = time.getFullYear(); // 年份 var month = time.getMonth() + 1; //月份从0开始，11结束，所以国内习惯要+1 var day = time.getDate(); // 几号 var hour = time.getHours(); // 几点 var mm = time.getMinutes(); // 分钟 var s = time.getSeconds(); //秒 var ms = time.getMilliseconds(); // 毫秒， 1000毫秒 = 1秒 var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒"; console.log( timestr ); </code></pre> <h3>3.8 函数</h3> <ul> <li>使用关键字 function 定义函数</li> </ul> <pre><code class="prism language-javascript">function 函数名( 形参列表 ){ // 函数体 return 返回值; } </code></pre> <ul> <li>函数声明后不会立即执行，会在我们需要的时候调用到。</li> <li>注意： <ul> <li>形参：一定不要带数据类型</li> <li>分号是用来分隔可执行JavaScript语句。由于函数声明不是一个可执行语句，所以不以分号 结束。</li> </ul> </li> </ul> <blockquote> 参数对象 </blockquote> 在函数内部，调用参数列表的属性 <pre><code class="prism language-javascript">function func(a,b,c){ console.log( arguments.length ); // 获得参数的个数 console.log( arguments[1] ); // 获得下标为1的参数 } </code></pre> <blockquote> 构造函数(很少见) </blockquote> 函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义 <pre><code class="prism language-javascript">var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3); console.log(x); </code></pre> 注：上述函数以分号结尾，因为它是一个执行语句。 <blockquote> 匿名函数 </blockquote> <pre><code class="prism language-javascript">var fn = function(a, b) {// 没有名字的函数，应该用一个变量来接收 return a * 10 + b; }; console.log( fn(3, 4) ); </code></pre> <blockquote> 全局函数（常用） </blockquote> <ul> <li>isNaN：检查其参数是否是非数字值</li> </ul> <pre><code class="prism language-javascript">console.log( isNaN( 123 ) ); // 数字，false console.log( isNaN( "hello" ) ); // 非数字，true console.log( isNaN( 4-1 ) ); // 数字，false console.log( isNaN( 123 ) ); // 数字，false console.log( isNaN( -10 ) ); // 数字，false console.log( isNaN( "123" ) ); // 数字，false console.log( isNaN( "1a23" ) ); // 非数字，true </code></pre> <ul> <li>eval：用来转换字符串中的运算</li> </ul> <pre><code class="prism language-javascript">var str = "1+3"; console.log( str ); // 1+3 , +会认定为一种字符符号而已，没有加法的作用 console.log( eval( str ) ); // 让字符串中的运算符号生效 </code></pre> <ul> <li>encodeURI 与 decodeURI</li> </ul> <pre><code class="prism language-javascript">var name = "拉勾网"; console.log( "转码前：" + name ); name = encodeURI(name); console.log( "转码后：" + name ); name = decodeURI(name); console.log( "解码后：" + name ); </code></pre> <blockquote> 闭包 </blockquote> <ul> <li> 闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。 </li> <li> 闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理； </li> <li> 简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据的安全唯一性 </li> </ul> 想了解闭包，首先要了解什么是全局变量，什么是局部变量 <pre><code class="prism language-javascript">a = 10; // 全局变量，声明的时候可以不使用var function test1(){ b = 20; // 不适用var声明的变量，就是全局变量 var c = 30; // 用var声明，并且在函数的内部。这样的变量叫做局部变量，有效范围只能 在其声明的函数内部 console.log(c); } function test2(){ console.log(c); //c is not defined (c变量没有定义) } test1(); test2(); </code></pre> 需求：统计方法执行了多少次 <pre><code class="prism language-javascript">var count = 0; // 总次数 function test1(){ count++; // 自增+1 } test1(); test1(); test1(); console.log( count ); </code></pre> 谁都可以访问count，所以count变量并不安全，因为是全局变量。 如何才能安全呢？将count声明为局部变量 <pre><code class="prism language-javascript">function test1(){ var count = 0; //局部变量 return count++; //外部无法访问count，只能通过return才能将count变量返回，并输 出 } test1(); test1(); test1(); console.log( test1() ); // 每次调用方法，首先就是将变量还原为0 </code></pre> 结果一直是0，因为每次调用test1()，方法体的第一句代码就是还原，无论曾经的值是多少。 突发奇想，如果在test1()函数里面，再嵌套一个函数，js是支持函数嵌套的 <pre><code class="prism language-javascript">function test1(){ var count = 0; //局部变量 function jia(){ return count++; } jia(); return count; } test1(); test1(); test1(); console.log( test1() ); // 每次调用方法，首先就是将变量还原为0 </code></pre> 如果每次只调用test1()里面的jia()就好了。ok，闭包帮你解决此问题! <pre><code class="prism language-javascript">function test1(){ var count = 0; //局部变量 function jia(){ return count+=1; } return jia; } var fn = test1(); // 获取到内部的函数 var times = fn(); //第一次调用函数 times = fn(); //第二次调用函数 console.log(times); // 2 </code></pre> <ul> <li>闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。 闭包的优点：方便调用上下文中声明的局部变量逻辑紧密，可以在一个函数中再创建个函数，避 免了传参的问题 闭包的缺点：因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭 包就会造成内存泄露，内存消耗很大</li> </ul> <h3>3.9 弹框输出</h3> <ul> <li>普通弹框 alert(“hello，拉勾”);</li> <li>控制台日志输出 console.log(“谷歌浏览器按F12进入控制台”);</li> <li>页面输出 document.write(“<h2>我爱你中国</h2>”); 将<h2>元素输出到中</h2></li> <li>确认框 confirm(“确定删除吗？”);</li> <li>输入框 prompt(“请输入姓名：”);</li> </ul> <h2>4、DOM操作</h2> <ul> <li>在一个html页面中，会使用很多标签来规划制作页面。</li> <li>每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素</li> <li>如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树。我要是想找到某一 片叶子，应该怎么做？</li> <li>“顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一 片叶子都不是难事了</li> <li>叶子和大树的一些启发，工程师们开会讨论就定了这个理论“文档对象模型”，</li> <li>文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了 <ul> <li>在节点树中，顶端节点就是根节点（root）</li> <li>每个节点都有父节点（除了根节点）</li> <li>任何一个节点都可以拥有任意数量的子节点</li> <li>同胞是拥有相同父节点的节点</li> </ul> </li> </ul> <h3>4.1 DOM访问</h3> <ul> <li>getElementById：通过id属性获得元素节点对象 <ul> <li>案例：当帐号为空时，阻止表单提交</li> </ul> </li> </ul> <pre><code class="prism language-javascript"><body> <form action="xxx" onsubmit="return login()"> <p>帐号：<input id="username"/></p> <p>电话：<input id="phone"/></p> <p><button>登录</button></p> </form> <script> function login() { var name = document.getElementById("username").value ; if(name == ""){ alert("帐号不能为空！"); return false; // 阻止表单的提交 } return true; // 放行，让表单提交 } </script> </body> </code></pre> <ul> <li>getElementsByName：通过name属性获得元素节点对象集 <ul> <li>案例：购物车全选效果</li> </ul> </li> </ul> <pre><code class="prism language-javascript"><body> <h2>我的购物车</h2> <table border="1" cellspacing="0"> <tr> <td><input type="checkbox" onchange="quan(this)" /> 全选</td> <td>名称</td> <td>单价</td> </tr> <tr> <td><input type="checkbox" name="one" />1</td> <td>功能性饮料-尖叫</td> <td>4.0</td> </tr> <tr> <td><input type="checkbox" name="one" />2</td> <td>火腿肠</td> <td>2.0</td> </tr> <tr> <td><input type="checkbox" name="one" />3</td> <td>包子</td> <td>1.5</td> </tr> </table> <p> <button>提交订单</button> </p> <script> function quan(all) { var arr = document.getElementsByName("one"); for (var i = 0; i < arr.length; i++) { arr[i].checked = all.checked; // 将全选框的状态，赋值给每一个复选框 } } </script> </body> </code></pre> <ul> <li> getElementsByTagName：通过标签名称获得元素节点对象集 <ul> <li>案例：表格隔行变色</li> </ul> </li> </ul> <pre><code class="prism language-javascript"><body> <table border="1" cellspacing="0"> <tr> <td><input type="checkbox" onchange="quan(this)" /> 全选</td> <td>名称</td> <td>单价</td> </tr> <tr> <td><input type="checkbox" name="one" />1</td> <td>功能性饮料-尖叫</td> <td>4.0</td> </tr> <tr> <td><input type="checkbox" name="one" />2</td> <td>火腿肠</td> <td>2.0</td> </tr> <tr> <td><input type="checkbox" name="one" />3</td> <td>包子</td> <td>1.5</td> </table> <script> var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象 for (var i = 0; i < rows.length; i++) { if (i % 2 == 1) { // 奇数 rows[i].style.backgroundColor = "pink"; } } </script> </body> </code></pre> <h3>4.2 DOM修改</h3> <ul> <li>修改 HTML DOM 意味着许多不同的方面： <ul> <li>改变 HTML 内容</li> <li>改变 CSS 样式</li> <li>改变 HTML 属性</li> <li>创建新的 HTML 元素</li> <li>删除已有的 HTML 元素</li> <li>改变事件（处理程序）</li> </ul> </li> </ul> 案例1. 改变一个 <h2> 元素的 HTML 内容 <pre><code class="prism language-javascript"><body> <button onclick="test()">点我试试</button> <script> function test(){ document.getElementById("hello").innerHTML = "走哇，喝点去~！"; } </script> <h2 id="hello">你好！</h2> </body> </code></pre> 案例2. . 改变一个<h2>的 HTML 样式 <pre><code class="prism language-javascript"><body> <button onclick="chou()">你瞅啥</button> <script> function chou(){ document.getElementById("hello").style.color = "red"; document.getElementById("hello").style.fontFamily = "华文彩云"; } </script> <h2 id="hello">你好！</h2> </body> </code></pre> <blockquote> 添加节点 </blockquote> <pre><code class="prism language-javascript"><body> <button onclick="add()">添加</button> <div></div> <script> function add() { var img = document.createElement("img"); // <img> img.setAttribute("src", "../lagou-html/img/cat.gif"); // <img src = "../lagou-html/img/cat.gif" > img.setAttribute("title", "小猫咪"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪"> img.setAttribute("id", "cat"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪" id="cat"> var divs = document.getElementsByTagName("div"); divs[0].appendChild(img); } </script> </body> </code></pre> <blockquote> 删除节点 </blockquote> 点击按钮，把上面刚创建的图片从页面上删除 <pre><code class="prism language-javascript"><body> <button onclick="add()">添加</button> <button onclick="del()">删除</button> <div> </div> <script> function add(){ //... } function del(){ var img = document.getElementById("cat"); img.parentNode.removeChild(img); // 必须通过父节点，才能删除子节点 } </script> </body> </code></pre> <blockquote> 替换节点 </blockquote> 点击按钮，把上面刚创建的图片替换成另一张 <pre><code class="prism language-javascript"><body> <button onclick="add()">添加</button> <button onclick="del()">删除</button> <button onclick="rep()">替换</button> <div> </div> <script> function add() { } function del() { } function rep() { var imgold = document.getElementById("cat"); // 通过修改元素的属性，做的替换 // img.setAttribute("src","../lagou-html/img/2.jpg"); var imgnew = document.createElement("img"); imgnew.setAttribute("src", "../lagou-html/img/1.jpg"); imgold.parentNode.replaceChild(imgnew, imgold); } </script> </body> </code></pre> <h3>4.3 事件</h3> <ul> <li>js捕获某个动作而做出的反馈</li> </ul> HTML 事件的例子： <ul> <li>当用户点击鼠标时</li> <li>当网页已加载时</li> <li>当图片已加载时</li> <li>当鼠标移动到元素上时</li> <li>当输入字段被改变时</li> <li>当 HTML 表单被提交时</li> <li>当用户触发按键时</li> </ul> <blockquote> 窗口事件 (Window Events) </blockquote> <ul> <li>仅在 body 和 frameset 元素中有效。</li> <li>onload 当文档被载入后执行脚本</li> </ul> <pre><code class="prism language-javascript"><body onload="test()"> <script> function test() { document.write("哈哈哈哈"); } </script> </body> </code></pre> <blockquote> 表单元素事件 (Form Element Events) </blockquote> <ul> <li>仅在表单元素中有效。 <ul> <li>onblur 当元素失去焦点时执行脚本</li> <li>onfocus 当元素获得焦点时执行脚本</li> </ul> </li> </ul> <pre><code class="prism language-javascript"><body> <script> function a() { console.log("获得焦点==被激活"); } function b() { console.log("失去焦点"); } </script> <form action=""> <p>帐号：<input onfocus="a()" onblur="b()" /></p> <p>密码：<input /></p> </form> </body> </code></pre> <blockquote> 鼠标事件 (Mouse Events) </blockquote> <ul> <li>onclick 当鼠标被单击时执行脚本</li> <li>ondblclick 当鼠标被双击时执行脚本</li> <li>onmouseout 当鼠标指针移出某元素时执行脚本</li> <li>onmouseover 当鼠标指针悬停于某元素之上时执行脚本</li> </ul> <pre><code class="prism language-javascript"><style> img { width: 30%; border: 5px solid white; </style> <body> <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" onclick="dan()"> <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" ondblclick="shuang()"> <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)"> <script> function dan() { alert("点了一下"); } function shuang() { alert("连续快读点两下"); } function shang(img) { img.style.border = "5px solid red"; } function xia(img) { img.style.border = "5px solid white"; } </script> </body> </code></pre> <blockquote> 键盘事件 </blockquote> <ul> <li>onkeydown 按下去</li> <li>onkeyup 弹上来</li> </ul> <pre><code class="prism language-javascript"><script> window.onkeydown = function () { // event：事件源（按键） // console.log( "按键编码："+event.keyCode ); if (event.keyCode == "13") { // 回车键 alert("登录成功！"); } } window.onkeyup = function () { console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则触发 } </script> </code></pre> <blockquote> 事件冒泡 </blockquote> <ul> <li>创建两个div，一个大一些，一个小一些</li> </ul> <pre><code class="prism language-javascript"><style> #father { width: 200px; height: 200px; background: black; padding: 10px; } #child { width: 100px; height: 100px; background: greenyellow; } </style> <body> <div id="father"> <div id="child"></div> </div> <script> // 代码不重要，重要是知道这个事件发生，是正常现象 document.getElementById("father").addEventListener("click", function () { alert("父级元素的事件被触发：" + this.id); }); document.getElementById("child").addEventListener("click", function (e) { e.stopPropagation() //取消事件的冒泡机制 alert("子级元素的事件被触发：" + this.id); }); </script> </body> </code></pre> <ul> <li>先子，后父。事件的触发顺序自内向外，这就是事件冒泡；</li> </ul> <blockquote> 事件捕获 </blockquote> <ul> <li>还是刚才创建两个div，一个大一些，一个小一些</li> </ul> <pre><code class="prism language-javascript"><style> #father { width: 200px; height: 200px; background: black; padding: 10px; } #child { width: 100px; height: 100px; background: greenyellow; } </style> <body> <div id="father"> <div id="child"></div> </div> <script> document.getElementById("father").addEventListener("click", function () { alert("父级：" + this.id); }, true); document.getElementById("child").addEventListener("click", function () { alert("子级：" + this.id); }, true); </script> </body> </code></pre> <ul> <li>先父,后子。事件触发顺序变更为自外向内，这就是事件捕获；</li> </ul> <h3>4.4 面向对象OOP</h3> <blockquote> 使用Object创建通用对象 </blockquote> <pre><code class="prism language-javascript"> <script> var user = new Object(); user.name = "吕布"; user.age = 21; user.say = function () { console.log("大家好，我叫：" + this.name + "，我今年" + this.age + "岁了！"); } user.say(); var dog = new Object(); dog.nickname = "屎尿多"; dog.wang = function () { console.log("我饿了，我要拆家了！"); } dog.wang(); </script> </code></pre> <blockquote> 使用构造函数创建对象 </blockquote> <pre><code class="prism language-javascript"><script> function userinfo(name, age) { this.name = name; this.age = age; this.say = function () { console.log("大家好，我叫：" + this.name + "，我今年" + this.age + "岁了！"); } } var user = new userinfo("詹姆斯", 35); user.say(); </script> </code></pre> <blockquote> 使用直接量创建对象 </blockquote> <pre><code class="prism language-javascript"><script> var user = { username: "孙悟空", age: 527, say: function () { console.log("大家好，我叫：" + this.username + "，我今年" + this.age + "岁了！"); } }; user.say(); </script> </code></pre> <h3>4.5 JSON（常用）</h3> <ul> <li>大家在互联网上来回传递数据，如果没有一个统一的格式，解析起来的难度很大（每个人的编码喜 好不一样）</li> <li>JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。</li> <li>易于人阅读和编写，同时也易于机器解析和生成 { 属性1：值1， 属性2：值2， 。。。。 }</li> </ul> <pre><code class="prism language-javascript"><script> var json1 = { username: "吕布", age: 31 }; console.log("姓名：" + json1.username + "，年龄：" + json1.age + "岁"); // json数组 var josnarr = [{ name: "貂蝉", age: 18 }, { name: "小乔", age: 17 }]; console.log("貂蝉" + josnarr[0].age + "岁了"); console.log("小乔" + josnarr[1].age + "岁了"); // 复杂的json对象 var long = { name: "赵云", sex: "男", hobby: ["玉兰白龙驹", "龙胆亮银枪", "青釭剑"] }; console.log(long.name + "的主攻武器：" + long.hobby[1]); </script> </code></pre> <h2>5、BOM操作</h2> 就是javascript对浏览器的一些常规操作的方法 <h3>5.1 Windows对象</h3> <a href="http://img.e-com-net.com/image/info8/029cac0df7064771af671e1fb0345139.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/029cac0df7064771af671e1fb0345139.jpg" alt="Web前端知识系统学习(简化版)_第8张图片" width="650" height="408" style="border:1px solid black;"></a> <pre><code class="prism language-javascript"><body> <button onclick="kai()">极速入职</button> <script> function kai() { window.open("http://lagou.com", "拉勾网", "width=500,height=300,left=400"); // window.open("http://lagou.com" , "拉勾网" , "fullscreen=yes"); // IE才生效 } </script> </body> </code></pre> <blockquote> screen屏幕对象 </blockquote> 我想知道我的电脑屏幕多大？实际上，得到的就是分辨率 <pre><code class="prism language-javascript"><body> <button onclick="kai()">求大小</button> </body> <script> function kai() { alert(window.screen.width + "|" + window.screen.height); } </script> </code></pre> <blockquote> location定位 </blockquote> 包含有关当前 URL 的信息，通常用来做页面跳转 <pre><code class="prism language-javascript"><button onclick="test()">测试</button> <script> function test() { console.log("当前页面的URL路径地址：" + location.href); location.reload(); // 重新加载当前页面（刷新） location.href = "http://lagou.com"; // 跳转页面 } </script> </code></pre> <blockquote> history浏览器历史 </blockquote> history对象会记录浏览器的痕迹 <ul> <li>a.html</li> </ul> <pre><code class="prism language-javascript"><a href="b.html">去b页面</a> </code></pre> <ul> <li>b.html</li> </ul> <pre><code class="prism language-javascript"><button onclick="hui()">返回</button> <script> function hui() { //history.go(-1); //上一级页面 history.back(); // 与go(-1)是等价的 } </script> </code></pre> <blockquote> navigator 导航（了解） </blockquote> window.navigator 对象包含有关访问者浏览器的信息 <pre><code class="prism language-javascript"><script> var str = ""; str += "浏览器的代号：" + navigator.appCodeName + ""; str += "浏览器的名称：" + navigator.appName + ""; str += "浏览器的版本：" + navigator.appVersion + ""; str += "硬件平台：" + navigator.platform + ""; str += "用户代理：" + navigator.userAgent + ""; str += "启用Cookies：" + navigator.cookieEnabled + ""; document.write(str); </script> </code></pre> <blockquote> 存储对象 </blockquote> 用起来和我们在java中map很相似，都是键值对的方式存数据 <ul> <li>本地存储 localStorage 在关闭窗口或标签页之后将会删除这些数据 <ul> <li>保存数据 localStorage.setItem(“name”,“curry”);</li> <li>提取数据 localStorage.getItem(“name”)</li> <li>删除数据 localStorage.removeItem(“name”);</li> </ul> </li> </ul> <pre><code class="prism language-javascript"><script> // 三种方式保存数据 localStorage["a"] = 1; localStorage.b = 2; localStorage.setItem("c", 3); // 查看数据类型 console.log(typeof localStorage["a"]) console.log(typeof localStorage["b"]) console.log(typeof localStorage["c"]) // 第一种方式读取 var a = localStorage.a; console.log(a); // 第二种方式读取 var b = localStorage["b"]; console.log(b); // 第三种方式读取 var c = localStorage.getItem("c"); console.log(c); </script> </code></pre> <ul> <li>会话存储 sessionStorage <ul> <li>会话，就是保持浏览器别关闭。</li> <li>关闭浏览就等于结束了一次会话。</li> <li>开启浏览器就意味着创建了一次会话。 <ul> <li>保存数据 sessionStorage.setItem(“name”, “klay”);</li> <li>提取数据 var lastname = sessionStorage.getItem(“name”);</li> <li>删除指定键的数据 sessionStorage.removeItem(“name”);</li> <li>删除所有数据 sessionStorage.clear();</li> </ul> </li> </ul> </li> </ul> 案例：记录点击了几下按钮 <pre><code class="prism language-javascript"><body> <button onclick="dian()">点我</button> <h3 id="result"></h3> <script> function dian() { if (sessionStorage.getItem("clickCount")) { sessionStorage.setItem("clickCount", Number(sessionStorage.getItem("clickCount")) + 1); } else { sessionStorage.setItem("clickCount", 1); } document.getElementById("result").innerHTML = "已经点击了" + sessionStorage.getItem("clickCount") + "次！" } </script> </body> </code></pre> <h3>5.2 计时操作</h3> <blockquote> 周期性定时器 setInterval </blockquote> setInterval(1,2)：周期性触发代码exp （常用） 1：执行语句 2：时间周期，单位为毫秒 案例：闪烁的字体（1秒1变色） <pre><code class="prism language-javascript"><body> <h1 id="title">拉勾网：极速入职</h1> <script> var colors = ["red", "blue", "yellow", "pink", "orange", "black"]; var i = 0; function bian() { document.getElementById("title").style.color = colors[i++]; if (i == colors.length) { i = 0; // 颜色重新开始 } } setInterval(bian, 100); // 每隔0.1秒，执行一次bian函数 </script> </body> </code></pre> 案例：在闪烁字体的基础上扩展，闪烁的电子时钟 <pre><code class="prism language-javascript"> <body> <h1 id="title"></h1> <script> var colors = ["red", "blue", "yellow", "pink", "orange", "black"]; var i = 0; function bian() { document.getElementById("title").style.color = colors[i++]; if (i == colors.length) { i = 0; // 颜色重新开始 } } function time() { var d = new Date(); var str = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "号"+d.getHours()+"点"+d.getMinutes()+"分"+d.getSeconds()+"秒"; document.getElementById("title").innerHTML = str; } setInterval(bian, 1000); // 每隔1秒，执行一次变色函数bian setInterval(time, 1000); // 每隔1秒，执行一次时间函数time </script> </body> </code></pre> <blockquote> 停止定时器 clearInterval </blockquote> 案例：模拟年会抽奖 <pre><code class="prism language-javascript"> <body> <img id="tu" src="../lagou-html/img/1.jpg" width="50%" /> <br /> <button onclick="begin()">开始</button> <button onclick="stop()">停止</button> <script> var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]; function begin() { timer = setInterval(bian, 100); // 没有使用var，所以timer是全局变量 } function stop() { clearInterval(timer); // 停止定时器 } function bian() { var i = Math.floor(Math.random() * arr.length); // 0-4 document.getElementById("tu").src = "../lagou-html/img/" + arr[i]; } </script> </body> </code></pre> <blockquote> 一次性定时器 setTimeout </blockquote> 相当于延迟的效果，只执行一次 <pre><code class="prism language-javascript"><body> <script> function bian() { document.body.style.backgroundColor = "red"; } //3秒之后调用 setTimeout(bian, 3000); </script> </body> </code></pre> <h1>四、jQuery + Ajax +Vue</h1> 待记录… <h1>五、HighCharts + ECharts数据可视化</h1> 待记录… </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1491644862066352128"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端学习版块,大前端,JavaScript,html,css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> dmengmeng <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> 小猿L <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> 有一只柴犬 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> 夜空_2cd3 <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> hai40587 <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> 和自己一起成长 <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> 清风怎不知意 <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> 陈在天box <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> Cavalier_01 <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835383919906746368.htm" title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a> 海淀萌狗 <div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计旅游网站首页1个页面" target="_blank">html+css网页设计旅游网站首页1个页面</a> html+css+js网页设计 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> zoyation <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> Derek重名了 <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/1835376759739084800.htm" title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a> 周bro <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div> </li> <li><a href="/article/1835376505543290880.htm" title="css设置当字数超过限制后以省略号（...）显示" target="_blank">css设置当字数超过限制后以省略号（...）显示</a> 周bro <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> 马小蜗 <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> 红匣子实力推荐 <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835362025719558144.htm" title="css2中的透明" target="_blank">css2中的透明</a> 琪33 <div>.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}</div> </li> <li><a href="/article/1835360244646113280.htm" title="JavaScript中秋快乐！" target="_blank">JavaScript中秋快乐！</a> Q_w7742 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh</div> </li> <li><a href="/article/1835359727924637696.htm" title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a> 听你讲故事啊 <div>动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> 张某布响丸辣 <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div> </li> <li><a href="/article/53.htm" title="二分查找排序算法" target="_blank">二分查找排序算法</a> 周凡杨 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE/1.htm">二分查找</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%8A%98%E5%8D%8A/1.htm">折半</a> <div> 一：概念二分查找又称折半查找（折半搜索/ 二分搜索），优点是比较次数少，查找速度快，平均性能好；其缺点是要求待查表为有序表，且插入删除困难。因此，折半查找方法适用于不经常变动而查找频繁的有序列表。首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步</div> </li> <li><a href="/article/180.htm" title="java中的BigDecimal" target="_blank">java中的BigDecimal</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/BigDecimal/1.htm">BigDecimal</a> <div> 在项目开发过程中出现精度丢失问题，查资料用BigDecimal解决，并发现如下这篇BigDecimal的解决问题的思路和方法很值得学习，特转载。原文地址：http://blog.csdn.net/ugg/article/de</div> </li> <li><a href="/article/307.htm" title="Shell echo命令详解" target="_blank">Shell echo命令详解</a> daizj <a class="tag" taget="_blank" href="/search/echo/1.htm">echo</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a> <div>Shell echo命令 Shell 的 echo 指令与 PHP 的 echo 指令类似，都是用于字符串的输出。命令格式： echo string 您可以使用echo实现更复杂的输出格式控制。 1.显示普通字符串: echo "It is a test" 这里的双引号完全可以省略，以下命令与上面实例效果一致： echo Itis a test 2.显示转义</div> </li> <li><a href="/article/434.htm" title="Oracle DBA 简单操作" target="_blank">Oracle DBA 简单操作</a> 周凡杨 <a class="tag" taget="_blank" href="/search/oracle+dba+sql/1.htm">oracle dba sql</a> <div> --执行次数多的SQL select sql_text,executions from ( select sql_text,executions from v$sqlarea order by executions desc ) where rownum<81; &nb</div> </li> <li><a href="/article/561.htm" title="画图重绘" target="_blank">画图重绘</a> 朱辉辉33 <a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a> <div> 我第一次接触重绘是编写五子棋小游戏的时候，因为游戏里的棋盘是用线绘制的，而这些东西并不在系统自带的重绘里，所以在移动窗体时，棋盘并不会重绘出来。所以我们要重写系统的重绘方法。在重写系统重绘方法时，我们要注意一定要调用父类的重绘方法，即加上super.paint(g)，因为如果不调用父类的重绘方式，重写后会把父类的重绘覆盖掉，而父类的重绘方法是绘制画布，这样就导致我们</div> </li> <li><a href="/article/688.htm" title="线程之初体验" target="_blank">线程之初体验</a> 西蜀石兰 <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a> <div>一直觉得多线程是学Java的一个分水岭，懂多线程才算入门。之前看《编程思想》的多线程章节，看的云里雾里，知道线程类有哪几个方法，却依旧不知道线程到底是什么？书上都写线程是进程的模块，共享线程的资源，可是这跟多线程编程有毛线的关系，呜呜。。。线程其实也是用户自定义的任务，不要过多的强调线程的属性，而忽略了线程最基本的属性。你可以在线程类的run()方法中定义自己的任务，就跟正常的Ja</div> </li> <li><a href="/article/815.htm" title="linux集群互相免登陆配置" target="_blank">linux集群互相免登陆配置</a> 林鹤霄 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>配置ssh免登陆 1、生成秘钥和公钥 ssh-keygen -t rsa 2、提示让你输入，什么都不输，三次回车之后会在~下面的.ssh文件夹中多出两个文件id_rsa 和 id_rsa.pub 其中id_rsa为秘钥，id_rsa.pub为公钥，使用公钥加密的数据只有私钥才能对这些数据解密 c</div> </li> <li><a href="/article/942.htm" title="mysql : Lock wait timeout exceeded; try restarting transaction" target="_blank">mysql : Lock wait timeout exceeded; try restarting transaction</a> aigo <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>原文：http://www.cnblogs.com/freeliver54/archive/2010/09/30/1839042.html 原因是你使用的InnoDB 表类型的时候, 默认参数:innodb_lock_wait_timeout设置锁等待的时间是50s, 因为有的锁等待超过了这个时间,所以抱错. 你可以把这个时间加长,或者优化存储</div> </li> <li><a href="/article/1069.htm" title="Socket编程基本的聊天实现。" target="_blank">Socket编程基本的聊天实现。</a> alleni123 <a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a> <div>public class Server { //用来存储所有连接上来的客户 private List<ServerThread> clients; public static void main(String[] args) { Server s = new Server(); s.startServer(9988); } publi</div> </li> <li><a href="/article/1196.htm" title="多线程监听器事件模式(一个简单的例子)" target="_blank">多线程监听器事件模式(一个简单的例子)</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a><a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC%E6%A8%A1%E5%BC%8F/1.htm">监听模式</a> <div> 多线程的事件监听器模式监听器时间模式经常与多线程使用,在多线程中如何知道我的线程正在执行那什么内容,可以通过时间监听器模式得到创建多线程的事件监听器模式思路: 1, 创建线程并启动,在创建线程的位置设置一个标记 2,创建队</div> </li> <li><a href="/article/1323.htm" title="spring InitializingBean接口" target="_blank">spring InitializingBean接口</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>spring的事务的TransactionTemplate，其源码如下： public class TransactionTemplate extends DefaultTransactionDefinition implements TransactionOperations, InitializingBean{ ... } TransactionTemplate继承了DefaultT</div> </li> <li><a href="/article/1450.htm" title="Oracle中询表的权限被授予给了哪些用户" target="_blank">Oracle中询表的权限被授予给了哪些用户</a> bijian1013 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E6%9D%83%E9%99%90/1.htm">权限</a> <div> Oracle查询表将权限赋给了哪些用户的SQL，以备查用。 select t.table_name as "表名", t.grantee as "被授权的属组", t.owner as "对象所在的属组"</div> </li> <li><a href="/article/1577.htm" title="【Struts2五】Struts2 参数传值" target="_blank">【Struts2五】Struts2 参数传值</a> bit1129 <a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a> <div>Struts2中参数传值的3种情况 1.请求参数绑定到Action的实例字段上 2.Action将值传递到转发的视图上 3.Action将值传递到重定向的视图上一、请求参数绑定到Action的实例字段上以及Action将值传递到转发的视图上 Struts可以自动将请求URL中的请求参数或者表单提交的参数绑定到Action定义的实例字段上，绑定的规则使用ognl表达式语言</div> </li> <li><a href="/article/1704.htm" title="【Kafka十四】关于auto.offset.reset[Q/A]" target="_blank">【Kafka十四】关于auto.offset.reset[Q/A]</a> bit1129 <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>I got serveral questions about auto.offset.reset. This configuration parameter governs how consumer read the message from Kafka when there is no initial offset in ZooKeeper or </div> </li> <li><a href="/article/1831.htm" title="nginx gzip压缩配置" target="_blank">nginx gzip压缩配置</a> ronin47 <a class="tag" taget="_blank" href="/search/nginx+gzip+%E5%8E%8B%E7%BC%A9%E8%8C%83%E4%BE%8B/1.htm">nginx gzip 压缩范例</a> <div>nginx gzip压缩配置更多 0 nginx gzip 配置随着nginx的发展，越来越多的网站使用nginx，因此nginx的优化变得越来越重要，今天我们来看看nginx的gzip压缩到底是怎么压缩的呢？ gzip(GNU-ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用</div> </li> <li><a href="/article/1958.htm" title="java-13.输入一个单向链表，输出该链表中倒数第 k 个节点" target="_blank">java-13.输入一个单向链表，输出该链表中倒数第 k 个节点</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>two cursors. Make the first cursor go K steps first. /* * 第 13 题：题目：输入一个单向链表，输出该链表中倒数第 k 个节点 */ public void displayKthItemsBackWard(ListNode head,int k){ ListNode p1=head,p2=head; </div> </li> <li><a href="/article/2085.htm" title="Spring源码学习-JdbcTemplate queryForObject" target="_blank">Spring源码学习-JdbcTemplate queryForObject</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>JdbcTemplate中有两个可能会混淆的queryForObject方法： 1. Object queryForObject(String sql, Object[] args, Class requiredType) 2. Object queryForObject(String sql, Object[] args, RowMapper rowMapper) 第1个方法是只查</div> </li> <li><a href="/article/2212.htm" title="[冰川时代]在冰川时代,我们需要什么样的技术?" target="_blank">[冰川时代]在冰川时代,我们需要什么样的技术?</a> comsci <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF/1.htm">技术</a> <div> 看美国那边的气候情况....我有个感觉...是不是要进入小冰期了? 那么在小冰期里面...我们的户外活动肯定会出现很多问题...在室内呆着的情况会非常多...怎么在室内呆着而不发闷...怎么用最低的电力保证室内的温度.....这都需要技术手段... &nb</div> </li> <li><a href="/article/2339.htm" title="js 获取浏览器型号" target="_blank">js 获取浏览器型号</a> cuityang <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a> <div>根据浏览器获取iphone和apk的下载地址 <!DOCTYPE html> <html> <head> <meta charset="utf-8" content="text/html"/> <meta name=</div> </li> <li><a href="/article/2466.htm" title="C# socks5详解转" target="_blank">C# socks5详解转</a> dalan_123 <a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a> <div>http://www.cnblogs.com/zhujiechang/archive/2008/10/21/1316308.html 这里主要讲的是用.NET实现基于Socket5下面的代理协议进行客户端的通讯，Socket4的实现是类似的，注意的事，这里不是讲用C#实现一个代理服务器，因为实现一个代理服务器需要实现很多协议，头大，而且现在市面上有很多现成的代理服务器用，性能又好，</div> </li> <li><a href="/article/2593.htm" title="运维 Centos问题汇总" target="_blank">运维 Centos问题汇总</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E4%BA%91%E4%B8%BB%E6%9C%BA/1.htm">云主机</a> <div>一、sh 脚本不执行的原因 sh脚本不执行的原因只有2个 1.权限不够 2.sh脚本里路径没写完整。二、解决You have new mail in /var/spool/mail/root 修改/usr/share/logwatch/default.conf/logwatch.conf配置文件 MailTo = MailFrom 三、查询连接数</div> </li> <li><a href="/article/2720.htm" title="Yii防注入攻击笔记" target="_blank">Yii防注入攻击笔记</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/WEB%E5%AE%89%E5%85%A8/1.htm">WEB安全</a><a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>网站表单有注入漏洞须对所有用户输入的内容进行个过滤和检查，可以使用正则表达式或者直接输入字符判断，大部分是只允许输入字母和数字的，其它字符度不允许；对于内容复杂表单的内容，应该对html和script的符号进行转义替换：尤其是<,>,',"",&这几个符号这里有个转义对照表： http://blog.csdn.net/xinzhu1990/articl</div> </li> <li><a href="/article/2847.htm" title="MongoDB简介[一]" target="_blank">MongoDB简介[一]</a> eksliang <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/MongoDB%E7%AE%80%E4%BB%8B/1.htm">MongoDB简介</a> <div>MongoDB简介转载请出自出处：http://eksliang.iteye.com/blog/2173288 1.1易于使用 MongoDB是一个面向文档的数据库，而不是关系型数据库。与关系型数据库相比，面向文档的数据库不再有行的概念，取而代之的是更为灵活的“文档”模型。另外，不</div> </li> <li><a href="/article/2974.htm" title="zookeeper windows 入门安装和测试" target="_blank">zookeeper windows 入门安装和测试</a> greemranqq <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85/1.htm">安装</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>一、序言以下是我对zookeeper 的一些理解： zookeeper 作为一个服务注册信息存储的管理工具，好吧，这样说得很抽象，我们举个“栗子”。栗子1号：假设我是一家KTV的老板，我同时拥有5家KTV，我肯定得时刻监视</div> </li> <li><a href="/article/3101.htm" title="Spring之使用事务缘由(2-注解实现)" target="_blank">Spring之使用事务缘由(2-注解实现)</a> ihuning <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div> Spring事务注解实现 1. 依赖包： 1.1 spring包： spring-beans-4.0.0.RELEASE.jar spring-context-4.0.0.</div> </li> <li><a href="/article/3228.htm" title="iOS App Launch Option" target="_blank">iOS App Launch Option</a> 啸笑天 <a class="tag" taget="_blank" href="/search/option/1.htm">option</a> <div>iOS 程序启动时总会调用application:didFinishLaunchingWithOptions:，其中第二个参数launchOptions为NSDictionary类型的对象，里面存储有此程序启动的原因。 launchOptions中的可能键值见UIApplication Class Reference的Launch Options Keys节。 1、若用户直接</div> </li> <li><a href="/article/3355.htm" title="jdk与jre的区别（_）" target="_blank">jdk与jre的区别（_）</a> macroli <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>简单的说JDK是面向开发人员使用的SDK，它提供了Java的开发环境和运行环境。SDK是Software Development Kit 一般指软件开发包，可以包括函数库、编译程序等。 JDK就是Java Development Kit JRE是Java Runtime Enviroment是指Java的运行环境，是面向Java程序的使用者，而不是开发者。如果安装了JDK，会发同你</div> </li> <li><a href="/article/3482.htm" title="Updates were rejected because the tip of your current branch is behind" target="_blank">Updates were rejected because the tip of your current branch is behind</a> qiaolevip <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E4%BC%97%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">众观千象</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a> <div>$ git push joe prod-2295-1 To git@git.dianrong.com:joe.le/dr-frontend.git ! [rejected] prod-2295-1 -> prod-2295-1 (non-fast-forward) error: failed to push some refs to 'git@git.dianron</div> </li> <li><a href="/article/3609.htm" title="[一起学Hive]之十四-Hive的元数据表结构详解" target="_blank">[一起学Hive]之十四-Hive的元数据表结构详解</a> superlxw1234 <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/hive%E5%85%83%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">hive元数据结构</a> <div>关键字：Hive元数据、Hive元数据表结构之前在 “[一起学Hive]之一–Hive概述，Hive是什么”中介绍过，Hive自己维护了一套元数据，用户通过HQL查询时候，Hive首先需要结合元数据，将HQL翻译成MapReduce去执行。本文介绍一下Hive元数据中重要的一些表结构及用途，以Hive0.13为例。文章最后面，会以一个示例来全面了解一下，</div> </li> <li><a href="/article/3736.htm" title="Spring 3.2.14，4.1.7，4.2.RC2发布" target="_blank">Spring 3.2.14，4.1.7，4.2.RC2发布</a> wiselyman <a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a> <div> Spring 3.2.14、4.1.7及4.2.RC2于6月30日发布。其中Spring 3.2.1是一个维护版本(维护周期到2016-12-31截止)，后续会继续根据需求和bug发布维护版本。此时，Spring官方强烈建议升级Spring框架至4.1.7 或者将要发布的4.2 。其中Spring 4.1.7主要包含这些更新内容。 </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>