jQuery是什么？jQuery是一种新的JavaScript库，简称JQ。JavaScript是一种属于网络的脚本语言,广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果，简称JS。
而jQuery是用JavaScript写的，所以能用jQuery实现的功能用JavaScript都能实现，而用JavaScript实现的，JQuery有时却不能实现。
也就是说，jq就是用js事先封装好的语句包，使用时直接调用即可，也可理解为事先定义好的功能函数，随用随调即可。那么在哪里可以找到Jquery拿来就用呢？BootCDN欢迎您！
这个CDN又是什么呢？CDN的全称是ContentDeliveryNetwork，即内容分发网络。那么CDN为什么就可以加速呢？CDN通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，从而提高用户访问网站的响应速度。
1.jq的引用、传值及验证
我们拖动滚动条继续在bootcdn网站中浏览，找到JQ并点击。
jq页面下面我们来找到封装了常用功能的jq
将链接复制到网页新标签页下即可实现在线访问。
我们也可将其保存到本地，这里以pycharm.3为例进行说明。我们在项目名处右键---新建---javascript，并命名为jq
选择js类型命名为jq将网页访问中的内容，全选（ctrl+a）、复制（ctrl+c）、粘贴到jq中，并保存，这样jq就被保存到本地编辑器中，供我们使用了。
在jquery代码中为操作方便，我们常常用$符号来代替“jquery”已达到简洁的目的。
我们怎样验证在线引用是否成功呢？这次，我们点击jquery页面的“复制script标签”，直接粘贴到已建好的名为“test的html文件的”body中。
之后在body中继续新建script标签，写入jq代码，进行弹窗试验。
操作之后浏览器出现弹窗，信息为我们写入的1，证明jq引用成功。
当我们将jq引用的语句注释，则会出现“$isnotdefined的报错，这是jq新手常犯的错误，他们未引用就直接使用jq于是便会出现这种错误。
jq的在线引用我们说完了，那么本地引用怎么执行呢？我们仍在script标签中src=“jq文件名即可。
jq可以传字符串、选择器、尖括号标签的形式、函数、object，需要注意的是jq的API只对自己开放，jq不能用js的API，而js也不能使用jq的API.
我们在body中新建div标签令其id为box，内容为div字符;在script标签中定义变量oBox读取div标签内容，并修改其值为。
script标签下定义变量时需注意：(1)js定义变量时习惯在变量名前加字母o,例如varoBox=的”oBox的第1个“o;
(2)jq定义变量时习惯在变量名前加字符$,例如var$Box=的”$Box的“$;
相比较于js，我们会发现jq对元素的获取和修改都方便了许多。jq获取元素，只需加上”$“符号，括号里面写上”#+id名称“即可。对于修改元素值，更是只需变量名+”.“+”html()即可。
但需要注意的是，为了便于理解我们将oBox称为变量，但实际上，它是一个对象。我们可以用typeof来弹出它的类型，看到为object,这充分说明了oBox是对象。
接上步，我们使用$()来调用oBox，仍使用html()来修改元素内容为，看到值变为，这说明jq可以调用对象。
jq中的html()还可以识别标签，我们可以在其中加入em标签使内容变为斜体。
下面我们来验证jq识别字符串，新定义p标签，并用jq修改内容为“字符串”。（注意：当你有多个p标签时，此操作会将你所有p标签内容更改;而js对标签操作时则必须要加下标，一个个修改)
2.jq与js的相互转换
（1）js转换为jq十分方便，直接将js对象名放入“$()”的括号中即可。
（2）jq转换为js,有两种方法。一：通过给jq对象直接加下标。二：jq对象通过“get”方法加下标。加完下标jq对象变转换成了js,我们可以通过调用js特有的innerhtml来检验是否转换成功。若能调用，则证明转换成功。
（3）jq转化为特定的jq(即jq对象的特定选择，默认是全部选择，我们也可以这样理解，jq获取的元素类似于集合，获取的是一个数组）。默认情况下，jq用html方法修改，则全部均被修改，而我们可以用eq方法加下标，使之只更改特定的值。
3.jq的遍历操作
jq的each()方法可以遍历每个元素，而each()中的function(i){}函数的第一个参数i则表示为取到元素的下标。
js访问元素innerHTMLjq访问元素html4.jq之属性操作
(1)attr设置/读取标签属性
我们先给div的id为“box”,再通过alert读出id的值，并通过弹窗弹出显示。
我们通过attr给div设置属性class，class名为classname,并通过弹窗弹出。
为检验class是否真的加上，我们点击确定后，在谷歌浏览器中按F12，点击elements，进行查看。
jq中attr修改属性也是同样的方法，使用“attr(需要修改的名称，“修改的新值”)；”语句即可。使用removeAttr()方法可以删除我们不想要的属性。
(2)addClass添加类/removeclass删除类
我们以addclass给div下的第1个p标签添加类box1为例。addclass也可加多个类addclass(box1box2)。
注意：removeclass（）;当不传参时，删除所有的类，当removeclass(box1)时，只删除box1。
（3）toggleClass();有则删除，无则添加。
jq中使用toggleClass();可给被操作的对象进行“删除类并增加类”的效果，仍以p标签为例，使用toggleClass()前，4个p标签中，只有第1个p标签有box1类，其余p标签分别为“box2、box3、”box4。
执行toggleClass()前执行toggleClass（）或效果（4）jq中，设置值时一般全部设置；获取值时，一般只获取第1个。
设置效果获取效果5.jq操作样式
(1).css()、.width（）、.height()
我们设置id=box的父div样式，设置宽度width:px；（像素），高度height:px;边界线border:10pxsolidred（实体红线）;盒子模型padding:20px（相对于div而言）;边距margin:50px;(margin相对浏览器页面而言)。
jq中直接使用css()即可改变相应的样式值。
当要更改多个属性值时，可以使用键值对的形式，使用｛“word”:“key”,“word2”:“kye2”,｝，键值对中间用逗号隔开即可。
（2）width();innerWidth();outerWidth();的使用
通过弹窗，我们可以看出，width---；innerWidth---;outerWidth--;这又分别代表了什么呢？我们在谷歌浏览器中按下F12，选中我们的盒子模型。
很明显，width--代表的就是我们设置的div宽度；innerWidth--代表的就是+20+20（padding:20px）；而outerwidth--代表的就是+20+20（padding:20px）+10+10(border:10px)。也就是说innerWidth计算了基础值+padding,而outerwidth计算了“基础值+padding+border的像素值。
（3）offset的两个属性
offset有top和left代表了距浏览器窗口上方/左边的值。我们先将margin的值设为自动auto,然后添加语句offset().top和offset().left来分别弹出我们想要查看的值，并横向拖拽浏览器调整窗口大小，使div距浏览器窗口左边距离变化，可看到第2个弹窗中值发生变化。
（4）position也有两属性
position也有两个属性top和left，代表了到父级的上、左距离。先给父级div的position为relative(相对)，子块div为absolute为（绝对）。
我们在子块box1中键入left:50px,top:60px，用弹窗表示，发现其变化为50，60（相对于父级定位）。
好，有关jq的事儿咱们今天就先聊到这儿，咱们明天继续。如果您有什么相关问题可以在评论区留言，小叮当看到后便会及时回复您的~