从零开始学_JavaScript_系列（四）——jquery（基础，选择器，触发条件，动画，回调函数）

偏执的太偏执、 2022-06-05 03:41 157阅读 0赞

jQuery语法

（1）引用jquery文件及下载库：

[http://jquery.com/download/][http_jquery.com_download]

下载

[Download the compressed, production jQuery 2.2.2][Download the compressed_ production jQuery 2.2.2]

这个是用户版的，已经被精简和压缩。

然后使用

来启动这个库文件，记得将下载的文件重命名为jquery.js

也可以使用谷歌和微软的CDN，不过这里略。

（2）jQuery语法

**$ (selector).action()**

其中$是必须的，表示使用jQuery语法；

selector表示你要对哪个进行操作；

action()表示进行的操作；

例如：$(“div”).hide() 其表示对所有div标签包含的内容进行隐藏，如果是<”p”>则表示对p标签包含的东西进行隐藏。

**其他：**

$(this) 表示对当前HTML元素进行操作

$(“\#abc”) 表示对id为abc的元素进行操作

$(“.abc”) 表示对class=”abc”的进行操作

（3）$(document).ready

这个存在的意义在于，只有当文档加载完毕（不确定是指所有文档，还是指使用的文档的那一部分），才能运行jQuery代码

（4）选择器

①$(“p”) 选择元素为的

②$(“p.abc”) 选择class=”abc”的元素

③$(“p\#abc”) 选择id=”abc”的元素

④$(“\[href\]”) 选择所有带有href属性的元素

⑤$(“\[href=’\#’\]”) 选择所有带href值等于“\#”的元素

⑥$(“\[href!=’\#’\]”) 选择所有带href值不等于“\#”的元素

⑦$(“\[href$=’.jpg’\]”) 选择所有带href，末尾以.jpg结尾的元素

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(213,213,213)"> 语法 </td> 
 <td style="background:rgb(213,213,213)"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> $(this) </td> 
 <td style="background:rgb(239,239,239)"> 当前 HTML 元素 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> $("p") </td> 
 <td style="background:rgb(239,239,239)"> 所有 &lt;p&gt; 元素 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> $("p.intro") </td> 
 <td style="background:rgb(239,239,239)"> 所有 class="intro" 的&lt;p&gt;元素 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> $(".intro") </td> 
 <td style="background:rgb(239,239,239)"> 所有 class="intro" 的元素 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> $("#intro") </td> 
 <td style="background:rgb(239,239,239)"> id="intro" 的元素 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> $("ul li:first") </td> 
 <td style="background:rgb(239,239,239)"> 每个 &lt;ul&gt; 的第一个&lt;li&gt;元素 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> $("[href$='.jpg']") </td> 
 <td style="background:rgb(239,239,239)"> 所有带有以 ".jpg" 结尾的属性值的href属性 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> $("div#intro .head") </td> 
 <td style="background:rgb(239,239,239)"> id="intro" 的 &lt;div&gt;元素中的所有class="head"的元素 </td> 
 </tr> 
 </tbody> 
</table>

（5）事件触发条件

①ready是完成后触发，一般用于文档。$(document).ready(执行的命令)

②click是点击后触发，一般用于按钮，也可以用于点击文档某区域。$(selector).click(执行的命令)

③dclick是双击后触发。$(selector).dclick(执行的命令);

④focus是元素获得焦点时触发的事件；

⑤mouseover是鼠标悬停后触发的事件；

更多事件触发参考：

[http://www.w3school.com.cn/jquery/jquery\_ref\_events.asp][http_www.w3school.com.cn_jquery_jquery_ref_events.asp]

（6）名称冲突

例如jQuery和某个库名称冲突了（例如同样适用$符号作为开始），那么使用这个命令；

**var jq=jQuery.noConflict()**，帮助您使用自己的名称（比如jq）来代替$ 符号。

（7）解释

$(document).ready(function()\{

$(".ex .hide").click(function()\{

$(this).parents(".ex").hide("slow");

\});

第一行是，当文件准备好了，执行函数，函数内容是后面的：

第二行是，class=”ex”的元素中的class=”hide”元素，点击后触发函数，函数内容为第三行；

第三行是，当前元素（this）的所有祖先元素（parents，一直到根元素html为止）中class=”ex”的元素，被隐藏（hide），速度为缓慢（slow）

疑问：

当有两个同样的东西时，为什么只隐藏自己当前这个，不隐藏另外一个？

推测是因为只遍历其祖先，不包含自己（且祖先中符合class=”ex”要求的）

（8）隐藏和显示

隐藏是hide()，而显示对应的是show()，

只要将隐藏的hide()改为显示的show()即可。

还可以规定速率：

速率有三种，slow（慢），fast（快），数字（毫秒）。

例如hide(“slow”);   show(“fast”);    hide(2000);

需要注意的是：无参数为瞬间完成，fast为快（但比瞬间慢），slow为慢，数字无需加引号。

另有toggle，用法同show和hide，效果是，如果是隐藏，点击后显示，如果是显示，点击后隐藏。也可以加时间和速度参数。

问题：假如多次点击，他会执行完每一次的行为，而不是只执行最近一次

（9）淡入和淡出

注意大写，对大小写是敏感的。

fadeIn(); //淡入（显示）

fadeOut(); //淡出（隐藏）

fadeToggle(); //类似toggle，如果隐藏则显示，如果显示则隐藏

fadeTo(速度,透明度0~1,返回函数); //可以调整不透明度，注意，不能大于1

如：

$("\#img\_1st").fadeTo(1000,0.3);

以1000ms的速度，将id=”img\_1st”的东西设置为透明度30%

注：

假如有多个淡入同时执行，则分别执行自己的，而不是逐个执行。除非有设置设置其执行顺序。

更多特效参考；

[http://www.w3school.com.cn/jquery/jquery\_ref\_effects.asp][http_www.w3school.com.cn_jquery_jquery_ref_effects.asp]

（10）滑动

说明：非隐藏的情况下，滑动后就是隐藏了，隐藏的情况下，相反的滑动就是显示。

向上滑动：slideUp();

向下滑动：slideDown();

切换滑动（先向上，再点击则向下）：slideToggle()

其他效果：

[http://www.w3school.com.cn/jquery/jquery\_ref\_effects.asp][http_www.w3school.com.cn_jquery_jquery_ref_effects.asp]

（11）显示

display:none;

在css的style设置，这种设置为初始不显示。

（12）动画

$(selector).animate(\{params\},speed,callback);

第一个是必须是，表示形成动画的CSS属性，简单的来说，例如初始字号大小为10px，然后这里填写50px，那么字体就会自动变为50px（这个变化的过程就是动画）

注意：

①这个可以操纵块，但是似乎是不能操作标签。

②可以操纵CSS属性；

③移动位置的话，需要在style里这么设置：position:fixed

一些使用：

$(document).ready(function()\{

$("\#b\_3rd").click(function()\{

$("\#a\_3rd").animate(

\{left:'550px', //左边的位置变为550px

width:'100px', //宽度变为100px

top:'-=200px', //向上的位置减少200px

fontSize:'50', //设置字体大小（注意没有\-），并且S大写

\});

并且由于top使用的是相对位置，因此每次点击top，都会移动位置

还可以设置为属性，例如：

width:’toggle’ //宽度形式的隐藏和显示切换

hide隐藏show显示。

不过貌似不能淡入淡出和改变透明度，是因为淡入淡出本身就是动画么？

队列：

$(document).ready(function()\{

$("\#b\_3rd").click(function()\{

$("\#a\_3rd").animate(\{left:'550px'\}); //左边的位置变为550px

$("\#a\_3rd").animate(\{width:'100px'\});//宽度变为100px

$("\#a\_3rd").animate(\{top:'-=200px'\});//向上的位置减少200px

$("\#a\_3rd").animate(\{fontSize:'50'\});//设置字体大小（注意没有\-），并且S大写

\});

这种写法就是让其按顺序执行先移动位置，然后宽度变化，然后往上移动，再字体变大

（13）停止动画

语法：

$(selector).stop(stopAll,goToEnd);

假如有动画队列1、2、3、4，正在执行1；

默认无参数是1停止，下来执行2，3，4；

第一个参数存在表示1、2、3、4都停止；

第二个参数表示1停止，但是立刻出结果

参数用true和false来表示。

①false, false表示1停止，执行2、3、4；

②false, true表示直接完成1，然后执行2，3，4；

③true, false表示1停止，234取消；

④true,true 表示1直接出结果，然后其他停止；

如代码：

<div style="position:fixed" id="a\_3rd">

用于测试动画的文字

</div>

<div>

<p style="text-align:center">

<button id="b\_3rd" align="center">点击后左面的文字会移动</button>

<button id="b\_4th" align="center">点击停止旁边按钮的动画</button>

</div>

以下是对其进行操作：

$(document).ready(function()\{

$("\#b\_3rd").click(function()\{

$("\#a\_3rd").animate(\{left:'550px'\},2000); //左边的位置变为550px

$("\#a\_3rd").animate(\{width:'100px'\},2000);//宽度变为100px

$("\#a\_3rd").animate(\{top:'-=200px'\},2000);//向上的位置减少200px

$("\#a\_3rd").animate(\{fontSize:'50'\},2000);//设置字体大小（注意没有-），并且S大写

\});

$("\#b\_4th").click(function()\{

$("\#a\_3rd").stop(true); //停止其的一切动画队列

\});

（14）CallBack函数

称为回调函数，

其作用是，当前动画执行完100%后，执行该函数。

可以理解为，当某条件满足之后，执行该函数。

（15）AJAX方法（异步请求）

具体来说，是load()方法，语法是：

$(*selector*).load(*URL*,*data*,*callback*);

例如读取某个链接或者本地文件：

$("\#a\_3rd").load("a.txt"); //这是标签为\#a\_3rd的读取文本文档a.txt

①URL是希望加载的URL（链接）；

②data参数规定与请求一同发送的查询字符串键/值对集合（不懂，感觉是说这个是查询的时候顺便发个信息给对方）；

③callback是结束请求后执行的函数；

可以在URL里面加入选择器（例如\#是选择id的，.是选择class的），来选择某一部分的内容（例如js文件的某个标签的）。

如：

load('/example/jquery/demo\_test.txt \#p1') //读取id=”p1”的标签内的

也可以把\#p1改为h2，读取h2标签内的

**load的返回值（注意大小写）：**

responseTxt 包含调用成功时的结果内容

statusTxt 包含返回状态，如果成功是success，如果失败是error

xhr 包含XMLHttpRequest对象（不懂）

（16）get和post——两种http请求方法

get——从指定的资源请求数据；

post——向指定的资源提交要被处理的数据；

**GET方法：**

查询字符串（名称/值 对）是在GET请求的URL中发送的；

①GET请求可被缓存；

②GET请求保留在浏览器历史记录中；

③GET请求可被收藏为书签；

④GET请求不应在处理敏感数据时使用；

⑤有长度限制；

⑥只应当用于取回数据；

**POST方法：**

①不会被缓存；

②不会被保存在浏览器记录中；

③不能被收藏为书签；

④对数据长度没有要求；

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(213,213,213)"> &nbsp; </td> 
 <td style="background:rgb(213,213,213)"> GET </td> 
 <td style="background:rgb(213,213,213)"> POST </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> 后退按钮/刷新 </td> 
 <td style="background:rgb(239,239,239)"> 无害 </td> 
 <td style="background:rgb(239,239,239)"> 数据会被重新提交（浏览器应该告知用户数据会被重新提交）。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> 书签 </td> 
 <td style="background:rgb(239,239,239)"> 可收藏为书签 </td> 
 <td style="background:rgb(239,239,239)"> 不可收藏为书签 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> 缓存 </td> 
 <td style="background:rgb(239,239,239)"> 能被缓存 </td> 
 <td style="background:rgb(239,239,239)"> 不能缓存 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> 编码类型 </td> 
 <td style="background:rgb(239,239,239)"> application/x-www-form-urlencoded </td> 
 <td style="background:rgb(239,239,239)"> application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> 历史 </td> 
 <td style="background:rgb(239,239,239)"> 参数保留在浏览器历史中。 </td> 
 <td style="background:rgb(239,239,239)"> 参数不会保存在浏览器历史中。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> 对数据长度的限制 </td> 
 <td style="background:rgb(239,239,239)"> 是的。当发送数据时，GET 方法向URL添加数据；URL的长度是受限制的（URL的最大长度是2048个字符）。 </td> 
 <td style="background:rgb(239,239,239)"> 无限制。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> 对数据类型的限制 </td> 
 <td style="background:rgb(239,239,239)"> 只允许 ASCII 字符。 </td> 
 <td style="background:rgb(239,239,239)"> 没有限制。也允许二进制数据。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> 安全性 </td> 
 <td style="background:rgb(239,239,239)"> 与 POST 相比，GET的安全性较差，因为所发送的数据是URL的一部分。 在发送密码或其他敏感信息时绝不要使用 GET ！ </td> 
 <td style="background:rgb(239,239,239)"> POST 比 GET更安全，因为参数不会被保存在浏览器历史或web服务器日志中。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(239,239,239)"> 可见性 </td> 
 <td style="background:rgb(239,239,239)"> 数据在 URL 中对所有人都是可见的。 </td> 
 <td style="background:rgb(239,239,239)"> 数据不会显示在 URL 中。 </td> 
 </tr> 
 </tbody> 
</table>

GET语法：

$.get(*URL*,*callback*);

URL是必须有的，表示链接；

callback是 **请求成功** 后执行的回调函数；

POST语法：

$.post(*URL*,*data*,*callback*);

data是连通请求发送的数据。

以下是收集的资料：

（1）GET用于信息获取，而且应该是安全的和幂等的。

“安全”大概意思是：

①不安全的信息（敏感的信息）不应该由GET获取；

②GET主要用于获取信息，而非修改信息；

③GET请求一般不应产生副作用；

“幂等”大概意思是：

①对同一个URL的多次请求的结果是相同的。

例如想要获得一个信息，多次请求，应该总能获得这个信息（而非突然变为另外一个信息）；

GET请求的数据会附在URL之后（把数据放在HTTP协议头中），以“?”分割URL和传输数据，参数之间以“&”相连，如：

如果数据是英文字母/数字，则原样发送；

如果是空格，则转换为\+；

如果是中文/其他字符，则把字符串用BASE64加密，得出%E4%BD%A0%E5%A5%BD，其中%XX中的XX为该符号以16进制表示的ASCII值

（2）POST表示可能改变服务器上的资源请求

①例如对某论坛的帖子进行回帖，服务器上的该贴多了一个回帖。因此应该通过POST来实现；

POST把提交的数据放置在HTTP包的包体之中。

（3）因此，POST的安全性（关于丢失敏感信息）比GET高，传输的数据更多一些，但是更复杂一点（因为data属性，要发一个表单）。

[http_jquery.com_download]: http://jquery.com/download/
[Download the compressed_ production jQuery 2.2.2]: http://code.jquery.com/jquery-2.2.2.min.js
[http_www.w3school.com.cn_jquery_jquery_ref_events.asp]: http://www.w3school.com.cn/jquery/jquery_ref_events.asp
[http_www.w3school.com.cn_jquery_jquery_ref_effects.asp]: http://www.w3school.com.cn/jquery/jquery_ref_effects.asp