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

最新推荐文章于 2020-10-05 17:31:47 发布

qq20004604

最新推荐文章于 2020-10-05 17:31:47 发布

阅读量2k

点赞数

分类专栏：从零开始学_JavaScript_系列前端的小玩意文章标签： jquery 选择器触发条件动画回调函数

本文链接：https://blog.csdn.net/qq20004604/article/details/51028674

版权

从零开始学_JavaScript_系列同时被 2 个专栏收录

79 篇文章 9 订阅

订阅专栏

前端的小玩意

37 篇文章 26 订阅

订阅专栏

jQuery语法

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

http://jquery.com/download/

下载

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>的

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

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

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

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

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

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

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

（5）事件触发条件

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

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

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

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

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

（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%

注：

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

（10）滑动

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

向上滑动：slideUp();

向下滑动：slideDown();

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

其他效果：

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（这个变化的过程就是动画）

注意：

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

②可以操纵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直接出结果，然后其他停止；

如代码：

<p>用于测试动画的文字</p>

</div>

<div>

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

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

</p>

</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方法：

①不会被缓存；

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

③不能被收藏为书签；

④对数据长度没有要求；

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