Query是什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器，并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

搭配视频效果更佳哦~~~

jQuery从入门到精通

https://www.ixigua.com/6846624275877593611

开篇基础

jQuery 是一款跨主流浏览器的JavaScript 库，封装了JavaScript 相关方法调用，简化JavaScript 对HTML DOM 操作

官网地址： https://jquery.com/

官网首页jQuery 介绍：

原文翻译：

jQuery 是一个快速，小巧，功能丰富的JavaScript 库。 它通过易于使用的API 在大量浏览器中运行，使得HTML 文档遍历和操作，事件处理，动画和Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写JavaScript 的方式。

为什么[why]使用 jQuery

非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和FireFox， Google 浏览器处理 AJAX，创建异步对象是不同的，而jQuery 能够使用一种方式在不同的浏览器创建AJAX 异步对象。

其他优点：

（1） 写少代码,做多事情【write less do more】

（2） 免费，开源且轻量级的js 库，容量很小

（3） 兼容市面上主流浏览器，例如 IE，Firefox，Chrome

（4） 能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果， 也能提供异步AJAX 功能

（5） 文档手册很全，很详细

（6） 成熟的插件可供选择，多种js 组件，例如日历组件（点击按钮显示下来日期）

（7） 出错后，有一定的提示信息

（8） 不用再在html 里面通过<script>标签插入一大堆 js 来调用命令了

例如：使用JavaScript 定位DOM 对象常用的三种方式：

（1） 通过ID 属性：document.getElementById()

（2） 通过 class 属性：getElementsByClassName()

（3） 通过标签名：document.getElementsByTagName()

上面代码可以看出JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。

DOM 对象

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。

通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。

获取jQuery

官网下载地址：https://jquery.com/download/

jQuery 的不同版本中，2.xx 不再支持 IE6/7/8 浏览器。现阶段IE6/7/8 已经是淘汰的，非主流。可以不用考虑兼容问题。

对于每一个同一版本号的 jQuery，其库又分为两个。一个是未压缩版，可查看源码，开发时使用；一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。

牛刀小试

编写jQuery 的工具很多，能编写HTML 的工具都支持jQuery. 例如记事本 ，EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA.

单独学习jQuery 库使用，可以轻量的开发工具，例如EditPlus ,HBuilder,HbuilderX

编写项目可以使用集成开发工具，例如在IDEA， Eclipse ,MyEclipse ,WebStorm 等

第一个例子完成：浏览器完全装载html 页面 DOM 后,显示一个提示信息框

实现步骤：

1. 使用HBuilder 或HbuilderX, idea 都可以，以HbuilderX 为工具，创建一个项目（名称：jquery-course），给项目选择一个文件存放目录。

2. 在项目中再创建一个目录

右键项目名称—新建—目录，常用名称为 js

3. 拷贝下载的jQuery.js 文件到目录

4. 使用 jQuery，首先要将 jQuery 库引入。使用如下语句：

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

5. $(document)，将 DOM 对象 document 转换为jQuery 对象。

$(document).ready()函数是当 DOM 对象加载完毕后，马上执行的函数。

$(document).ready()与$()、jQuery()、window.jQuery()是等价的，所以

$(document).ready()可以写成 $(function() { alert(“Hello jQuery”) } );

6. 完整代码

DOM 对象和jQuery 对象

DOM 对象是用JavaScript 语法创建的对象，也看做是 js 对象。

1. DOM 对象转换jQuery 对象：

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为jQuery 对象才可以使用jQuery 中的提供的方法，操作DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。

例：新建html 页面文件 domTojQuery.html

1. 页面加入按钮 button

2. 转换 DOM 对象

2. jQuery 对象转为DOM 对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应 的 DOM

对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

例：新建html 文件 jQueryToDom.html

1. 页面添加 text ，button

2. jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM对象

选择器

选择器: 就是定位条件；通知jquery 函数定位满足条件的DOM 对象

基本选择器

根据ID，class 属性，标签类型名定位HTML 元素，转为jQuery 对象.

1. id 选择器

