十旬叶大叔

软件测试 Web自动化测试基础知识 HTML CSS JavaScript

文章目录

- 1 HTML
- - 1.1 HTML简述
  - 1.1.2 常用基本标签
  - 1.1.3 表格
  - 1.1.4 表单（重点）
  - - 表单小结
  - HTML小结
- 2 CSS样式表
- - 2.1 三种格式修改样式
  - - 2.1.1 行内样式（尽量不用）
    - 2.1.2 内部样式
    - 2.1.3 外部样式（最佳办法）
  - 2.2 常见的选择器
  - 2.3 常见的背景样式属性
  - CSS样式表小结
- 3 JavaScript
- - 3.1 JavaScript基本概念
  - - 3.1.1 什么是JavaScript？
    - 3.1.2 JavaScript特点
    - 3.1.3 js和java的区别
    - 3.1.4 JavaScript核心
  - 3.2 JavaScript基础语法
  - - 3.2.1 如何在网页中写JavaScript（重点）
    - 3.2.2 JavaScript语法（重点）
    - 3.2.3 JavaScript的数据类型
    - 3.2.4 变量的定义与使用
    - 3.2.5 赋值运算符
  - 3.3 JavaScript流程控制
  - - 3.3.1 if语句
    - 3.3.2 switch语句
    - 3.3.3 for语句
    - 3.3.4 while语句
    - 3.3.5 do-while语句
  - 3.4 函数
  - - 3.4.1 函数的定义
    - 3.4.2 函数的调用
    - 3.4.3 匿名函数
    - 3.4.4 全局函数
  - 3.5 事件
  - - 3.5.1 常见的事件
    - 3.5.2 事件处理
  - 3.6 正则表达式
  - 3.7 Cookies
  - - 3.7.1 创建cookie
    - 3.7.2 读取 cookie
    - 3.7.3 改变 cookie
    - 3.7.4 删除 cookie
    - 3.7.5 cookie 字符串
    - 3.7.6 JavaScript Cookie 实例
    - JavaScript小结
- 总结

1 HTML

1.1 HTML简述

HTML概念
HTML (Hyper Text Markup Language超文本标识语言)，是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文件称为HTML文件，也称Web文件。
HTML是Web开发的基本技术。

HTML文件的基本结构

<html>
	<head>
		<title>title>
	head>
	<body>
	body>
html>

