首页 > 安全资讯 >

JavaScript开发之jquery学习(基础,选择器,触发条件,动画,回调函数)

17-11-09

JavaScript开发之jquery学习(基础,选择器,触发条件,动画,回调函数)。

JavaScript开发之jquery学习(基础,选择器,触发条件,动画,回调函数)。

(1)引用jquery文件及下载库:

http://jquery.com/download/

下载

Download the compressed, production jQuery 2.2.2

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

然后使用

<script src="jquery.js"></script>

来启动这个库文件,记得将下载的文件重命名为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结尾的元素

more:

语法

描述

$(this)

当前 HTML 元素

$("p")

所有

元素

$("p.intro")

所有 class="intro" 的

元素

$(".intro")

所有 class="intro" 的元素

$("#intro")

id="intro" 的元素

$("ul li:first")

每个

  • 的第一个
  • 元素

$("[href$='.jpg']")

所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head")

id="intro" 的

元素中的所有 class="head" 的元素

(5)事件触发条件

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

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

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

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

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

更多事件触发参考:

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

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

注意:

①这个可以操纵块,但是似乎是不能操作

标签。

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

如代码:

用于测试动画的文字

点击后左面的文字会移动

点击停止旁边按钮的动画

以下是对其进行操作:

$(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 中。

GET语法:

$.get(URL,callback);

URL是必须有的,表示链接;

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

POST语法:

$.post(URL,data,callback);

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

以下是收集的资料:

(1)GET用于信息获取,而且应该是安全的和幂等的。

“安全”大概意思是:

①不安全的信息(敏感的信息)不应该由GET获取;

②GET主要用于获取信息,而非修改信息;

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

“幂等”大概意思是:

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

例如想要获得一个信息,多次请求,应该总能获得这个信息(而非突然变为另外一个信息);

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

login.action?name=hyddd&password=idontknow&%E4%BD%A0%E5%A5%BD

如果数据是英文字母/数字,则原样发送;

如果是空格,则转换为+;

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

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

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

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

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

相关文章
最新文章
热点推荐