语法：$(“#id”)

2. class 选择器

语法：$(“.class 名称”)

3. 标签选择器

语法：$(“标签名”)

例：新建selector.html

1. 在页面 head 部分加入 css

2. 加入 jQuery 引用

3.body 部分定义div

4.创建 js 函数

4. 所有选择器

语法：$(“*”) 选取页面中所有DOM 对象。

5. 组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id， class，标签名等。

语法：$(“#id, .class, 标签名”)

例：

1. 上面的 selector.html 页面中加入按钮

2. 增加 js 函数

表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

<input type="text">

<input type="password">

<input type="radio">

<input type="checkbox">

<input type="button">

<input type="file">

<input type="submit">

<input type="reset">

$(":tr"): 不能用，tr 不是input 标签语法： $(":type 属性值")

例如：

$(":text")选取所有的单行文本框

$(":password")选取所有的密码框

$(":radio")选取所有的单选框

$(":checkbox")选取所有的多选框

例：

新建form.html 页面定义元素：

定义 js 函数：

过滤器

jQuery 对象中存储的DOM对象顺序与页面标签声明位置关系

<div>1</div> dom1

<div>2</div> dom2

<div>3</div> dom3

$("div") == [dom1,dom2,dom3]

过滤器就是过滤条件，对已经定位到数组中DOM 对象进行过滤筛选，过滤条件不能独立出现在jquery 函数，如果使用只能出现在选择器后方。

基本过滤器

1. 选择第一个first, 保留数组中第一个DOM 对象

语法：$(“选择器:first”)

2. 选择最后个last, 保留数组中最后DOM 对象

语法：$("选择器:last")

3. 选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

4. 选择数组中小于指定索引的所有DOM 对象

语法：$(“选择器:lt(数组索引)”)

5. 选择数组中大于指定索引的所有DOM 对象

语法：$(“选择器:gt(数组索引)”)

实例操作

1.定义样式

2. 页面加入div

3. 定义js 函数

表单对象属性过滤器

1. 选择可用的文本框

$(“:text:enabled”)

2. 选择不可用的文本框

$(“:text:disabled”）

3. 复选框选中的元素

$(“:checkbox:checked”)

4. 选择指定下拉列表的被选中元素

选择器>option:selected

例：

创建filterForm.html 页面：

js 函数

、Coursera：https://www.coursera.org/

最初由美国斯坦福大学两名计算机科学教授创办，国际知名在线教育平台，还可以获得认证的课程证书，可以申请奖学金，也有很多免费的学习资源。

2、EdX：https://www.edx.org/

麻省理工和哈佛大学联手创建的大规模开放在线课堂平台，目前也有许多国内高校的课程，也可以申请课程证书。

3. 菜鸟教程：http://www.runoob.com/

菜鸟教程的 Slogan 为：学的不仅是技术，更是梦想！ 记住：再牛逼的梦想也抵不住傻逼似的坚持！网站包括了HTML、CSS、Javascript、PHP、C、Python等各种基础编程教程。

4. 中国大学MOOC网：https://www.icourse163.org/

中国大学MOOC是由网易与高教社携手推出的在线教育平台，承接教育部国家精品开放课程任务，向大众提供中国知名高校的MOOC课程。在这里，每一个有意愿提升自己的人都可以免费获得更优质的高等教育。

5、Udacity：https://www.udacity.com/

盈利性网站，但Udacity提供了一个就业匹配计划，里面包括Google、Facebook、Twitter等诸多硅谷公司在内，这些公司为Udacity提供奖学金或工作职位。

6、网易公开课：https://open.163.com/

前面说到的Coursera和网易达成视频托管协议，还有一分部内容就是在网易公开课上设立了Coursera专区，除了不能申请课程证书外，课程内容与Coursera没有差异。在Coursera之外，上面还有TED、可汗学院、国内外高校公开课免费资源。因为网站上没有广告，站内内容完全免费，这个网站绝对担得起“良心”两字。

7、超星读书：http://book.chaoxing.com/

超星读书-电子书在线免费阅读网站

这是一个强大的网络书库，如果你有学校账户的话，别说通俗读物，即使是学术专著也能在上面免费浏览下载。简直是做研究和写论文的大杀器。

8、网易云课堂：https://study.163.com/

专业的实用技能学习平台

9、学堂在线：https://next.xuetangx.com/

学堂在线-最大的中文慕课(MOOC)平台

清华大学自主研发的MOOC平台，资源全部免费。

10、iTunes U：https://itunes.tcd.ie/

苹果设备自带的网络公开课软件，课程以哈佛、麻省理工、牛津等英文课程为主，中文课程比较少，只有香港中文大学、香港科技大学、中山大学、西安交大、国家开放大学等不到十个大学提供中文内容，内容完全免费。

件测试之菜鸟级攻略，抓包工具Charles使用教程如下：

一、安装步骤

安装步骤非常简单

官网下载：https://www.charlesproxy.com/download/，依照自己的电脑系统，下载安装。

官网下载的版本需要进行破解，破解包根据自己下载的版本下载一个对应版本的破解包

二、证书安装

charles安装完成后，就可以抓取电脑上http的请求。但抓取https的时候还需要进行一些设置。windows的设置于mac不太相同，但基本操作都是一样。这边以windows为例。

1.电脑安装证书

a.选择：Help—SSL Proxying—Install Charles Root Certificate

b.证书安装完成后，设置SSL Proxying Settings。选择：Proxy—SSL Proxying Settings…

添加相应的host以及端口，如下图所示。

c.以上设置完成后，重启charles和浏览器就可以使用charles抓取电脑中的https请求了。

但有时会出现部分网页打开时，提示“隐私设置”问题。这是可能是由于SSL Proxying Settings中的设置没有覆盖全面，可以将无法打开网页的host以及port添加进去。

2.手机安装证书

a.选择：Help—SSL Proxying—Install Charles Root Certificate on a Mobile Devices or Remote Browser

b.打开了如下的窗口

c.手机端打开无线网的设置—代理设置。设置代理服务器、端口为上图中的主机和端口

d.配置代理信息后，Charles会出现如下窗口，点击Allow

e.允许链接后，在浏览器中输入：chls.pro.ssl下载证书，下载后，直接安装。安装后确认证书是否是被信任的证书，打开：通用—关于本机—证书信任设置，将下载的charles证书设置为信任。

f.设置完成后可以使用charles抓取手机发出的https请求

三、快捷菜单栏操作

清除按钮：点击该按钮将清除当前会话中的所有内容

停止按钮：点击后Charles将停止抓包

节流按钮：点击后将限制请求上传和下载的速度

断点按钮：点击后将指定的请求打上断点

撰写按钮：可以新建一个请求或者在原有的请求基础上修改请求

重复请求按钮：选中请求后点击按钮，将所有请求重复请求一次

验证按钮：验证返回的Html信息。将这些返回发送到W3C HTML验证器、W3C CSS验证器和W3C Feed验证器来验证记录的相应。

四、常用功能操作

1.模拟慢速网络：Proxy—Throttle Settings(快捷菜单中的节流按钮)

适用场景：模拟慢速网络或者高延迟的网络。

勾选：Enable Throttling按钮就可以打开限速。

在Throttle Preset中可以直接选择已经预设的模式，也可以根据自己需要调整参数。

可以对指定的请求进行单独的限速，勾选：Only for selected hosts—Add—添加指定的请求地址。

2.断点功能：Proxy—Breakpoints Settings（快捷菜单中的断点按钮）

适用场景：需要修改一次网络请求或返回结果。一般用于临时性的修改。当指定的网络请求发生时，Charles会接获该请求。

（1）两种设置的方式：

a.勾选：Enable Breakpoints按钮，点击Add按钮，添加需要打断点的请求信息

b.选中需要打断点的请求，右击—选择Breakpoints，即可将该请求打上断点。默认请求和返回都被打断点，可以通过a的方式进行修改。

指定请求打上断点后，再次请求，根据设置会拦截相应的请求或者返回，此时修改相应的内容后，点击Execute按钮。

3.重写：Tools—Rewrite

适用场景：需要对请求和相应进行修改时，如添加或更改头信息、替换响应内容等。该功能跟断点功能类似，更适用于一个请求需要多次重新的情况。

a.添加指定的请求

b.选择重写请求或者返回，然后添加需要重写的信息

4.代理设置：Proxy—Proxy Settings

HTTP Proxy中设置端口，默认为8888。

5.SSL代理设置：Proxy—SSL Proxying Settings

抓取HTTPS时需要设置访问的网址，设置如下图一般可以抓取大部分

6.访问控制设置：Proxy—Access Control Settings

在抓取手机网络请求的设置中，会出现是否允许链接的提示框，如下

如果选择了“Allow”按钮，会自动将手机IP地址填写到Access Control Settings的窗口中。

如果不小心选择了“Deny"按钮，没有关系，可以自己将IP地址配置到以下窗口中。

7.重复请求：Tools—Repeat

适用场景：后端修改后，需要前段重复请求时，选中指定请求，点击Tools—Repeat按钮或者右键—Repeat。

8.高级重复请求：Tools—Advanced Repeat

适用场景：可以用于服务器的压力测试

下图红框中输入循环请求的次数和并发数量

五、其他操作

1.记录设置：Proxy—Recording Settings

Options：设置记录请求的限制

Include：当只需要抓取指定网站的请求，可以在该页面中添加指定的请求方式和地址

Exclude：不抓取该列表中填写的网络请求

2.反向代理：Proxy—Reverse Proxies Settings。

适用场景：对于本地开发需要使用域名的情况下非常适用。

勾选：Enable Reverse Proxie。点击Add按钮，添加相应的信息

如下图，将本地端口61087端口映射到www.baidu.com域名的80端口

3.转发端口：Proxy—Port Forwarding

适用场景：监控TCP数据时，对端口进行转发

勾选：Enable Port Forwarding。点击Add按钮，添加相应的信息4.抓取电脑请求设置：Proxy—Windows Proxy。勾选上该选项后可抓取电脑上的请求

4.抓取电脑请求设置：Proxy—Windows Proxy。勾选上该选项后可抓取电脑上的请求

5.外部代理：Proxy—External Proxy

适用场景：把经过Charles的请求转到其他代理服务器，适用于特殊情况下需要用到两个软件的特点进行开发。

填写代理服务器的IP和端口后，可以在Charles和代理服务器中同时捕捉到相同的http请求。

6.网络页面设置：Proxy—Web Interface Settings

适用场景：清除Session操作，开启后需要指定匿名可以访问或者账号密码访问

7.禁用缓存：Tools—No Caching

适用场景：防止客户端应用程序缓存任何资源。禁用后会始终向远程网站发出请求，始终获得最新版本

可以对所有请求禁用缓存，也可以对指定的请求禁用。

8.禁用Cookies：Tools—Block Cookies

适用场景：阻止Cookies的发送和接收，可用于模拟网络爬虫网站的视图。

可以对所有请求禁用，也可以对指定的请求禁用。

9.远程映射：Tools—Map Remote Settings

将from的站点映射到to的站点，从新站点提供响应。

10.本地映射：Tools—Map Local Settings

适用场景：开发调试时，可以将远程网站映射到本地文件。本地文件的内容返回给客户端，跟正常的远程相应一样。

11.黑名单设置：Tools—Black List

列入黑名单的域名请求任何页面时，该请求都将被阻止。

12.白名单设置：Tools—Write List

仅仅允许被输入的域名。如果一个请求同时存在黑名单和白名单时，该请求会被阻止。

13.DNS欺骗：Tools—DNS Spoofing Settings

将自己的主机名指定给远程地址映射来欺骗DNS查找。

适用场景：上线前需要在测试环境中验证，手机客户端请求的域名不太容易更改，可以通过设置dns方式把域名转发到测试机上进行测试。

14.镜像：Tools—Mirror

适用场景：浏览指定站点时，把接收的相应内容克隆一份，保存在指定路径下。如果收到同一个URL的两次请求，最后一次的请求将覆盖已经存在的同名文件。

15.自动保存：Tools—Auto Save

按照设置的时间间隔自动保存和清除记录会话。

16.客户端进程：Tools—Client Process

可以查看到原始进程的请求，适用于抓取PC端的请求

17.编辑修改请求：Tools—Compose、Tools—Compose New。对应快捷菜单：撰写按钮。

a.选中指定的请求，勾选：Tools—Compose；或者右键—选择Compose

b.复制了选中请求的信息，在右边的框中可以对所有信息进行修改。点击Execute按钮执行。

新建一个请求，选择Compose New：添加请求信息于上图操作一致

18.验证：Tools—Validate：与快捷菜单中验证按钮功能相同

19.发布要点：Tools—Publish Gist

最后，如果你对软件测试感兴趣，欢迎百度搜索“特斯汀软件测试腾讯课堂”或关注公众号“特斯汀软件测试”，里面涵盖很多精彩免费视频或干货知识。