……< /html> 标签标记HTML文档的开始和结束。
< /head> 头部部分。
</ title></code> 网页标题。 <code><body>< /body</code>> 网页内容，可以是文本。图像等。 例如： <pre><code class="prism language-html"><html> <head> <title></title> </head> <body> 这是我的第一个页面！ </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/6df2598a8d2947aa947cd973a7e163bc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6df2598a8d2947aa947cd973a7e163bc.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第1张图片" width="650" height="204" style="border:1px solid black;"></a> HTML标签 HTML 标记标签通常被称为HTML标签(HTML tag)。 HTML标签是由尖括号包围的关键词。比如<code><html></code>。 HTML标签通常是成对出现的，比如<code></code>和<code></code>。 标签对中的第一个标签是开始标签，第二个标签是结束标签。 开始和结束标签也被称为开放标签和闭合标签。 HTML元素 HTML元素指的是从开始标签到结束标签的所有代码，是HTML语言的基本部分。HTML文档由嵌套的HTML元素构成。html标签里面有head元素、title元素和boby元素。 空的HTML元素。没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。<code> </code>(定义换行的标签)就是没有关闭标签的空元素。 HTML元素属性 HTML元素可以有自己的相关属性，属性为HTML元素提供附加信息。属性通常添加在元素的开始标签当中，属性值带双引号。 例： <pre><code class="prism language-html"> <h1 align="center">This is heading 1</h1> </code></pre> 页面背景色或背景图像 <pre><code class="prism language-html">  <body bgcolor="red" > </body>  <body background="./picture/2.png" > </body> </code></pre> <h3>1.1.2 常用基本标签</h3> 常用基本标签分为有块元素和行内元素。 块元素 块元素，在页面中独占一行的元素称为块元素（block element）。 块元素包括标题、段落、换行、链接、图像、注释和嵌入元素（音频、视频）。 1 标题 在网页中HTML专门用来负责网页的结构，所以在使用html标签中，应该关注的是标签的语义，而不是它的样式。 标题标签： h1~h6 一共六级标题； h1最重要，h6最不重要； h1在网页中的重要性仅次于title标签； 一般情况下标题标签只会使用h1~ h 3，h 4~h 6很少使用。 标题标签都是块元素，在页面中独占一行的元素称为块元素（block element）。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> </html> </code></pre> 运行结果如下： <a href="http://img.e-com-net.com/image/info8/4f92d1724c42485b831eb9064c181c51.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4f92d1724c42485b831eb9064c181c51.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第2张图片" width="650" height="637" style="border:1px solid black;"></a> 2 段落 在p标签中的内容就表示一个段落。属于块元素。 <pre><code class="prism language-html"> <p>在p标签中的内容就表示一个段落</p> <p>在p标签中的内容就表示一个段落</p> </code></pre> <a href="http://img.e-com-net.com/image/info8/7415a9216a3a4488b1fec15a444b20f9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7415a9216a3a4488b1fec15a444b20f9.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第3张图片" width="650" height="387" style="border:1px solid black;"></a> p标签和平标签之间有换行的效果。 p标签还有align属性。该属性有right、left和center属性值。 <a href="http://img.e-com-net.com/image/info8/6ed05fdb3aa848bdb13f4f6b048874e4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6ed05fdb3aa848bdb13f4f6b048874e4.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第4张图片" width="650" height="299" style="border:1px solid black;"></a> 3 换行 br换行。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 今天天气很好<br> 今天心情很好 </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/5b017f1941c74d98b1ca56878ae88275.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5b017f1941c74d98b1ca56878ae88275.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第5张图片" width="650" height="289" style="border:1px solid black;"></a> 4 链接 超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他位置。 href属性 href指定跳转的目标路径，值可以是一个外部网站的地址，也可以是一个内部页面的地址。 超链接是一个行内元素，在a标签中可以嵌套除它自身外的任何元素。 href属性值为#，回到当前页面的顶部。这样点击超链接以后页面不会发生跳转，还是在当前的页面。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a href="http://www.baidu.com">点击跳转百度</a> <a href="sucess.html">点击跳转内部页面</a> <a href="#">回到顶部</a> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/459542741c7441dc9abecbc60982f33f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/459542741c7441dc9abecbc60982f33f.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第6张图片" width="650" height="296" style="border:1px solid black;"></a> target属性 用于指定超链接打开的位置 属性值：_self 默认值在当前页面中打开超链接，即刷掉当前页面，转跳到指定链接；_blank 在一个新的页面中打开超链接。 _blank属性值例子如下： <a href="http://img.e-com-net.com/image/info8/17b3343bf2f24a90b8d22eba4370c662.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/17b3343bf2f24a90b8d22eba4370c662.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第7张图片" width="650" height="294" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/996af11fd8f440baae69c226a59c5567.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/996af11fd8f440baae69c226a59c5567.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第8张图片" width="650" height="260" style="border:1px solid black;"></a> 5 图像 使用img标签来引入外部图片，img标签是一个自结束标签。 img这种元素属于替换元素（块元素和行内元素之间，具有两种元素的特点） 属性： src属性指定的是外部图片的路径。该图片可以是项目里的照片，也可以是网上的照片。 alt属性图片的描述，这个描述默认情况下不会显示，有些浏览器在图片无法加载是显示，搜索引擎会根据alt中的内容来识别图片。 width图片的宽度（单位是像素）。 height图片的高度，宽度和高度如果值修改了一个，则另一个会等比例缩放。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img src="./picture/1-1.jpg" alt="分词" width="500"> <img src="https://img1.baidu.com/it/u=4264004400,2710433939&fm=26&fmt=auto&gp=0.jpg" alt="保时捷"> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/18ea35e35c4344d4877282038798d00d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/18ea35e35c4344d4877282038798d00d.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第9张图片" width="650" height="306" style="border:1px solid black;"></a> 注意： 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大，但在移动端经常需要对图片进行缩放（大图缩小） 图片格式 jpeg（jpg） 支持的颜色比较丰富，不支持透明效果，不支持动图；一般用来显示照片。 gif 支持的颜色比较少，支持简单透明，支持动图；颜色单一的图片，动图。 png 支持的颜色丰富，支持复杂透明，不支持动图；专为网页而生 webp 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别小；缺点：兼容性不好。 原则：效果一样，用小的，效果不一样，用效果好的！ base64（类似加密技术） 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片；一般都是一些需要和网页一起加载的图片才会使用base64。 问：如何将图片转换为base64？ 第一，上百度搜索 base64在线图片；第二，把照片转换为base64码；第三，将base64码复制到src属性的属性值里面。 6 注释 作用：注释中的内容会被浏览器忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的；开发中一定要养成良好的编写注释的习惯，注释要求简单明了；注释还可以将一些不希望显示的内容隐藏。 注： 注释不能嵌套！！ 7 嵌入元素（音频、视频） 音频可以使用audio标签，source标签和embed标签。 audio 标签用来向页面中引入一个外部的音频文件，音视频文件引入时，默认情况下不允许用户自己控制播放停止。 audio 标签的属性： controls 是否允许用户控制播放 autoplay 音频文件是否自动播放，如果设置了autoplay ，则音乐在打开页面时会自动播放，但是目前大部分浏览器都不会自动对音乐进行播放。 loop 音乐是否循环播放。 例子： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <audio src="./picture/邓园长说好的幸福呢.mp3" controls loop></audio> </body> </html> </code></pre> 效果如下： <a href="http://img.e-com-net.com/image/info8/4ee81bacacf14dd4afbfa40fc0002139.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4ee81bacacf14dd4afbfa40fc0002139.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第10张图片" width="508" height="145" style="border:1px solid black;"></a> 使用source标签 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <audio controls autoplay> <source src="./picture/邓园长说好的幸福呢.mp3"> <source src="./picture/邓园长说好的幸福呢.agg"> </audio> </body> </html> </code></pre> mp3格式适应大多数浏览器。 agg格式音频适应ios系统浏览器。 此外，还有embed 标签用来适应旧的浏览器（ie 8），ie 8无法识别audio标签。 综上，得出适应所有浏览器的音频播放，如下： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <audio controls autoplay> <source src="./picture/邓园长说好的幸福呢.mp3"> <source src="./picture/邓园长说好的幸福呢.agg"> <embed src="./picture/邓园长说好的幸福呢.mp3" type="audio/mp3"> </audio> </body> </html> </code></pre> 视频 使用video标签来向网页中引入一个视频，使用方法和audio基本是一样的。 引用本地的视频，将视频放到项目中 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <video controls autoplay> <source src="./picture/杨千嬅可惜我是水瓶座 .mp4"> </video> </body> </html> </code></pre> 引用外部视频，找到视频的嵌入代码， <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <iframe src="//player.bilibili.com/player.html?aid=803421388&bvid=BV1ey4y137C6&cid=350369745&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true > </iframe> </body> </html> </code></pre> 运行结果如下： <a href="http://img.e-com-net.com/image/info8/47c830b75dff4a3d900e5f509bd85d55.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/47c830b75dff4a3d900e5f509bd85d55.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第11张图片" width="650" height="326" style="border:1px solid black;"></a> 行内元素 加粗 格式如下： <pre><code class="prism language-html"><b>xxxx</b> </code></pre> 大号 格式如下： <pre><code class="prism language-html"><big>xxxx</big> </code></pre> 小号 格式如下： <pre><code class="prism language-html"><small>xxxx</small> </code></pre> 着重文字 格式如下： <pre><code class="prism language-html"><em>xxxx</em> </code></pre> 斜体标签 格式如下： <pre><code class="prism language-html"><i>xxxx</i> </code></pre> 删除标签 格式如下： <pre><code class="prism language-html"><del>xxxx</del> </code></pre> 下划线标签 格式如下： <pre><code class="prism language-html"><ins>xxxx</ins> </code></pre> 上标 格式如下： <pre><code class="prism language-html"><sup>xxxx</sup> </code></pre> 下标 格式如下： <pre><code class="prism language-html"><sub>xxxx</sub> </code></pre> 修饰标签 格式如下： <pre><code class="prism language-html"><font color="" size="">xxxx</font> </code></pre> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 今天天气<b>很好</b><br><br> 今天天气<small>很好</small><br><br> 今天天气<em>很好</em><br><br> 今天天气<i>很好</i><br><br> 3 <sup>2</sup>=9<br><br> H<sub>2</sub>O<br><br> <font color="red" size="10px">今天天气很好</font> </body> </html> </code></pre> 效果如下： <a href="http://img.e-com-net.com/image/info8/ba755cb047ec46daa984cdd17545ca72.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ba755cb047ec46daa984cdd17545ca72.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第12张图片" width="523" height="523" style="border:1px solid black;"></a> <h3>1.1.3 表格</h3> 表格由<code><table></code>标签来定义。 每个表格均有若干行(由<code><tr></code>标签定义)，每行被分割为若干单元格(由<code><td></code>标签定义)。 字母td指表格数据（table data)，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 三个元素必须一起使用，否则无法定义表格。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="3"> <section>乘法表</section> <th>1</th> <th>2</th> <th>3</th> <tr> <td>1*1=1</td> <td></td> <td></td> </tr> <tr> <td>1*2=2</td> <td>2*2=4</td> <td></td> </tr> <tr> <td>1*3=3</td> <td>2*3=6</td> <td>3*3=9</td> </tr> </table> </body> </html> </code></pre> 运行结果如下： <a href="http://img.e-com-net.com/image/info8/e75053514dd042eebb086a38d5f69fb4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e75053514dd042eebb086a38d5f69fb4.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第13张图片" width="359" height="250" style="border:1px solid black;"></a> section为表格的标题，th可以看做td的加粗形式，tr为行标识，td为表格内容。在td标签中还有bgcolor属性和align属性。 <h3>1.1.4 表单（重点）</h3> HTML表单用于搜集不同类型的用户输入。最常见最典型的表单即注册页面。 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如:文本域、下拉列表、单选框、复选框等等）输入信息的元素。 表单使用表单标签（<code><form></code>)定义。 基本格式如下 : <pre><code class="prism language-html"><FORM Action="url" Method="*"> <input> </input> </FORM> </code></pre> 表单的三个要点 表单控件(Form Controls) 动作属性(Action) 方法属性(Method) 表单控件(Form Controls) 通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。 from标签中有input标签、select标签和textarea标签。 form标签中有action属性和method属性。 action属性 当用户单击确认按钮（即提交表单）时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性指向的这个文件通常会对接收到的输入数据进行相关的处理。 method属性 method属性告诉浏览器如何将编码后的数据发给服务器。其值为get或者post。 get属性值，浏览器会将数据直接附在表单的 action url之后。这两者之间用问号进行分隔 post属性值，直接连接服务器，然后将html表单中的值发送给web服务器。这种方式是没有字符长度限制的。 <pre><code class="prism language-html"><form action="" method="get"></form> </code></pre> action属性作用是提交表单之后跳转的页面，可以是项目内部的页面，也可以是外部链接；method属性为提交方式，get属性值在提交之后表单的属性值会显示在地址栏，地址后先接?，然后接各个控件的值，如下图： <a href="http://img.e-com-net.com/image/info8/b4c7d4425640407a97efb2903a6232fc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b4c7d4425640407a97efb2903a6232fc.jpg" alt="在这里插入图片描述" width="650" height="48"></a> 而post属性值则不会。 input标签有name属性和value属性，根据tpye属性还可以有checked属性，checked作用是默认选项。 input标签中type属性可分为几个属性值： <pre><code class="prism language-html"><input tpye="text"> <input tpye="password"> <input tpye="radio"> <input tpye="checkbox"> <input tpye="button"> <input tpye="reset"> <input tpye="submit"> </code></pre> 例子如下： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="" method="get"> 用户名<input type="text" name="userame" maxlength="20" size="10px"> <br> 密码<input type="password" maxlength="20" size="10px"><br> 性别 <input type="radio" name="sex" value="man" checked>男 <input type="radio" name="sex" value="woman">女<br> 选择你喜欢的动漫是：<br> <input type="checkbox" name="cb01" value="1">海贼王 <input type="checkbox" name="cb02" value="2">火影 <input type="checkbox" name="cb03" value="3">死神 <input type="checkbox" name="cb04" value="4">刃牙<br> 选择你喜欢的食物： <select name="sel" > <option value="miketea">奶茶</option> <option value="chocolate">巧克力</option> <option value="cake" selected>蛋糕</option> </select> <br> 大声说出你的想法： <br> <textarea name="text" id="teext1" cols="30" rows="20"></textarea> <br> <input type="button" name="but" value="普通按钮"> <input type="reset" name="resetbutton" value="重置按钮"> <input type="submit" name="sub" value="提交按钮"> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/5458bf5b14324f368c3e6d71546d904c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5458bf5b14324f368c3e6d71546d904c.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第14张图片" width="457" height="806" style="border:1px solid black;"></a> 分析： input标签中的type属性的属性值为text时，maxlength属性为文本框最多输入的数字的容量。 在input标签中添加checked属性，将该选项设置为默认选项。 想要实现单选的效果，第一，type属性的属性值为radio；第二，各个选项的name属性的属性值必须保持一致。 相反，想要实现复选的效果，第一，tyoe属性的属性为checkbox，各个选项的name属性的属性值必须不一致。 select标签表示下拉框，在select标签中的option标签中添加selected属性，表示默认选项，若选择中没有添加selected属性，则第一个为默认选项。 textarea标签表示文本域，其中的cols属性控制列，rows控制行。 <h4>表单小结</h4> <a href="http://img.e-com-net.com/image/info8/878b1e4cb8794604a31bb83a458a34d6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/878b1e4cb8794604a31bb83a458a34d6.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第15张图片" width="650" height="183" style="border:1px solid black;"></a> 拓展 HTML5表单新的input标签的属性值 color 用于选取颜色 date选择一个日期 datetime-local选择一个日期和时间(无时区) email包含e-mail地址的输入域 month选择一个月份 number包含数值的输入域 time选择一个时间 url包含URL地址的输入域，在提交表单时，会自动验证url域的值 week选择周 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>type新属性值</title> </head> <body> <form action="success.html" method="get"> 选取颜色：<input type="color"><br><br> 日期： <input type="date"><br><br> 日期： <input type="datetime-local"><br><br> 时间： <input type="time"><br><br> 周： <input type="week"><br><br> 月： <input type="month"><br><br> 输入数字： <input type="number" max="20" min="0" step="2" value="2"><br><br> 邮件： <input type="email"><br><br> 地址： <input type="url"><br><br> <input type="submit" name="sub" value="提交"> </form> </body> </html> </code></pre> 运行并填入数据，效果如下图： <a href="http://img.e-com-net.com/image/info8/4480ceb0819c4c83a387aaf88a3dcf25.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4480ceb0819c4c83a387aaf88a3dcf25.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第16张图片" width="549" height="709" style="border:1px solid black;"></a> number属性值还有其他的属性。max规定的最大值，min规定的最小值，step规定的步长，value规定默认值。 <h3>HTML小结</h3> HTML常用基本标签分为有块元素和行内元素。 表单使用表单标签（<code><form></code>)定义。form标签有两个重要属性action属性和method属性，action属性作用是当用户单击确认按钮（即提交表单）时，表单的内容会被传送到另一个文件。method属性告诉浏览器如何将编码后的数据发给服务器。其值为get或者post。表单中用input标签设置文本框、密码框、单选框和复选框，用select标签设置下拉框，用textarea标签设置文本域。 HTML5表单新的input标签的属性值。是关于颜色、日期、时间、邮箱和url的属性值。 <h2>2 CSS样式表</h2> CSS就是层叠样式表，网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层。总之，CSS用来设置网页中元素的样式。 CSS样式表的基本结构 <pre><code class="prism language-html"><style type="text/css"> 选择器 { 属性1:属性值; 属性2:属性值; 属性3:属性值; …… } </style> </code></pre> <h3>2.1 三种格式修改样式</h3> CSS有3种格式修改元素的样式：行内修改样式、内部样式表和外部样式表。 <h4>2.1.1 行内样式（尽量不用）</h4> 如下例子： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p style="color:red;font-size:20px;">今天天气很好</p> </body> </html> </code></pre> 在标签内部通过style属性来设置元素的样式。 缺点：使用内联样式，样式只能对一个标签生效。如果希望影响多个元素必须在每一个元素都要复制一遍，并且当样式发生变化时，我们必须要一个一个的修改，非常不方便，所以在开发时绝对不要使用内联样式！ <h4>2.1.2 内部样式</h4> 将样式编写到head中的style标签里，然后通过CSS选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用。 缺点：内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用。 如下例子： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p{ color: red; font-size: 20px; } </style> </head> <body> <p>今天天气很好</p> </body> </html> </code></pre> <h4>2.1.3 外部样式（最佳办法）</h4> 可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的文件。 外部样式表需要通过link标签进行引入，意味着只要想使用这些样式都可以对其进行引用，样式就可以在不同的网页之间进行复用。 将样式编写到外部的CSS文件中，可以使用到浏览器的缓冲机制，从而加快网页的加载速度。 首先，新建css文件，如下图： <a href="http://img.e-com-net.com/image/info8/ba80dff1f994472a8366f56445e102f4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ba80dff1f994472a8366f56445e102f4.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第17张图片" width="221" height="403" style="border:1px solid black;"></a> 然后，在网页中用link标签将网页和CSS文件关联起来， <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title>  <link rel="stylesheet" href="./css/CSS外部样式表.css"> </head> <body> <p>今天天气很好</p> </body> </html> </code></pre> 运行结果如下： <a href="http://img.e-com-net.com/image/info8/59edf429b5c34e328c27ad63af751f2d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/59edf429b5c34e328c27ad63af751f2d.png" alt="在这里插入图片描述" width="239" height="82"></a> 此外，还可以使用import关键字导入CSS样式表，比较少用，例子如下： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css";> @import "css/CSS外部样式表.css"; </style> </head> <body> <p>今天天气很好</p> </body> </html> </code></pre> 结论：在html文件写结构，在CSS文件写样式，在html用link标签将CSS样式表引入。或者通过import导入CSS样式表。 <h3>2.2 常见的选择器</h3> 常见的选择器有元素选择器，class选择器，id选择器，类选择器，通配选择器，伪类选择器。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ins{ color: red; font-size: 20px; } .underline{ color: blue; } </style> </head> <body> <ins class="underline">今天心情很好</ins> </body> </html> </code></pre> 运行结果如下： <a href="http://img.e-com-net.com/image/info8/0f9d6ae8c8e84e42ba0f4ebfc93421b5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0f9d6ae8c8e84e42ba0f4ebfc93421b5.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第18张图片" width="650" height="172" style="border:1px solid black;"></a> 结论：class选择器的优先级大于标签选择器的优先级。class选择器样式用“.”来引用。 <h3>2.3 常见的背景样式属性</h3> backgroud-color属性。设置背景颜色。 backgroud-image属性。设置背景图像。url值填入照片的路径。 backgroud-repeat属性。repeat-x属性值图片向左右重叠，repeat-y属性值图片向上下重叠，no-repeat属性值图片不重叠，保持照片原始大小。repeat属性值照片重复重叠。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ background-image: url(picture/1.png); background-repeat: repeat-x; } </style> </head> <body> </body> </html> </code></pre> 运行效果如下： <a href="http://img.e-com-net.com/image/info8/55f741462c364631ba89fc88f5f685e2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/55f741462c364631ba89fc88f5f685e2.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第19张图片" width="650" height="174" style="border:1px solid black;"></a> <h3>CSS样式表小结</h3> CSS样式表有三种修改样式方法：行内样式、内部样式和外部样式。 常见的选择器有：元素选择器，class选择器，id选择器，类选择器，通配选择器，伪类选择器。 常见的背景样式属性有：backgroud-color属性、backgroud-image属性和backgroud-repeat属性。 <h2>3 JavaScript</h2> 基本语法是：在网页中写JavaScript代码、JavaScript的语法与关键字、JavaScript的数据类型、变量的定义与使用和运算符的应用。 <h3>3.1 JavaScript基本概念</h3> JavaScript 是属于HTML 和Web的编程语言。 <h4>3.1.1 什么是JavaScript？</h4> JavaScript诞生于1995年。它当时的目的是为了验证表单输入的验证。因为在JavaScript问世之前，表单的验证都是通过服务器端验证的。而当时都是电话拨号上网的年代，服务器验证数据是一件非常痛苦的事情。经过许多年的发展，JavaScript 从一个简单的输入验证成为一门强大的编程语言。 JavaScript是一种具有面向对象能力的、解释型的程序设计语言。 更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加Web互动、加强用户体验度等。 基于对象：提供好了很多对象，可以直接拿过来使用。 事件驱动：html做网站静态效果，javaScript实现动态效果。 客户端：专门指的是浏览器。 JS的作用：操作HTML和CSS。 <h4>3.1.2 JavaScript特点</h4> 松散型：JavaScript语言核心与C、C++、Java相似，比如条件判断、循环、运算符等。但，它却是一种松散类型的语言，也就是说，它的变量不必具有一个明确的类型。 解释型：不需要编译。浏览器直接解释执行。 基于对象：我们可以直接使用JS已经创建的对象。Math String 安全性：不允许访问本地硬盘，不能将数据写入到服务器上。 跨平台：js依赖于浏览器本身，与操作系统无关。 <h4>3.1.3 js和java的区别</h4> JavaScript和Java没有任何关系，属于两门编程语言。 开发公司 Java是sun公司开发的，现在是oracle公司。 JS是Netscape（网景公司）公司开发的 对象 Java是面向对象的 new JS是基于对象的 数据类型 Java是强类型语言（每种变量都有确定的数据类型）例如:int i = “10” JS是弱类型语言【变量的类型由值决定】例如:vari = 10，varj = “10” 执行过程 Java需要现编译成字节码文件，然后再执行 JS只需解析就可以执行 <h4>3.1.4 JavaScript核心</h4> 一个完整的JavaScript应该由下列三个不同的部分组成。 1 核心(ECMAScript) ECMA：欧洲计算机协会，由ECMA组织制定的js语法，语句，函数等 2 文档对象模型(DOM) Document Object Model：文档对象模型 3 浏览器对象模型(BOM) Broswer Object Model：浏览器对象模型 <h3>3.2 JavaScript基础语法</h3> JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。 <h4>3.2.1 如何在网页中写JavaScript（重点）</h4> 方法1 在html页面中直接嵌入JavaScript <pre><code class="prism language-html"><script> js程序 </script> </code></pre> js代码可以插入在<code><head></head></code>标签中间，也可以放在<code><body></body></code> 标签中间。 最常用的是放在<code><head></head></code>。 例子： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> <script> alert("hello,world01~"); </script> </head> <body> <script> alert("hello,world02~"); </script> </body> </html> </code></pre> 运行结果如下： <a href="http://img.e-com-net.com/image/info8/d0d2953103c441ec83d961dd992f9e5e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d0d2953103c441ec83d961dd992f9e5e.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第20张图片" width="650" height="284" style="border:1px solid black;"></a> 点击确定， <a href="http://img.e-com-net.com/image/info8/f8f679cf497549e784e2334041a98d8a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f8f679cf497549e784e2334041a98d8a.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第21张图片" width="650" height="282" style="border:1px solid black;"></a> 结论：如果同时在head标签和body标签写JS，则会先运行head标签里面的JS，然后再运行body标签里面的JS。 方法2 引用外部的JavaScript（最常用的方法） 首先，新建.js文件，在.js文件中，不需要<code><script></script></code>标签对括起来，例子如下： <a href="http://img.e-com-net.com/image/info8/994138743f344c57a78309534770cd79.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/994138743f344c57a78309534770cd79.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第22张图片" width="650" height="345" style="border:1px solid black;"></a> 然后在html文件中链接js文件，使用如下语法： <pre><code class="prism language-html"><script src=".js文件路径"></script> </code></pre> 具体例子如下： <a href="http://img.e-com-net.com/image/info8/584b92a1c7aa4b018b4184c942d8e877.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/584b92a1c7aa4b018b4184c942d8e877.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第23张图片" width="650" height="286" style="border:1px solid black;"></a> 运行结果如下： <a href="http://img.e-com-net.com/image/info8/8eabb26a9ea842109d5d95a3d1544a65.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8eabb26a9ea842109d5d95a3d1544a65.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第24张图片" width="650" height="257" style="border:1px solid black;"></a> 此方法优点是js文件可以被很多页面使用，提高复用率。 分析下列代码： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/js01.js"> alert("test"); </script> </head> <body> </body> </html> </code></pre> 问题：会不会弹出test文字提示框？ 答：不会。当一个script标签一旦引用了外部的js文件，如果在这个标签还有js代码，是不会执行的。 分析下列代码： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/js01.js"> // alert("test"); </script> <script> alert("今天天气很好"); </script> </head> <body> <script> alert("今天心情很好"); </script> </body> </html> </code></pre> 问题：会弹出什么提示框？ 答：首先执行外部链接的script语句，弹出“hello，world~”提示框。然后执行head标签的script语句，弹出“今天天气很好”提示框。最后执行body标签的script语句，弹出“今天心情很好”提示框。 <h4>3.2.2 JavaScript语法（重点）</h4> 1 js变量区分大小写。 2 每一行的分号可有可无。 3 标识符 所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是下列格式规则组合起来的一或多个字符： 第一字符必须是一个字母、下划线或一个美元符号($)。 其他字符可以是字母、下划线、美元符号或数字。 不能把关键字、保留字、true、false和null作为标识符。 例如： myname，book123_，_123，$123都是合法的标识符。 123，true，null，@123，abc!都不是合法的标识符。 4 注释 单行注释 <pre><code class="prism language-javascript">//注释 </code></pre> 多行注释 <pre><code class="prism language-javascript">/* 多行注释 */ </code></pre> 注释的内容在代码执行过程中不起作用。 5 定义变量时，使用var运算符。声明变量的格式：<code>var 变量名=值;</code> 比如: var username=“tom”; 正确 var age=30; 正确 6 使用大括号标签代码块 {}被封装在大括号内的语句按照顺序执行。 <pre><code class="prism language-javascript">{ 语句块1; 语句块2; 语句块3; //依次执行语句块1，语句块2，语句块3 } </code></pre> 7 JavaScript中的关键字 关键字不能用作变量名。函数名以及循环标签。 关键字有如下： <pre><code class="prism language-javascript">abstract continue finally instanceof private this boolean default float int public throw break do for interface return typeof byte double function long short true case else goto native static var catch extends implements new super void char false import null switch while class final in package with synchronized </code></pre> <h4>3.2.3 JavaScript的数据类型</h4> (1)数值型有整型和浮点型 整型 <pre><code class="prism language-javascript">123 //十进制 0123 //八进制，以0开头 0x123//十六进制，以0x开头 </code></pre> 浮点型 整数部分假小数部分组成，只能用十进制表示，不过可以使用科学记数法。 <pre><code class="prism language-javascript">3.1415926//标准形式的浮点数 3.14E9//采用可惜记数法来表示，等于3.14*10^9 </code></pre> 如下例子： <pre><code class="prism language-javascript">var x=123; var y=123.4567; var z=3.14E2; </code></pre> (2)字符串型 字符串型数据是使用单引号或者双引号括起来的一个或者多个字符。 <pre><code class="prism language-javascript">'a' 'Hello World' "a" "Hello World" </code></pre> JavaScript与Java不一样，js没有char数据类型，如果要表示单个字符，必须使用长度为1的字符串。 单引号包含双引号：<code>'大家好，我叫"tom""</code> 双引号包含单引号：<code>"大家好，我叫'tom'"</code> 如下例子： <pre><code class="prism language-javascript">var a="test"; var b='testing'; </code></pre> (3)布尔型 布尔型数据只有true或者false。在js中也可以使用整数0代表false，使用非0的整 数来代表true。 <pre><code class="prism language-javascript">var m=true; var bor=false; var ye=7>1;//ye的值为true </code></pre> (4)转义字符 以反斜杠开头的不可显示的特殊字符通常称为控制字符，也被称为转义字符。 <pre><code class="prism language-javascript">\b //退格 \n //换行 \t //Tab符 \r //回车符 \' //单引号 \" //双引号 \\ //反斜杠 </code></pre> js文件如下： <pre><code class="prism language-javascript">alert("hello,world~\n ab\tc\n a\rbc\n a\'b\"c\\"); </code></pre> 运行效果如下图： <a href="http://img.e-com-net.com/image/info8/b331ca31beaa4669bb3bf15163aaa7b7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b331ca31beaa4669bb3bf15163aaa7b7.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第25张图片" width="650" height="347" style="border:1px solid black;"></a> (5)空值 null，用于定义空的或者不存在的引用。 <pre><code class="prism language-javascript">var a=null; </code></pre> (6)未定义值 已经声明但是没有赋值的的变量。 <pre><code class="prism language-javascript">var a; alert(a); //undefined 是关键字，用来代表未定义值 </code></pre> 注： 查看一个数据类型的格式 <pre><code class="prism language-javascript">typeof(变量名) //格式一 type 变量名 //格式二 </code></pre> <pre><code class="prism language-javascript">var n="大家好，我是‘叶大叔’"; var m=true; alert(typeof(n)); alert(typeof m); </code></pre> 运行效果如下图： <a href="http://img.e-com-net.com/image/info8/2b124a945c644c2db3f3e67583281252.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2b124a945c644c2db3f3e67583281252.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第26张图片" width="650" height="253" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/6e720e080d7d47ba85311a8393ef68ba.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6e720e080d7d47ba85311a8393ef68ba.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第27张图片" width="650" height="265" style="border:1px solid black;"></a> <h4>3.2.4 变量的定义与使用</h4> (1)变量的命名规则 与标识符规则一致！因为变量是标识符的一种。 (2)变量的声明 <pre><code class="prism language-javascript">var variable; </code></pre> 可以使用一个var声明多个变量，比如 <pre><code class="prism language-javascript">var a,b,c,d; </code></pre> 可以在声明变量的同时对它进行赋值，也就是初始化。 <pre><code class="prism language-javascript">var a=1,b=true,c="123",d=3.14; </code></pre> 如果只是声明了变量，没有赋值，那么该变量的默认值是undefined。 JavaScript是弱类型，声明的时候不需要指定变量的类型，变量的类型将根据变量的值来确定。 函数就是方法，为了解决问题。也可以称为功能。 <pre><code class="prism language-javascript">function 函数名(){ 函数体; } </code></pre> (3)全局变量的声明 在函数体外声明的都是全局变量。 在函数体内部不使用var声明直接赋值的变量是全局变量。??自己验证时出错，在函数内定义全局变量，无法引用该全局变量。 (4)变量的作用域 变量的作用域是指变量在程序中的有效范围。 全局变量：定义在所有函数之外，作用于整个代码的变量。 局部变量：定义在函数体内，只作用于函数体内的变量。 <h4>3.2.5 赋值运算符</h4> <pre><code class="prism language-javascript">var suername="Bass"; //简单赋值 a+=b; //a=a+b; a-=b;//a=a-b; a*=b; //a=a*b; a/=b; //a=a/b; a%=b; //a=a%b; 取余数 a&=b; //a=a&b; 且 a|=b; //a=a|b; 或 a^=b; //a=a^b; 异或 </code></pre> <pre><code class="prism language-javascript">& | ^ 计算两个布尔值(true,false) & 一假全为假 | 一真全为真 ^ 不相同为真，相同为假 </code></pre> &，例子如下： <pre><code class="prism language-javascript">var a=true; var b=false; alert(a&b); </code></pre> 运行结果如下： <a href="http://img.e-com-net.com/image/info8/21cc8943f78b443c964bc4854eaa166d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/21cc8943f78b443c964bc4854eaa166d.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第28张图片" width="650" height="269" style="border:1px solid black;"></a> 结果是false，0表示false。 |，例子如下： <pre><code class="prism language-javascript">var a=true; var b=false; alert(a|b); </code></pre> <a href="http://img.e-com-net.com/image/info8/bd52c7150a9941d09bd8cf3bceeb1d69.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bd52c7150a9941d09bd8cf3bceeb1d69.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第29张图片" width="650" height="267" style="border:1px solid black;"></a> 结果是true，1表示true。 ^，例子如下： <pre><code class="prism language-javascript">var a=true; var b=false; alert(a^b); </code></pre> <a href="http://img.e-com-net.com/image/info8/2ec774f7cc524ce38bae53fca6f41757.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2ec774f7cc524ce38bae53fca6f41757.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第30张图片" width="650" height="277" style="border:1px solid black;"></a> 结果是true，1表示true。 此外还有自增和自减。 <pre><code class="prism language-javascript">i=1;j=++i; //j=2,i=2,++i是先加后用 i=1;j=i++; //j=2,i=1,i++是先用后加 i=10;j=--i; //j=9,i=9,--i是先减后用 i=10;j=i--; //i=10,j=9,i--是先用后减 //除法运算时，0不能作为除数，如果0是除数，则返回结果Intfinity。 </code></pre> <h3>3.3 JavaScript流程控制</h3> JavaScript流程控制有if语句、switch语句、for语句、while语句和do-while语句。 <h4>3.3.1 if语句</h4> <pre><code class="prism language-javascript">//第一种 if(表达式){ } //第二种 if(表达式){ }else{ } //第三种 if(表达式1){ }else if(表达式2){ }else if(表达式3){ }else{ } </code></pre> 例子如下： <pre><code class="prism language-javascript">//第一种 var a=20; if(a<50){ alert("条件成立"); } //第二种 var a=200; if(a<50){ alert("条件成立"); }else{ alert("条件不成立"); } //第三种 //分数[90,100]优秀，分数[60,90)及格，分数[0,60)不及格，其他为非法输入。 </code></pre> <h4>3.3.2 switch语句</h4> switch语句的语法结构 <pre><code class="prism language-javascript">switch(表达式){ case 1:语句块1;break; case 2:语句块2;break; case 3:语句块3;break; …… default:语句块n; } </code></pre> break作用强制退出流程。 例子如下： <pre><code class="prism language-javascript">var day="5"; switch(day){ case "1":alert("星期一");break; case "2":alert("星期二");break; case "3":alert("星期三");break; case "4":alert("星期四");break; case "5":alert("星期五");break; case "6":alert("星期六");break; case "7":alert("星期日");break; default:alert("请输入合法数据"); } </code></pre> 结果会弹出“星期五”的提示框。 如果改写上述例子，删除一些break，如下： <pre><code class="prism language-javascript">var day="5"; switch(day){ case "1":alert("星期一");break; case "2":alert("星期二");break; case "3":alert("星期三");break; case "4":alert("星期四");break; case "5":alert("星期五"); case "6":alert("星期六"); case "7":alert("星期日"); default:alert("请输入合法数据"); } </code></pre> 会弹出“星期五”、“星期六”、“星期日”和“请输入合法数据”的提示框。如果字啊语句块后面没有break语句，switch则会一直执行下去。 <h4>3.3.3 for语句</h4> 语法格式: for(①initialize;②test;④increment){ ③statement } ①->②(true)->③->④->②(true)->③->④->… ①->②(true)->③->④->②(false) for循环结束 例子如下： <pre><code class="prism language-javascript">//求1-10整数和。 var sum=0; for(var i=1;i<=10;i++){ sum=sum+i; } alert("1-10的整数和为"+sum); </code></pre> <h4>3.3.4 while语句</h4> 语法格式:while(①expression){ ②statement } ①(true)->②->①(true)->②…①(false)直接退出while循环。 <pre><code class="prism language-javascript">//用while语句求1-10整数和 var sum=0; var i=1; while(i<=10){ sum=sum+i; i++; } alert("1-10的整数和为"+sum); </code></pre> <h4>3.3.5 do-while语句</h4> 语法格式:do{ ①statement }while(②expression); <pre><code class="prism language-javascript">//用do-while语句求1-10整数和 var sum=0; var i=1; do{ sum=sum+i; i++; }while(i<=10); alert("1-10的整数和为"+sum); </code></pre> while循环是先判断条件是否成立，然后再根据判断的结果是否执行循环体。也就是说循环体有可能一次都执行不了。 do-while循环是先执行一次循环体，然后再判断条件是否成立。所以不管条件是否成立，至少能够执行一次。 <h3>3.4 函数</h3> 函数就是方法，解决某个问题，实现某个功能。 <h4>3.4.1 函数的定义</h4> function 函数名字([参数1,参数2,参数3,……]){ 函数体; [return 返回值;] } 注：[ ]为可选项。 例如：定义两数相乘的函数，如下： <pre><code class="prism language-javascript">function multiplication(x,y){ var result=x*y; return result; } </code></pre> <h4>3.4.2 函数的调用</h4> 格式：函数名 (实参); 例如：调用multiplication函数，实参为3,4，如下： <pre><code class="prism language-javascript">var a=multiplication(3,4); alert("相乘结果为"+a); </code></pre> 运行结果如下： <a href="http://img.e-com-net.com/image/info8/0ecc8a0cb8564493aeb76f0db6d4be90.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0ecc8a0cb8564493aeb76f0db6d4be90.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第31张图片" width="650" height="287" style="border:1px solid black;"></a> <h4>3.4.3 匿名函数</h4> 作用：用一个变量来接收函数。 格式： var 变量名=function([参数1,参数2,参数3,……]){ 函数体; [return 返回值;] } 匿名函数例子，如下： <pre><code class="prism language-javascript">var a=function(x,y){ var z=x+y; alert("z的值为"+z); } a(3,3); </code></pre> 运行结果如下： <a href="http://img.e-com-net.com/image/info8/5bb7edad9a924cd5aa4276c4ebd3d057.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5bb7edad9a924cd5aa4276c4ebd3d057.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第32张图片" width="637" height="278" style="border:1px solid black;"></a> <h4>3.4.4 全局函数</h4> 全局函数不属于任何一个对象，直接写名称使用即可。 (1)encodeURI函数 作用：对字符进行编码 <pre><code class="prism language-javascript">var str="测试testing123!" var encode01=encodeURI(str); document.write(encode01); </code></pre> 运行效果如下图： <a href="http://img.e-com-net.com/image/info8/0b21c5cb5aa945c987fea0a5bc306851.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0b21c5cb5aa945c987fea0a5bc306851.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第33张图片" width="553" height="244" style="border:1px solid black;"></a> 所以，“测试”的编码为%E6%B5%8B%E8%AF%95。 (2)decodeURI函数 作用：对字符进行解码 <pre><code class="prism language-javascript">var str="%E6%B5%8B%E8%AF%95"; var decode01=decodeURI(str); document.write(decode01); </code></pre> 运行效果如下图： <a href="http://img.e-com-net.com/image/info8/e70e4a7a1e3a4633be35b3acfa289636.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e70e4a7a1e3a4633be35b3acfa289636.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第34张图片" width="534" height="246" style="border:1px solid black;"></a> 所以，%E6%B5%8B%E8%AF%95解码为“测试”。 (3)encodeURIComponent函数 作用：对URI组件进行编码。 <pre><code class="prism language-javascript">var uri = "https://w3school.com.cn/my test.asp?name=ståle&car=saab"; var res = encodeURIComponent(uri); alert(res); </code></pre> <a href="http://img.e-com-net.com/image/info8/f0838eec77bb472ba7a222d43507595f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f0838eec77bb472ba7a222d43507595f.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第35张图片" width="650" height="309" style="border:1px solid black;"></a> (4)decodeURIComponent函数 作用：解码 URI 组件。 语法：decodeURIComponent(uri) uri参数为必须参数，为要解码的URI。 返回值：字符串，表示解码后的 URI。 <pre><code class="prism language-javascript">var uri="https%3A%2F%2Fw3school.com.cn%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"; var rui_dec=decodeURIComponent(uri); alert(rui_dec); </code></pre> <a href="http://img.e-com-net.com/image/info8/59ae3b2649844135bdc65402acd0f426.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/59ae3b2649844135bdc65402acd0f426.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第36张图片" width="650" height="299" style="border:1px solid black;"></a> 该结果就是上题的uri。 (5)eval函数 作用：识别字符串中的js代码 <pre><code class="prism language-javascript">var str="alert('123')";//字符串为alert('123') eval(str);//eval函数识别字符串中的js代码 document.write("<hr>");//在页面中显示一条水平线，hr标签为显示为一条水平线 </code></pre> 运行效果如下图： <a href="http://img.e-com-net.com/image/info8/914fd0e76340455b97bed2ec82d136ce.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/914fd0e76340455b97bed2ec82d136ce.jpg" alt="软件测试 Web自动化测试基础知识 HTML CSS JavaScript_第37张图片" width="650" height="249" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/4dc0917b3959405e9bb1e638cadd7d5e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4dc0917b3959405e9bb1e638cadd7d5e.jpg" alt="在这里插入图片描述" width="650" height="67"></a> (6)isFinite函数 作用：可确定数字是否是有限的合法数字。 如果值为 +infinity、-infinity 或 NaN（非数字），则此函数返回 false，否则返回 true。 返回值为布尔值。如果值为 +infinity、-infinity 或 NaN，则返回 false，否则返回 true。 注： JavaScript 全局属性 <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>Infinity</td> <td>表示正/负无穷大的数值</td> </tr> <tr> <td>NaN</td> <td>“非数字”（Not-aNumber）</td> </tr> <tr> <td>undefined</td> <td>表示变量尚未赋值</td> </tr> </tbody> </table> <pre><code class="prism language-javascript">alert(isFinite(123)); </code></pre> 上述代码运行结果返回true，因为123是合法数字。如果输入NaN，NaN为非法字符，则返回false。 (7)isNaN函数 作用：确定值是否为非数字（Not-a-Number） 不是数字返回true，是数字返回false <pre><code class="prism language-javascript">var str='123'; alert(isNaN(str)); </code></pre> 上述代码运行结果返回为false。 (8)Number函数 作用：函数将对象参数转换为表示对象值的数字。 语法：Number(object) object 可选。JavaScript 对象。如果未提供该参数，则返回 0。 返回值：数值。将不同的对象值返回为数字。 如果该值无法转换为合法数字，则返回 NaN。如果未提供参数，则返回 0。 如果参数是 Date 对象，则 Number() 函数返回自 UTC 1970 年 1 月 1 日午夜以来的毫秒数。 <pre><code class="prism language-javascript">alert(Number(true)); </code></pre> 上述代码运行结果返回为1。 <pre><code class="prism language-javascript">alert(Number(false)); </code></pre> 上述代运行码结果返回为0。 <pre><code class="prism language-javascript">var x = new Date(); alert(Number(x)); </code></pre> 上述代码运行结果返回自 UTC 1970 年 1 月 1 日午夜以来的毫秒数。 <pre><code class="prism language-javascript">alert(Number("999")) </code></pre> 上述代码运行结果返回999数值。 <pre><code class="prism language-javascript">alert(Number("999 888")); </code></pre> 上述代码运行结果返回NaN，999 888无法转换为合法数字。 <pre><code class="prism language-javascript">alert(Number()); </code></pre> 上述代码运行结果返回0，未提供参数，则返回 0。 (9)parseFloat函数 作用：解析字符串并返回浮点数。 此函数确定指定字符串中的第一个字符是否为数字。如果是，它会解析字符串直到到达数字的末尾，并将数字作为数字而不是字符串返回。 注意： 只返回字符串中的第一个数字！ 允许前导和尾随空格。 如果第一个字符不能转换为数字，parseFloat() 返回 NaN。 <pre><code class="prism language-javascript">alert(parseFloat("10")); </code></pre> 上述代码运行结果返回数值10。 <pre><code class="prism language-javascript">alert(parseFloat("10.00")); </code></pre> 上述代码运行结果返回数值10。若小数后为0，则省略小数位。 <pre><code class="prism language-javascript">alert(parseFloat("34 56 78")); </code></pre> 上述代码运行结果返回数值34。parseFloat函数只返回字符串中的第一个数字，即34。 <pre><code class="prism language-javascript">alert(parseFloat(" 60 ")); </code></pre> 上述代码运行结果返回数值60，parseFloat函数允许前导和尾随空格。 <pre><code class="prism language-javascript">alert(parseFloat("40 years")); </code></pre> 上述代码运行结果返回数值40，parseFloat函数解析字符串直到到达数字的末尾，years不是数字，所以不能返回。 <pre><code class="prism language-javascript">alert(parseFloat("hello")); </code></pre> 上述代码运行结果返回数值NaN，第一个字符不能转换为数字，parseFloat() 返回 NaN。 (10)parselnt函数 作用：函数解析字符串并返回整数。 parseInt(string,radix) string 必需。要解析的字符串。如果第一个字符不能转换为数字，parseInt() 返回 NaN。 radix 可选参数。代表要使用的数字系统的数字（从 2 到 36）。 如果 radix 参数被省略，JavaScript 假定如下： 如果字符串以 “0x” 开头，则基数为 16（十六进制） 如果字符串以 “0” 开头，则基数为 8（八进制）。此特性已弃用 如果字符串以任何其他值开头，则基数为 10（十进制） 返回值：数值。如果第一个字符不能转换为数字，则返回 NaN。 注意：只返回字符串中的第一个数字！ <pre><code class="prism language-javascript">var a=parseInt("10"); alert(a); </code></pre> 上述代码运行结果为10，说明parselnt函数函数解析字符串并返回整数。 <pre><code class="prism language-javascript">var a=parseInt("hello"); alert(a); </code></pre> 上述代码运行结果为返回值为NaN，第一个字符不能转换为数字，parselnt函数返回 NaN。 <pre><code class="prism language-javascript">var a = parseInt("3 4 45 66"); alert(a); </code></pre> 上述代码运行结果为3，说明只返回字符串中的第一个数字。 (11)String函数 作用：将对象的值转换为字符串。 注释：String() 函数返回与单个对象的 toString() 相同的值。 语法：String(object) object 必需。JavaScript 对象。 <pre><code class="prism language-javascript">var x1 = Boolean(0); var res =String(x1); alert(res); </code></pre> 上述代码就行结果返回false。String函数将x1的值转为为字符串false。 <pre><code class="prism language-javascript">var x2 = Boolean(1); var res =String(x2); alert(res); </code></pre> 上述代码就行结果返回true。String函数将x2的值转为为字符串true。 <pre><code class="prism language-javascript">var x3 = new Date(); var res =String(x3); alert(res); </code></pre> 上述代码就行结果返回Fri Apr 01 2022 21:31:26 GMT+0800 (中国标准时间)。 <pre><code class="prism language-javascript">var x4 = "12345"; var res =String(x4); alert(res); </code></pre> 上述代码就行结果返回字符串12345。 <pre><code class="prism language-javascript">var x5 = 12345; var res =String(x5); alert(res); </code></pre> 上述代码就行结果返回字符串12345，String函数将整型12345转换为字符串12345。 <h3>3.5 事件</h3> 当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。 <h4>3.5.1 常见的事件</h4> <table> <thead> <tr> <th>事件</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>onabort</td> <td>对象载入被中断时触发</td> </tr> <tr> <td>onablur</td> <td>元素或窗口本身失去焦点时触发</td> </tr> <tr> <td>onchange</td> <td>改变<code><select></code>元素中的选项或其他表单元素失去焦点，并且在其获取焦点后内容发生过改变时触发</td> </tr> <tr> <td>onerror</td> <td>出现错误时触发</td> </tr> <tr> <td>onfocus</td> <td>任何元素或窗口本身获得焦点时触发</td> </tr> <tr> <td>onkeydown</td> <td>键盘键（包括Shift、Alt等）被按下时触发</td> </tr> <tr> <td>onkeypress</td> <td>键盘被按下，并生成一个字符时触发。也就是说按下Shift或Alt等键不会触发</td> </tr> <tr> <td>onkeyup</td> <td>释放键盘上的按键时触发</td> </tr> <tr> <td>onload</td> <td>页面完全载入后触发</td> </tr> <tr> <td>onclick</td> <td>页面完全卸载后触发</td> </tr> <tr> <td>onclick</td> <td>单击鼠标邮件时触发。当光标的焦点在按钮上，并按Enter键是也会触发</td> </tr> <tr> <td>ondblclick</td> <td>双击鼠标左键时触发</td> </tr> <tr> <td>onmousedown</td> <td>单击任何一个鼠标按键时触发</td> </tr> <tr> <td>onmousemove</td> <td>鼠标在某个元素上移动时持续触发</td> </tr> <tr> <td>onmouseout</td> <td>鼠标从指定的元素上移开时触发</td> </tr> <tr> <td>onmouseover</td> <td>鼠标移动到某个元素时触发</td> </tr> <tr> <td>onmouseup</td> <td>释放任意一个鼠标按键时触发</td> </tr> <tr> <td>onrest</td> <td>单击充值按钮时，在<code><form></code>上触发</td> </tr> <tr> <td>onresize</td> <td>窗口或框架的大小发生改变时触发</td> </tr> <tr> <td>onscroll</td> <td>在任何带滚动条的元素或窗口上滚动时触发</td> </tr> <tr> <td>onselect</td> <td>选中文本时触发</td> </tr> <tr> <td>onsubmit</td> <td>单击提交按钮时，在<code><form></code>上触发</td> </tr> </tbody> </table> <h4>3.5.2 事件处理</h4> 时间出程序是用于响应某个时间而执行的处理程序。时间处理程序可以是任意的JavaScript语句，通常使用函数来对事件进行处理。 第一种方式，事件处理在html中绑定： <pre><code class="prism language-javascript"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>事件</title> <script> function save(){ alert("按钮被点击"); } function fun(){ alert("双击左键成功！"); } </script> </head> <body> <input type="button" value="按钮1" onclick="save()" > <input type="button" value="按钮2" ondblclick="fun()" > </body> </html> </code></pre> 上述代码运行结果为：页面有两个按钮，一个按钮1，一个按钮2。鼠标左键单击按钮1，弹出“按钮被点击”窗口。鼠标左键双击按钮2，弹出“双击左键成功！”窗口。 第二种方式，事件处理在JavaScript中绑定： <pre><code class="prism language-javascript"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <input type="button" value="按钮" id="btn" > </form> <script> var temp=document.getElementById("btn"); temp.onclick=function(){ alert("点击成功！"); } </script> </body> </html> </code></pre> 上述代码运行结果为：点击按钮，弹出“点击成功！”的提示框。 <h3>3.6 正则表达式</h3> 定义 正则表达式是构成搜索模式的字符序列。该搜索模式可用于文本搜索和文本替换操作。 当搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。 正则表达式可以是单字符，或者更复杂的模式。 正则表达式可用于执行所有类型的文本搜索和文本替换操作。 语法 <pre><code class="prism language-javascript">/pattern/modifiers; </code></pre> 例子 <pre><code class="prism language-javascript">var patt = /hello/i; </code></pre> 例子解释： /hello/i 是一个正则表达式。 hello是模式（pattern）（在搜索中使用）。 i 是修饰符（把搜索修改为大小写不敏感）。 在字符串方法search() 中使用正则表达式 <pre><code class="prism language-javascript">var str = "hello"; var n = str.search(/o/i); </code></pre> n 中的结果将是：4 在字符串方法replace() 中使用正则表达式 例子 使用大小写不明的正则表达式以hello来替换字符串中的Bass： <pre><code class="prism language-javascript">var str = "Visit Bass"; var res = str.replace(/hello/i, "Bass"); </code></pre> res 的结果将是： <pre><code class="prism language-javascript">Visit hello </code></pre> 正则表达式修饰符 修饰符可用于大小写不敏感的更全局的搜素： <table> <thead> <tr> <th>修饰符</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>i</td> <td>执行对大小写不敏感的匹配</td> </tr> <tr> <td>g</td> <td>执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）</td> </tr> <tr> <td>m</td> <td>执行多行匹配</td> </tr> </tbody> </table> 正则表达式模式 括号用于查找一定范围的字符串： <table> <thead> <tr> <th>表达式</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>[abc]</td> <td></td> </tr> <tr> <td>[0-9]</td> <td></td> </tr> <tr> <td>`(x</td> <td>y)`</td> </tr> </tbody> </table> 元字符（Metacharacter）是拥有特殊含义的字符： <table> <thead> <tr> <th>元字符</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>\d</td> <td>查找数字</td> </tr> <tr> <td>\s</td> <td>查找空白字符</td> </tr> <tr> <td>\b</td> <td>匹配单词边界</td> </tr> <tr> <td>\uxxxx</td> <td>查找以十六进制数 xxxx 规定的 Unicode 字符</td> </tr> </tbody> </table> 定义量词： <table> <thead> <tr> <th>量词</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>n+</td> <td>匹配任何包含至少一个 n 的字符串</td> </tr> <tr> <td>n*</td> <td>匹配任何包含零个或多个 n 的字符串</td> </tr> <tr> <td>n?</td> <td>匹配任何包含零个或一个 n 的字符串</td> </tr> </tbody> </table> 使用 test() test() 是一个正则表达式方法。 它通过模式来搜索字符串，然后根据结果返回 true 或 false。 例子 <pre><code class="prism language-javascript">var patt = /e/; patt.test("The best things in life are free!"); </code></pre> 由于字符串中有一个 “e”，以上代码的输出将是： <pre><code class="prism language-javascript">true </code></pre> 上面的两行可缩短为一行： <pre><code class="prism language-javascript">/e/.test("The best things in life are free!"); </code></pre> 使用 exec() exec()方法返回值不是true或者false。而是当没有搜索到匹配的字符时,返回null，否则返回一个数组，这个数组的第一个元素包含与正则表达式相匹配的字符串，其他元素包含的是匹配的各个分组（用括号括起来的子表达式）。 例子 <pre><code class="prism language-javascript">/e/.exec("The best things in life are free!"); </code></pre> 由于字符串中有一个 “e”，以上代码的输出将是： <pre><code class="prism language-javascript">e </code></pre> 身份证例子 <pre><code class="prism language-javascript"><!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form name="f"> 身份证：<input type="text" name="id" size="20"> <input type="button" value="提取" onclick="grep()"> </form> <script> function grep(){ //找到输入的身份证 var id_value=f.id.value; //声明身份证号的正则表达式 var pattern=/(\d{6})(\d{8})(\d{4})/; //判定工作 var judge=pattern.exec(id_value); if(judge!=null){ alert("出生日期"+judge[2]); }else{ alert("请输入合法的身份证"); } } </script> </body> </html> </code></pre> 将上述代码运行，在页面上的身份证文本框输入“441222199712121234”，弹出“出生日期19971212”提示框。 <h3>3.7 Cookies</h3> Cookie 让您在网页中存储用户信息。 Cookie 是在您的计算机上存储在小的文本文件中的数据。 当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。 Cookie 是为了解决“如何记住用户信息”而发明的： 当用户访问网页时，他的名字可以存储在 cookie 中。 下次用户访问该页面时，cookie 会“记住”他的名字。 Cookie 保存在名称值对中，如： <pre><code class="prism language-javascript">username=bass </code></pre> 当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。 如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。 <h4>3.7.1 创建cookie</h4> JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。 通过 JavaScript，可以这样创建 cookie： <pre><code class="prism language-javascript">doucument.cookie="username=bass"; </code></pre> 还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie： <pre><code class="prism language-javascript">document.cookie = "username=bass; expires=Sat Apr 02 2022 22:32:29 UTC"; </code></pre> 通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。 <pre><code class="prism language-javascript">document.cookie = "username=bass; expires=Sat Apr 02 2022 22:32:29 UTC";path=/"; </code></pre> <h4>3.7.2 读取 cookie</h4> 通过 JavaScript，可以这样读取 cookie： <pre><code class="prism language-javascript">var x = document.cookie; </code></pre> <h4>3.7.3 改变 cookie</h4> 通过使用 JavaScript，你可以像你创建 cookie 一样改变它： <pre><code class="prism language-javascript">document.cookie = "username=bass; expires=Sat Apr 02 1970 22:32:29 UTC";path=/"; </code></pre> 旧 cookie 被覆盖。 <h4>3.7.4 删除 cookie</h4> 删除 cookie 时不必指定 cookie 值。 直接把 expires 参数设置为过去的日期即可： <pre><code class="prism language-javascript">document.cookie = "username=bass; expires=Sat Apr 02 2022 22:32:29 UTC";path=/"; </code></pre> 您应该定义 cookie 路径以确保删除正确的 cookie。 如果你不指定路径，一些浏览器不会让你删除 cookie。 <h4>3.7.5 cookie 字符串</h4> document.cookie 属性看起来像一个正常的文本字符串。但它不是。 即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。 如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样： <pre><code class="prism language-javascript">cookie1 = value; cookie2 = value; </code></pre> 如果你想找到一个指定 cookie 的值，你必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。 这里需要结合下面的实例！！！！！！！！！！！！ <h4>3.7.6 JavaScript Cookie 实例</h4> 创建一个 cookie 来存储访问者的名称。 访客第一次到达网页时，会要求他填写姓名。然后将该名称存储在 cookie 中。 下次访客到达同一页时，他将收到一条欢迎消息。 例如，我们将创建 3 个JavaScript函数： (1)设置cookie的函数 (2)获取 cookie 的函数 (3)检测 cookie 的函数 (1)设置cookie的函数 创建一个函数，将访问者的名字存储在 cookie 变量中： <pre><code class="prism language-javascript">function setCookie(cname,cvalue,exdays){ var d=new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires="expires"+d.toUTCString(); document.cookie=cname+"="+cvalue+";"+expires+";path=/"; } </code></pre> 分析上述代码， cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 过期的天数（exdays）。 通过把 cookie 名称、cookie 值和过期字符串相加，该函数就设置了 cookie。 (2)获取 cookie 的函数 创建一个函数返回指定 cookie 的值： <pre><code class="prism language-javascript">function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } </code></pre> 分析上述代码，把 cookie 作为参数（cname）。 创建变量（name）与要搜索的文本（CNAME”=”）。 解码 cookie 字符串，处理带有特殊字符的 cookie，例如 “$”。 用分号把 document.cookie 拆分到名为 ca（decodedCookie.split(‘;’)）的数组中。 遍历 ca 数组（i = 0; i < ca.length; i++），然后读出每个值 c = ca[i]。 如果找到 cookie（c.indexOf(name) == 0），则返回该 cookie 的值（c.substring(name.length, c.length）。 如果未找到 cookie，则返回 “”。 (3)检测 cookie 的函数 我们创建检查 cookie 是否设置的函数。 如果已设置 cookie，将显示一个问候。 如果未设置 cookie，会显示一个提示框，询问用户的名字，并存储用户名 cookie 365 天，通过调用 setCookie 函数： <pre><code class="prism language-javascript">function checkCookie() { var username = getCookie("username"); if (username != "") { alert("Welcome again " + username); } else { username = prompt("Please enter your name:", ""); if (username != "" && username != null) { setCookie("username", username, 365); } } } </code></pre> <h4>JavaScript小结</h4> JavaScript是基于对象和事件驱动并具有相对安全性的客户端脚本语言。 JavaScript特点：松散型、解释型、基于对象、安全性、跨平台。 JavaScript可以写在html文件的head标签里面，可以写在body标签，也可以写在外部js文件。 JavaScript的数据类型有数值型、字符串型、布尔型、空值、未定义值。 赋值运算符有+,-,*,/,%,&,|,^ JavaScript流程控制有if语句、switch语句、for语句、while语句和do-while语句。 函数定义用function关键字定义。匿名函数用一个变量来接受函数，不用写函数名。 全局函数可直接写名称使用即可。直接写名称使用即可。全局函数有encodeURI函数、decodeURI函数、encodeURIComponent函数、decodeURIComponent函数、eval函数、isFinite函数、isNaN函数、Number函数、parseFloat函数、parselnt函数、String函数。 JavaScript负责事件。通常使用函数来对事件进行处理。 正则表达式是构成搜索模式的字符序列，简单理解为模板。 Cookie 是在您的计算机上存储在小的文本文件中的数据。对cookie操作有：操作cookie、读取cookie、改变cookie、删除cookie。 <h2>总结</h2> html负责框架，css负责样式，js负责动作。 </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1512664982284730368"></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">你可能感兴趣的:(测试,前端开发,html5,css3,javascript,正则表达式)</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/1835502704827396096.htm" title="将cmd中命令输出保存为txt文本文件" target="_blank">将cmd中命令输出保存为txt文本文件</a> 落难Coder <a class="tag" taget="_blank" href="/search/Windows/1.htm">Windows</a><a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a><a class="tag" taget="_blank" href="/search/window/1.htm">window</a> <div>最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再</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/1835497965330984960.htm" title="398顺境，逆境" target="_blank">398顺境，逆境</a> 戴骁勇 <div>2018.11.27周二雾霾最近儿子进入了一段顺境期，今天表现尤其不错。今天的数学测试成绩喜人，没有出现以往的计算错误，整个卷面书写工整，附加题也在规定时间内完成且做对。为迎接体育测试的锻炼有了质的飞跃。坐位体前屈成绩突飞猛进，估测成绩能达到12cm，这和上次测试的零分来比，简直是逆袭。儿子还在不断锻炼和提升，唯恐到时候掉链子。跑步姿势在我的调教下，逐渐正规起来，速度随之也有了提升。今晚测试的50</div> </li> <li><a href="/article/1835496402042580992.htm" title="GitHub上克隆项目" target="_blank">GitHub上克隆项目</a> bigbig猩猩 <a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.</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/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/1835492487783870464.htm" title="CX8836：小体积大功率升降压方案推荐（附Demo设计指南）" target="_blank">CX8836：小体积大功率升降压方案推荐（附Demo设计指南）</a> 诚芯微科技 <a class="tag" taget="_blank" href="/search/%E7%A4%BE%E4%BA%A4%E7%94%B5%E5%AD%90/1.htm">社交电子</a> <div>CX8836是一颗同步四开关单向升降压控制器，在4.5V-40V宽输入电压范围内稳定工作，持续负载电流10A，能够在输入高于或低于输出电压时稳定调节输出电压，可适用于USBPD快充、车载充电器、HUB、汽车启停系统、工业PC电源等多种升降压应用场合，为大功率TYPE-CPD车载充电器提供最优解决方案。提供CX8836Demo测试、CX8836样品申请及CX8836方案开发技术支持。CX8836同升</div> </li> <li><a href="/article/1835491354004779008.htm" title="【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）" target="_blank">【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1）</a> 算法大师 <a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本，现在要你测试这个功能：打开聊天窗口，输入文本，限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些</div> </li> <li><a href="/article/1835461728423473152.htm" title="第1步win10宿主机与虚拟机通过NAT共享上网互通" target="_blank">第1步win10宿主机与虚拟机通过NAT共享上网互通</a> 学习3人组 <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>VM的CentOS采用NAT共用宿主机网卡宿主机器无法连接到虚拟CentOS要实现宿主机与虚拟机通信，原理就是给宿主机的网卡配置一个与虚拟机网关相同网段的IP地址，实现可以互通。1、查看虚拟机的IP地址2、编辑虚拟机的虚拟网络的NAT和DHCP的配置，设置虚拟机的网卡选择NAT共享模式3、宿主机的IP配置，确保vnet8的IPV4属性与虚拟机在同一网段4、ping测试连通性[root@localh</div> </li> <li><a href="/article/1835458199755517952.htm" title="spring如何整合druid连接池？" target="_blank">spring如何整合druid连接池？</a> 惜.己 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/junit/1.htm">junit</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/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/idea/1.htm">idea</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>目录spring整合druid连接池1.新建maven项目2.新建mavenModule3.导入相关依赖4.配置log4j2.xml5.配置druid.xml1)xml中如何引入properties2)下面是配置文件6.准备jdbc.propertiesJDBC配置项解释7.配置druid8.测试spring整合druid连接池1.新建maven项目打开IDE（比如IntelliJIDEA,Ecl</div> </li> <li><a href="/article/1835455048277127168.htm" title="Python神器！WEB自动化测试集成工具 DrissionPage" target="_blank">Python神器！WEB自动化测试集成工具 DrissionPage</a> 亚丁号 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率</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/1835436642270277632.htm" title="【Python搞定车载自动化测试】——Python实现车载以太网DoIP刷写（含Python源码）" target="_blank">【Python搞定车载自动化测试】——Python实现车载以太网DoIP刷写（含Python源码）</a> 疯狂的机器人 <a class="tag" taget="_blank" href="/search/Python%E6%90%9E%E5%AE%9A%E8%BD%A6%E8%BD%BD%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">Python搞定车载自动化</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/DoIP/1.htm">DoIP</a><a class="tag" taget="_blank" href="/search/UDS/1.htm">UDS</a><a class="tag" taget="_blank" href="/search/ISO/1.htm">ISO</a><a class="tag" taget="_blank" href="/search/14229/1.htm">14229</a><a class="tag" taget="_blank" href="/search/1SO/1.htm">1SO</a><a class="tag" taget="_blank" href="/search/13400/1.htm">13400</a><a class="tag" taget="_blank" href="/search/Bootloader/1.htm">Bootloader</a><a class="tag" taget="_blank" href="/search/tcp%2Fip/1.htm">tcp/ip</a> <div>系列文章目录【Python搞定车载自动化测试】系列文章目录汇总文章目录系列文章目录前言一、环境搭建1.软件环境2.硬件环境二、目录结构三、源码展示1.DoIP诊断基础函数方法2.DoIP诊断业务函数方法3.27服务安全解锁4.DoIP自动化刷写四、测试日志1.测试日志五、完整源码链接前言随着智能电动汽车行业的发展，汽车=智能终端+四个轮子，各家车企都推出了各自的OTA升级方案，本章节主要介绍如何使</div> </li> <li><a href="/article/1835429202871021568.htm" title="Python 课程10-单元测试" target="_blank">Python 课程10-单元测试</a> 可愛小吉 <a class="tag" taget="_blank" href="/search/Python%E6%95%99%E5%AD%B8/1.htm">Python教學</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/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><a class="tag" taget="_blank" href="/search/TDD/1.htm">TDD</a><a class="tag" taget="_blank" href="/search/unittest/1.htm">unittest</a> <div>前言在现代软件开发中，单元测试已成为一种必不可少的实践。通过测试，我们可以确保每个功能模块在开发和修改过程中按预期工作，从而减少软件缺陷，提高代码质量。而测试驱动开发（TDD）则进一步将测试作为开发的核心部分，先编写测试，再编写代码，以测试为指导开发出更稳定、更可靠的代码。Python提供了强大的unittest模块，它是Python标准库的一部分，专门用于编写和执行单元测试。与其他测试框架相比，</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/1835421510202912768.htm" title="【自动化测试】UI自动化的分类、如何选择合适的自动化测试工具以及其中appium的设计理念、引擎和引擎如何工作" target="_blank">【自动化测试】UI自动化的分类、如何选择合适的自动化测试工具以及其中appium的设计理念、引擎和引擎如何工作</a> Lossya <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">自动化测试</a><a class="tag" taget="_blank" href="/search/appium/1.htm">appium</a> <div>引言UI自动化测试主要针对软件的用户界面进行测试，以确保用户界面元素的交互和功能符合预期文章目录引言一、UI自动化的分类1.1基于代码的自动化测试1.2基于录制/回放的自动化测试1.3基于框架的自动化测试1.4按测试对象分类1.5按测试层次分类1.6按测试执行方式分类1.7按测试目的分类二、如何选择合适的自动化测试工具2.1项目需求分析2.2工具特性评估2.3成本考虑2.4团队技能2.5试用和评估</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> jun778895 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</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/1835417581499019264.htm" title="性格小测试" target="_blank">性格小测试</a> 熹大头 <div>有些人非常肯定自己属于外向型，有些人则发现自己是绝对的内向型。然而，多数人却发现他们似乎介于两者之间，是两种性格的结合。现在我们就来看看你在这种分类中处在何种位置。阅读以下问题，从a、b、c中选出最适合自己的选项。你可能会发现三个选项都不合适，或者合适的不止一项，这种情况下，选出相对来说更适合自己的即可。1人们经常会用下列哪个词语描述你：a善于分析b遵守纪律c有创造力2一连几天参与社交活动（比如，</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835399831535841280.htm" title="python实现规则引擎_规则引擎python" target="_blank">python实现规则引擎_规则引擎python</a> weixin_39601511 <a class="tag" taget="_blank" href="/search/python%E5%AE%9E%E7%8E%B0%E8%A7%84%E5%88%99%E5%BC%95%E6%93%8E/1.htm">python实现规则引擎</a> <div>广告关闭回望2020，你在技术之路上，有什么收获和成长么？对于未来，你有什么期待么？云+社区年度征文，各种定制好礼等你！我正在用python编写日志收集分析应用程序，我需要编写一个“规则引擎”来匹配和处理日志消息。它需要具有以下特点：正则表达式匹配消息本身消息严重性优先级的算术比较布尔运算符我设想一个例子规则可能是这样的：(message~program:messageandseverity>=h</div> </li> <li><a href="/article/1835392896531001344.htm" title="Regular Expression 正则表达式" target="_blank">Regular Expression 正则表达式</a> Aimyon_36 <a class="tag" taget="_blank" href="/search/Data/1.htm">Data</a><a class="tag" taget="_blank" href="/search/Development/1.htm">Development</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>RegularExpression前言1.基本匹配2.元字符2.1点运算符.2.2字符集2.2.1否定字符集2.3重复次数2.3.1*号2.3.2+号2.3.3?号2.4{}号2.5(...)特征标群2.6|或运算符2.7转码特殊字符2.8锚点2.8.1^号2.8.2$号3.简写字符集4.零宽度断言（前后预查）4.1?=...正先行断言4.2?!...负先行断言4.3?Thefatcatsaton</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> 2401_85123349 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</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/1835383791615569920.htm" title="Sissi书单｜《每天刷本书》365天不间断阅读第28天" target="_blank">Sissi书单｜《每天刷本书》365天不间断阅读第28天</a> 每天刷的sissi <div>以前我是一个不太会和自己对话的人，但是后来经历得多了，就慢慢变得喜欢自省起来。喜欢通过做各种测试题来更好的了解自己。测出来什么点，我觉得需要改善，就会到处去找调整的方法。这本书就是我在找方法的时候看到的，看的过程中除了觉得有用，还是觉得有用，非常推荐阅读！</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/1835367123006877696.htm" title="macOs mojave 添加hp laserjet 1020 打印机方法。" target="_blank">macOs mojave 添加hp laserjet 1020 打印机方法。</a> Coder_Zh <div>1.设置--》打印机与扫描仪。2.点击“+”选择IP3.输入地址：（写网络IP），协议选择：hpjetdirect-socket4.使用选项：选择hplaserjet10221.6（没有1020的驱动，但是1022的驱动兼容1020可以使用。）测试OK，可以使用。</div> </li> <li><a href="/article/118.htm" title="异常的核心类Throwable" target="_blank">异常的核心类Throwable</a> 无量 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86/1.htm">异常处理</a><a class="tag" taget="_blank" href="/search/exception/1.htm">exception</a> <div>java异常的核心是Throwable，其他的如Error和Exception都是继承的这个类里面有个核心参数是detailMessage，记录异常信息，getMessage核心方法，获取这个参数的值，我们可以自己定义自己的异常类，去继承这个Exception就可以了，方法基本上，用父类的构造方法就OK，所以这么看异常是不是很easy package com.natsu; </div> </li> <li><a href="/article/245.htm" title="mongoDB 游标（cursor）实现分页迭代" target="_blank">mongoDB 游标（cursor）实现分页迭代</a> 开窍的石头 <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>上篇中我们讲了mongoDB 中的查询函数，现在我们讲mongo中如何做分页查询如何声明一个游标 var mycursor = db.user.find({_id:{$lte:5}}); 迭代显示游标数</div> </li> <li><a href="/article/372.htm" title="MySQL数据库INNODB 表损坏修复处理过程" target="_blank">MySQL数据库INNODB 表损坏修复处理过程</a> 0624chenhong <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>最近mysql数据库经常死掉，用命令net stop mysql命令也无法停掉，关闭Tomcat的时候，出现Waiting for N instance(s) to be deallocated 信息。查了下，大概就是程序没有对数据库连接释放，导致Connection泄露了。因为用的是开元集成的平台，内部程序也不可能一下子给改掉的，就验证一下咯。启动Tomcat,用户登录系统，用netstat -</div> </li> <li><a href="/article/499.htm" title="剖析如何与设计人员沟通" target="_blank">剖析如何与设计人员沟通</a> 不懂事的小屁孩 <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>最近做图烦死了，不停的改图，改图……。烦，倒不是因为改，而是反反复复的改，人都会死。很多需求人员不知该如何与设计人员沟通，不明白如何使设计人员知道他所要的效果，结果只能是沟通变成了扯淡，改图变成了应付。那应该如何与设计人员沟通呢？我认为设计人员与需求人员先天就存在语言障碍。对一个合格的设计人员来说，整天玩的都是点、线、面、配色，哪种构图看起来协调；哪种配色看起来合理心里跟明镜似的，</div> </li> <li><a href="/article/626.htm" title="qq空间刷评论工具" target="_blank">qq空间刷评论工具</a> 换个号韩国红果果 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div> var a=document.getElementsByClassName('textinput'); var b=[]; for(var m=0;m<a.length;m++){ if(a[m].getAttribute('placeholder')!=null) b.push(a[m]) } var l</div> </li> <li><a href="/article/753.htm" title="S2SH整合之session" target="_blank">S2SH整合之session</a> 灵静志远 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>错误信息： Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'cartService': Scope 'session' is not active for the current thread; consider defining a scoped</div> </li> <li><a href="/article/880.htm" title="xmp标签" target="_blank">xmp标签</a> a-john <a class="tag" taget="_blank" href="/search/%E6%A0%87%E7%AD%BE/1.htm">标签</a> <div>今天在处理数据的显示上遇到一个问题： var html = '<li><div class="pl-nr">' + user + '' + text + '</div></li>'; ulComme</div> </li> <li><a href="/article/1007.htm" title="Ajax的常用技巧（2）---实现Web页面中的级联菜单" target="_blank">Ajax的常用技巧（2）---实现Web页面中的级联菜单</a> aijuans <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>在网络上显示数据，往往只显示数据中的一部分信息，如文章标题，产品名称等。如果浏览器要查看所有信息，只需点击相关链接即可。在web技术中，可以采用级联菜单完成上述操作。根据用户的选择，动态展开，并显示出对应选项子菜单的内容。在传统的web实现方式中，一般是在页面初始化时动态获取到服务端数据库中对应的所有子菜单中的信息，放置到页面中对应的位置，然后再结合CSS层叠样式表动态控制对应子菜单的显示或者隐</div> </li> <li><a href="/article/1134.htm" title="天-安-门，好高" target="_blank">天-安-门，好高</a> atongyeye <a class="tag" taget="_blank" href="/search/%E6%83%85%E6%84%9F/1.htm">情感</a> <div> 我是85后，北漂一族，之前房租1100，因为租房合同到期，再续，房租就要涨150。最近网上新闻，地铁也要涨价。算了一下，涨价之后，每次坐地铁由原来2块变成6块。仅坐地铁费用，一个月就要涨200。内心苦痛。晚上躺在床上一个人想了很久，很久。我生在农</div> </li> <li><a href="/article/1261.htm" title="android 动画" target="_blank">android 动画</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E9%80%8F%E6%98%8E%E5%BA%A6/1.htm">透明度</a><a class="tag" taget="_blank" href="/search/%E5%B9%B3%E7%A7%BB/1.htm">平移</a><a class="tag" taget="_blank" href="/search/%E7%BC%A9%E6%94%BE/1.htm">缩放</a><a class="tag" taget="_blank" href="/search/%E6%97%8B%E8%BD%AC/1.htm">旋转</a> <div>android的动画有两种 tween动画和Frame动画 tween动画;,透明度,缩放,旋转,平移效果 Animation 动画 AlphaAnimation 渐变透明度 RotateAnimation 画面旋转 ScaleAnimation 渐变尺寸缩放 TranslateAnimation 位置移动 Animation</div> </li> <li><a href="/article/1388.htm" title="查看本机网络信息的cmd脚本" target="_blank">查看本机网络信息的cmd脚本</a> bijian1013 <a class="tag" taget="_blank" href="/search/cmd/1.htm">cmd</a> <div>@echo 您的用户名是：%USERDOMAIN%\%username%>"%userprofile%\网络参数.txt" @echo 您的机器名是：%COMPUTERNAME%>>"%userprofile%\网络参数.txt" @echo ___________________>>"%userprofile%\</div> </li> <li><a href="/article/1515.htm" title="plsql 清除登录过的用户" target="_blank">plsql 清除登录过的用户</a> 征客丶 <a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>tools---preferences----logon history---history 把你想要删除的删除 -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出，我好及时改正，同时也让我们一起进步。 email ： binary_spac</div> </li> <li><a href="/article/1642.htm" title="【Pig一】Pig入门" target="_blank">【Pig一】Pig入门</a> bit1129 <a class="tag" taget="_blank" href="/search/pig/1.htm">pig</a> <div>Pig安装 1.下载pig wget http://mirror.bit.edu.cn/apache/pig/pig-0.14.0/pig-0.14.0.tar.gz 2. 解压配置环境变量如果Pig使用Map/Reduce模式，那么需要在环境变量中，配置HADOOP_HOME环境变量 expor</div> </li> <li><a href="/article/1769.htm" title="Java 线程同步几种方式" target="_blank">Java 线程同步几种方式</a> BlueSkator <a class="tag" taget="_blank" href="/search/volatile/1.htm">volatile</a><a class="tag" taget="_blank" href="/search/synchronized/1.htm">synchronized</a><a class="tag" taget="_blank" href="/search/ThredLocal/1.htm">ThredLocal</a><a class="tag" taget="_blank" href="/search/ReenTranLock/1.htm">ReenTranLock</a><a class="tag" taget="_blank" href="/search/Concurrent/1.htm">Concurrent</a> <div>为何要使用同步？ java允许多线程并发控制，当多个线程同时操作一个可共享的资源变量时（如数据的增删改查），将会导致数据不准确，相互之间产生冲突，因此加入同步锁以避免在该线程没有完成操作之前，被其他线程的调用，从而保证了该变量的唯一性和准确性。 1.同步方法&</div> </li> <li><a href="/article/1896.htm" title="StringUtils判断字符串是否为空的方法（转帖）" target="_blank">StringUtils判断字符串是否为空的方法（转帖）</a> BreakingBad <a class="tag" taget="_blank" href="/search/null/1.htm">null</a><a class="tag" taget="_blank" href="/search/StringUtils/1.htm">StringUtils</a><a class="tag" taget="_blank" href="/search/%E2%80%9C%E2%80%9D/1.htm">“”</a> <div>转帖地址：http://www.cnblogs.com/shangxiaofei/p/4313111.html public static boolean isEmpty(String str) 　　判断某字符串是否为空，为空的标准是 str== null 或 str.length()== 0 </div> </li> <li><a href="/article/2023.htm" title="编程之美-分层遍历二叉树" target="_blank">编程之美-分层遍历二叉树</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/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/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> import java.util.ArrayList; import java.util.LinkedList; import java.util.List; public class LevelTraverseBinaryTree { /** * 编程之美分层遍历二叉树 * 之前已经用队列实现过二叉树的层次遍历，但这次要求输出换行，因此要</div> </li> <li><a href="/article/2150.htm" title="jquery取值和ajax提交复习记录" target="_blank">jquery取值和ajax提交复习记录</a> chengxuyuancsdn <a class="tag" taget="_blank" href="/search/jquery%E5%8F%96%E5%80%BC/1.htm">jquery取值</a><a class="tag" taget="_blank" href="/search/ajax%E6%8F%90%E4%BA%A4/1.htm">ajax提交</a> <div> // 取值 // alert($("input[name='username']").val()); // alert($("input[name='password']").val()); // alert($("input[name='sex']:checked").val()); // alert($("</div> </li> <li><a href="/article/2277.htm" title="推荐国产工作流引擎嵌入式公式语法解析器-IK Expression" target="_blank">推荐国产工作流引擎嵌入式公式语法解析器-IK Expression</a> comsci <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F/1.htm">嵌入式</a> <div>这个开源软件包是国内的一位高手自行研制开发的，正如他所说的一样，我觉得它可以使一个工作流引擎上一个台阶。。。。。。欢迎大家使用，并提出意见和建议。。。 ----------转帖--------------------------------------------------- IK Expression是一个开源的（OpenSource），可扩展的（Extensible），基于java语言</div> </li> <li><a href="/article/2404.htm" title="关于系统中使用多个PropertyPlaceholderConfigurer的配置及PropertyOverrideConfigurer" target="_blank">关于系统中使用多个PropertyPlaceholderConfigurer的配置及PropertyOverrideConfigurer</a> daizj <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>1、PropertyPlaceholderConfigurer Spring中PropertyPlaceholderConfigurer这个类，它是用来解析Java Properties属性文件值，并提供在spring配置期间替换使用属性值。接下来让我们逐渐的深入其配置。基本的使用方法是：(1) <bean id="propertyConfigurerForWZ&q</div> </li> <li><a href="/article/2531.htm" title="二叉树:二叉搜索树" target="_blank">二叉树:二叉搜索树</a> dieslrae <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a> <div> 所谓二叉树,就是一个节点最多只能有两个子节点,而二叉搜索树就是一个经典并简单的二叉树.规则是一个节点的左子节点一定比自己小,右子节点一定大于等于自己(当然也可以反过来).在树基本平衡的时候插入,搜索和删除速度都很快,时间复杂度为O(logN).但是,如果插入的是有序的数据,那效率就会变成O(N),在这个时候,树其实变成了一个链表. tree代码: </div> </li> <li><a href="/article/2658.htm" title="C语言字符串函数大全" target="_blank">C语言字符串函数大全</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/function/1.htm">function</a> <div>C语言字符串函数大全函数名: stpcpy 功能: 拷贝一个字符串到另一个用法: char *stpcpy(char *destin, char *source); 程序例: #include <stdio.h> #include <string.h> int main</div> </li> <li><a href="/article/2785.htm" title="友盟统计页面技巧" target="_blank">友盟统计页面技巧</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E6%8A%80%E5%B7%A7/1.htm">技巧</a> <div>在基类调用就可以了, 基类ViewController示例代码 -(void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [MobClick beginLogPageView:[NSString stringWithFormat:@"%@",self.class]]; </div> </li> <li><a href="/article/2912.htm" title="window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法" target="_blank">window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法</a> flyvszhb <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法本机已经安装了jdk1.7，而比较早期的项目需要依赖jdk1.6，于是同时在本机安装了jdk1.6和jdk1.7. 安装jdk1.6前，执行java -version得到 C:\Users\liuxiang2>java -version java version "1.7.0_21&quo</div> </li> <li><a href="/article/3039.htm" title="Java在创建子类对象的同时会不会创建父类对象" target="_blank">Java在创建子类对象的同时会不会创建父类对象</a> happyqing <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%88%9B%E5%BB%BA/1.htm">创建</a><a class="tag" taget="_blank" href="/search/%E5%AD%90%E7%B1%BB%E5%AF%B9%E8%B1%A1/1.htm">子类对象</a><a class="tag" taget="_blank" href="/search/%E7%88%B6%E7%B1%BB%E5%AF%B9%E8%B1%A1/1.htm">父类对象</a> <div> 1.在thingking in java 的第四版第六章中明确的说了，子类对象中封装了父类对象， 2."When you create an object of the derived class, it contains within it a subobject of the base class. This subobject is the sam</div> </li> <li><a href="/article/3166.htm" title="跟我学spring3 目录贴及电子书下载" target="_blank">跟我学spring3 目录贴及电子书下载</a> jinnianshilongnian <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div> 一、《跟我学spring3》电子书下载地址：《跟我学spring3》（1-7 和 8-13） http://jinnianshilongnian.iteye.com/blog/pdf 跟我学spring3系列 word原版下载二、源代码下载最新依</div> </li> <li><a href="/article/3420.htm" title="第12章 Ajax（上）" target="_blank">第12章 Ajax（上）</a> onestopweb <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3547.htm" title="BI and EIM 4.0 at a glance" target="_blank">BI and EIM 4.0 at a glance</a> blueoxygen <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a> <div>http://www.sap.com/corporate-en/press.epx?PressID=14787 有机会研究下EIM家族的两个新产品~~~~ New features of the 4.0 releases of BI and EIM solutions include: Real-time in-memory computing – </div> </li> <li><a href="/article/3674.htm" title="Java线程中yield与join方法的区别" target="_blank">Java线程中yield与join方法的区别</a> tomcat_oracle <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>长期以来，多线程问题颇为受到面试官的青睐。虽然我个人认为我们当中很少有人能真正获得机会开发复杂的多线程应用(在过去的七年中，我得到了一个机会)，但是理解多线程对增加你的信心很有用。之前，我讨论了一个wait()和sleep()方法区别的问题，这一次，我将会讨论join()和yield()方法的区别。坦白的说，实际上我并没有用过其中任何一个方法，所以，如果你感觉有不恰当的地方，请提出讨论。 &nb</div> </li> <li><a href="/article/3801.htm" title="android Manifest.xml选项" target="_blank">android Manifest.xml选项</a> 阿尔萨斯 <a class="tag" taget="_blank" href="/search/Manifest/1.htm">Manifest</a> <div>结构继承关系 public final class Manifest extends Objectjava.lang.Objectandroid.Manifest 内部类 class Manifest.permission权限 class Manifest.permission_group权限组构造函数 public Manifest () 详细 androi</div> </li> <li><a href="/article/3928.htm" title="Oracle实现类split函数的方" target="_blank">Oracle实现类split函数的方</a> zhaoshijie <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>关键字：Oracle实现类split函数的方项目里需要保存结构数据，批量传到后他进行保存，为了减小数据量，子集拼装的格式，使用存储过程进行保存。保存的过程中需要对数据解析。但是oracle没有Java中split类似的函数。从网上找了一个，也补全了一下。 CREATE OR REPLACE TYPE t_split_100 IS TABLE OF VARCHAR2(100); cr</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>

软件测试 Web自动化测试 基础知识 HTML CSS JavaScript

文章目录

1 HTML

1.1 HTML简述

软件测试 Web自动化测试基础知识 HTML CSS JavaScript